www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Is CSS the problem with this?

  1. #1
    Join Date
    Aug 2009
    Posts
    17

    resolved [RESOLVED] Is CSS the problem with this?

    Hello, first I'd like to introduce myself, I'm Cazman, a newbie coder that has just begun about 3 days ago, I've followed a tutorial in CSS, HTML and jQuery that will alow me to create a slideshow, with animated transitions onto the new picture. The problem is, the arrow controls on the slideshow appear above and below the slideshow, and not next to the actual slideshow itself. Can anyone tell me if it's the CSS thats wrong? Because I have a feeling the javascript isn't responsible, and certainly not the HTML. But just incase I shall include all three.

    The HTML:
    Code:
    <div id = "slideshow">
    <div id="slidesContainer">
    <img src="pic1.jpg" class="slide" />
    <img src="pic2.jpg" class="slide" />
    <img src="pic3.jpg" class="slide" />
    <img src="pic4.jpg" class="slide" />
    <img src="pic5.jpg" class="slide" />
    </div>
    </div>
    The CSS:
    Code:
    #slidesContainer{
      border: 3px solid white;}
    	
    #slideshow #slidesContainer {
      margin: 0 auto;
      width:500px;
      height:300px;
      overflow:auto; 
    }
    
    #slideshow #slidesContainer .slide {
      margin:0 auto;
      width:480px; 
      height:300px;
    }
    
    .control {
      display:block;
      width:35px;
      height:35px;
      cursor: pointer;
    }
    #leftControl {
      background: transparent url(backbutton.jpg) no-repeat 0 0;
      top:0;
      left:0;
    }
    #rightControl {
      background: transparent url(forbutton.jpg) no-repeat 0 0;
      top:0;
      right:0;
    }
    And the jQuery:
    Code:
    $(document).ready(function(){
      var currentPosition = 0;
      var slideWidth = 500;
      var slides = $('.slide');
      var numberOfSlides = slides.length;
    
     
      $('#slidesContainer').css('overflow', 'hidden');
    
     
      slides
      .wrapAll('<div id="slideInner"></div>')
      // Float left to display horizontally, readjust .slides width
      .css({
        'float' : 'left',
        'width' : slideWidth
      });
    
      $('#slideInner').css('width', slideWidth * numberOfSlides);
    
      $('#slideshow')
        .prepend('<span class="control" id="leftControl"></span>')
        .append('<span class="control" id="rightControl"></span>');
    
      manageControls(currentPosition);
    
      $('.control')
        .bind('click', function(){
        // Determine new position
          currentPosition = ($(this).attr('id')=='rightControl')
        ? currentPosition+1 : currentPosition-1;
    
          manageControls(currentPosition);
    
          $('#slideInner').animate({
            'marginLeft' : slideWidth*(-currentPosition)
          });
        });
    
      function manageControls(position){
    
        if(position==0){ $('#leftControl').hide() }
        else{ $('#leftControl').show() }
    
        if(position==numberOfSlides-1){ $('#rightControl').hide() }
        else{ $('#rightControl').show() }
        }
      });
    I would be really greatful if anyone could help me, and I hope to stay around on these forums for a long time to come.

  2. #2
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    could you perhaps post what the source code will look like when you view the slideshow?
    Then we can probably have a better view of where the control is appearing at

  3. #3
    Join Date
    Aug 2009
    Posts
    17
    Sure, here's the screenshot:
    http://i612.photobucket.com/albums/t...3/screenie.jpg

    If you get what I mean, they start on a competely different line, and when I put a border around the "slideshow" element, the border stretches accross the page.

  4. #4
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    Yes ok I see, and what about the source code?
    Right now I can only guess it has something to do they are styled as Block element.
    Maybe you can try removng the display:block for the .control and then add a position relative(or absolute) so you can use margins to place them anywhere you like.

  5. #5
    Join Date
    Aug 2009
    Posts
    17
    Thank you so much Siddan, I thought about using margins, but the margin-top thing hadn't worked for me beofre so I chose to avoid it, worked perfectly.

  6. #6
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    Gracious!

    Now you can mark your thread with Resolved, you can find it at Thread Tools

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