I've got the following problem:
I have a set of LI elements that have to go from one state to another (two separate css classes) with a smooth transition. To do this, I'm using JQueryUI's Effect API (switchClass)
for every LI element, I've hooked two JQuery listeners: mouseover and mouseout, which change the state correspondingly. Clear enough. Now, I'm not of a JQuery expert, so I must be missing something pretty standard, but every time when I move the mouse out of the LI element BEFORE the transition has finished, the transition just kinda hangs midway, and the LI elem becomes irresponsive to further listening.
Please, help.
You can use .stop([clear queue],[jump to end]) to end the animation before the next one is called. Substitute true/false based on if you want to do that in your stop statement. Add it before the call, ie $('element').stop(true,true).animate({....
http://api.jquery.com/stop/
Related
I have rows in a table containing buttons that when clicked, change the hover function of the tr element they are contained in. I just noticed that when I set the hover function it doesn't actually rewrite over the previous hover function, it just stacks on top of it. So when the hover event fires it calls the most recently set hover function as well as any previous ones that have been set. How can I reset the hover function each time I set it instead of stacking them?
As Mohit Bhardwaj mentioned, the solution is to use the jQuery unbind method.
Note that simply calling $("#id").unbind("hover") will not work. It must be in the form of
$("#id").unbind('mouseenter').unbind('mouseleave')
or more simply
$("#id").unbind('mouseenter mouseleave');
How do I unbind "hover" in jQuery?
I'm attempting to build my first jquery plugin. It's a simple drag-and-drop game. Basically the plugin does this:
Identify a group of child divs under the parent div
apply some styling to those child divs and randomize their
order. apply a .draggable function to each child div.
identify the target div(s) and add .droppable function(s) to them. When a draggable is placed on a droppable, make sure it's the correct draggable for that droppable.
after all the draggables have been placed on the correct
droppables, let the player know they've finished the game.
what I need to do now is let the page know that #6 has happened, so that if I wanted to animate something or fire off another function, it will wait until that point.
Unfortunately, I can't figure out what exactly it is that I need to learn. Would what I'm after be an event listener? Something else? I've got a small if statement for #6:
if (score === dragsTotal) {
$(dragsCont).append("<div style='font-weight:bold;text-align:center'>" + settings.finishText + "</div>");
}
so I'm sure that's where, whatever-it-is-that-i-need-to-learn has to go. I thought that all I might need is a boolean, but I don't know how to let the page know what that boolean is or that it's changed.
If it's needed, the codepen here: http://codepen.io/kking/pen/YqXGaw/
I'd hook in to the drop event. Each time they drop one, check them all to see if they're finished yet.
I am using a jQuery gallery plugin, the thumbs are all in an unordered list and the main image is to the right in a div.
The plugin adds the class "selected" to the li whose main image is currently being shown. As soon as the plugin moves on to the next image, the selected class is removed from the li and added to the next li.
I want to affect the li that currently has the class "selected" applied to it. I can't just do this:
$('li.selected').whateverRules();
because jQuery is applying the class dynamically, the class isn't there from the document ready state hence it doesn't work.
I also can't use .live() because I have no event to attach. So how can I work with this?
How can I affect the li which currently has a class of "selected" if this class was added dynamically?
There is no way to bind to an event when a CSS class has been changed. Perhaps you could modify the jquery plugin to trigger an event when the selected class has been added and bind to that?
Here is a link for trigger() if you feel adventurous. trigger()
Depending on how intensive your calls are you could always use an interval. It's not ideal, necessarily, but may do what you need:
var selectedInterval = setInterval(function () {
$('li.selected').whateverRules();
}, 100); // adjust timing to fit based on function complexity / timing.
I try to remember to store setInterval's return values into a variable in case they need to be cleared later. It's worth a shot, though not as clean as I'd like. If I were you I'd look into some event that fires when the gallery changes it's selection (there ought to be one, I'd imagine).
I guess you can attach the event to the controls of the gallery:
jQuery(function($){
$('a.next-image').mouseup(function(){
$('img.selected') ... // what you want.
});
});
I guess this a bit ugly but with no source is dificult solve in a clean way.
I'm using EasySlider, but unlike any of the examples of this plugin that I've found, I show multiple elements at any one time and the width is 100%. The separate images make up a full, long consecutive image, which is Photoshopped so even the borderline between first and last looks natural. It's configured to be a continuous slide automatically.
In the plugin there is this code:
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
My issue is that only the first element is cloned after the last one, so upon the second rotation of this slider, only the first element is shown, until it gets to the far left, then the other images appear to "pop" in. (similar: [EXAMPLE] if you imagine and all images to the right of the fairground not appearing until the fairground gets to the far left).
Is there any better way to manage this cloning of elements so that ALL the images are cloned? or perhaps someone can think of a better way? I'm new to JQuery
NOTE: I'm trying to create an operation whereby as an element leaves the screen on the left, it is placed back onto the right. Is there a way to ultimately achieve this?
I think you may want to consider a different plugin.
If you change the plugin, updating will require reapplying your patches.
I'd recommend
http://www.gmarwaha.com/jquery/jcarousellite/
or
http://sorgalla.com/jcarousel/
These both support what you are talking about.
I agree with troynt, in this case it would be better to use something that meets your requirements.
I just made a simple "plugin" what only does, what you need, maybe it's useful to you.
http://jsfiddle.net/doktormolle/4c5tt/
You can setup delay and duration and choose to pause on hover.
Given you have a list of items in your scroller like this:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
And assuming that every time you advance the scroller, the first-most li moves off screen, you can continuously pluck the first li off the front of the list and append it back to the end on each click of a "next" button or scroll event. If you're using jQuery >= 1.4, you can do this by using the detach() method, which will remove the element from the DOM but keep all its associated data so you can easily reattach it later:
$('ul li:first').detach().appendTo('ul');
Dont know, if I unterstand it the right way, you may try this:
//at first run add a class "init" to the inital li-elements,
//so that later only them will be cloned
if(!$('ul li.init',obj).length)$('ul li',obj).addClass('init');
//prepend clones of all li-elements with init-class and remove their init-class
$("ul", obj).prepend($("ul li.init", obj).clone().removeClass('init').css({}));
I have this scenario: Using an ajax query I fetch some data items and push them into a ul element as an li element. I use $("ulele").append(new_li_item). I wrote my own custom scroll for this ul element using the following whenever an event is detected:
$("ulele").animate({scrollTop: '+=' + 200}, 'slow');
The problem is when I fire that event and the list scrolls due to the animate function above, I want to keep it stable for at least a few seconds. When it scrolls down, elements are still being pushed so the list keeps scrolling no matter what. I am using the following way to add the li elements (which already have a display:none attribute):
$("#liele").delay(6000 * i).show("slow")
Is there a way I can pause this from happening without really stopping the activity of pushing elements into the ul list?
Maybe try .delay()?
http://api.jquery.com/delay/
Something like this:
$("ulele").animate({scrollTop: '+=' + 200}, 'slow').delay(1000);
Try putting the animation in a function and before adding an element to the ulele, remove the animation, and add it again after you get the data is one way. That is one way to do it, but from the looks of it, it sounds operational intensive.
The following should work better - When you create the new li element, start it out with display:none and after it is fetched using the AJAX call, update the display attribute to inline or how ever you need it. That should do better than the above one.