PDA

View Full Version : Help with Carousel-like script - Jscheur?



santamonica10
01-22-2008, 05:34 AM
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:

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:


<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:

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.

santamonica10
01-22-2008, 06:39 AM
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;