How to use CSS to ensure items remain offscreen even if window is resized?
- by Ashley Ward
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?
