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>
Related
I currently have a div in my HTML that is initially hidden (using display:none).
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!</p>
</div>
I then use the following Javascript so when the .autocompleteitem item is clicked, it displays:
$(document).ready(function() {
$(document).on('click','.autocompleteitem:not(.autocompleteitemwithcontainer)',function(){
$("div.fulladdress").show();
});
});
However, if Javascript is disabled, the full address will never display. How do I resolve this?
Maybe try working with the tag <noscript>. It runs the code inside it if the javascript is disabled.
Use following HTML code. Now user can see the div when javaScript disabled by user or device not support javaScript. You can customize your div by select .fulladdress class on CSS.
<noscript>
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!
</p>
</div>
</noscript>
You can try something like this.
If javascript enabled - Hide div on document ready and then show on click event
If javascript disabled your document ready function wont execute and it wont hide the div
$(document).ready(function() {
$("div.fulladdress").hide();
$("#button").on('click',function(){
$("div.fulladdress").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!</p>
</div>
<div class="button">
<button id="button">display</button>
</div>
Try this
<noscript>
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
You don't have javascript enabled.
</div>
</noscript>
If you absolutely have to have your div hidden at first even with JavaScript disabled and only then revealed, then there are some ways to deal with it.
You can detect if JavaScript is disabled and request the user to enable it, and not show the page unless the user does so. How to detect if JavaScript is disabled?
You can use CSS properties to show/hide .fulladdress on hover instead of on a click (you might want to modify your div for that, or put it inside a <noscript> tag).
You might want to use 'hacks' to detect a click without using JavaScript. Here are a few examples:
Show / hide div on click with CSS
What is the simplest way to implement pure css show/hide?
Hope this helps!
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");
});
});
This is the code for a simple pinterest button.
<div class="myPinterestButton">
<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>
</div>
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
None of the content is iframed. The pinterest button ends up being the <a> tag with some additional data attributes (thanks to the pinit.js which adds it at runtime).
Here's the thing I don't undrestand. If I click the button it works fine. But if I want to trigger a click on it (for example click a different element on the page and use jQuery to do $(".myPinterestButton a").trigger("click") it doesn't work.
Here's a jsfiddle: http://jsfiddle.net/h42vK/2/
What's going on here please?
You can use click event for wrapper div .myPinterestButton instead .myPinterestButton a
$(".myPinterestButton").trigger("click")
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')" />
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>