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.

0

1 Answer 1

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/

2
  • 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
    Commented Nov 8, 2012 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
    Commented Nov 8, 2012 at 23:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.