jQuery stopPropagation - function fire up again - javascript

can you tell me how to stop function propagation. I need to fire up some function again after first click action. I using scrollTo jquery plugin for scroll my content and when i click in my 'fire' button content scroll nicely, but i can't do this again... Thx 4 help.
This is my function:
$('.arrow_down').bind('click', function(event){
$('.recipe_single_view_right_panel').scrollTo({top:'280px', left:'0'}, 800 );
event.stopPropagation();
});

You will not need to use a big, feature-rich plugin to achieve that.
All you need to do is to alter the scrollTop - property of the wrapping element. I created a fiddle with a simple example: http://jsfiddle.net/k9bdY/
The wrapping element is set to overflow: scroll, animating the scrolling-position on click is fairly simple then when using jQuery:
$('.scroll-btn').on("click", function(e){
e.preventDefault();
$('#wrapper').animate({
scrollTop: "+=200px"
}, 800);
});​

Related

Why am I having difficulty scrolling via href="element"?

So I have a button that toggles a div to show / hide using a .hidden class to display:none and visibility:hidden.
But for some reason, when I anchor said button, it does not scroll down to the hidden class? And in this case, the button won't anchor to anything at all?
Button
anchoring to
<div id="anchor" class="hidden">Stuff</div>
and jQuery is simply:
$(".btn").click(function() {
$("#anchor").toggleClass("hidden");
});
Any thoughts?
You need to remove onclick="return false;" from your element - this is preventing default behavior
JSFiddle Link - working demo
Alternatively - if you need to prevent the default behavior because of some weirdness going on per your comments - you could always manually scroll to it. Here is an animation driven approach with an optional time in ms to finish...
$('.btn').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $('#anchor').offset().top
}, 200);
});
JSFiddle Link - alternative demo
Lastly - for the "no frills" approach - the following should suffice (reference)...
$('#anchor').get(0).scrollIntoView();

jQuery, animate and animate back. Call back function error? :S

I have no idea what I've done. The idea is to animate an element to slide in from a position and slide back when another element has been click. I've applied the second event within the call back of the original event function.
But, despite this structure, the second event function will run although I've not clicked the second element in the callback function.
If you're not following, the basic idea is this.
Click -> slidein -> outside click -> slide out
$('#mobileList').click(function(){
$('#mobileMenu').css({'display':'block'}).animate({
'left':'30%'
},500,function(){
$('#body').click(function(){
$('#mobileMenu').animate({
'left':'100%'
},500,function(){$('#mobileMenu').css({'display':"none"});/* I tried return false; here, failed to solve problem*/});
});
});
});
Starting CSS
nav#mobileMenu{display:none;width:70%;height:100%;background:#191820;color:#DCDCDC;position:fixed;top:0;left:100%;}
How the elements are structured.
<div id="body">
<a id="mobileList>☰</a>
<!-- content here -->
</div>
<nav id="mobileMenu">
<!-- content -->
</nav>
On the first two attempts it works fine. The next time I come to run, it will animate and then immediately animated out. I really can't see why as it's a call back function? :S
I think it's because the element #mobileList is within the element #body.
Is the call back still running? Can I cease it looking for the event?
Should I use queue() to run the slide in and slide out?
You don't need the callback here, just hook the click handlers up separately:
$('#mobileList').click(function(){
$('#mobileMenu').show().stop(true).animate({
'left': '30%'
}, 500);
});
$('#body').click(function(){
$('#mobileMenu').stop(true).animate({
'left': '100%'
}, 500, function() {
$(this).hide();
});
});
Example fiddle
Note that I used show/hide instead of css and added calls to stop() to prevent the queue being filled up on successive clicks during animation.
UPDATE
To hide the menu when you click anywhere else you need to attach an event handler to the document and check e.target to see what element caused the event. If it was outside the menu, hide it.
$('#mobileList').click(function (e) {
e.stopPropagation();
$('#mobileMenu').show().stop(true).animate({ 'left': '30%' }, 500);
});
$(document).click(function (e) {
var $menu = $('#mobileMenu');
if (!$menu.is(e.target) && !$menu.has(e.target).length) {
$('#mobileMenu').stop(true).animate({ 'left': '100%' }, 500, function () {
$(this).hide();
});
}
});
Updated fiddle

