Home/ Questions/Q 8724205
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T07:46:45+00:00

I’m trying to do a sliding door effect using jquery. I have mocked it

  • 0

I’m trying to do a sliding door effect using jquery. I have mocked it up in jsFiddle and it works okay in there. The problem I have, is when I run it locally, nothing works. I have downloaded and linked to the jquery library locally, and I have another project where I even link to the API and it works just fine. I don’t understand what’s going on here, as far as I can tell everything is loading okay, but when I click the link nothing happens.

here is the link the jsfiddle
http://jsfiddle.net/aosto/kU9HY/

edit: Also found that my code doesn’t seem to work. I’m following how to make a sliding door effect?, the direction provided by orbling. But I think I may have the CSS screwed up. Not sure how to initially hide the others and make one visible. Any help would be appreciated.

<!doctype html>
<html>
<head>
<title>DBKustoms</title>
<link rel="stylesheet" href="./css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">    </script>
<script src="./js/include.js"></script>

</head>
<body>

<div id="menu-container">
    <div id="cover"></div>
    <div id="menu-home" class="menu"></div>
    <div id="menu-contact" class="menu">contact</div>
    <div id="menu-services" class="menu"></div>
    <div id="menu-photo" class="menu"></div>
</div>


<div id="buttons">
    <div id="home" class="menu-button">Home</div>
    <div id="contact" class="menu-button">Contact</div>
    <div id="services" class="menu-button">Services</div>
    <div id="photo" class="menu-button">Photo</div>
</div>

</body>
</html>

the CSS

#menu-container {
    float:left;
    width: 200px;
    height: 300px;
    clip: auto;
    overflow: hidden;
    position: relative;
    }

#cover    {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -200px;
    background: black;
    z-index:1000;    
    }

#menu-home {
    width:100%;
    height:100%;
    background:blue;
    }

#menu-services {
    Height:100%;
    width:100%;
    background:purple;

    }

#menu-contact {
    Height:100%;
    width:100%;
    background:yellow;
    }

#menu-photo {
    Height:100%;
    width:100%;
    background:brown;

}

#buttons {
    float:left;
}

and the JS

$('.menu-button').click(function() {
    var cMenuButton = $(this);
    var cMenuID = cMenuButton.attr('id');

    var coverHeight = $('#cover').height();
    var cVisibleMenu = $('.menu:visible');
    var cVisibleHeight = cVisibleMenu.height();

    $('#cover').animate({'height': coverHeight + cVisibleHeight}, 600, 'linear', function() {
        $('.menu').hide();
        $('#menu-' + cMenuID).show();

        var newMenuHeight = $('#menu-' + cMenuID).height();
        var coverHeight = $('#cover').height();

        $('#cover').animate({'height': coverHeight - newMenuHeight}, 600, 'linear');
    }); 
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to wrap the jquery stuff so it loads after DOM ready…

    $(function(){
    // your js here
})

    JSFiddle is doing that for you. The problem you encounter locally, is that the javascript runs before the document has loaded, so when the selector is selecting, there is nothing to select. If you run after DOM is ready, then it can select the HTML elements on the page as normal.

    • 0