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
    Jul 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Jquery coda-slide problem

    Hey guys have a questions about coda-slider (http://plugins.jquery.com/project/Coda-Slider)

    For some reason my 'slide left' button can only be clicked right on the left edge. The rest of the button is just an image and does not get the pointer on mouseover or cause slide left when clicked. I really cant figure out why. If anyone can help id be really greatful.

    Thanks

    Heres the code:
    css:
    Code:
    #centeredcontent {
    width: 990px;
    height: 550px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -500px;
    /* Half the width of the DIV tag which is 50 pixels */
    margin-top: -253px;
    /* Half the height of the DIV tag which is also 50 pixels */
    }
    
    body {
    	margin: 0px 0px 0px 0px;
    	padding: 0;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    html, body {
    	height: 100%;
    }
    
    #wrapper {
        width: 1000px;
        margin: 0 auto;
    }
    
    #intro {
        padding-bottom: 10px;
    }
    
    h2 {
        margin: 0;
        margin-bottom: 14px;
        padding: 0;
    }
    
    #slider {
        width: 990px;
        margin: 0 auto;
        position: relative;
    }
    
    .scroll {
        height: 455px;
        width: 990px;
        overflow: auto;
        overflow-x: hidden;
        position: relative;
        clear: left;
    }
    
    .scrollContainer div.panel {
        padding-left: 100px;
        height: 550px;
        width: 990px;
    }
    
    #shade {
        height: 50px;
    }
    
    ul.navigation {
        list-style: none;
        margin: 0;
        padding: 0;
        padding-bottom: 9px;
    }
    
    ul.navigation li {
        display: inline;
        margin-right: 10px;
    }
    
    ul.navigation a {
    	padding: 10px;
    	color: #FF00FF;
    	text-decoration: none;
    }
    
    ul.navigation a:hover {
    	color: #FFFFFF;
    }
    
    ul.navigation a.selected {
    	color: #FFFFFF;
    }
    
    ul.navigation a:focus {
        outline: none;
    }
    
    .scrollButtons {
        position: absolute;
        top: 150px;
        cursor: pointer;
    }
    
    .scrollButtons.left {
        left: -20px;
    }
    
    .scrollButtons.right {
        right: -20px;
    }
    
    .hide {
        display: none;
    }
    javascript
    Code:
    // when the DOM is ready...
    $(document).ready(function () {
    
    var $panels = $('#slider .scrollContainer > div');
    var $container = $('#slider .scrollContainer');
    
    // if false, we'll float all the panels left and fix the width 
    // of the container
    var horizontal = true;
    
    // float the panels left if we're going horizontal
    if (horizontal) {
      $panels.css({
        'float' : 'left',
        'position' : 'relative' // IE fix to ensure overflow is hidden
      });
      
      // calculate a new width for the container (so it holds all panels)
      $container.css('width', $panels[0].offsetWidth * $panels.length);
    }
    
    // collect the scroll object, at the same time apply the hidden overflow
    // to remove the default scrollbars that will appear
    var $scroll = $('#slider .scroll').css('overflow', 'hidden');
    
    // apply our left + right buttons
    $scroll
      .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
      .after('<img class="scrollButtons right" src="images/scroll_right.png" />');
    
    // handle nav selection
    function selectNav() {
      $(this)
        .parents('ul:first')
          .find('a')
            .removeClass('selected')
          .end()
        .end()
        .addClass('selected');
    }
    
    $('#slider .navigation').find('a').click(selectNav);
    
    // go find the navigation link that has this target and select the nav
    function trigger(data) {
      var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
      selectNav.call(el);
    }
    
    if (window.location.hash) {
      trigger({ id : window.location.hash.substr(1) });
    } else {
      $('ul.navigation a:first').click();
    }
    
    // offset is used to move to *exactly* the right place, since I'm using
    // padding on my example, I need to subtract the amount of padding to
    // the offset.  Try removing this to get a good idea of the effect
    var offset = parseInt((horizontal ? 
      $container.css('paddingTop') : 
      $container.css('paddingLeft')) 
      || 0) * -1;
    
    
    var scrollOptions = {
      target: $scroll, // the element that has the overflow
      
      // can be a selector which will be relative to the target
      items: $panels,
      
      navigation: '.navigation a',
      
      // selectors are NOT relative to document, i.e. make sure they're unique
      prev: 'img.left', 
      next: 'img.right',
      
      // allow the scroll effect to run both directions
      axis: 'xy',
      
      onAfter: trigger, // our final callback
      
      offset: offset,
      
      // duration of the sliding effect
      duration: 500,
      
      // easing - can be used with the easing plugin: 
      // http://gsgd.co.uk/sandbox/jquery/easing/
      easing: 'swing'
    };
    
    // apply serialScroll to the slider - we chose this plugin because it 
    // supports// the indexed next and previous scroll along with hooking 
    // in to our navigation.
    $('#slider').serialScroll(scrollOptions);
    
    // now apply localScroll to hook any other arbitrary links to trigger 
    // the effect
    $.localScroll(scrollOptions);
    
    // finally, if the URL has a hash, move the slider in to position, 
    // setting the duration to 1 because I don't want it to scroll in the
    // very first page load.  We don't always need this, but it ensures
    // the positioning is absolutely spot on when the pages loads.
    scrollOptions.duration = 1;
    $.localScroll.hash(scrollOptions);
    
    });
    Thanks again

    Matt

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    There is probably another div overlaying it. Use the Firefox plugin Web Developer and turn on "outline current element" to see if this is the case.

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey yep u were right thanks. oddly it appears that there is a div overlapping both the left and right scroll buttons but only the left one isnt working, im guessing coz the right div is 'on top', and the left one is 'underneath' this div? is there some way to move the left one on top also?

    thanks for ur help


  •  

    Posting Permissions

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