Make link non clickable using javascript - javascript

I have this code which i've seen online and trying to implement it.
What i'm trying to do is to make all the links with the parent class non clickable, i mean, it should click but not redirect to the page's link.
This won't work..
<script>
$(window).load(function(){
$(document).ready(function(){
$('.parent').click(function(){
return false; // prevents default action
});
}
})
</script>

Try this:
$(document).ready(function(){
$('.parent').click(function(e){
e.preventDefault();
});
});
You don't need $(window).load(function(){ because $(document).ready(function(){ is the same thing!
Later Edit: I have to complete this answer by telling you that the code I wrote is using jQuery library, which must be included in your project. For more info about jQuery please visit http://jquery.com/

you need event.preventDefault
function unclickable(e) {
e.preventDefault();
}
Alternatively return false;
function unclickable() {
return false;
}
and use it like:
<a class="parent" onclick="unclickable(event);">Link</a>

Related

How to click on button on html page load using javascript?

Below are script that I found on other stackoverflow questions, however it doesn't work.
I want the script to click on play button and then load a video modal.
URL : https://www.scalperstrategy.com/
<body>
<script>
$(document).ready(function(){
$(".mbr-media.show-modal.align-center.py-2").trigger("click");
});``
</script>
Thanks all!
You can use .click() function to achieve the same
$(document).ready(function () {
$("#btnSave").click(
function () {
AlertSave();
}
);
$("#btnSave").click();
});
function AlertSave() {
alert("Alert Message OnClick");
}
jsfiddle
However, if all you are trying to achieve is to call an event that you bind on click, you can just call this event instead.
after adding jquery and below script it finally work
<script type="text/javascript">
$(document).ready(function(){
$(".mbr-media.show-modal.align-center.py-2").trigger("click");
});
</script>

jquery fade out and redirect not working in IE

I have a website on which I have the following script intended to handle all links:
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function(event){event.preventDefault();
linkLocation=this.href;
if(!linkLocation.contains("#")){$("body").fadeOut(1000,redirectPage);
}});
function redirectPage(){
window.location=linkLocation;}})
What it should do is, when a link is clicked to fade out and then to fade back in.
The issue I am facing is that in IE, links simply do not work.
Is it possible to edit my code in order for it to work?
If not, is there a way I can use a fallback code during this issue?
This issue is not present in chrome and I am using the latest IE
You should first check if your url contains the substring that you want to check with using indexOf() method. If it contains that character/substring then it'll return any 0 or positive value. Else it'll return -1 .
Try this way :
HTML :
ToogleFade
jQuery :
$(document).ready(function(){
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a").on("click", function(e){
linkLocation = $(this).attr("href");
e.preventDefault();
if(linkLocation.indexOf('#') == -1){
$("body").fadeOut(3000, redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
jsFiddle
Resources :
indexOf()
I found that the answer was to set the z-index. I have a stack of absolutely positioned divs and wanted to fade between them. The only way I could get IE8 to handle the fades nicely was to set the z-index of the element to be faded in higher than the element to be faded out.
$('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);
$('#fadeindiv').css({zIndex:90}).fadeOut(2000);
and for redirect Check the Link Stackoverflow
I have gone through your code its almost correct you simply need to change something in your click function because preventDefault(); creating problem with the default functionality of <a></a> tag...
Also click on Allow block content when it ask you in IE.
Instead try this :-
<script>
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function() {
linkLocation=this.href;
if(!linkLocation.contains("#"))
{
$("body").fadeOut(1000,redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
</script>
I hope this will work for you..

JQuery add event to anchor and get url

I am trying to get the childBrowser plugin to work on links by adding the code at runtime to links.
Normally, if I was adding to code manually to the links, this is how it would look:
<a href="#" window.plugins.childBrowser.showWebPage('http://www.google.com');>click me</a>
Now, because I need to do it at runtime I've got this together:
$('a').on('click', function () {
window.plugins.childBrowser.showWebPage('http://www.google.com');
});
But the problem is that all links might have a different url so I need to somehow use the code about but with the link that it comes with and not a hardcoded url as above.
Links would initially look like below.
click me
How could I do this?
Use this.href
$('a').on('click', function () {
window.plugins.childBrowser.showWebPage(this.href);
return false;
});
Try this
$('a').on('click', function () {
window.plugins.childBrowser.showWebPage($(this).attr('href'));
});

jQuery not rendering properly

I'm using this jQuery to render a text box onClick. But, It's not rendering... Also, on a side note I'm using Drupal 7. I have the jQuery in the Head tags of the html.php.
<script type="text/javascript">
$(document).ready(function() {
$("#front-background").hide();
$(window).load(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});
});
</script>
This may also be because of how Drupal handles compatibility with other JavaScript libraries.
You can wrap your jQuery function in:
(function ($) {
//your existing code
})(jQuery);
or if you're comfortable theming using the template.php file, you can add the JS through the function drupal_add_js().
See http://drupal.org/node/171213 for more details.
You dont need window load event if you are already using $(document).ready method. Try this.
$(document).ready(function() {
$("#front-background").hide();
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});
I didn't see any onClick functionality there. This should work:
CSS:
#front-background {
display:none;
}
JQuery hover replacement. Fade in on hover, fadeout on leave
$(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
},function(){
$('#front-background').fadeOut(2000)
});
});

Add javascript action to all links on a webpage

Good morning, I would like to know if is possible add automaticalliy a javascript action to all links (or classes) on a webpage, for example I wanna add the following javascript action: "PlayFlashSound();", so the links on my web page should be:
<a onmouseover="PlayFlashSound();" href="#">Link Text</a>"
The problem adding manually the javascript action is that I'm using Joomla, and I don't know how to do it.
Thanks.
with jQuery you could do it like this.
$(document).ready(function() {
$('a').click(function() {
PlayFlashSound();
return false
});
});
Something like this could easily be accomplished using jQuery:
$('a').mouseover(function()
{
PlayFlashSound();
});
Example available here.
I assume since one of this question tags is "joomla" the author would like to accomplish what's needed using Mootool that is included into Joomla CMS. The code could be, for instance, like this one:
window.addEvent("domready",
function() {
$$('a').each(function(item, index) {
item.addEvent('click', PlayFlashSound);
});
})
Keep in mind that if you wish to block the default actions of those links the PlayFlashSound function must return "false";

Categories