How to use CSS to ensure items remain offscreen even if window is resized?


Tags: jquery,css,margin,slide

Problem :

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

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:

  1. 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?



Solution :

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


    CSS Howto..

    How do I install SASS with Mean.io?

    How can I make it so that my logo on the top left of the page lines up with the text underneath it?

    How to do the Height of html tag Body on 100% of browser window size?

    How to scroll draw each SVG path one at a time (chronologically)?

    Only Lower Half Of The Border Is Shown

    How can I use JQ to pick out a parent whose child is hr.strong?

    How to make a number of breaks in CSS? [closed]

    how to choose correct css class to change element

    How do I lock a sidebar to the height of a window even when a user scrolls?

    How to add pseudo element centered in a textarea?

    how to combine css with php while loop and table?

    How to achieve navigation mouseover effect like in screenshot [closed]

    How to extend width and height automatically when the data gets increased

    How to choose fontstacks

    How to make line-through wider/bigger than text/element using CSS

    facebook and css, how to place a like comment dialog on top of a video?

    How to change CSS background-position for the X axis only? [duplicate]

    How to Add Class to Bootstrap Thumbnails on Slider Change

    How to override the CSS !important property when the original file loads after the customized css file

    how can I overcome existing css and change button style to the default windows style button?

    How can I have a CSS style different for IE6?

    How to apply CSS style in javascript for id generated at runtime

    how to style simple_form with material design or custom css

    How to adjust the position of specific elements/items/content on a page with CSS

    In jQuery how do I make multiple changes to css in a function?

    how to spread small image file in background and it should scroll with other elements

    how to override user agent CSS

    How to add a delay between cycles of css animation [duplicate]

    Hide and show divs with multiple common classes

    CSS - EM Values Inconsistent, How To Debug / Explanation