CODEWITHSUNDEEP
javascriptjqueryhtmlcss
チーズパン
チーズパン

Reputation: 2778

How to prevent a sliding div from displacing other elements?

I have some div elements. All of them are supposed to slide in when the page is opened. Three of them are sliding in horizontally and one is sliding in vertically.

        $(document).ready(function () {
            $("#lineHor1").toggle("slide");
            $("#lineHor2").toggle("slide");
            $("#lineHor3").toggle("slide");

            $("#lineVer1").slideToggle("slow");
        });
        .lineSliderHor {
            width: 1000px;
            height: 2px;
            background: #000000;
            display: none;
        }

        .lineSliderVer {
            width: 2px;
            height: 1000px;
            background: #000000;
            display: none;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="lineVer1" class="lineSliderVer"></div>
    <p>Click anywhere to toggle the box.</p>
    <div id="lineHor1" class="lineSliderHor"></div>
    <br />
    <div id="lineHor2" class="lineSliderHor"></div>
    <br />
    <div id="lineHor3" class="lineSliderHor"></div>

So my plan was to use this kind of behavior as animation on the page. As you can see the div sliding in vertically forces all other div's down. I want all the lines to overlap. Is there a way to achieve this? Is it even reasonable to do it this way, or should I use a canvas for this kind of requirement?

Upvotes: 0

Views: 780

Answers (2)

Chris Rogers
Chris Rogers

Reputation: 1522

You could use

position:absolute;

But this may not behave as you want because this makes the div break out of its parents constraints. Unless you use:

position:relative;

On the parent div.

If you choose position: absolute I prefer to use JQuery.animate(); as you can reference CSS properties directly (such as left or marginRight) and easing for more customisable sliding.

I hope this achieves something you're looking for.

Upvotes: 1

Me.Name
Me.Name

Reputation: 12544

The easiest way to not have the vertical line push down the other elements, is to have its position absolute 

        .lineSliderVer {
            ...
            position: absolute;
        }

Snippet 

        $(document).ready(function () {
            $("#lineHor1").toggle("slide");
            $("#lineHor2").toggle("slide");
            $("#lineHor3").toggle("slide");

            $("#lineVer1").slideToggle("slow");
        });
        .lineSliderHor {
            width: 1000px;
            height: 2px;
            background: #000000;
            display: none;
        }

        .lineSliderVer {
            width: 2px;
            height: 1000px;
            background: #000000;
            display: none;
            position: absolute;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="lineVer1" class="lineSliderVer"></div>
    <p>Click anywhere to toggle the box.</p>
    <div id="lineHor1" class="lineSliderHor"></div>
    <br />
    <div id="lineHor2" class="lineSliderHor"></div>
    <br />
    <div id="lineHor3" class="lineSliderHor"></div>

Upvotes: 1

Related Questions