How to use CSS to ensure items remain offscreen even if window is resized?
Posted
by Ashley Ward
on Stack Overflow
See other posts from Stack Overflow
or by Ashley Ward
Published on 2010-05-21T14:31:44Z
Indexed on
2010/05/21
19:50 UTC
Read the original article
Hit count: 225
I am trying to implement a type of slider using jquery. However this question is about the CSS involved in trying to achieve the functionality.
My site design occupies a central column of width 960px. Within this layout there is a central element, that I wish to slide right, on click of a "next" button, and at the same time, another element of the same class slides in from the left to occupy the space vacated. I have drawn a diagram of what I am trying to achieve.
In this diagram the red blocks are the element I want to slide in and out, it is grouped by a div which moves left to produce the effect using jQuery
I have 2 main questions:
- How do I get the correct margin values, given that the browser window width can vary and that all elements that are not the current item should be offscreen?
2.If the user were to resize the margins could be dynamically altered based on the values returned using the jQuery resize() event. Or is there a neater quicker better way of doing it using pure CSS?
© Stack Overflow or respective owner
