Can anyone shed some light to this situation: I have a link that opens in a modal, i add a link and a button that are set to go to the same url. If i click the link, the modal goes to the link, and shows the article properly. If i click the button, it shows the article embedded on the page.
Here's the url, click on newtest2
http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=category&id=1&Itemid=2
Here's the code
<head>
<script type="text/javascript">
function change_url(){
window.location.href="http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2"
}
</script>
next
</head>
<body>
<button onclick="location.href='http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2'">Next</button>
</body>
</html>
There is a apparent difference, being that the link calls window.location, while the button just sets location, but this is semantically the same.
That popup you got is created by JavaScript. So the link is just used for its url, but when you click it, a script gets executed that loads the content asynchronously and shows it in a popup.
This script does not affect the button (though it could). Find the script that does this and apply it to the button too.
A workaround could be:
<a href="http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2">
<button></button>
</a>
Edit: Although it's working, is not a recommended code, as HTML spec clearly says that using tag for item is invalid, so treat this ONLY as a workaround.
P.S. Why are you using <a></a> in section head?
Related
I have a blog-site, which is full of text, therefore i use sections.
my code:
Test
....
<h3 id="test">Test</h3>
When I click on the anchor, it works, but if I use the URL, i cannot get to the section, only to the top of the site.
What I want:
mysite.com/site1:
<a href="/site2#test > Test</a>
mysite.com/site2
<h3 id="test"> Test </h3>
Why does it not jump to the section?
Have you tried using two # for the anchor?
<a href="/site2##test>Test</a>
It seems Chrome sometimes has it's issues with anchor links and this may help (at least works on my machine)
(possibly related to Anchor <a> tags not working in chrome when using #)
One way to solve this might be using window.location in javascript
<script>
function goToSite2Section() {
window.location = '/site2#test';
}
</script>
Test
<html>
<body>
Click Here
</body>
</html>
Why doesn't this html code go to the website https://account.mojang.com/login when I run the html file?
Unless you click in the link, nothing is going to happen.
To make it go automatically, use:
<script>window.location.href = 'https://account.mojang.com/login';</script>
I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.
How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)
Current Button (Bootstrap):
<a class="btn btn-large btn-primary" href="">Democracy</a>
Try:
<button onclick="window.location.href='location'">Button Name</button
This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.
I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").
Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.
For the code to use to actually scroll to the corresponding element, check out this article:
How to go to a specific element on page?
Quick example without jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage"
onchange="scrollto(this);">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
function scrollto(element) {
// get the element on the page related to the button
var scrollToId = element.getAttribute("data-scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
}
</script>
With jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
$(".scrollbutton").click(function () {
// get the element on the page related to the button
var scrollToId = $(this).data("scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
});
</script>
Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:
<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>
hey try this : -
<button>Click Me</button>
then to which ever place you want to go in your site : -
u may just place the line below wherever you want,
<a name="A"></a>
hope it works for you
Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.
Read More
<section id="sectionA">
<p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>
which section or div using same id in <a href="?">
Democracy
div or section eg:
<section id="democracy">
your content
</section>
try this method abosolutly work
This is the easy way to do it
<button type="button""> Click </button>
try this following code :
<button>Click Over Here</button>
then to which ever place you want to go in your site u may just place the line below wherever you want :
<a name="Link"></a>
I am wondering if there is a way to give the HTML button tag, <button> an image so the image is click-able on my webpage. That way when users click on the image I can have other things happen
This doesn't seem to be working, and was wondering if it is even possible
HTML code -
<button>
<img src="images/dagger.png" width="10%" height="10%" id="dagger" />
</button>
Not quite sure what you are trying to achieve but maybe this example helps.
HTML
<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" id="dagger" />
</button>
JavaScript
$(function(){
$("#dagger").click(function(){
alert("click");
});
});
You could set the image as button background
button {
background-image:url('images/dagger.png');
}
I was having similar issues, and thought I would drop this post for anyone in the future that sees this thread.
From my understanding, you're not wanting a BUTTON, but a clickable image that acts as a button. Here is what I did:
HTML:
<img src="images/dagger.png" width="10%" height="10%" id="dagger" />
JavaScript/jQuery:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dagger").click(function(){
// what you wanted your button to do when user clicks it
});
</script>
By doing it this way, you get rid of the normal "button" image, and you can use whatever image you want as your clickable button. As well, you get the same functionality that you're wanting from the button, and it opens up many other paths to achieving your purposes.
Hope it helps!
Another method I use is simply putting the onclick event on the img itself to call a function.
html:
<img src="images/dagger.png" width="10%" height="10%" id="dagger" onclick="myFunction()" />
JS:
<script>
myFunction() {
// what I want to happen if user clicks image
}
</script>
Depending upon what you're doing, and what you're trying to manipulate, all of the examples on this page will provide you with better/worse ways of doing it. Using the onclick event within the img tag, you can pass variables/information to the function to utilize, and then have the function relay it to your PHP/ASP/etc.. As well, if you were dealing with a form, you can have your function handle information/submission, rather than the default submission that forms use. Use your imagination with the problems you come across, and decide which method works out better. Never settle for learning just one way of doing something.
Normally you wouldn't use a button you can just bind the click event to the image with JavaScript.
But if you must have a button you can style the button using CSS and the background-image property.
I have a webapplication where (as in many other ones out there) you click on an image to do something, for instance, mark an entry, send a mail, flag something...
Short, clicking on the image is supposed to call an action (via javascript, but that's not the point).
I was wondering, what is the "right" way to do this?
<a>-tag? Hmm... actually it is not a link...
<button>? Because obviously a button is the semantic element for calling an action...
<div>?
Any hints?
Short Answer
Use an <img> - not a button or an anchor or an input - as the rest suggest that the element is interactive, even without JavaScript.
Long Answer
clicking on the image is supposed to call an action (via javascript, but that's not the point).
I disagree; that is the point :)
Because the clicking activates JS-only features, your image should only be available in a JS environment.
As such the proper way is to insert it with JavaScript; while an HTML document should be semantically correct, a DOM structure doesn't really need to be semantically correct, so which element you use becomes irrelevant.
The Wrong Way
<div>
Click on the image to do something:
</div>
<div>
Click on the image to do something: <input type="image" onclick="wtv()" src="..." />
</div>
<div>
Click on the image to do something: <img onclick="wtv()" src="..." />
</div>
<div>
Click on the image to do something: <button onclick="wtv()"><img onclick="wtv()" src="..." /></button>
</div>
These are all wrong because a user who doesn't have JavaScript sees these items and can't use them.
Of all of these, I'd say the <img> is the lesser evil, as it doesn't suggest an interactive element. The greatest evil is using the <a> as an anchor should be a hyperlink to another document, and you should never, ever use the javascript: protocol.
You'll still have the same problem when you add the JavaScript event handlers externally:
/* external .js file */
document.getElementById("myButton").onclick = wtv;
<!-- HTML document -->
<div id="myButtonParent">
Click on the image to do something: <a id="myButton" href="#" style="background-image:url(...)"> </a>
</div>
As, again, you still have the (non-functioning) hyperlink available to those users who don't have JavaScript.
Instead
Instead, insert the whole damn thing using DOM scripting! I'm going to use an <img> with an onclick event:
/* external .js file */
window.onload = function() {
var img = document.createElement("img");
img.src = "...";
img.onclick = wtv;
img.style.cursor = "pointer"; // so the mouse turns into a finger,
// like on a hyperlink
// Note: instead assign a class attribute and put this in an external CSS file...
document.getElementById("myButtonParent").appendChild(img);
}
You could add an onclick event for the image:
<img id='image1' onclick="javascript:DoSomething()"...
or add it via jquery:
$("#image1").click(
function() {
DoSomething();
});
I don't think you should use an anchor tag here. Anchoring is for navigating not doing things. Not to mention if you use the beforeunload events, they will get fired if you use an anchor.
While the div works it doesn't add anything semantically to the page. You are not defining a distinct chunk of the page you need to make an image clickable.
I don't use a button control enough to talk about that as an option.
Do not quite understand what you want to achieve. But have you tried image input?
<input type="image" src="image source">
It will do an operation similar to form submit.