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.
Related
I'm trying to make a simple Javascript button to toggle a menu on and off the screen. I have a little if-else statement that detects the current position of the <nav> and changes it's left css property to that effect.
JSBin
Now, as you see in my code, this will show the menu once but won't hide it back afterwards:
if (navStyle == '0') { setNav('-500px'); }
else { setNav('0'); }
And this will do the job properly:
if (navStyle == '-500px') { setNav('0'); }
else { setNav('-500px'); }
Weird right? Anyone knows what's going on?
This is because the width will never actually be equal to 0, it will be something like 0px depending upon the units you choose. Your second set of conditions work because they check for the width first (500px) and if it doesn't match chooses the other (0px).
You can handle this in a variety of ways, including extracting just the number value from 0px, however since you already have this working, its just something to be aware of in the future. :)
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
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.
I want to move multiple DIV with arrow keys and javascript (without jquery).
All my DIV have "position:absolute", etc...
I made a function for this :
function move(orig, val) {
var num = parseInt(orig);
return ((num + val) + "px");
}
And I apply the move function like this :
myDiv.style.left= move(myDiv.style.left, moveX);
And it only "works" cause I noticed that when one of my DIV has a left style < 0, others DIV with left style > 0 "move" faster than him. So if I repeat back and forth, at the end all my DIV has the same left (didn't try this vertical moves and top value).
Thanks in advance for you help (and excuse me for my bad english).
I suspect parseInt is not appropriate in your case. If you're using non-integers, then adding e.g. 1.5 will effectively act as if you added 2 because of integer rounding. That will inadvertently make it move faster.
You have several options:
Use parseFloat to keep the decimal part.
Use +orig.replace("px", ""), which works with non-integers (or other tricks like * 1).
Not sure what the method is or how its achieved. But I'm interested in knowing about it to possibly use it in an upcoming project. What I am referring to is when a block element is at a particular X/Y axis it seems it stops acting as though it were a fixed position element otherwise the element acts as a fixed position element.
I most commonly see this with navigation, where the header and footer are large and the element will stop acting as a fixed element when it reaches the bottom of the header or top of the footer
You can do something like this,
$(window).scroll(function(){
if ($(this).scrollTop() > 250){
$('#top').css('position','fixed');
}
else{
$('#top').css('position','static');
}
});
A better approach would be,
$(window).scroll(function(){
var top = $('#top');
if ($(this).scrollTop() > 250){
if(top.css('position') !== 'fixed'){
top.css('position','fixed');
}
}
else{
if(top.css('position') !== 'static'){
top.css('position','static');
}
}
});
There are plugins that will do this for you; this is one I've used before: link with relative success. Has great examples, too.
But if you want to do it yourself, it's not too difficult. The concept is slightly convoluted; if you change something's position to fixed, then it will not take up space, as it would if it was static.
When I came across this issue, I created a second item in the same place (or not, depending where you want it to appear), which is invisible. Then you implement a load/scroll event that checks if the window's scrollTop is greater than the top coordinate of the non-fixed object. If it is, show the fixed object.
Something like this:
$("#yourObject").each(function() { // The ID should be the FIXED object.
var $me = $(this);
var $heightRival = $("#anotherObject"); // This ID should be the non-fixed object.
$me.hide(); // Hide your fixed div.
$(window).bind("load scroll",function() {
var offset = $heightRival.offset(); // Get the document offset of the base object.
var height = $heightRival.outerHeight(); // Get the height of the base object.
if ($(window).scrollTop() > offset.top+height)
$target.show(); // Can be a fade in, slide in, whatever.
else
$target.hide(); // Can be a fade out, etc.
});
});
This is just a rudimentary code but it should set you on the right track.
Take a look at this plugin, or the others like it: http://www.orangecoat.com/stickyscroll