I'm trying to prevent a Jquery onclick function to scroll the page to the top.
I found out that preventDefault() would fix this problem but I can't get it to work.
Here's the website with the code:
http://www.femartins.com.br/novo/galeria.html
Here's the code that I'm using:
$( document ).ready(function() {
$('.carouselObj').click(function(evt){
var index = $('.carouselObj').index(this);
$('.galcontent').eq(index).siblings('.galcontent').fadeOut(500,function() {
$('.galcontent').eq(index).fadeIn(500);
evt.preventDefault();
});
});
});
Any help is welcome! :)
You need to use evt.preventDefault(); in the event handler. Not in the complete callback function of fadeOut
$('.carouselObj').click(function (evt) {
//Use here
evt.preventDefault();
var index = $('.carouselObj').index(this);
$('.galcontent').eq(index).siblings('.galcontent').fadeOut(500, function () {
$('.galcontent').eq(index).fadeIn(500);
});
});
Figure the problem wasn't on click but the way the html was built.
I added a div with the same height as the content and the problem was solved!
Thanks
Related
I want to create a back button browser event using jquery. I did this code but it doesnt appear to work
$(document).ready(function() {
$('.back').click(function() {
window.history.back();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Back
The href="#" will add a new item to history, so window.history.back(); will "return" to the page where the link was clicked. You need to prevent the link from directing to # with this:
$( document ).ready(function() {
$('.back').click(function(e) {
e.preventDefault();
window.history.back();
});
});
you are missing to specify event as function argument, try this one..
$(".back").click(function(event) {
event.preventDefault();
history.back(1);
});
This might solve your problem.
I want to trigger a click event on a div. I use the following code but it is not working.
$('#showbanner').trigger('click');
<div id="showbanner">show banner</div>
What is that I am doing wrong? I actually want to show the banner 2 seconds after page is loaded. Before I could add delay event my click event for this div is not firing.
Here is my code example: http://codepen.io/anon/pen/aOzyxo
The issue is because your trigger('click'); call is the first thing in your script; it's called before the event is attached.
You need to move it to the end of the script so that the event handlers are bound when it is called:
Updated Codepen
enter code here
Try this .
$(function () {
$(document).on("click", "#showbanner", function () {
alert('Hola');
});
$("#showbanner").click();
});
show banner
Try this
JS
$('#showbanner').on("click", function() {
alert("test");
});
$('#showbanner').trigger('click');
HTML
<div id="showbanner">show banner</div>
Try this
$('#showbanner').on("click", function() {
alert("test");
});
$('#showbanner').click();
I am using jquery click event to open fancybox and it is working perfect. I have added one textbox inside this inline1 div but when I input something I can't writer anything.
My Code:
$(document).ready(function() {
$(".fancybox").on("click", function() {
$("#inline1").fancybox().trigger('click');
})
});
jsFiddle: my code
Any Idea?
Thanks
There was a problem with the triggering of 'click', I managed to fix this by simply using the Fancybox API to open the Fancybox without requiring a trigger.
$(".fancybox").on("click", function () {
$.fancybox.open( '#inline1' )
});
http://jsfiddle.net/xW5gs/1171/
$(".fancybox").on("click", function() {
$.fancybox($('#inline1').html())
})
check here
I'm about to make a function on jQuery like this:
$(document).ready(function() {
$('#header_rules').click(function() {
// here i define myFunction()
});
});
<a id="header_rules" href="#">RULES</a>
instead of
<a id="header_rules" href="#" onClick="myFunction();return false">RULES</a>
But I don't know how to prevent scrolling to the top of the page using jQuery after someone clicks the link.
In fact, I'll total get rid about native JS, which could yield some trouble (that's why I use a JS framework like jQuery).
Any help? Cheers
Call e.preventDefault(); where e is the first argument of your click handler:
$(document).ready(function() {
$('#header_rules').click(function(e) {
e.preventDefault();
// here i define myFunction()
});
});
<a id="header_rules" href="#">RULES</a>
The below will also work, but it'll stop other click events on the item, I think.
(document).ready(function() {
$('#header_rules').click(function() {
// here i define myFunction()
return false;
});
});
What ThiefMaster said, and you could also inclue return false; inside your function intead of inline.
I want to attach an 'onclick' event in a link element in my editor.
I did this:
parent.document.frames["myframe"].document.body.attachEvent('onmouseover', function(e) {
parent.document.frames["myframe"].document.getElementsByTagName("a").attachEvent('onclick', function(e) {
alert("Hello");
});
});
but it doesn't work. I want this one to work in IE and I am using Javascript.
Does anyone know what is wrong with it?
Thanks
Try attaching the mouseover event to a surrounding div rather then the body.
I did with jQuery finally:
parent.document.frames["myframe"].document.body.attachEvent('onmouseover', function(e) {
$("a",parent.document.frames["myframe"].document).click(function(event){
alert("hello");
});
});