I am making a photo slider. If you click the previous or next button, the margin-left keeps adding or subtracting a variable, which is set to 5px. However, I want to limit the distance the slider goes left or right, so that it doesn't slide so far that there is white space.
To limit the boundary, there is a conditional statement that assigns the variable a value of 5px if the margin-left is between 10px and -100px. Otherwise, the variable is set to 0px.
And this does work. If you go too far to the left or right, the slider just stops. But once the boundary is met, the previous and next buttons do not work. Any tips?
You can view my code here:
jsfiddle.net/xpfbh/2/
I have updated your fiddle. I had to change your if condition to include the margin range as well as the direction. Also removed the test variable and moved the statement which sets the margin within the if block. I didn't think the else block was needed, so I removed it as well.
Related
I am trying to do something similar this guy did here
However, I want my animation to go from left to right as opposed to right to left.
Now since all divs are actually positioned inline i have tried to specify direction: rtl on the parent div, but it still does not work. (my view remains on the left side on the page, I would like to see the rightmost div first and then when I slide the left divs they move to the right).
Thank you.
L.E: Here is the solution for those interested http://jsfiddle.net/oq4p28wg/
From moving left to right in the example referenced they add margin-left to move between slides, until reaching a maximum number of slides. In your case to move in the opposite direction you will need to start with the maximum margin-left and substract margin to move from right to left in the slides until reaching the first slide and therefore margin-left:0.
i have confuse about a value returned from jQuery.scrollTop().
which node indicates jQuery.scrollTop()?
the red one or green?
in short, thats green, but thats not realy the answer
read this from jquery site
The vertical scroll position is the same as the number of pixels that
are hidden from view above the scrollable area. If the scroll bar is
at the very top, or if the element is not scrollable, this number will
be 0.
When I hide an absolute positioned element by setting the left value in negative(the left will be the negative value of its width).
Its hidden, and it does not impact its successive (next) elements in all the browsers except Chrome. In chrome this negative positioned element occupies some 1 to 2 px of space in its position and pushes the other (successive) elements to 1 or 2 px away.
If i set display none(instead of negative position), It can be resolved. But i do some other manipulations based on its visibility.
If any one know solution for this problem, Kindly help me.
Thanks in advance.
I have a div that "drops down" thanks to jquery's slidetoggle and hover functions.
Inside that div I have some info (like the date, and a note counter) And I have three buttons.
Two of them are tumblr buttons ( {LikeButton}, {ReblogButton} )
and the third is an entypo symbol.
I have to float them all to the right in their own seperate class or they overlap (A problem of tumblr's, their like and reblog buttons are not well made)
I've identified that it is the "float:right" css bit that is making my jquery slidetoggle dropdown 'jumpy'.
(Or rather, it slides down, and in a millisecond slides up then down again, creating a jittery effect)
Does anyone know what might be causing this? Does anyone know a better way of lining up 3 spans on the right edge of a div (text-align:right doesn't work, I tried that already)
My test site is here: http://test-theme-one.tumblr.com
If it helps
Are you referring to the fact that when you mouse over it, it expands, then slightly retracts? If so try adding the min-height property set to the size of the icons to the .notes element and it seems to prevent this jittering.
Tip:
I noticed if you mouse out right away it will jitter too because it calls the method at the same time. Set a flag when the animation initiates to prevent the other animation from starting. something like this pseudo code:
//Global Flag
flag = false;
-- start function --
//prevent animation if another animation is in progress.
if(flag) return;
flag = true;
your.animation(function(){
//callback (when animation is done)
flag = false; //rest flag
});
The reason why it jitters is because since the elements inside are set to float, the height of the parent element is not affected, therefor the animation treats it as if it's empty. But setting a min-height or just height compensates for that. I'm sure it's more complicated than that but that's what's going on in a nutshell.
I did have help with this question in a previous question but now I want to use svg instead of css I have the following code http://jsfiddle.net/Len1/wzNjm/3/ but the shape doesnt go to the right, middle and left when the appropriate button is pressed can someone please help me
example of what I mean
left button pressed shape goes to the left of screen
right button pressed shape goes to the right of screen
middle button pressed shape goes to the middle of screen
I've updated your fiddle with a working solution. A few tips:
Move your CSS into a <style> element instead of writing it inline. That avoids typos like <div style="min-height:450px"; style="min-width:600px"> (two separate style attributes and an erroneous comma).
Use margin: 0 auto; to center block-level elements.
Your <rect> element was a different width than its containing <svg> element, so that was making it behave strangely.
I also colored the main <div> red just to make it easier to see what's going on.