UPDATEI finally found a simple and easy way:
<font onclick="window.open('https://www.google.pt/', '_self');" style="background:0;border:0;outline:0">Link
I had to use a tag to add the event to the text so I used font because it doesn't modify anything. P.S.: This doesn't work on JS Fiddle as, for some reason, it doesn't open the link (it stays blank).
Probably duplicated but I couldn't find it so, is there any way to prevent the URL of a link to show when I move my mouse over it?
Code with image of the URL:
Google
<br>
When I over the mouse on the link, it shows the URL on the bottom left corner.
<br>
<img src="http://i.imgur.com/pq3ket7.png">
<br>
Is there any way to prevent it?
I'm using Chrome.
https://jsfiddle.net/1tbg478j/
The JSFiddle broke so I will just paste all the code here. Please note that the links won't work in JSFiddle because they do not allow window.location but it will work in your website.
HTML:
<a class="no-href" data-location="https://www.google.pt">Google</a><br />
<a class="no-href" data-location="https://www.google.com">Link 2</a><br />
<a class="no-href" data-location="https://www.google.co.za">Link 3</a><br />
Normal Link<br />
<br>
When I over the mouse on the link, it shows the URL on the bottom left corner.
<br>
<img src="http://i.imgur.com/pq3ket7.png">
<br>
Is there any way to prevent it?
I'm using Chrome.
JS:
$('.no-href').click(function(e){
e.preventDefault();
window.location = $(this).attr('data-location');
});
CSS:
.no-href {
color: blue;
cursor: pointer;
text-decoration: underline;
}
It's uncontrolled browser behavior.
You can convert it to a div, attach a click event listener an open the wanted url in the callback function.
Simply add it to OnClick like this:
Google
Hope it helps you.
According to this it cant be done : https://productforums.google.com/forum/?hl=en#!category-topic/chrome/discuss-chrome/FtD7qjochgw
Related
I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>
The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.
I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});
I have a a link as below
link
and javascript function1 include submit form action
now I want to use JavaScript to prevent Ctrl + mouse click to open new tab on this a link for IE(>=6), FF, and Chrome.
Updated to fix
1. update href="javascript:void(0)"
2. update onclick="function1();return false;"
Note: I'm not using a JavaScript library such as jQuery or Dojo.
The A tag is used for links or references. If you mainly want a clickable function I would suggest to use the button tag and style it like a link with css.
For example, bootstrap does this with the btn-link class:
<button type="button" onclick="function()" class="btn btn-link">Link</button>
This has the advantage over using a span or div element that it is clear to browsers, search machines and screenreaders that this is supposed to be a clickable element.
If you want to execute a function on click of an element, use a div tag instead of an anchor tag
<div onclick="function1()" style="cursor:pointer">link</div>
EDIT: a div tag is a block element and will push the link to a new line. And as Jan has suggested move styles to a CSS. Used inline style for ease here.
<span onclick="function1()" style="cursor:pointer">link</span>
[Edited]
You can do whatever you want to do from within the event's function (onclick) and don't use href at all. For the mouse hover cursor effect use style="cursor:pointer".
example code:
<html>
<head>
<title></title>
<script type="text/javascript">
function fn(){
/* do something */
}
</script>
</head>
<body>
<a style="cursor:pointer" onclick="fn()">1234</a>
</body>
</html>
I have the following code on a page on my site — when the user clicks on the image a sound plays:
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<span id="dummy"></span>
<div id="soundimage">
<img src="image.png" />
</div>
It all works great, but the image is at the bottom of the page, and when the user clicks the image they are redirected back to the top of the page. Is there any way to get this working so that there is only an audio change, and not a visual one (if that makes sense!)?
When using a mouseover function instead, such as
<a onmouseover="playSound('sound.mp3');"><img src="image.png" /></a>
the user remains where they were on the page, but I would like them to have the option of playing the sound on click and not on rollover.
The problem is your href attribute. # as an anchor sends it to the top of the page. Use
...
Also, always include an href attribute to links.
You can (and I think is more correct in cases where Javascript support is limited), to use a link like:
...
instead of Grexis one, because if the browser you're using doesn't support Js, then the "onclick" event will never be fired and thus Js won't be read. It won't be a problem, probably, but still you should consider using better coding techniques.
instead of having the onclick event in an a tag, get rid of it and put it on the img tag. if you like the cursor for links, you can change the style too.
Example code has been indented so it actually shows in the post.
<img src="image.png" style="cursor:pointer;" onclick="playSound ('sound.mp3')" />
In the above code, I am appending a javascript onclick method to the image tag. When I click the image once and I press back, it should go back to the page it came from. Instead its staying on the same page. Is there any way I can avoid that? (probably set something else instead of href="#"). The reason I set href="#" is to make my cursor turn into hand, other than that it has no use.
This is occuring in Firefox. In IE it works fine.
Please help. Thanks.
The reason I set href="#" is to make
my cursor turn into hand, other than
that it has no use.
You can remove the <a href="#"> and add the cursor: pointer style to the image:
<img src="logo.gif" style="cursor: pointer;" />
... to turn the cursor into a hand.
On the other hand, it is probably better to follow the guidelines for progressive enhancement, as David suggested in another answer.
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" onClick="alert('hi'); return false;"/>
you need add return false; to your onclick events if you don't want to load the link.
<a href="#">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif"
onClick="alert('hi'); return false;"/>
</a>
return false prevents the default action from occurring (in this case navigating to "#"), and then navigating back will return you to the previous page, instead of to the current page without "#".
Follow the pragmatic guidelines for progressive enhancement. In particular: Build on things that work.
Use this instead:
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" onClick="alert('hi')" style="cursor:pointer"/>
window.location.hash
When using a link for a javascript action, I usually do something like this:
Link Text
That way, when someone clicks the link before the page loads nothing terrible happens.
Html Base Tag
On my current project I use this same construct, but with a base tag:
<html>
<head>
<base href="http://example.com/" />
</head>
<body>
Link Text
</body>
</html>
However, if the page url is:
http://example.com/dir/page
clicking the link navigates to
http://example.com/#
rather than
http://example.com/dir/page#
How can I fix this?
Either remove your base tag or change your href attributes to be fully qualified. What you are observing is the intended behavior when you mix base with a elements.
If you're inclined to use an a tag another solution is to not use # as the href target (when you don't specify one it causes a jump to the top of the page which I find undesirable). What you can do is:
Some Link that Goes nowhere
Really though, unless you are doing something that requires that to be an a tag a span would be your best bet:
CSS:
.generic_link {
text-decoration:underline;
}
.generic_link:hover {
text-decoration:none;
}
HTML:
<span class="generic_link">Something that really isn't a link</span>
If there's no URL that is suitable for a non-javascript user, then don't use an <a>. <a> tags are for links to other pages.
Any visible HTML element can have an onclick and won't have this problem you describe.
Return false on the onclick event to disable the link:
Link Text
(This is just an example of how you’d do it inline. But try to avoid inline declarations and use techniques of progressive enhancements.)
<html>
<head>
<base href="http://example.com/" />
</head>
<body>
Link Text
</body>
</html>
I had the same issue in the past.
I had a link that i wanted to be empty, to link to the current page.
Without the base html element this will be just an a element with href="#".
My example without using the base html element,
<li>
<div>The text of my Link</div>
</li>
The same example with the solution i found,
<li style="cursor: pointer !important;">
<div>The text of my Link</div>
</li>
This solution only uses css to disable the link.
With the first css rule cursor: pointer !important; i ensure that this link will have the correct (for my case) pointer icon.
With the second rule pointer-events: none; i ensure that this link will not be clickable.
You can find more about this rule following this link.
You can just simply remove href attribute from your <a> tag.
<a href="#"> => <a>