50% / 50% divs, on click 100% animation

Question

What am I doing:

I am working on a website with 2 different "sides", when you click on the left side, the left side need to be 100%. If you click on the right side, the right side has to be 100%.

Done already:

I have made the left and right side. And animated it with Jquery.

Problem
When you click on the left div the animation is working (It only worked when I added position absolute), but when I try to create the same animation for the right side; it isn't working! I created a jsFiddle so you can see the current code: http://jsfiddle.net/sh3Rg/

I can't make the right one work. When you click on the right div; it need to animate to 100%. Just like the left one.

Code

You can see a live preview and code here: http://jsfiddle.net/sh3Rg/

HTML:

<div id="left"></div>
<div id="right"></div>

JS:

<script>
$('#left').click(function(){
    $('#left').animate({width:'100%'}, 2500);
});
</script>
<script>
$('#right').click(function(){
    $('#right').animate({width:'100%'}, 2500);
});
</script>

CSS:

html,body {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
    background-color: #000000;
}
p { 
    cursor: pointer;
    color: #FFF;
}
#left {
    width: 50%;
    height: 100%;
    background: #666;
    float: left;
    cursor: pointer;
    position: absolute;
}
#right {
    width: 50%;
    height: 100%;
    background: #063;
    float: right;
    cursor: pointer;    
}

Hopefully someone can help me. Regards, Milan

PS: If I posted/did something wrong in this topic; I'm sorry, this is my first question.

You're using jsfiddle wrong, include all external libraries from the panel on the left, also you have a syntax error — rorypicko, Jun 04 '13 at 11:58

score 3 · Accepted Answer · answered Jun 04 '13 at 11:59

3

I have done a small work around. I have edited your fiddle Please check it.

http://jsfiddle.net/sh3Rg/4/

$('#left').animate({width:'0%'}, 2500);
$('#right').animate({width:'100%'}, 2500);

Hope the code is clear to you. Please feel free in case of any doubts.

answered Jun 04 '13 at 11:59

Rohith Gopi

536
1
5
22

Thanks for the code, but I have one bug; When I click on a div, the other one is "pushed" out of the screen (to the button) – Milan Jun 04 '13 at 12:03
consider this one then http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously – TecHunter Jun 04 '13 at 12:03
@ElegantCoder : When I try this code in 3 different browsers; chrome, ff and safari. I have one problem; When the animation takes place the other div is "pushed" to the bottom. – Milan Jun 04 '13 at 12:08
@Milan I have done some work around. Please check the new fiddle. [JSfiddle Here](http://jsfiddle.net/sh3Rg/21/) – Rohith Gopi Jun 04 '13 at 12:11
@Milan : You are welcome. I hope you understood why the part was pushing down. – Rohith Gopi Jun 04 '13 at 12:17

Matyas · Answer 2 · 2013-06-04T12:09:50.910

The problem is that #right grows to 100%, but it grows under the #left

You should place #right above the left container using a positioning other than static.

So the magic is:

Use absolute or fixed positioning
On click, change the z-index of the active element to be greater than the z-index of the other

#left, #right {
    width: 50%;
    height: 100%;
    cursor: pointer;
    position: absolute;
}
#left {
    left:0;
    background: #666;
}
#right {
    background: #063;
    right: 0;
}

And the script:

var Z = 0;
$('#left').click(function(){
    $('#left').css('z-index',Z++).animate({width:'100%'}, 2500);
});




$('#right').click(function(){
    $('#right').css('z-index',Z++).animate({width:'100%'}, 2500);
});

See working example: http://jsfiddle.net/sh3Rg/19/

Roko C. Buljan · Answer 3 · 2013-06-04T13:44:08.493

1

LIVE DEMO

HTML: (add a specific class:)

<div id="left" class="toggWidth"></div>
<div id="right" class="toggWidth"></div>

jQ:

$('.toggWidth').click(function(){
    $(this).stop().animate({width:'100%'}, 2500)
           .siblings('.toggWidth').stop().animate({width:'0%'}, 2500);
});

edited Jun 04 '13 at 13:44

answered Jun 04 '13 at 11:59

Roko C. Buljan

196,159
39
305
313

1

Thanks for the code, it is working. But I'll use the other code (Just because I understand the other one better) Still thanks. – Milan Jun 04 '13 at 12:12

score 1 · Answer 4 · answered Jun 04 '13 at 12:23

1

Accepted answer is correct. But why you are doing width:100% ? As i clicked a div it got 100% and then i can't get back to previous state. I tried it with width:95%

You can have a look here : http://jsfiddle.net/sh3Rg/24/

answered Jun 04 '13 at 12:23

pearl's

61
1
4

One would think the OP has thought of that and has a mechanism for reverting. – Derek Henderson Jun 04 '13 at 12:26
hmm... i was just thought to make it user friendly :) – pearl's Jun 04 '13 at 12:33
I was thinking of a "back" button; but this is also a nice idea. Thanks for your answer. – Milan Jun 04 '13 at 12:42

score 0 · Answer 5 · answered Jun 04 '13 at 12:01

0

your issue is that the left div is set to 50% before the right so it has predominance.

it's exactly like setting left to 50% and right to 100%, it will be exactly as if you had set both to 50%

answered Jun 04 '13 at 12:01

TecHunter

6,091
2
30
47

score 0 · Answer 6 · answered Jun 04 '13 at 12:19

Rather than mess around with width and height, you can do this all with positioning.

The missing bit in your example was z-index, as one div was disappearing below the other.

Here's my working example.

HTML:

<div id="left"></div>
<div id="right"></div>

CSS:

div {
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
}
#left {
    background: #666;
    left: 0;
    right: 50%;
}
#right {
    background: #063;
    right: 0;
    left: 50%;
}

jQuery:

$('div').click(function () {
    $(this).css('z-index', 1);
    if (this.id === 'right') {
        $(this).animate({left: 0}, 2500);
    } else {
        $(this).animate({right: 0}, 2500);
    }
});

50% / 50% divs, on click 100% animation

6 Answers6