run animation only if not already running jQuery UI

I am using jQuery UI's Bounce Effect on a click event like this
$("#myelm").click(function(){
$(".wlbutton").children("span.new").effect( "bounce", "slow");
});
I would want to run the effect only if it's not already running. So if you click twice fast it will only act on the first click. How can I achieve this?
I've tried to clear the queue with jQuery's .stop() without any luck.
You can use .not to filter it:
$('#myelm').click(function(){
$('.wlbutton').children('span.new').not(':animated').effect('bounce', 'slow');
});
However I would use .is function to check instead of a filter because of code readability
Use the :animated selector to check whether the particular element is animating or not. If it is currently getting animated, Just let that click event ignored.
Try,
$("#myelm").click(function(){
var xEle = $(".wlbutton").children("span.new");
if(xEle.is(':animated')) { return; }
xEle.effect( "bounce", "slow");
});
The another way would be using .stop().
$("#myelm").click(function(){
$(".wlbutton").children("span.new").stop().effect( "bounce", "slow");
});
DEMO

jQuery resizable .Live()

When I try to destroy resizable div, hover function on .ui-resizable-se doesn't work. I think I have to use jquery live(). But I couldn't integrate it clearly.
If you hover .ui-resizable-se or .ui-resizable-e when page load, functions will work, but if you hover again, nothing will be happened. How can I overcome this problem?
$('#resizable').resizable({
aspectRatio:false
});
$('.ui-resizable-se').hover(function(){
keep("resizable");
});
$('.ui-resizable-e').hover(function(){
dontKeep("resizable");
});
Source link: http://jsfiddle.net/nNrgP/
The hovers do not work after the first time because you've called resizable("destroy"); Calling that
Removes the resizable functionality completely. This will return the element back to its pre-init state.
Resizable Destroy
If you want that to still be available, you should either toggle between resizable("disable") and resizable("enable"), or completely re-init the resizable div. Without more knowledge of your goal (or other code), it's tough to tell what the best option is.
You could also just update the options:
function dontKeep(val){
$("#"+val).resizable("option", 'aspectRatio', false);
alert("dont keep");
}
function keep(val){
$("#"+val).resizable("option", 'aspectRatio', true);
alert("keep");
}
Try using event delegation since you might be dealing with dynamic eleemnts
$(document).on('mouseenter mouseleave', '.ui-resizable-e', function(){
dontKeep("resizable");
});
$(document).on('mouseenter mouseleave', '.ui-resizable-se', function(){
keep("resizable");
});
Demo: Fiddle

How can I prevent the page from scrolling down when using jQuery UI hide("slide")?

here is my code :
$('#pagelinks > a').click(function () {
$('html,body').animate({ scrollTop: 0 }, 200);
setTimeout(function() {$('#my_div').hide("slide",{direction:"right"},500);},250);
return false;
});
My problem is this : When I click on a link, it scrolls up at the top correctly but then automatically scrolls down ( seems to be around where I clicked ) and hide the content of my_div by sliding it and stay there.
I don't want it to scroll down to where I clicked but rather stay at the top. I tried everything I know but nothing works.
Note that if I put just hide() instead of hide("slide",{direction:"right"},500) there is no scroll down. Plus the scroll down occurs on Firefox and Opera but not in Chromium.
Thanks for your help,
Nolhian
I can think of two options:
1) Don't use a-links with anchors if you don't use the anchor part the way it was ment to.
2) stop the default event from occuring by passing on event to the click function and using preventDefault.
example:
.click(function(e){ e.preventDefault(); });

Categories