jQuery Sliding Animation Not Fully Disappearing - javascript

I'm using this code:
$('#container').animate({ height: '-=400px'}, 1000).fadeOut('fast');
The container is 400 pixels in height, the goal being to try make it shrink out into nothing, but at the end of the animation the div is still there, about 5 pixels in height, it doesn't fully collapse on itself as you'd expect with an empty div with no height value.
I've tried making it -=410px but the result is the same, it doesn't fully disappear - i've tried adding the fadeOut animation but it's a bit clunky. Does anyone know how to fix this?
EDIT: Found some stray padding which seemed to be causing the issue, now i'm having an issue with the border of the div disappearing afterwards.

I looked into the .animate() API for JQuery, and it looks like you're hardcoding the "toggle" target property. Try this:
$('#container').animate({ height: 'toggle'}, 1000).fadeOut('fast');

Related

Scroll a div's scroll bar all the way to the right with javascript

This question is a duplicate of jQuery scrollRight?
I have a div with a lot of content (width-wise) and overflow:auto, so i have the scroll bar at the bottom. It starts scrolled fully to the left: is there a way to scroll it all the way over to the right, using jQuery/native JS?
Even if there's a way to do this in CSS (which would normally be preferable) i need to do it in JS, because some other stuff happens in the table first in JS (using the jquery plugin DataTables to be specific) in the dom ready block, so my code needs to run after that.
I thought this would be simple but i've not managed to google anything useful.
thanks! max
Here's how I did it - you might consider it a bit hacky.
In the sample below, "#test" is a div with 100px width and overflow: auto.
$("#test").css("overflow","none");
$("#test").css("width","none");
var width = $("#test").width();
$("#test").css("overflow","auto");
$("#test").css("width","100px");
$("#test").animate({scrollLeft: width}, 100);
Here I'm getting rid of the width and overflow CSS properties to work out what the true width of the content is. Then I'm putting the CSS properties back on and scrolling to that width.
Here's a JSFiddle: http://jsfiddle.net/dReFh/

JavaScript Slider That Auto Resizes

I'm trying to build a content slider for a client that displays their last four posts. Right now it's just plain HTML but I'm having a problem.
The slider box needs to be 180px high with a scrollbar when necessary. My slider seems to work except it makes the slide boxes all as tall as the tallest box. That leaves short posts with a ton of blank space under them.
Anyone know a fix?
http://jsfiddle.net/insitedesignlab/kQDcb/1/
I've seen that Quovolver does this, but I'd love to know how
The basic problem is #slidesContainer needs to be dynamically resized in order for it's parent to know how long to scroll for. One way to solve the problem is to change your animate call to include a callback:
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
},null,null,
function(){
$('#slidesContainer').css('height', $(this).children(".slide:nth-child(" + parseInt((Math.ceil(-1*slideWidth*(-currentPosition) / $("#slideshow").width())) + 1) + ")").height() + "px");
}
);
There's probably a slightly better way to make that calculation, but this will work. You could alternatively hide all the other .slide divs that are not being displayed. Then #slidesContainer will auto-resize to only the visible (not display:none) slide.
I have updated your code here JS Fiddle. You need to remove the min-height property and set the background color to the slide div.

jQuery Image Slider and z-index?

I'm attempting to get the following site to work:
The "Test" logo appears properly before the jQuery slider transitions to the next picture, which is when it gets shoved behind the new slide. I've tried changing the z-index on a lot of the elements, but nothing seems to work at all. What can I do to fix this?
The slider I'm using is Nivo: http://nivo.dev7studios.com/
Give a z-index of 100 or above to div#logo:
#header #logo{
z-index: 100
}
It works on the div but not on the image because z-index only works for positioned elements. I.e. elements that have position relative, absolute, etc.

javascript overlay not covering full page when div expands the page height

I realize there's already been several questions like this, but I think my case is a little different.
I have an div that I am absolutely positioning and floating on top of the page, and I'm setting an overlay behind it to grey out the rest of the page. I have it working okay until you scroll up and down the page.
The problem is, when the div appears, it is still populating with ajax data. So the height and width of the bg overlay has already been set, but once all the data loads into the floating div, it sometimes pushing the page down so the height increases. So, I can't calculate the height and width of the window or document because the floating div might not be fully loaded yet, and once it does, it pushes the screen down further, causing the bg overlay to not cover the whole page.
So for example, in the code it's going something like:
loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());
}
I verified this by adding an alert, so that by the time I've clicked the alert, the bg overlay was able to calculate the true page size, and it looks fine.
Sorry, if this sounds confusing but hopefully you get what I'm trying to achieve. I'm assuming this isn't too difficult, but I haven't been able to figure it out.
Any help would be appreciated, I'm using jquery.
Thanks
Overlay ;)
** update, setting position of all corners to 0 instead of using width/height 100% **
$("<div/>")
.css({
position:"fixed", // ze trick
background:"#000",
opacity:.5,
top:0,
bottom: 0,
left:0,
right: 0,
zIndex: 2999 // everything you want on top, gets higher z-index
})
.appendTo("body");
Or put the above css settings in a css stylesheet (opacity needs cross browser hacks).
$("#dark-overlay").show();
Here is the solution :
JQuery Show Loading Plugin
Don't try to invent the wheel !!!
Here is a demo :
Loading Demo
Now you just need to create a main container div for your page and just ask this simple plugin to do it for you.
Maybe you want to read the plugin source and find how it works...

SlideToggle imperfections

My slideToggle is a little jumpy at the bottom of the slide transition. Could that be because there is a button there or something. Any way to make it smoother. Tried using easing but not very successful. Any suggestions
click on video setup to see for yourself
The site
$(document).ready(function() {
$('.drop').click(function() {
$(this).parent().next('li.drop_down').slideToggle();
return false;
});
});
Give your li.drop_down a fixed width. This should clear it up. I don't remember the exact reason for this, but I just tested it on your site, and it works.
Right now the computed width is 217px so try that.
.drop_down {
width: 217px;
}
EDIT: Looks like you have a .drop_down2 and a .drop_down3 as well (maybe more). You would need to do the same for those. I'd suggest assigning a common class for each.
Try storing the height of each item before animating it, and then re-apply that height to the element just before starting the hiding animation.
Here's an article I wrote how with an example of doing this:
http://www.pewpewlaser.com/articles/jquery-smooth-animation
Fixed width didn't work for me, but what did was adding a clearfix class to the animated element, since I had some floated elements inside.

Categories

Resources