We Keep Coding

Select2.js and jQuery slideDown animation lag/jitter

I have a select2.js dropdown that I would like to animate; I would like the dropdown to slidedown instead of appear suddenly.
This is what I am doing now:
var select = $("#select").select2({
minimumResultsForSearch: -1
});
$('#select').on('select2:open', function (e) {
$("#select option[value='0']").remove();
$('.select2-results').hide().slideDown("slow", "easeInOutQuint");
});
The problem is that the first time I open the drop down, there is a slight lag/jitter. Here is a more precise description of what is happening:
Select container is clicked
Select dropdown starts sliding down.
20% down the animation, it lags for like 0.2s (trying to eliminate that)
Slide down then continues fine.
After the first time, the slideDown is flawless. It's just the first time that has the jitter/lag.
Any ideas?
Note that easeInOutQuint is coming from jQuery Mobile transitions.

You need to apply it on .select2-dropdown with timeout function check below code how i did achieve that
jQuery('#select').on('select2:open', function (e) {
jQuery('.select2-dropdown').hide();
setTimeout(function(){ jQuery('.select2-dropdown').slideDown("slow", "easeInOutQuint"); }, 200);
});

why the animation do not work properly in my slider?

I have a jQuery simple slider it has 15 picture each five show in a slide. I have a previous button and next button.
Each next click generate a left movement by 855px with a slider animation.
Each previous click generate a right movement by 855px with a slider animation.
This is my jQuery code :
$(document).ready(function(){
$(".prev_button").click(function(){
$("ul.slider").animate({
left: "+=855"
}, 3000, function(){
$("ul.slider").css('left', '0');
li_no = 0;
$("ul.slider").find("li").each(function(){
li_no = li_no + 1;
});
slide_after_this = li_no - 6;
$('ul.slider li:gt('+slide_after_this+')').prependTo('ul.slider'); // << line changed
});
});
$(".next_button").click(function(){
//alert($("ul.slider").css("right"));
$("ul.slider").animate({
right: "+=855"
}, 3000, function(){
//alert($("ul.slider").css("right"));
$("ul.slider").css('right', '0');
$('ul.slider li:not(:nth-child(n+6))').appendTo('ul.slider');
});
});
});
Now I have two problems :
First one is with the previous button (left arrow) When I click it the animation shows and the elements changed but they do not wrapped with each other (I mean does not show the last elements immidiatly before the first element). I can not find the reason of this.
Second problem is with both right and left arrows it is like following :
If I click just the right arrow the slider working fine it animates and change the elements but If I click the both button in order (I mean right then left or left then right ) the elements change but the animation does not show. but I check if the routine go inside the animate function by some alerts and it is going inside but does not animate on the screen .
This is a link that may help you:
http://jsfiddle.net/mpx83tpv/18/

