Develop Reference

jQuery slide out issue

I am having an issue with some jQuery animations. I managed to make my flex sidebars slide in great but I am having some issue with the slide out effects. The slide out function is making the sidebars instantly vanish.
Also, I believe I need the hide() and show() functions because with just min/max-width the sidebars make the flex canvas very tall.
My slide out functions:
$('#close-left').click(function(event){
$('#left').animate({
'min-width': '0px',
'max-width': '0px',
}, 1250).hide();
});
$('#close-right').click(function(event){
$('#right').animate({
'min-width': '0px',
'max-width': '0px',
}, 1250).hide();
});
I made a quick fiddle that is producing the same issues: https://jsfiddle.net/89s5tsLr/
Update: I made a second fiddle showing how the right sidebar causes the flex canvas to be way too tall without the hide() function being called.
https://jsfiddle.net/soq6webp/1/
Thanks in advance for the help =)

remove the .hide()
That's what instantaneously making them disappear and messing up your animation.
--
EDIT: After our exchange in the comments I came to the conclusion that given your circumstances, you may not be able to do what you have in mind, so instead what you can do is:
Slide out animation first
Then show the content
$('#right').show().animate({ css to change here }, {
duration: 1250,
complete: function() {
// once animation is over, run all the code in this block
}
Check out this JsFiddle
The 2nd object passed to an animate function is options and one of these is complete which call the code once the animation is over.
So we animate the text in this anonymous function so that it's called once the animation on the #right div is over.
We do the same on the close button except we hide away our text first, then slide away the div.
(note the changes in the CSS as well)

Spinning icon next to mouse cursor while tooltip is loading (jQuery)

I have a unique situation where I'd like to display a spinning loading icon next to the mouse cursor.
This icon will display when a user hovers their mouse over a div. A tooltip will then display after a delay of 1300ms. The spinning icon will display while the tooltip is being delayed, and then hide once the tooltip is displayed.
I have written some code using the jquery-ui .position extension, and have achieved what I need. However, once the tooltip is displayed and the spinning icon disappears, it comes right back when I move the mouse cursor. I'd like the icon to disappear permanently until the mouse is moved outside of the div.
FOR EXAMPLE:
I have created a jsfiddle of this scenario.
Hold your mouse cursor over the Product Info Container. You will see the spinning icon appear, and after 1300ms, the tooltip will display and the spinning icon will disappear. But once you move the mouse again, the icon comes back.
How can I hide the spinning icon for good, once the tooltip is displayed, regardless if I move the mouse or not?
jQuery code I have so far is below.
jQuery( document ).ready( function( $ ) {
var delay = 1300;
var timeout;
$('.product-bottom-info-container').hover(
function(e) {
var that = $(this);
timeout = setTimeout(function() {
that.find('.product-custom-tooltip-container').css({
display: 'inline-block',
position: 'fixed',
zIndex: '5000',
margin: '10px',
whiteSpace: "nowrap"
}).position({
my: "right+10 center",
at: "center",
of: e,
collision: "fit flip"
});
$('.mouse-spinner').hide();
}, delay);
},
function() {
clearTimeout(timeout);
$(this).find('.product-custom-tooltip-container').hide();
$('.mouse-spinner').hide();
}
).mousemove(function(e) {
$('.mouse-spinner').css({
display: 'inline-block',
position: 'fixed',
zIndex: '5000',
}).position({
my: "left+10 top+12",
at: "center",
of: e,
collision: "flip"
});
});
});
Thank you.

You can set a spinner css static part through class of your style-sheet and redefine it when tooltip is become active. Or you can check "timeout" as condition of the code inside mousemove function or you can set additional class also as condition of mousemove function execution. There is a lot of solutions to resolve you case.

Problems with scrollto in SlimScroll JQuery plugin

I have 2 DIVs with implemented Slimscroll plugin. both work fine, but one is supposed to be scrolled all the way up <div id="msg_left_sidebar">....</div> (seems to be default) and the other DIV <div id="chat_content">....</div> all the way down. It almost works as expected with the following code:
$(function(){
var scrollDown_int = $('#chat_content')[0].scrollHeight;
$('#msg_left_sidebar').slimScroll({
height: (browserheight - 190) +'px',
width: '248px'
});
$('#chat_content').slimScroll({
height: (browserheight - (207 + 190)) +'px',
width: '526px',
scrollTo : scrollDown_int+'px',
});
//$('#chat_content').scrollTop(scrollDown_int); // this works as good as the scrollTo parameter
});
The problem I'm having is: even though the content is scrolled all the way to the bottom, the scrollbar itself is on top of the DIV element.
This means, as soon as I start scrolling, no matter how (scroll wheel on mouse or grabbing the scrollbar) the content goes all the way up...
Is this a known issue? How can I make this scrollbar also go to the bottom.
Please help. Hope that my explanation is clear enough :-)

Slimscroll has an option for the starting position of the container:
start - top or bottom or $(selector) - defines initial position of the scrollbar. When set to bottom it automatically scrolls to the bottom of the scrollable container. When HTML element is passed, slimScroll defaults to offsetTop of this element. Default: top.
From: http://rocha.la/jQuery-slimScroll
If you adjust your code to the following, both the div and the scrollbar with be placed at the bottom of the container:
$('#chat_content').slimScroll({
height: (browserheight - (207 + 190)) +'px',
width: '300px',
start: 'bottom'
});
JSFiddle: http://jsfiddle.net/oqet7pe4/

see below link jsFiddle: http://jsfiddle.net/oqet7pe4/50/
// make slimscroll object
var vTable = $("#msg_left_sidebar").slimScroll({ ... });
// and use this command
vTable.slimScroll({scrollTo: scrollDown_int +"px"});
i fixed from http://jsfiddle.net/oqet7pe4/

trying to make a div slide down and up from top of page using - top positioning and jquery animate upon click

basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.
$(document).ready(function(){
var orig = $(".dropDown").outerHeight(); // 104
var top = $(".dropDown").css("top");
if(top == "0px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "-100px"}, 400,
function(){
var top = $(".dropDown").css("top");
alert(top);
})
})
}
// else{
// $(".selector").on("click", function(e){
// $(".dropDown").animate({top : "0px"}, 400);
// $("body").css({"background-color" : "green"})
// })
// }
if($(".dropDown").css("top") == "-100px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "0px"}, 400);
$("body").css({"background-color" : "green"})
})
}
});
logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0.
Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.
while I was setting up the jsfiddle I realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.

