CSS Position Help (horizontal sidebar showing up when animate content over)


Tags: jquery,css,jquery-animate,position,scrollbar

Problem :

Let me try my best to explain what I'd like to have happen, show you the code I have an hopefully I can get some help.

So, I'm trying to do a sliding navigation UI from the left side of the screen (like a lot of mobile apps). The main content slides over, displaying the navigation menu beneath.

Right now the browser thinks the screen is getting wider and introduces a horizontal scroll bar. However, I don't want that to happen...

How do I get the div to animate off screen but not enlarge the width of the screen (i.e. keep it partially off screen)?

Anyway here is my fiddle: http://jsfiddle.net/2vP67/6/

And here is the code within the post:

HTML

<div id='wrapper'>
    <div id='navWide'> </div>
    <div id='containerWide'> </div>
    <div id='containerTall'>
        <div id='container'>
            <div id='nav'>
                <div id='navNavigate'> Open Menu </div>
                <div id='navNavigateHide'> Close Menu </div>
            </div>
        </div>
    </div>
    <div id='sideContainerTall'>
        <div id='sideContainer'>
            <div id='sideNav'>Side Navigation </div>
        </div>
    </div>
</div>

CSS

#wrapper {
    width:100%;
    min-width:1000px;
    height:100%;
    min-height:100%;
    position:relative;
    top:0;
    left:0;
    z-index:0;
}
#navWide {
    color: #ffffff;
    background:#222222;
    width:100%;
    min-width:1000px;
    height:45px;
    position:fixed;
    top:0;
    left:0;
    z-index:100;
}
#containerWide {
    width:100%;
    min-width:1000px;
    min-height:100%;
    position:absolute;
    top:45px;
    z-index:100;
}
#containerTall {
    color: #000000;
    background:#dadada;
    width:960px;
    min-height:100%;
    margin-left:-480px;
    position:absolute;
    top:0;
    left:50%;
    z-index:1000;
}
/***** main container *****/

#container {
    width:960px;
    min-height:585px;
}
#nav {
    color: #ffffff;
    background:#222222;
    width:960px;
    height:45px;
    position:fixed;
    top:0;
    z-index:10000;
}
#navNavigate {
    background:yellow;
    font-size:10px;
    color:#888888;
    width:32px;
    height:32px;
    padding:7px 6px 6px 6px;
    float:left;
    cursor:pointer;
}
#navNavigateHide {
    background:yellow;
    font-size:10px;
    color:#888888;
    width:32px;
    height:32px;
    padding:7px 6px 6px 6px;
    float:left;
    cursor:pointer;
    display:none;
}
#sideContainerTall {
    background:#888888;
    width:264px;
    min-height:100%;
    margin-left:-480px;
    position:absolute;
    top:0;
    left:50%;
    z-index:500;
}
#sideContainer {
    width:264px;
    min-height:585px;
    display:none;
}
#sideContainerTall {
    background:#888888;
    width:264px;
    min-height:100%;
    margin-left:-480px;
    position:absolute;
    top:0;
    left:50%;
    z-index:500;
}
#sideContainer {
    width:264px;
    min-height:585px;
    display:none;
}
#sideNav {
    width:264px;
    height:648px;
    float:left;
}

Javascript

$(document).ready(function() {

    $('div#navNavigate').click(function() {

        $('div#navNavigate').hide();

        $('div#navNavigateHide').show();

        $('div#sideContainer').show();

        $('div#containerTall').animate({
            'left': '+=264px'
        });
    });

    $('div#navNavigateHide').click(function() {

        $('div#navNavigate').show();

        $('div#navNavigateHide').hide();
        $('div#containerTall').animate({
            'left': '-=264px'
        }, function() {
            $('div#sideContainer').hide();
        });
    });

});


Solution :

So a real quick fix would be to apply an overflow of hidden to your html/body (you'll also need to define the height and width like this):

html, body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
}

Check out the updated jsFiddle: http://jsfiddle.net/2vP67/9/

-- EDIT --

If you're after the side panel view effect from apps like Facebook or Path then you can achieve it with much simpler layout/css.

See an example on jsFiddle here: http://jsfiddle.net/2vP67/11/

The example here is based on the width of an iPhone, but you can detect the screen size and display the content as you needed.


    CSS Howto..

    how to organize all js, css, php and html code?

    How to create a border that does't add a margin?

    How to force the horizontal scroll bar to appear?

    How to increase the size of an unicode icon awesome fonts relative to its container with CSS

    how to add JS and CSS tags from module without using header hook

    How to vary the tone of an image dynamically using only css?

    How can I attach an object to a fixed location on an image?

    In Wordpress how can I create a page which has 3 col-md-4 blocks in a container?

    How to make a css compatible by all browser

    jquery - how to queue up a series of css property changes

    Applying new css to elements with jQuery, how to add transition?

    css not showing inline

    how to add a fixed position Box on left side of each post [closed]

    jQuery Cycle Plugin is showing border of auto-generated links

    How to remove border of drop down list : CSS

    Google chart - how to change a css property for the whole table

    How to change rows in css from 3x3 on desktop, to 2x4 on mobile?

    how to hide and show a div that is inside of a form using only javascript and css

    Using jquery/JS/CSS how do I append words to a sentence so the sentence is pushed up word by word

    How to get a hidden content to show over cursor using html, css, javascript?

    How to set custom fonts in JavaFX Scene Builder using CSS

    How to scroll right and left by mouse scroll button

    How to remove an element from the flow of HTML/CSS?

    Using CSS to style a Sencha Touch form - how do I find the elements?

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    CSS How to make text align background-color top line

    How to put image tiles properly without colum gap or row gap in between using only CSS?

    How to include CSS code directly in a php file

    How to Change background-color of .body when hover menu ( Jquery - Shopify )?

    How can I do to merge font attributes in css