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 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts

    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)

    Code:
    <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: #FFF;
    	border: 1px solid #999;
    }
    .slide .inner {
    	position: absolute;
    	left: 0;
    	bottom: 0;
    	width: 338px;
    	height: 36px;
    	padding: 6px;
    	background-color: #F00;
    	color: #333;
    }
    .slide button {
      margin: .7em 0 0 .7em;
    }
    .js #slidebottom .inner { 
      display: none;
    }
    </style>
    
    </head>
    
        <div id="slideleft" class="slide">
          <button><img src="TestSite/js/fancy_nav_right.png" /></button>
          <div class="inner">Slide from bottom</div>
        </div>
    
    
    
    <body>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jun 2011
    Posts
    17
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Code:
    <html>
    <head>
    <style>
      #first{
        background: red;
        width: 300px;
        height: 300px;
        float: left;
        position: absolute;
      }
        #second{
        background: blue;
        width: 300px;
        height: 300px;
        left: 300px;
        position: absolute;
        float: left;
      }
      #sliderWrapper{
        position: fixed;
        width: 300px;
        height: 300px;
        overflow: hidden;
      }
    #innerWrapper{
        position: absolute;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
      
      $(document).ready(function() {
       var left = true, right = true;
            $('.arrowleft').click(function() {
              if(left){
                $('#innerWrapper').animate({
                  left: '-=300px',
                }, 1000);
                left = false, right = true;
              }
            });
            $('.arrowright').click(function() {
              if(right){
                $('#innerWrapper').animate({
                  left: '+=300px',
                }, 1000);
            right = false, left = true;
            }
          });
    });
      
    </script>
    </head>
    <body>
      
      <a class="arrowleft" href="#">Left</a>
      <a class="arrowright" href="#">Right</a>
      
      <div id="sliderWrapper">
        <div id="innerWrapper">
          <div id="first">First</div>
          <div id="second">Second</div>
        </div>
      </div>
    
    </body>
    </html>
    You can replace the anchor elements with <img/> for the arrow images providing you keep the class attribute.

    I'm also not sure if this is the best way to accomplish it.

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Is there anyway to open and close one the same link/img rather than having two links


  •  

    Posting Permissions

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