This question already has answers here:
How do I disable a href link in JavaScript?
(20 answers)
How do you make an anchor link non-clickable or disabled?
(19 answers)
Closed 6 years ago.
I have to disable anchor link depending on a condition if some data comes to that field it should work as a hyperlink and if that data does not come then the link should not be there?
Any ideas on this are welcome.
Case 1:
To disable:
document.getElementById(id).style.pointerEvents="none";
document.getElementById(id).style.cursor="default";
To enable:
document.getElementById(id).style.pointerEvents="auto";
document.getElementById(id).style.cursor="pointer";
Case 2:
If you want the link to be gone (not just disable it):
document.getElementById(id).style.display="none";
to get it back:
document.getElementById(id).style.display="block"; //change block to what you want.
Case 3:
If you want to hide it preserving the space for it:
document.getElementById(id).style.visibility="hidden";
To get it back:
document.getElementById(id).style.visibility="visible";
I couldn't make sense of your question body, so I'll answer your question's title...
How to disable anchor using javascript ?
JavaScript
if (condition) {
document.getElementsByTagName('a')[0].removeAttribute('href');
}
jQuery
...because everyone uses it, right?
if (condition) {
$('a').first().removeAttr('href');
}
with jQuery
if(!data){
$('#linkID').click(function(e) {
e.preventDefault();
});
}
with Prototype
if(!data){
$('linkID').observe('click', function(event) { event.stop() });
}
my link
function check(){
var data =document.getElementById("yourdatafield").value;
if(data)
window.location="your_link_location";
}
With jQuery:
To disable:
$('#anchor_tag').attr("disabled", true);
To enable:
$('#anchor_tag').attr("disabled", false);
Related
This question already has answers here:
How to select an element inside "this" in jQuery?
(2 answers)
Closed 6 years ago.
<script type="text/javascript">
jQuery(".post-entry").click(function() {
window.location = jQuery(this).find("a").attr("href");
return false;
});
</script>
Is it possible to modify this script to find a href link that has a specific class? The reason is that some of these divs have multiple links within.
Absolutely.
$('.post-entry').click(function() {
window.location = $(this).find('a.example-class').attr('href')
return false;
})
If you want a hand cursor, you'll need a bit of CSS too:
.post-entry {
cursor: pointer;
}
This question already has answers here:
Direct vs. Delegated - jQuery .on()
(6 answers)
Closed 7 years ago.
I'm trying to target a button I've created by pressing another button. My code technically works, but due to the size of what I'm doing, I'm trying to put the function of the second button press in another js file. That where I'm running into problems. My code is below.
$("#webCoding").on("click", function() {
if ( $( ".webCodingID" ).length ) {
return false;
}
picture.attr("src", "img/webCoding.jpeg");
$(".target").empty();
$(".jumbotron").hide();
var buttonGroup = $('<div role="group" aria-label="...">').addClass('btn-group-vertical center-block')
var buttonPhilosophy =$("<button type='button'>").addClass("btn btn-default btn-lg").append("Design Philosophy")
var buttonStack =$("<button type='button'>").addClass("btn btn-default btn-lg").append("Visit My Stack Overflow Account")
var buttonGithub =$("<button type='button' id='git'>").addClass("btn btn-default btn-lg").append("Look at what I've been doing on Github")
var webCodingID =$("<div>").addClass("trainingID")
$(buttonGroup).append(buttonPhilosophy).append(buttonGithub).append(buttonStack);
$('.target').append(buttonGroup).append(webCodingID);
// code for pressing created button is below.
$("#git").on("click", function() {
prompt("herro");
});
});
but I put this in another file (and get rid of the same code in the original js file), and nothing happens.
$(document).ready(function(){
$("#git").on("click", function(){
prompt("jungle boogie");
});
I can't figure out why. The js file is linked to my main page, I just can't get it to recognize buttons created by JS in another file.
You should bind the on to the body like so:
$("body").on("click", "#git", function(){
That should solve your problem I believe :)
This question already has answers here:
Prevent form submission on Enter key press
(20 answers)
Closed 9 years ago.
I am trying to scroll down the page using javascript.
I have this code which works fine if if i use javascript:pageScroll() in a link or button:
<SCRIPT LANGUAGE="Javascript">
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
</SCRIPT>
but i need to find out how i can call the pageScroll() function if the user presses enter on their keyboard?
any help would be greatly appreciated.
$(document).keypress(function(e) {
if(e.which == 13) {
//do stuff
}
});
Use jQuery, you might be interested in .keypress(). Here: http://api.jquery.com/keypress/
Also you could have easily avoided this question by doing a simple Google search.
This question already has answers here:
Detect if browser supports contentEditable?
(5 answers)
Closed 10 years ago.
I want to check whether the "contenteditable" or any HTML5 property is supported by user browser or not ?
So here is my JavaScript:
var isEditable=false;
function chk() {
var z=document.getElementById("mydivid");
if(typeof(z["isContentEditable"])==="boolean") {
isEditable=true;
}
}
function doEdit() {
chk();
var z=document.getElementById("mydivid");
if(isEditable) {
z.setAttribute("contenteditable","true");
z.focus();
} else {
/* add a texbox and put all div's innerHTML into it, All in all: a Boring Stuff. */
}
}
And Here is HTML:
Click To Edit
<div id="mydivid"> Hi Ssup ?? <img src='' alt="some image" /></div>
Can Anyone tell me Whether My Approach is right ? Will it work in IE(version<8.0) ? And Also A better approach is needed !
Simple check:
if ('isContentEditable' in document.createElement('span')) {
// supported
}
I will also share this great selection of snippets it will help you in future: http://diveintohtml5.info/everything.html
To chcek if any propery exits for a element. You can do this
var element = document.createElement('__ELEMENT__');
if ('__PROPERTY__' in element ) {
// property supported in the browser
}
or
if ('__PROPERTY__' in document.createElement('__ELEMENT__') ) {
// property supported in the browser
}
The below link contains it all.
https://github.com/Modernizr/Modernizr/issues/570
http://diveintohtml5.info/everything.html#contenteditable
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to distinguish between left and right mouse click with jQuery?
On right click I want to go to a different page..using jquery, how to do that? any idea?
thanks-
Something like this:
HTML
<a id="test" href=#">Click me</a>
JQuery
$(document).ready(function() {
$("#test").mousedown(function(e) {
switch (e.which) {
case 1:
alert("Left click... boring!");
break;
case 3:
alert("Right-click... off to new page...");
window.top.location = "http://www.google.com/";
break;
}
})
});
JSFiddle here