Forums

Preeminent

Hey all,
I know that this half has to do with javascript, but I am not sure what is causing my problem. The css or script.
I am trying to use a pretty standard, easy jquery content/image slider into my site.
In my css, I have an image specified as being the slider background and two arrow images for the left and right controls. The problem is that those are not showing up, but the content images do slide in when you blindly search and find the areas that should be the left and right arrows. In other words, you do not see the arrows, but you can find where they should be because the mouse arrow turns into the pointed "link" finger icon when you hover over the area. I hope I explained this good enough. Here is my html:

<div id=\"main\">
    <div id=\"content\">
   
          <div id=\"slideshow\">
              <div id=\"slidesContainer\">
               <div class=\"slide\">
                  <img src=\"scrptlgo.png\"/>
                  </div>
               <div class=\"slide\">
                  <img src=\"autumn.png\"/>
                 </div>
               <div class=\"slide\">
                  <!-- Content for slide 3 goes here. -->
                 </div>
               <div class=\"slide\">
                  <!-- Content for slide 4 goes here. -->
                </div>
  </div>
</div>

</div><!--end content-->
   

          
</div> <!--end Main-->

Here is my CSS:

#main {
   position:relative;
   background: url(\"portfoliomainoutline.png\");
   height:600px;
   width:960px;
   overflow:hidden;
}
   
   #content{
   position:relative;
   background: url(\"portfoliomainbg.jpg\") repeat-x;
   height:580px;
   width:884px;
   margin-left:auto;
   margin-right:auto;
   text-align:center;
   top:10px;
   overflow:hidden;
   }
   
   #slideshow {
   margin:0 auto;
   width:560px;
   height:400px;
   background:url:(\"sliderbg.jpg\")no-repeat 0 0 ;
   position:relative;
   top:180px;
   
}

   
  #slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:400px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels to avoid horizontal scroll */
  height:400px;
}

.control {
  display:block;
  width:16px;
  height:16px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url:(\"arrow_left.png\") no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url:(\"arrow_right.png\") no-repeat 0 0;
}

And here is my script:

<script type=\"text/javascript\" src=\"/jquery-1.3.1.min.js\"></script>
<script type=\"text/javascript\">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id=\"slideInner\"></div>')
    // Float left to display horizontally, readjust .slides width
   .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class=\"control\" id=\"leftControl\">Clicking moves left</span>')
    .append('<span class=\"control\" id=\"rightControl\">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
   currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
   // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
   if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
   // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }   
});
</script>

Can anyone see what might be causing this?

apostrophe

As always, without a live link to work with there's a certain amount of guesswork involved.

Try giving #leftControl and #rightControl a height and width in pixels.

Preeminent

Hmmm, well I tried giving the actual left and right controls width and height and it did not help. When I type in the URLs of the images directly, they do come up. Here is the link to the demo slider that I am trying to use. In his code,there isn't a specified height or width to his arrows. He specifies it under (.control) like I did at first. http://sixrevisions.com/demo/slideshow/final.html

And here is the live link that I am trying this in: http://www.preeminentproductions.com/portfolio.php
Thanks!

apostrophe

Took a little while to track it down when what I should have done was go straight to the validator http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.preeminentproductions.com%2Fportfolio.php

 background:transparent url:(\"arrow_right.png\") no-repeat 0 0;

should be:

 background:transparent url(\"arrow_right.png\") no-repeat 0 0;

etc.

Preeminent

Hmm, well I have been doing the url that way since day one. I have noticed that some do not do it that way and was wondering what the deal is. Unfortunately my work desktop computer just crashed and I have no way to try this just yet. I will post a reply once I am back up and running. Thanks so much for taking the time to look at this for me!

treehouse : what would you like to learn today?

Forums

Problem with Image/Content Slider