Results 1 to 2 of 2

Thread: Help with Carousel-like script - Jscheur?

  1. #1
    Join Date
    Dec 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with Carousel-like script - Jscheur?

    Hello All,

    I am having an issue using the sightglass script - http://www.otanistudio.com/swt/sightglass/

    Everything is working, except the js is reading my file as though there were one more "items" than there actually are. When i click next, i am allowed to go one item past my last grouping before the next button is deactivated.

    I have spent hours trying to trouble shoot this to no avail.

    Here is the sightglass script:
    Code:
    var Sightglass = function(sightglass, itemContainer, controllers) {
      
      // Custom events in case you want to do some other cool thing...
      // TODO: Make these events unique to every class instance
      this.scrollComplete = new YAHOO.util.CustomEvent('SIGHTGLASS_SCROLL_COMPLETE');
      this.scrollStart = new YAHOO.util.CustomEvent('SIGHTGLASS_SCROLL_START');
      this.onNext = new YAHOO.util.CustomEvent('SIGHTGLASS_NEXT');
      this.onPrev = new YAHOO.util.CustomEvent('SIGHTGLASS_PREV');
      this.onFirst = new YAHOO.util.CustomEvent('SIGHTGLASS_FIRST');
      this.onLast = new YAHOO.util.CustomEvent('SIGHTGLASS_LAST');
    
      // Watch yer scope
      var that = this;
      
      // private methods and properties
      var _animating = false;
      
      var _autovalue = function(value) {
        if ("auto" === value || "undefined" === typeof value) {
          value = 0;
        }
        return parseInt(value);
      };
      
      var _scrollBy = function() {
        // TODO: Instead, find every position of every Nth element
        //       so that one may scroll there. This prevents possible
        //       clipping annoyances via the sightglass...
        return _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'width')) || 200;
      };
      
      var _boundary = function(side) {    
        var listLeft = _autovalue(YAHOO.util.Dom.getStyle(itemContainer, 'left'));
        var listWidth = 0;
        var items = document.getElementById(itemContainer).childNodes;
        for (var i=0; i < items.length; i++) {
            if (1 === items[i].nodeType) {
              listWidth += _autovalue(items[i].offsetWidth)
              + _autovalue(YAHOO.util.Dom.getStyle(items[i].id, 'padding-right'))
              + _autovalue(YAHOO.util.Dom.getStyle(items[i].id, 'padding-left'));
            }
        }
        var sightglassWidth = _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'width'));
        var sightglassLeft  = _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'left'));
    
        if (side === "left") {
          if (listLeft < sightglassLeft) {
            return true;
          } else {
            return false;
          }
        } else if (side === "right") {
          if (listWidth + listLeft > sightglassWidth) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
          }
      };
      
      var _move = function(properties, time, eventTarget) {
        // properties is a configuration object for YUI animation 
        // make sure anims are complete before starting a whole new one...
        if(!_animating) {
          var _anim = new YAHOO.util.Anim(itemContainer, properties, time, YAHOO.util.Easing.easeOut);
          _anim.onStart.subscribe(
            function(){
              _animating = true;
              that.scrollStart.fire();
            }
          );
          _anim.onComplete.subscribe(_buttonState);
          _anim.onComplete.subscribe(
            function(){ 
              _animating = false; 
              that.scrollComplete.fire();
            }
          );
          _anim.animate();
        }
      };
      
      var _buttonState = function() {
        if(_boundary("left")) {
          YAHOO.util.Dom.setStyle(controllers.buttons.left, 'opacity', '1');
        } else {
          YAHOO.util.Dom.setStyle(controllers.buttons.left, 'opacity', '0.33');
        }
        
        if(_boundary("right")) {
          YAHOO.util.Dom.setStyle(controllers.buttons.right, 'opacity', '1');
        } else {
          YAHOO.util.Dom.setStyle(controllers.buttons.right, 'opacity', '0.33');
        }
      };
    
      if ('undefined' === typeof that._INITIALIZED ) {
    
        Sightglass.prototype.next = function(e) {
          if (_boundary("right")) {
            _move({"left": {by: -1 * _scrollBy()}}, 0.6);
          }
          that.onNext.fire();
        };
        
        Sightglass.prototype.previous = function(e) {
          if (_boundary("left")) {
            _move({"left" : {by: _scrollBy()}}, 0.6);
          }
          that.onPrev.fire();
        };
        
        Sightglass.prototype.first = function(e) {
          if (_boundary("left")) {
            _move({"left" : {to: 0}}, 1.2);
          }
          that.onFirst.fire();
        };
      
        Sightglass.prototype.last = function(e) {
          var items = YAHOO.util.Dom.get(itemContainer).getElementsByTagName('div');
    
          // Calculate where to move the item cluster based on
          // locations of first and last items.
          var lastItemLocation = items[items.length-1].offsetLeft;
          var firstItemLocation = items[0].offsetLeft;
          var sightglassWidth = _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'width'));
    
          if (_boundary("right")) {
            var aProp = {
              "left" : {
                to: Math.ceil(
                  firstItemLocation - lastItemLocation + (0.5 * sightglassWidth)
                 )
               }
            };
            _move(aProp, 1.2);
          }
          that.onLast.fire();
        };    
        that._INITIALIZED = true;
      }
      
    };
    Here is my html:
    Code:
    <div id="product-browser">
       <!--Start Product Browser-->
    
       	<!--Next Button-->
        <div id="buttons-left">
        <div id="previous">
    	</div>
        </div>
    
        <!--Previous Button-->
        <div id="buttons-right">
        <div id="next">
        </div>
        </div>
    
    	<!--Start Product Browser Grid-->
        <div id="sightglass" class="prod-browser-grid">
        	
            <div id="items">
                <!--Product Browser Item 1-->
                <div id="item1" class="prod-browser-ul item">
                        <div class="prod-browser-ttl">
                            <h3 class="track-color">Vertical <br />Cylinder</h3>    
                        </div>
                        <div onclick="window.location.href='productdetail.php?id=1'" class="prod-browser-li">
                            <img src="images/products/T/track_736-cmh_t.png" alt="736CMH" width="128" height="125" /> 
                            <h3 class="track-color">736<span class="size12">CMH Series</span></h3>    
                            <h4 class="track-color">Logic 6 T PAR16 Vertical Mini Cylinder</h4>       
                        </div>
                        <div onclick="window.location.href='productdetail.php?id=2'" class="prod-browser-li">
                            <img src="images/products/T/track_737-cmh_t.png" alt="737CMH" width="128" height="125" />
                            <h3 class="track-color">737<span class="size12">CMH Series</span></h3>    
                            <h4 class="track-color">Logic 6 T PAR20 Vertical Mini Cylinder</h4>           
                        </div>
                <!--End Product Browser Item-->        	
                </div>
                
                 <!--Product Browser Item 2-->
                  
                 <!--Product Browser Item 3-->
    
                 <!--Product Browser Item 4-->
    
    
                
            </div>
            
        <!--End Product Browser Grid-->
        </div>
    
        <!--End Product Browser-->
        </div>
    I see that this is the function that controls the boundaries:
    Code:
    var _boundary = function(side) {    
        var listLeft = _autovalue(YAHOO.util.Dom.getStyle(itemContainer, 'left'));
        var listWidth = 0;
        var items = document.getElementById(itemContainer).childNodes;
        for (var i=0; i < items.length; i++) {
            if (1 === items[i].nodeType) {
              listWidth += _autovalue(items[i].offsetWidth)
              + _autovalue(YAHOO.util.Dom.getStyle(items[i].id, 'padding-right'))
              + _autovalue(YAHOO.util.Dom.getStyle(items[i].id, 'padding-left'));
            }
        }


    Any help here?

    here is an example of my script in action (use the product browser at the bottom):
    www-dot-coreymichaelstudio-dot-com/janmar/productdetail.php?id=1

    Thanks for the help in advance.
    Last edited by santamonica10; 01-22-2008 at 06:28 AM. Reason: Updates

  2. #2
    Join Date
    Dec 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Problem solved.

    I have to change

    var sightglassWidth = _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'width'));

    to

    var sightglassWidth = _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'width')) + 200;

Bookmarks

Posting Permissions

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