CODEWITHSUNDEEP
jquery
Abhik
Abhik

Reputation: 674

jQuery : Toggle Sliding A div from left to right over another div

I am trying to slide a partially hidden div (placed using margin-right: -300px; to the element and overflow-x: hidden; to the parent. Here is the code I have used:

<div class="entry-content">
    <div class="first">
        <!-- Content -->
    </div>

    <div class="second">
        <!-- Content -->
    <div class="third">
        <img class="ttoggle" src="http://i61.tinypic.com/21jc3o1.png">
        <!-- Content -->
    </div>
</div>

And, the CSS 

.entry-content {
    overflow-x: hidden;
    width: 1140px;
}

.first {
    float: left;
    height: 1000px;
    padding: 10px;
    width : 560px;
}
.second {
    float: left;
    heoght: 1000px;
    padding: 0;
    width: 475px;
}
.third {
    float: left;
    height: 1000px;
    margin: 0 -300px 0 0;
}

Now, the every tutorial I came across either not working, or just pulling the div from left making it go down below the first two divs because of the insufficient available width.

My goal is to pull the div on top of the second div without breaking the layout. So, I am completely lost here with my little knowledge in jQuery.

Here is a screenshot of what I am trying to achieve. I hope this explains what I tried to achieve.

Sliding DIV from Right on Top of another

Can this be done using jQuery? I certainly don't want anyone to do the job for me, but any help, or even something to play with will be much appreciated.

Upvotes: 2

Views: 2053

Answers (1)

mVChr
mVChr

Reputation: 50177

You can use absolute positioning. Absolutely positioned objects are placed wherever specified using top/right/bottom/left relative to the origin or the closest relatively positioned parent.

So, first, add position: relative to .entry-content so that the sidebar is positioned relative to it. Then you can add this CSS to .third:

position: absolute; right: 0; top: 0; z-index: 100;

Then to animate it in you can do something like this:

$('.third').click(function(ev) {
    var $this = $(this),
        r = parseInt($this.css('right'), 10);

    $this.animate({right: r ? 0 : 300}, 1000);
});

See Rough Demo

Upvotes: 2

Related Questions