SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Div Slider

    I'm trying to make a div slider go left to right. In as much detail this is what I would like:

    • The div to be hidden on first page load
      Have the div slide left to right AND BACK by the click of an image NOT a button
      When the image (of a right arrow) is clicked, let the arrow slide out with the div (and IF possible when div is fully extended have image of a left arrow enabling a slide back and vice-versa)



    Here's what I got so far. (Don't need to use) If you can help with any of the above that would be AWESOME!

    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 type="text/javascript" src="TestSite/js/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	 $('#slideleft button').click(function() {
        var $lefty = $(this).next();
        $lefty.animate({
          left: parseInt($lefty.css('left'),10) == 0 ?
          -$lefty.outerWidth() :
          0
        });
      });
    });
    </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;
    }
    .slide button {
      margin: .7em 0 0 .7em;
    }
    .js #slidebottom .inner { 
      display: none;
    }
    </style>
    
    </head>
    
        <div id="slideleft" class="slide">
          <button>slide it</button>
          <div class="inner">Slide from bottom</div>
        </div>
    
    
    
    <body>
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well
    I'm not expert! but I found this DIV Horizontal work perfectly...

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
    <title>Untitled 1</title>

    </head>
    <style type="text/css">

    #slide p {
    width: 3000px;
    height: 200px;
    border: none;
    text-align:center;
    }

    #slide {
    width: 990px;
    height: 200px;
    border: none;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: lightgreen;
    }
    </style>

    <body>
    <center>

    <div id="slide">
    <p>your paragraph...</p>
    </div>


    </center>
    </body>

    </html>


Tags for this Thread

Bookmarks

Posting Permissions

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