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.
Related
I'm trying to see if there's a way, using jQuery or Javascript, to have four different images, each one separately fading in quickly (say 1000ms) and out slowly (say 4000ms) depending on whether the mouse is in the top left, top right, bottom left, bottom right quadrant, with the images fading in/out in the corresponding quadrant but more towards the center (so if all images are faded in at the same time, they partially overlap). The images should be behind everything in the body tag but visible in html-rendered white space and anything opaque. Is this possible?
$(function(){
var width=$(window).width();
var height =$(window).height();
$('.image_container').css('marginLeft',''+((width-400)/2)+'px');
$('.image_container').css('marginTop',''+((height-400)/2)+'px');
$(".conner_boxes").mouseenter(function(){
$('.image_container > img').eq($(this).index()).animate({opacity:.2});
}).mouseleave(function(){
$('.image_container > img').eq($(this).index()).animate({opacity:1});
});
});
Is this the way you want it ? http://jsfiddle.net/Aveendra/hp8xP/ check the fiddle
Scroll bar moves freely pixel by pixel which i don't need .What i need to do is a scroll bar scrolls the table 1 element right or left .Whatever i try schooling should not divide elements . Is it possible to make a scroll-bar that scrolls let say 200px at a time?
use scrollBy(xnum,ynum)
look at this
http://www.w3schools.com/jsref/met_win_scrollby.asp
update
using this : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
i was partially able to do it. it kind of works with the mouse. it might be improved.
http://jsfiddle.net/btevfik/EZpdA/
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.
I have a grid of elements (3 x 3) formation which toggle visibility on hover, easy.
However my next step is to grow said elements to fill their container when hovered upon, I'm assuming I would need to get current (x,y) values and then grow this to the (x,y) values of the parent container and use css positioning, however every approach I take is hitting a brick wall. I have a fiddle here which demonstrates the layout / intended functionality - http://jsfiddle.net/u2w7J/
Any help would be gratefully appreciated!
The way your HTML is set up currently, this is kind of hard to accomplish while having it look smooth. A first try is to use the .toggleClass function and toggle "box" and "miniBox" for the hovered element. See http://jsfiddle.net/u2w7J/6/ for a demo.
Positioning is harder since the miniBoxes are not positioned absolutely. Hence, adding animation is causing weird results (see above demo).
I would suggest to have the miniBoxes positioned absolutely. When hovering, get the parents div left and top values and animate the miniBox using these values. Additionally, raise z-index during or before the animation to prevent other miniBoxes being visible.
I want to create auto-hide menu, just the same thing like http://www.ringvemedia.com/shanghai-photos but the problem is that I also have content that is scrolling down so if I calculate pointerY it will return mouse absolute position so it could be 1000...999999 depends on how many content you have to scroll down, that why I cant use something like "if (pointerY+50) >= document.viewport.getDimensions().height then $("somethind").show();". What I want is to somehow calculate that mouse right now is on bottom of the screen (+- 50px) (not the content).
I think I have confused even myself :) hope someone will understand what I wrote.
I think you have to use document.viewport.getScrollOffsets() and then substract the pointerY with the scroll offset to get the position in the viewport.