Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    378
    Thanks
    46
    Thanked 1 Time in 1 Post

    Question How to slide content left/right?

    Hello.

    I've been looking at this website, however, along the way somewhere, I've missed something...

    Can someone please help?

    What I did: - If your to test, edit the JQuery link
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script>
    $(document).ready(function() {
      $('#slideleft button').click(function() {
        var $lefty = $(this).next();
        $lefty.animate({
          left: parseInt($lefty.css('left'),10) == 0 ?
            -$lefty.outerWidth() :
             0
        });
      });
    });
    </script>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <style>
    .slide {
    position: relative;
    overflow: hidden;
    height: 120px;
    width: 350px;
    margin: 1em 0;
    background-color: #FFC;
    border: 1px solid #999;
    }
    .slide .inner {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 338px;
    height: 36px;
    padding: 6px;
    background-color: #4C5;
    color: #333;
    }
    </style>
    </head>
    
    <body>
    <div id="slideleft" class="slide">
      <button>slide it</button>
      <div class="inner" style="left: 0px; ">Animate this element's left style property</div>
    </div>
    </body>
    </html>
    I'd like this not to be a button either, instead an image. This is going to be a vertical rectangle at the side, you click the image and it expands left so if your able to make it so this starts off hidden, please implement this.

    Best Regards,
    Tim
    Last edited by MrTIMarshall; 08-05-2012 at 04:30 AM. Reason: Thank you for any help in this thread :)

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,486
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I suppose you’re wondering that it’s not working at all? Don’t be afraid to look at the error console (most browsers have one built in) and it might tell you “$ is undefined” or something like that, and this is because you’re trying to execute the jQuery function before the jQuery framework is even loaded, hence, the browser doesn’t even know about jQuery yet. Move the jQuery script reference up, it should be the first script in the document.

  • Users who have thanked VIPStephan for this post:

    MrTIMarshall (08-04-2012)

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    378
    Thanks
    46
    Thanked 1 Time in 1 Post
    Wow, I didn't even think of this logic!

    As for the debugger, I know it will help, but I hardly know anything at this moment in time!

    Thank you very much!

  • #4
    Regular Coder
    Join Date
    Nov 2010
    Posts
    378
    Thanks
    46
    Thanked 1 Time in 1 Post
    So how can I make this div be hidden at the start?

    I tried changing the visibility but that broke it :P

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Amend the css to:

    Code:
    .slide .inner {
    position: absolute;
    left: -350px;
    bottom: 0;
    width: 338px;
    height: 36px;
    padding: 6px;
    background-color: #4C5;
    color: #333;
    }
    so that it starts off screen, and remove 'style="left: 0px; "' from the div tag (this over-writes the css rule).
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Posts
    378
    Thanks
    46
    Thanked 1 Time in 1 Post
    Quote Originally Posted by AndrewGSW View Post
    Amend the css to:

    Code:
    .slide .inner {
    position: absolute;
    left: -350px;
    bottom: 0;
    width: 338px;
    height: 36px;
    padding: 6px;
    background-color: #4C5;
    color: #333;
    }
    so that it starts off screen, and remove 'style="left: 0px; "' from the div tag (this over-writes the css rule).
    I edited the file, but nothing happened.

    I've uploaded it here

    And how do I change the direction to opens from right to left?

    I tried editing the obvious with no luck...
    Ignore this bit, I seem to have missed something and have to it working
    Last edited by MrTIMarshall; 08-05-2012 at 04:06 AM.

  • #7
    Regular Coder
    Join Date
    Nov 2010
    Posts
    378
    Thanks
    46
    Thanked 1 Time in 1 Post
    Ah! Been tinkering around with it and got it all working!


  •  

    Posting Permissions

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