I know this is a dumb question
but is there a shorter way of writing
javascript:void(0) for anchor links?
example :
Click me
I don't like to use "#" because clicking the link brings me to the top of the page
Even due there is an answer allready selected,
i wanted to contribute my opinion on this.
using an href with a javascript:; javascript:void(0); javascript:return false; is bad practice search engine's will try to crawl your href and will find a broken link.
that being said, i do understand that sometimes you do need a link that follows nowhere, but executes something on the page.
i would have done it this way:
<script>
var elm = document.getElementById('myElement');
elm.style.cursor = 'pointer';
elm.onclick = function() {
// do something...
};
</script>
<span id="myElement">Click Here</span>
this way, you html code stays clean and nice.
please dont look at this as "Good Coding", since you allways need to keep a version for browsers with javascript disabled (yes, yes, i know that 99% will have it enabled ),
But if evil must be done, may it be the less evil possible at least.
A shorter version is:
<a href="javascript:;" ...>
Try this
Click me
Another way to do that:
<style type="text/css">
.pointer{
cursor:pointer;
}
</style>
<a class="pointer" onclick="functionHere()"> Click me </a>
function a() {};
<a href="javascript:a();">
<a href="javascript://">
<a href="don't_load" onclick="doit();return false;">
Related
Probably something simple so sorry!
Currently, I have <button id="pin">Get pin</button> and it works. (there is a script later on that this calls).
But, I want it to work on some text - preferable an <a href> as the styles are set up on this - so something like Get pin - obviously this would not work so would like to know how to get it to work! :)
I am trying to get it to run the below when clicking it:
<script>
$("#pin").click(function() {
swal("Your support pin", "Your support pin is: {$support_pin}", "info")
});
</script>
Thanks
Change href to "#" and add a click listener and it should work
Get pin
I have a very little problem. I want to go on another site, by hovering an "a"-link (like clicking the link, just without the click :) ). Is this possible with css? If yes, how do you do that?
It's absolutely not possible with CSS, as far as I know, but you can do it with pure JavaScript or with any advanced JavaScript library.
I'm gonna give you a simple solution:
<a onmouseover="this.click();" href="...">link</a>
Or, if you want to use jQuery:
$('a').mouseover(function(){
$(this).click();
});
document.querySelector('#your_a_id').onmouseover = function()
{
window.location = "http://www.yoururl.com";
}
a way using javascript :)
onmouseover="function()"
window.location.href = "https://www.example.com";
now you can go on a URL just hovering over it.
I'm having trouble finding a way to do this. I was told I can use JavaScript or jQuery.
Here's what I have.
Script:
<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
document.getElementById('mylink').href = "http://google.com/";
}
</script>
Link:
<a href="#" id="mylink">
I even tried with:
<a href="#" id="#mylink">
I'm suppose to have the link go to a website on any other browser, but if your on an iPhone go to iTunes link. If someone could help my figure this out I'd be much appreciated.
Detect mobile like this:
var isMobile = navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/);
if(isMobile) {
document.getElementById('mylink').href = "http://google.com/";
}
Using Browser detection is not recommended, it´s better to use size detection via css media queries. Bootstrap might help you alot:
http://getbootstrap.com/css/#responsive-utilities
Class visible ONLY phones: .visible-xs
Class hidden ONLY phones: .hidden-xs
Use the url to learn more.
<!--Only Phones-->
<a href="#" class="visible-xs" id="#mylink">
<!--Anything else-->
<a href="#" class="hidden-xs" id="#mylink">
With jQuery you could just use
$(document).ready(function() {
if((navigator.userAgent.match(/iPhone|iPod/))) {
$("#mylink").prop("href", <istore link>)
} else {
$("#mylink").prop("href", "http://google.com")
}
});
With you anchor tag being
I haven't tested this but should be right
Edit:
Though i put in enough basic to figure it out.
Try to combine Marks document ready part with your current code. Also you can test it on your box by selecting firefox and chrome user agents and the JavaScript is much easier to debug in a desktop browser :)
Your script tries to access a DOM element which has not been loaded yet!
<script>
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
document.getElementById('mylink').href = "http://google.com/";
}
</script>
<a href="#" id="mylink">
Solutions:
Reorder the elements: link tag, then the script tag
Recommended: Use an event such as DOMContentLoaded:
<script>
document.addEventListener("DOMContentLoaded", function () {
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
document.getElementById('mylink').href = "http://google.com/";
}
});
</script>
try this in userAgent.match('iPhone') instead of / and also where u r having this script either it should be below the a-link tag in html or the best way put it in a function and call it on onload function of body or jquery ready function both should work... Everything else good... Thanks...
I am facing on strange problem in ie6.
When i am using window.location to redirect page through javascript it works fine in all browser except ie6.
It works in ie 6 if i place just like below:
demo
but its not working for below code.
<a href="javascript:void(0);" onclick="javascript:redirect();>demo</a>
function redirect()
{
window.location('http://www.demo.com');"
}
can you please figure out that whats problem here.
Thanks.
Avinash
The javascript: protocol is only used if you have Javascript code in an URL. If you put it in an event handler it becomes a label instead.
The location member is not a function, it's an object. Set the href property to change the location.
You have an extra quotation mark after the code line in the function, which is probably causing a syntax error.
<a href="javascript:void(0);" onclick="redirect();>demo</a>
<script type="text/javascript">
function redirect() {
window.location.href = 'http://www.demo.com';
}
</script>
How about doing this:
<a href="#" onclick="redirect(); return false;">
demo
</a>
If you want the page to redirect to demo.html when the user clicks a link, dare I suggest you use the universal, crossbrowser demo?
Try:
window.location.href = 'http://www.demo.com';
in the function.
Try:
window.event.returnValue = false;
document.location.href='http://www.demo.com';
Which is preferable, assuming we don't care about people who don't have JavaScript enabled?
Or
Is there any difference?
Or there any other ways I'm missing besides attaching an event to the anchor element with a JavaScript library?
The nice thing about onclick is you can have the link gracefully handle browsers with javascript disabled.
For example, the photo link below will work whether or not javascript is enabled in the browser:
foobar
it's better to use the onclick because that's the way the things should be.
The javascript: was somekind of hackish way to simulate the onclick.
Also I advice you to do some non intrusive Javascript as much as possible, it make the code more easy to read and more maintainable!
href="#" has a number of bad side effects such as showing # in the browser footer as the destination URL, and if the user has javascript disabled it will add a # at the end of their URL when they click the link.
The best method IMHO is to attach the handler to the link in your code, and not in the HTML.
var e = document.getElementById("#myLink");
e.onclick = executeSomething;
This is essentially the pattern you'd want to follow:
Write your HTML markup
Attach event handlers from JavaScript
This is one way:
<a id="link1" href="#">Something</a>
<script type="text/javascript">
// get a reference to the A element
var link1 = document.getElementById("link1");
// attach event
link1.onclick = function(e) { return myHandler(e); };
// your handler
function myHandler(e) {
// do whatever
// prevent execution of the a href
return false;
}
</script>
Others have mentioned jQuery, which is much more robust and cross-browser compatible.
Best practice would be to completely separate your javascript from your mark up. Here's an example using jQuery.
<script type="text/javascript">
$(function() {
$('a#someLink').click( function() {
doSomething();
return false;
});
});
</script>
...
some text
Yes I would agree to use onclick and leave the href completely out of the anchor tag... Don't know which you prefer to do but I like to keep the 'return false' statement inside by function as well.
The main difference is that:
The browser assume by default the href attribute is a string (target url)
The browser knows that in a onclick attribute this is some javascript
That's why some guys specify to the browser "hey, interpret javascript when you read the href attribute for this hyperlink" by doing ...
To answer the question, that's the difference!
OTOH what's the best practice when using javascript events is another story, but most of the points have been made by others here!
Thanks