You can achieve this by laying out your div as it should appear while expanded, and set display:none, but take the clickable tab out as a child element so that it is always visible. Then you can simplify your javascript quite a bit by using slideToggle. The 300 value just specifies how fast you want it to slide.
Example:
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
});
updated jsFiddle
Edit
Maintaining the border at this point is just styling, you can add a container div that holds your Information tab, and just give that a top-border. Here is a further updated jsFiddle.

Javascript/Jquery Super Scrollorama Navigation Issues

On a Wordpress site I am currently working on, my client wanted the different sections of the front page to slide up from the bottom and cover up the previous section, like a wipe or slide transition. Using super scrollorama found here: http://johnpolacek.github.com/superscrollorama/, I managed to achieve the desired result.
Next, I needed to create a navigation menu on the front page only. I did so, and set anchors at various different points on the pages. I also used the scrollTo library for scolling animations when I click the nav menu links. However, there are a number of problems I have encountered:
When at the top and I click "showcase", it brings me down to the showcase section, but the products section (the div right after it) is overlapping it.
Other divs seems to have the same problem of the following divs overlapping the current one
I can only navigate forwards. When I try to go backwards, it won't (except for "Home")
I thought it might have something to do with the CSS "top" property of the divs, so I tried resetting them every time the click function kicked in, but it didn't work. So I removed it for the time being.
Currently set the javascript to prevent the default action of scrolling to the anchors and instead setting it to scroll to the actual divs themselves. However, I'm still having the same issues.
EDIT: I solved all of the above problems, but now a new problem has arisen. If you scroll through the site, then resize the browser window and scroll back up, you'll notice that a bit of the bottom gets cut off. I looked at the superscrollorama page and it has the same problem. I was hoping that someone knows how to fix this.
Here is the site I am currently working on: http://breathe.simalam.ca/
Here is the javascript for the scrolling:
$(document).ready(function() {
jQuery('.home-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo(0, 1000, {queue:true});
});
jQuery('.showcase-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#showcase_content', 1000, {queue:true});
});
jQuery('.products-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#products_content', 1000, {queue:true});
});
jQuery('.about-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#about_content', 1000, {queue:true});
});
jQuery('.locator-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#locator_content', 1000, {queue:true});
});
jQuery('.contact-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#contact_content', 1000, {queue:true});
}); });
scrollorama code:
$(document).ready(function() {
$('#wrapper').css('display','block');
var controller = $.superscrollorama();
var pinDur = 4000; /* set duration of pin scroll in pixels */
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
pinAnimations
.append([
TweenMax.to($('#showcase'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#products'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#about'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#locator'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#contact'), .5, {css:{top:0}})
], .5)
.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));
controller.pin($('#examples-pin'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#examples-pin').css('height','100%');
},
onUnpin: function() {
$('#examples-pin').css('height','2000px');
}
}); });
All of the section divs are inside a parent div. The section divs all have a height, width, and top of 100%.
The parent div containing all of these section divs are as follows:
#examples-pin {
position: relative; /* relative positioning for transitions to work? */
width: 101%; /* max width */
height: 2000px; /* height of 2000px for now */
overflow: hidden; /* hide the overflow for transitions to work */
margin-bottom: -200px; /* negative bottom margin */
}

In summary, pushFollowers: false for all pins and manually spacing via a div and padding after the pinned element was the solution.
It seems like this issue is going to be fixed in the next version of superscrollorama. I would look at https://github.com/johnpolacek/superscrollorama/issues issue 94 they have demo code of their new one coming out.