This is now driving me insane now! I want to animate an element 'left' using a - margin. But I'd also like to animate the same element in the opposite direction once all child elements have been shown. My script is not as simple but similar:
timer = setInterval(function(){
var direction = ($('ul','.column').css('margin-left') <= 0)? '-=': '+=';
$('ul','.column').animate({marginLeft:direction+($('li','.column').width())+'px'},500);
},1000);
I have also tried $('ul,'.column').position().left <=0 instead of the condition above. My problem is margin-left and position().left never return a negative variable :S. If the variable 'should' be negative it's always returned as 0. I can easily work out the position of where I would want the animation to go in the opposite direction but again if the condition isn't a negative number this wont work.
I would much appreciate some insight to why margin-left and position().left always returns as 0 rather than -1000 or whatever. But if you have an alternative solution I'd still be as happy :)
jQuery's CSS margin-left will return a string like : 20px you need to get rid of the 'px' using
parseInt( $('ul','.column').css('margin-left') , 10 )
So it should be:
timer = setInterval(function(){
var margLeft = parseInt( $('ul','.column').css('margin-left') , 10);
var direction = margLeft<=0 ? '-=': '+=';
$('ul','.column').animate({ marginLeft: direction+($('li','.column').width()) },500);
},1000);
And if I remember well Chrome has an issue to animate elements that have not specified inside the CSS the property to apply the animation, which means: make sure to set a value in your stylesheet for the element's margin-left you plan to animate.
Related
I'm using a script to move certain background elements on a page. It works by moving the "right" position of an element called #tright. This is similar to a parallax effect. All this works great, except I want the #right element to stop moving when it has a right value greater than 0. I tried to put everything in an if statement. So if the value is greater than 0 do nothing. If it's less than zero keep going. I'm obviously not a programer so I'm not even sure if this is the best way to go about this. Can anyone tell me what I'm doing wrong
$(window).bind('scroll',function(e){
moveTriangles();
});
function moveTriangles(){
var scrolled = $(window).scrollTop();
var rightTriPosition = $( 'canvas#tRight.bTri' ).css( "right" );
if (rightTriPosition < 0){
$('#tRight').css('right',(-70+(scrolled*.10))+'%');
}
else{
}
}
css() returns the value with an unit. Now you're comparing something like this ('-100px' < 0). You need to get rid of the unit before comparing the value with a number. For example like this:
var rightTriPosition = parseFloat($( 'canvas#tRight.bTri' ).css( "right" ));
If you don't want to execute anything when the comparison is not passed, you can simply omit the else.
My question is similar to: How to increase/decrease current margin at a number by jquery? however I cannot adapt the solution to match my code. I keep getting errors.
My CSS defines $logo variable with a margin-top of -82px. In my JS below, the margin-top value is being adjusted on scroll but it assumes the start value for margin-top is 0. How do I say its -82px?
Here's a jsfiddle of the glitch: http://jsfiddle.net/5DAa9/ Carefully scroll down and you will notice the box jump.
var $logo = $('.logo.abbr');
var windowScroll;
var $curValue = $( '.logo.abbr' ).css( "margin-top" );
// Functional parallaxing calculations
function slidingTitle() {
//Get scroll position of window
windowScroll = $(this).scrollTop();
//Slow scroll of .logo and fade it out
$logo.css({
'margin-top' : ($curValue-(windowScroll/3)+"px") // Assuming this is the line I need to change??
});
}
Heres a quick fix...
windowScroll = $(this).scrollTop()+250;
Why this is happening I have no idea. Im gonna keep poking around to see if I can figure it out but this is working for me here
http://jsfiddle.net/5DAa9/1/
Edit:
I have found the problem!!
windowScroll = $(this).scrollTop(); This line will return 0 if the page is at the top. You have set your margin to be -82px before the scroll so that just gets erased on the first scroll and set back to 0 or whatever the scroll is divided by 3. So you want to do that calculation and then subtract the 82 pixels again to keep it in the "same place" or prevent the jump.
$logo.css({
'margin-top' : -(windowScroll/3)-82+"px"
});
Its kind of an ugly fix but thats whats going on. I assume that 250 of whatever scaling scrollTop returns is equivalent to 82px. Heres an updated Fiddle: http://jsfiddle.net/5DAa9/3/
It is not a real jQuery plugin, but for my problem i didn't know what title was appropriate.
This is the "Plugin" --> http://jsfiddle.net/djrikyx/GuumY/9/
There are 3 Youtube player, with the possibility of Pop out them into draggable DIVs and also minimize them to the right.
I can't explain my problem only with words, you have to see it to better understand.
First, popout all 3 players, then minimize them, they will go on the right, each one below the previous.
Then if you try to Close, or Maximize the one in the middle or the last, you will see that all will go up for 30px.
I know that now is doing that, because i wrote to do that in the function maximizePlayer() and popinPlayer() using
var countMP = $('.uiVideoHandleMin').length;
uVC.removeClass('uiVideoContainerMin');
if(countMP > 0){
$('.uiVideoHandleMin').each(function(){
var top = parseInt($(this).css('top'), 10);
top = top-30;
$(this).css({top:top});
});
}
I don't want that. I want so the first one must be always at 50px from top, and the other just below. So if i close the middle one, the first will stay in position, and the last will go up, and if i close the last, nothing happen.
But i really don't know how i can do what i want, so i'm here asking for a tip/solution.
I changed it to this http://jsfiddle.net/Klors/GuumY/11/ which seems to work?
There is a line in your function popinPlayer(elem) { that reduces the css top by 30, but doesn't check to see if it's 0 (or below the removed handle) first.
So I changed top = top-30; to top = top > thisTop ? top-30: top; and added in var thisTop = parseInt($uVH.css("top"), 10); before you reset top on $uVH, which seems to work.
you can do:
function SortByTop(a, b){
var aTop = parseInt($(a).css('top'), 10);
var bTop = parseInt($(b).css('top'), 10);
return ((aTop < bTop) ? -1 : ((aTop > bTop) ? 1 : 0));
}
on maximizePlayer() to sort all $('.uiVideoHandleMin') and then just do:
$.each(minarray,function(i,n){
$(this).css({top:(i*30)});
});
jsfiddle
I noticed its very slow to use parseInt to retrieve a style attribute for comparison and then assign it back with "px". How can I avoid this parsing between string to int and then back to string ? Basically I need it for optimizing a heavy script which moves things around the screen and changing the left property doesn't cut it. Any other options ?
PS: How does jQuery move a div, say 10 px to the left ? Does it also change the style object ?
Don't read property in object every time - it is slow and inacurate. Keep your own internal track with pure number in variable.
var divPosition = 0
function moveDiv()
divPosition = divPosition + 10
divElement.style.left = divPosition + "px"
end
For a while now i have been trying to figure out the algorithms behind smooth slides, fades etc..in javascript. Just to give you an example of what am talking about, I have seen a div with content in it that had a height of 0px and on toggled, it didn't just snap to height, it smoothly and gradually grew to height using some sort of function. What i do know is that the height of this div was being assigned its height value from either a date object that had an interval set or a loop of some sort. I've searched all over the web trying to find tutorials explaining how this works but failed. Can someone please either explain to me how to create my own smooth fades, slides or reference some links that i can read?
PS: I know i can just use jquery, but i want to know how the fades and slides actually work.
It's quite simple actually. All of these animations use a timer (see setInterval) with a short interval, say 100 milliseconds, and every time the timer fires, the property (height or whatever) is changed by a fraction of the total amount instead of all at once.
For example, if you want to slide from a height of 0px to 200px in 1 second, then you could set up a timer that fires every 100 ms and increases the height of the DIV by 20px. That way, in 1 second, the timer would have fired 10 times and the height would be 200px.
A simple example:
function slideOpen(elem, finalHeight, slideTime) {
var count = slideTime * 10; // 10 intervals per second
height = 0, // current height
delta = finalHeight / count; // change in height per interval
var timerId = setInterval(slide, 100);
function slide() {
height += delta;
elem.style.height = height + 'px';
if (--count == 0)
clearInterval(timerId);
}
}
I have never looked at the jQuery code myself, but i'm pretty sure it uses a loop/timeout to increment the top/left/bottom/right css position of the element gradually using the specified easing equation.
You might want to have a look at jQuery source code for the animate() function.
CSS3 makes it trivial.
For non-CSS3 based solution, this is the first Google result for the query "javascript smooth animation": http://www.schillmania.com/content/projects/javascript-animation-2/
I am adding some code from one of my projects to move the div right
belolw xs_tuck() will be called till finalleftpositionval reaches
This code makes the div move to right.
if(xs_endpt<finalLeftPositionVal){
xs_endpt+=5;
xs_pDiv2.style.left=xs_endpt;
setTimeout("xs_tuck();",20);
}