How to make the parent div stay the same height, lenght and position


#1

Hello, my the code constantly changes between the letters A, B and C, and when using the jQuery .slideDown() event, my dom moves every time it changes from one letter to the other. Can you fix this with CSS, so that the parent div stays the same size and position no matter what, so the dom doesn’t move when it changes between the letters? (My CSS code didn’t fix it!)

// CSS
#quotes-div{
position: relative;
}

#quotes {
  display: none;
  position: absolute;
}
// HTML
<div class="quotes-div" id="quotes-div">
                        <h1 class="quotes" id="quotes" style="color:green;">Det</h1>
                        <h1 class="quotes" id="quotes" style="color:green;">virker</h1>
                        <h1 class="quotes" id="quotes" style="color:green;">sku</h1>
                        </div>

Javascript/jQuery


 <script type="text/javascript">

    (function() {

        var quotes = $(".quotes");
        var quoteIndex = -1;
        
        function showNextQuote() {
            ++quoteIndex;
            quotes.eq(quoteIndex % quotes.length)
                .slideDown(1500)
                .fadeIn(1500)
                .fadeOut(1400, showNextQuote);
        }
        
        showNextQuote();
        
    })();
</script>


#2

all elements within the DOM have relations to each other, i need to see how the this slideshow affects the rest of your page.

please put your code here:

http://jsbin.com/lasexazesa/edit?html,js,output

and share the bin, so i can have a look


#3

It should be in there now


#4

The url changes when you make change to someone else his bin, i just gave you the bin to make things easier for you.


#5

#6

you could make quotes-div have an absolute position, this way, it taken out of the normal document flow. Given you don’t have much else, this is a viable option.


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.