3

I am trying to implement a page transition using the jQuery UI slide effect. Unfortunately, when the transition is underway the page gets chopped off at the top. I have reproduced the issue using this jsfiddle: http://jsfiddle.net/nareshbhatia/CfdEg/1/. Can someone please let me know what I am doing wrong?

Key areas of the code listed below:

HTML

<div id="wrapper">
    <div id="page1" class="page">
        <p>Page 1</p>
    </div>
    <div id="page2" class="page nodisplay">
        <p>Page 2</p>
    </div>
</div>

CSS

body {
    font: normal normal 16px Arial;
}

p {
    font-size: 40px;
    margin: 100px 0 0 0;
}

.nodisplay {
    display: none;
}

#wrapper {
    position: relative;
    width: 480px;
    height: 240px;
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

#page1 {
    background-color: #003366;
    color: #FFFFFF;
}

#page2 {
    background-color: #F6BC0C;
    color: #000000;
}

JavaScript

function transitionPage() {
    // Hide to left / show from left
    $("#page1").toggle("slide", {direction: "left"}, 500);

    // Show from right / hide to right
    $("#page2").toggle("slide", {direction: "right"}, 500);
}

$(document).ready(function() {
    $('#page1').click(transitionPage);
    $('#page2').click(transitionPage);
});

Thanks.

Naresh
  • 23,937
  • 33
  • 132
  • 204

1 Answers1

5

Woot I got it :)

#page1 {
    background-color: #003366;
    color: #FFFFFF;
    display: inline-block;
}

#page2 {
    background-color: #F6BC0C;
    color: #000000;
    float:left;
}​

So with it changing the size I figured it had to be something with the "block type" so I threw the inline-block on them and it worked.. but incorrectly because you have page 2 hidden. So I threw a float on there and it worked.. I can't really explain the logic behind it but this would definitely be a good interview "riddle" lol :P

Here it is working :) http://jsfiddle.net/lookitstony/EdsP4/

MirroredFate
  • 12,396
  • 14
  • 68
  • 100
Tony
  • 3,269
  • 1
  • 27
  • 48
  • Wow! You really think out-of-the-box. Actually, looking at your answer I started playing a bit more and found that display: inline-block is really not needed. If you simply move the float: left to .page the transition starts working correctly. I still cannot explain why - so I would love to hear a good explanation from someone! – Naresh Nov 08 '12 at 23:52
  • Yeah, I did that first but on my pc it was causing a lot of jitter so I didn't want to consider that the answer. Though on your machine without all the stuff I was running it may be smooth as whipped butter :) ... just tested it on my home machine.. runs smooth here also. cool :) strange behavior. – Tony Nov 08 '12 at 23:54