you are really close try overflow:hidden for .slider_container
div.slider_container
{
height:380px;
width:855px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
edit js:
also use below code as you are using both right and left in the end the slider has both of them one of them is always zero.
$(document).ready(function(){
$(".prev_button").click(function(){
$("ul.slider").animate({
left: "+=855"
}, 3000);
});
$(".next_button").click(function(){
//alert($("ul.slider").css("right"));
$("ul.slider").animate({
left: "-=855"
}, 3000);
});
});
if you want a infinite scrolling you need to use right and left in this case replace your $("ul.slider").css('right', '0'); line to $("ul.slider").css('right', ''); do same for left as well, as you need the remove them.
for adding the next visible div implement you logic before the animation as you callbacks do it after the animation.
the tricky part would be the prev button for this after calculation of the div count you also need the set new left without animation and then call left move animation.
hope these make sense.

jQuery Toggle Menu

$(window).on('resize', function() {
if ( $( window ).width() > 768 ) {
$('#menu-main-navigation').show();
}
});
$('#nav-toggle').on('click', function() { // start of the nav toggle
$('#menu-main-navigation').slideToggle('slow');
});
i currently have the above code, works fine on page load but if you open the toggle and close it, when you resize the window above 768px it defaults to open no matter what state the menu was left in below the cut off point.
how can i get it to be always what the toggle menu is? and obviously show the menu every time above 768px?

Try adding $('#menu-main-navigation').slideToggle('slow'); after the .show event in your first conditional statement.

jquery hover and stay until mouse out

I am trying to create a 'cart' link where the shopping cart opens out on hover. I am able to get the cart to open out on hover and close when moving away. However I cannot get the cart block to stay open once hovered over. I would like the car block to open out on hover and stay open if you hover over it. You will see what I mean if you hover over the 'cart' link in the top right corner of this page.
http://dl.dropbox.com/u/4380589/Rococlothing/index.html
The jQuery I am using is:
jQuery('#cart-links .links .first a').mouseover(function(){
jQuery('.block-cart').slideDown(400);
}).mouseout(function(){
jQuery('.block-cart').slideUp(400);
});
jQuery(".block-cart").mouseover(function(){
jQuery(this).show();
}).mouseout(function(){
jQuery(this).fadeOut("slow");
});

You need to cancel the first mouseout() so you'll need adjust the second part to
jQuery(".block-cart").mouseover(function(){
jQuery(this).stop(true).show();
}).mouseout(function(){
jQuery(this).fadeOut("slow");
});
note that the stop, I am passing in true so its clearing the current animation queue. jQuery doc for stop is # http://api.jquery.com/stop/

hovered = false;
jQuery('#cart-links .links .first a').mouseover(function(){
jQuery('.block-cart').slideDown(400);
}).mouseout(function(){
setTimeout(function(){
if(!hovered) {
jQuery('.block-cart').slideUp(400);
}}, 250);
});
jQuery(".block-cart").mouseover(function(){
hovered = true;
}).mouseout(function(){
hovered = false;
jQuery('#cart-links .links .first a').trigger("mouseout");
});

It looks like the .block-cart is not a child of the element that triggers the hover, so in order to keep the hover state active you'd have to structure your HTML in a way that the .block-cart is a child element of the element that triggers the hover.
Btw: why don't you use $(this).hover() instead of $(this).mouseover().mouseout(), it's a little easier

I want to have the top tab stay on when clicked

Hi I am using this menu found here:
http://www.sohtanaka.com/web-design/examples/horizontal-subnav/
Problem I am having is that I want to have the Top Nav stay when clicked and showing the subs also. I hope anyone can help me out!
The Top Nav should still be active when the new page is loaded. I know how to do this server-side but not client-side with JS/jQuery

With a quick view at the page source I find this jQuery code that handles the hover event:
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
If you want the subnav bar to stay visible after a click or something just create an if() statement within the 'hover out' function that checks if something has been clicked, i.e.
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
if(subnavclick==0){
$(this).find("span").hide(); //Hide the subnav
}
});
And within your subnav .click() function add the setting of the subnavclick variable like so:
$("span").click(function(){
subnavclick==1;
//do other stuff
});
This should work for you....

Try changing
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
to
$("ul#topnav li").click(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
}

Instead of doing the effect on a mouseover event as stated in the script now, you should make it work on the click event.

Most of the js code is redundant as the functionality is provided by css anyway. Just add a "clicked" class that mimics the hover pseudo-class of the li's and add and remove this on click.
http://jsfiddle.net/VirusZ/THYsK/
Also you must update the z-indices so that the submenus appear on hover even with a clicked element visible.

To generalize, you'll need to do this in your CSS file and in the JS. You'll want to find ul#topnav li:hover{...} and clone it to something like ul#topnav li.active{...}. This is the class we will apply to the currently selected menu item.
ul#topnav li.current{
background: #f00 url(topnav_current.gif) repeat-x;
}
From there, it will depend on exactly how your site will work. Will each Tab bring you to a new page, or will clicking a tab trigger an ajax retrieval?
If you're using AJAX, you can capture the LI's click events to set a class. (LIVE DEMO). If you're going with a new page on every click, you will need to have JS parse the url and set the correct item's class using $(item).addClass('current');