www.webdeveloper.com
Results 1 to 4 of 4

Thread: Creating a slide out JavaScript Window

  1. #1
    Join Date
    Dec 2008
    Posts
    35

    Question Creating a slide out JavaScript Window

    Hey guys,

    Quick question in real fast, How to I make a JavaScript window slide out from the side of my site, and put text / images and other content in there (all content will be HTML5)

    Here is an example:

    http://574s.com/

    Thanks for all the help!

    John

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    You basically want to position a DIV with that content so it's positioned out of view with CSS. Then you use JavaScript to animate it into position. Here's a quick jQuery example:

    http://jsfiddle.net/R2RaF/1/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Dec 2008
    Posts
    35
    Exactly! I will use this, to recreate the effect. Did you see my additional post about how the full screen background images to be random on each page load:

    http://www.webdeveloper.com/forum/sh...site-is-loaded

    I'm working on it but I'm having some problems getting the effect to work:

    http://www.workspace.johncliffordtay...d-written/web/

    I'm going off of this tread on stack over flow::

    http://stackoverflow.com/questions/1...nd-images-css3

    I'm going with the JS solution over the PHP, this is the section in the tread that I'm referring to specifically:

    I would use JS. Take a look at this example:

    <html>
    <head>
    <script type="text/javascript">
    var totalCount = 8;
    function ChangeIt()
    {
    var num = Math.ceil( Math.random() * totalCount );
    document.body.background = 'bgimages/'+num+'.jpg';
    document.body.style.backgroundRepeat = "repeat";// Background repeat
    }
    </script>
    </head>
    <body>
    // Page Design
    </body>
    <script type="text/javascript">
    ChangeIt();
    </script>
    </html>

    You would need to name your images the proper numbers through the random count and place them in that images folder.
    All my best and thank you for the help thus far CB

    John
    Last edited by johnyct9760; 12-06-2013 at 10:41 PM.

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    Here's a quick example in jQuery:
    http://jsfiddle.net/cemZu/1/

    You basically set up your images in an array, generate a random number, then set your background.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles