How to use CSS to ensure items remain offscreen even if window is resized?
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.alt text http://img714.imageshack.us/img714/692/61886077.png
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 q开发者_运维百科uestions:
- 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?
Create a div in the middle, that have margin: auto so that it will always be centered. I'm guessing your (red) boxes will always be the same size? Have this centered div with this size, and overflow: hidden. Then inside this div, create the three other divs, which will be moved inside that fixed div size and not the browser window size.
Something like:
<body style="text-align: center">
<div id="container" style="overflow: hidden; width: 960px; height: 600px; margin: auto; position: relative">
<div id="slider" style="width: 9999px; position: absolute">
<div id="first" style="width: 960px; float left;"></div>
<div id="second" ...></div>
<div id="third" ...></div>
</div>
</div>
</body>
So you move that slider div inside the container setting left: 960px times the number of boxes
Couldn't you just display: none; the red boxes until they were needed?
When they need to move, you could position the boxes at the edge, then slide them on:
http://www.jsfiddle.net/Vsjay/
加载中,请稍侯......
精彩评论