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
    Dec 2012
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Need help with hopefully a small issue.

    I inquired on here a few days ago in regards to my slider. SB65 guided me and fixed most of my problems but I'm still having an issue with the new slider I implemented. The positioning is really strange, it doesn't seem to bump the rest of the content down, instead it kind of floats and overlaps over the rest.

    Here's the code:
    Code:
    <script type="text/javascript">
    function cycleImages(){
          var $active = $('#cycler .active');
          var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
          $next.css('z-index',2);//move the next image up the pile
          $active.fadeOut(1500,function(){//fade out the top image
    	  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
              $next.css('z-index',3).addClass('active');//make the next image the top one
          });
        }
    
    $(document).ready(function(){
    // run every 7s
    setInterval('cycleImages()', 7000);
    })
    </script>
    
    <style type="text/css">
    #cycler{position:relative;}
    #cycler img{position:absolute;z-index:1}
    #cycler img.active{z-index:3}
    </style>
    And here's the HTML i'm using:
    Code:
    <div id="cycler">
    <img class="active" src="images/slider-3.jpg" alt="My image" />
    <img src="images/slider-1.jpg" alt="My image" />	
    <img src="images/slider-2.jpg" alt="My image" />			
    </div>
    Not sure what I'm missing but I do know that this method is browser friendly, I just need to find out how to position it properly and move the rest of the website content down below the slider.


    Thank you so much!
    Last edited by Cyrusis; 12-18-2012 at 11:46 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Give #cycler a width and height and centre it:

    Code:
    #cycler {
        height: 300px;
        margin: 0 auto;
        position: relative;
        width: 940px;
    }

  • #3
    New Coder
    Join Date
    Dec 2012
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks SB65! That seemed to do the trick, only thing, although the pixel measurements are accurate, it didn't line up with the header as perfectly as the other one. I just resized the header to fix that though and it looks fine now.

    Thanks again!


  •  

    Posting Permissions

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