.
*
* @private
* @property
* @name element
* @type Element
* @cat Plugins/Em
*/
element: $('
').css({ left: '-100em',
position: 'absolute',
width: '100em' })
.prependTo('body')[0],
/**
* The action to perform when a change in the font size is detected.
*
* @example $.em.action = function() { ... }
* @desc The default action is to trigger a global “emchange” event.
* You probably shouldn’t change this behaviour as other plugins may
* rely on it, but the option is here for completion.
*
* @example $(document).bind('emchange', function(e, cur, prev) {...})
* @desc Any functions triggered on this event are passed the current
* font size, and last known font size as additional parameters.
*
* @private
* @property
* @name action
* @type Function
* @cat Plugins/Em
* @see current
* @see previous
*/
action: function() {
var currentWidth = $.em.element.offsetWidth / 100;
// If the font size has changed since we last checked…
if ( currentWidth != $.em.current ) {
/**
* The previous pixel value of the user agent’s font size. See
* $.em.current for caveats. Will initially be undefined until
* the “emchange” event is triggered.
*
* @example $.em.previous;
* @result 16
*
* @property
* @name previous
* @type Number
* @cat Plugins/Em
* @see current
*/
$.em.previous = $.em.current;
/**
* The current pixel value of the user agent’s font size. As
* with $.em.previous, this value *may* be subject to minor
* browser rounding errors that mean you might not want to
* rely upon it as an absolute value.
*
* @example $.em.current;
* @result 14
*
* @property
* @name current
* @type Number
* @cat Plugins/Em
* @see previous
*/
$.em.current = currentWidth;
$.event.trigger(eventName, [$.em.current, $.em.previous]);
}
}
}, $.em );
/**
* Bind a function to the emchange event of each matched element.
*
* @example $("p").emchange( function() { alert("Hello"); } );
*
* @name emchange
* @type jQuery
* @param Function fn A function to bind to the emchange event.
* @cat Plugins/Em
*/
/**
* Trigger the emchange event of each matched element.
*
* @example $("p").emchange()
*
* @name emchange
* @type jQuery
* @cat Plugins/Em
*/
$.fn[eventName] = function(fn) { return fn ? this.bind(eventName, fn)
: this.trigger(eventName); };
// Store the initial pixel value of the user agent’s font size.
$.em.current = $.em.element.offsetWidth / 100;
/**
* While polling for font-size changes, $.em.iid stores the intervalID in
* case you should want to cancel with clearInterval().
*
* @example window.clearInterval( $.em.iid );
*
* @property
* @name iid
* @type Number
* @cat Plugins/Em
*/
$.em.iid = setInterval( $.em.action, $.em.delay );
});
/***************************************************
Scroller function
To use simply call the function
and give the parameters:
1. item width (or height for vertical scroller).
This number includes padding and margins.
2. Step number (how many items to scroll through
each time). This is 1 by default.
3. Direction (needs to be set to horizontal
or vertical). This is set to horizontal by default.
HTML:
CSS:
Vertical Example:
#vert_scroll { overflow:auto; clear:both; position:relative; }
#vert_scroll #scroller_outer { width:145px; overflow:hidden; position:relative; z-index:200; height:308px; }
#vert_scroll .scroller_item { width:145px; height:142px; padding:6px 0; }
#vert_scroll #button_left { }
#vert_scroll #button_left span a { width: 146px; height: 33px; background:#fff url(images/scroll_sprite_vert.gif) no-repeat top left; display:block; text-decoration:none; }
#vert_scroll #button_left span a:hover { background-position: bottom left; }
#vert_scroll #button_left span.end a { background-position: bottom left; cursor:default; }
#vert_scroll #button_right span a { width: 146px; height: 33px; background:#fff url(images/scroll_sprite_vert.gif) no-repeat top right; display:block; text-decoration:none; }
#vert_scroll #button_right span a:hover { background-position: bottom right; }
#vert_scroll #button_right span.end a { background-position: bottom right; cursor:default; }
#vert_scroll #button_right{ }
#vert_scroll #scroller_in { position: absolute; left: 0; top: 0; width: 145px; height: 2000px;}
Horizontal Exapmle:
#hor_scroll { overflow:auto; width:910px; clear:both; margin-top:15px; position:relative; }
#hor_scroll #scroller_outer { width:856px; overflow:hidden; position:relative; z-index:200; height:210px; float:left; }
#hor_scroll .scroller_item { width:280px; float:left; padding-right:8px; }
#hor_scroll #button_left { float:left; margin-right:14px; padding-top:94px; }
#hor_scroll #button_right span a { width: 13px; height: 19px; background:#000 url(images/arrow_sprite.gif) no-repeat top right; display:block; text-decoration:none; }
#hor_scroll #button_right span a:hover { background-position: bottom right; }
#hor_scroll #button_right span.end a { background:none; cursor:default; }
#hor_scroll #button_left span a { width: 13px; height: 19px; background:#000 url(images/arrow_sprite.gif) no-repeat top left; display:block; text-decoration:none; }
#hor_scroll #button_left span a:hover { background-position: bottom left; }
#hor_scroll #button_left span.end a { background:none; cursor:default; }
#hor_scroll #button_right{ float: right; margin-left:14px; padding-top:94px; }
#hor_scroll #scroller_in { position: absolute; left: 0; top: 0; height: 210px; width: 2000px;}
****************************************************/
// create closure
(function($) {
// Function to control the scrolling
//$.fn.scroller = function($item_width, $step_no, $direction){
$.fn.scroller = function(options){
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.scroller.defaults, options);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
direction = o.direction;
start = o.start;
step_no = o.step_no;
var item_size = 0;
// Initialise direction and get thte size of each item
if(direction == 'vertical'){
direction = 'top';
var height = parseInt($('.scroller_item').css('height'),10);
var padding = parseInt($('.scroller_item').css('padding-top'),10) + parseInt($('.scroller_item').css('padding-bottom'),10);
var margin = parseInt($('.scroller_item').css('margin-top'),10) + parseInt($('.scroller_item').css('margin-bottom'),10);
item_size = height + padding + margin;
} else if(direction == 'horizontal'){
direction = 'left';
if (start=='right'){
direction = 'right';
}
var width = parseInt($('.scroller_item').css('width'),10);
var padding = parseInt($('.scroller_item').css('padding-left'),10) + parseInt($('.scroller_item').css('padding-right'),10);
var margin = parseInt($('.scroller_item').css('margin-left'),10) + parseInt($('.scroller_item').css('margin-right'),10);
item_size = width + padding + margin;
}
// Initialise item width
//var item_width = item_size;
// Initialise step if not given
/*if($step_no == undefined){
$step_no = 1;
}*/
// Initialise the animate css object
var t = {};
t[direction] = 0;
// Turn off left button to start
$('#button_left span').addClass('end');
$('#button_right span').removeClass('end');
// Get the number of items in scroller
var items=$('.scroller_item').length;
// Get width as negative value to check for end of scroller
var width=items * parseInt('-'+item_size, 10);
// Get number of pixels to scroll each time
var step=item_size*step_no;
// Initialise strting position
var pos=0;
// Set width or height of inner scroller
var div_width=items * parseInt(item_size, 10);
if (direction=='top'){
$('#scroller_in').css({'height':div_width});
} else {
$('#scroller_in').css({'width':div_width});
}
// Left Button
$('#button_left').each(function(){
var $this = $(this);
var hd = $('span', $this);
var bt = $('
');
// Deactivate right button if too few items
if (items <= step_no){
$('#button_right span').addClass('end');
}
bt.click(function(){
// Only scroll if there are more items than can be viewed
if (items > step_no){
button = $(this);
// Only do stuff if its not already scrolling
if (!button.hasClass('scrolling')){
// Get current position
pos = parseInt($('#scroller_in').css(direction), 10);
// Get next position
var new_pos = pos+step+'px';
// If next position is past the start then set new position to the start
if (parseInt(new_pos, 10) > 0){
new_pos='0px';
}
// If the new position is different to the current position (ie. not the start) scroll and activate right button for use
if(pos != new_pos){
t[direction] = new_pos;
button.addClass('scrolling');
$('#scroller_in').animate(t,800,function(){
button.removeClass('scrolling');
});
$('#button_right span').removeClass('end');
}
// Check position to change button state
if (new_pos=='0px'){ $('#button_left span').addClass('end'); }
}
}
return false;
});
hd.text('');
bt.prependTo(hd);
});
// Right Button
$('#button_right').each(function(){
var $this = $(this);
var hd = $('span', $this);
var bt = $('
');
bt.click(function(){
// Only scroll if there are more items than can be viewed
if (items > step_no){
button = $(this);
// Only do stuff if its not already scrolling
if (!button.hasClass('scrolling')){
// Get current position
pos = parseInt($('#scroller_in').css(direction), 10);
// Get next position
var new_pos = pos-step+'px';
// Get position of the next press of this button
var next_pos = parseInt(new_pos, 10)-step;
// If next position is past the end then change new position to only go to the end of the last scroller item and not the full step
if (next_pos < width){
var diff=next_pos-width;
new_pos = parseInt(new_pos, 10)-diff+'px';
}
// If the new position is not at the end scroll and activate left button for use
if (parseInt(new_pos, 10) > (width)){
t[direction] = new_pos;
button.addClass('scrolling');
$('#scroller_in').animate(t,800,function(){
button.removeClass('scrolling');
});
$('#button_left span').removeClass('end');
}
// Check position to change button state
new_pos = parseInt(new_pos, 10)-step+'px';
if (parseInt(new_pos, 10)==width){ $('#button_right span').addClass('end'); }
}
}
return false;
});
hd.text('');
bt.prependTo(hd);
});
}
// plugin defaults - added as a property on our plugin function
$.fn.scroller.defaults = {
//item_size: 100,
step_no: 1,
direction: 'horizontal',
start: 'left'
};
// end of closure
})(jQuery);
/* Copyright (c) 2006 Kelvin Luck (kelvin AT kelvinluck DOT com || http://www.kelvinluck.com)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* See http://kelvinluck.com/assets/jquery/jScrollPane/
* $Id$
*/
/**
* Replace the vertical scroll bars on any matched elements with a fancy
* styleable (via CSS) version. With JS disabled the elements will
* gracefully degrade to the browsers own implementation of overflow:auto.
* If the mousewheel plugin has been included on the page then the scrollable areas will also
* respond to the mouse wheel.
*
* @example jQuery(".scroll-pane").jScrollPane();
*
* @name jScrollPane
* @type jQuery
* @param Object settings hash with options, described below.
* scrollbarWidth - The width of the generated scrollbar in pixels
* scrollbarMargin - The amount of space to leave on the side of the scrollbar in pixels
* wheelSpeed - The speed the pane will scroll in response to the mouse wheel in pixels
* showArrows - Whether to display arrows for the user to scroll with
* arrowSize - The height of the arrow buttons if showArrows=true
* animateTo - Whether to animate when calling scrollTo and scrollBy
* dragMinHeight - The minimum height to allow the drag bar to be
* dragMaxHeight - The maximum height to allow the drag bar to be
* animateInterval - The interval in milliseconds to update an animating scrollPane (default 100)
* animateStep - The amount to divide the remaining scroll distance by when animating (default 3)
* maintainPosition- Whether you want the contents of the scroll pane to maintain it's position when you re-initialise it - so it doesn't scroll as you add more content (default true)
* tabIndex - The tabindex for this jScrollPane to control when it is tabbed to when navigating via keyboard (default 0)
* enableKeyboardNavigation - Whether to allow keyboard scrolling of this jScrollPane when it is focused (default true)
* animateToInternalLinks - Whether the move to an internal link (e.g. when it's focused by tabbing or by a hash change in the URL) should be animated or instant (default false)
* scrollbarOnLeft - Display the scrollbar on the left side? (needs stylesheet changes, see examples.html)
* reinitialiseOnImageLoad - Whether the jScrollPane should automatically re-initialise itself when any contained images are loaded (default false)
* @return jQuery
* @cat Plugins/jScrollPane
* @author Kelvin Luck (kelvin AT kelvinluck DOT com || http://www.kelvinluck.com)
*/
(function($) {
$.jScrollPane = {
active : []
};
$.fn.jScrollPane = function(settings)
{
settings = $.extend({}, $.fn.jScrollPane.defaults, settings);
var rf = function() { return false; };
return this.each(
function()
{
var $this = $(this);
// Switch the element's overflow to hidden to ensure we get the size of the element without the scrollbars [http://plugins.jquery.com/node/1208]
$this.css('overflow', 'hidden');
var paneEle = this;
if ($(this).parent().is('.jScrollPaneContainer')) {
var currentScrollPosition = settings.maintainPosition ? $this.position().top : 0;
var $c = $(this).parent();
var paneWidth = $c.innerWidth();
var paneHeight = $c.outerHeight();
var trackHeight = paneHeight;
$('>.jScrollPaneTrack, >.jScrollArrowUp, >.jScrollArrowDown', $c).remove();
$this.css({'top':0});
} else {
var currentScrollPosition = 0;
this.originalPadding = $this.css('paddingTop') + ' ' + $this.css('paddingRight') + ' ' + $this.css('paddingBottom') + ' ' + $this.css('paddingLeft');
this.originalSidePaddingTotal = (parseInt($this.css('paddingLeft')) || 0) + (parseInt($this.css('paddingRight')) || 0);
var paneWidth = $this.innerWidth();
var paneHeight = $this.innerHeight();
var trackHeight = paneHeight;
var $container = $('
')
.attr({'className':'jScrollPaneContainer'})
.css(
{
'height':paneHeight+'px',
'width':paneWidth+'px'
}
);
if (settings.enableKeyboardNavigation) {
$container.attr(
'tabindex',
settings.tabIndex
);
}
$this.wrap($container);
// deal with text size changes (if the jquery.em plugin is included)
// and re-initialise the scrollPane so the track maintains the
// correct size
$(document).bind(
'emchange',
function(e, cur, prev)
{
$this.jScrollPane(settings);
}
);
}
if (settings.reinitialiseOnImageLoad) {
// code inspired by jquery.onImagesLoad: http://plugins.jquery.com/project/onImagesLoad
// except we re-initialise the scroll pane when each image loads so that the scroll pane is always up to size...
// TODO: Do I even need to store it in $.data? Is a local variable here the same since I don't pass the reinitialiseOnImageLoad when I re-initialise?
var $imagesToLoad = $.data(paneEle, 'jScrollPaneImagesToLoad') || $('img', $this);
var loadedImages = [];
if ($imagesToLoad.length) {
$imagesToLoad.each(function(i, val) {
$(this).bind('load readystatechange', function() {
if($.inArray(i, loadedImages) == -1){ //don't double count images
loadedImages.push(val); //keep a record of images we've seen
$imagesToLoad = $.grep($imagesToLoad, function(n, i) {
return n != val;
});
$.data(paneEle, 'jScrollPaneImagesToLoad', $imagesToLoad);
var s2 = $.extend(settings, {reinitialiseOnImageLoad:false});
$this.jScrollPane(s2); // re-initialise
}
}).each(function(i, val) {
if(this.complete || this.complete===undefined) {
//needed for potential cached images
this.src = this.src;
}
});
});
};
}
var p = this.originalSidePaddingTotal;
var realPaneWidth = paneWidth - settings.scrollbarWidth - settings.scrollbarMargin - p;
var cssToApply = {
'height':'auto',
'width': realPaneWidth + 'px'
}
if(settings.scrollbarOnLeft) {
cssToApply.paddingLeft = settings.scrollbarMargin + settings.scrollbarWidth + 'px';
} else {
cssToApply.paddingRight = settings.scrollbarMargin + 'px';
}
$this.css(cssToApply);
var contentHeight = $this.outerHeight();
var percentInView = paneHeight / contentHeight;
if (percentInView < .99) {
var $container = $this.parent();
$container.append(
$('
').attr({'className':'jScrollPaneTrack'}).css({'width':settings.scrollbarWidth+'px'}).append(
$('
').attr({'className':'jScrollPaneDrag'}).css({'width':settings.scrollbarWidth+'px'}).append(
$('
').attr({'className':'jScrollPaneDragTop'}).css({'width':settings.scrollbarWidth+'px'}),
$('
').attr({'className':'jScrollPaneDragBottom'}).css({'width':settings.scrollbarWidth+'px'})
)
)
);
var $track = $('>.jScrollPaneTrack', $container);
var $drag = $('>.jScrollPaneTrack .jScrollPaneDrag', $container);
var currentArrowDirection;
var currentArrowTimerArr = [];// Array is used to store timers since they can stack up when dealing with keyboard events. This ensures all timers are cleaned up in the end, preventing an acceleration bug.
var currentArrowInc;
var whileArrowButtonDown = function()
{
if (currentArrowInc > 4 || currentArrowInc % 4 == 0) {
positionDrag(dragPosition + currentArrowDirection * mouseWheelMultiplier);
}
currentArrowInc++;
};
if (settings.enableKeyboardNavigation) {
$container.bind(
'keydown.jscrollpane',
function(e)
{
switch (e.keyCode) {
case 38: //up
currentArrowDirection = -1;
currentArrowInc = 0;
whileArrowButtonDown();
currentArrowTimerArr[currentArrowTimerArr.length] = setInterval(whileArrowButtonDown, 100);
return false;
case 40: //down
currentArrowDirection = 1;
currentArrowInc = 0;
whileArrowButtonDown();
currentArrowTimerArr[currentArrowTimerArr.length] = setInterval(whileArrowButtonDown, 100);
return false;
case 33: // page up
case 34: // page down
// TODO
return false;
default:
}
}
).bind(
'keyup.jscrollpane',
function(e)
{
if (e.keyCode == 38 || e.keyCode == 40) {
for (var i = 0; i < currentArrowTimerArr.length; i++) {
clearInterval(currentArrowTimerArr[i]);
}
return false;
}
}
);
}
if (settings.showArrows) {
var currentArrowButton;
var currentArrowInterval;
var onArrowMouseUp = function(event)
{
$('html').unbind('mouseup', onArrowMouseUp);
currentArrowButton.removeClass('jScrollActiveArrowButton');
clearInterval(currentArrowInterval);
};
var onArrowMouseDown = function() {
$('html').bind('mouseup', onArrowMouseUp);
currentArrowButton.addClass('jScrollActiveArrowButton');
currentArrowInc = 0;
whileArrowButtonDown();
currentArrowInterval = setInterval(whileArrowButtonDown, 100);
};
$container
.append(
$('
')
.attr({'href':'javascript:;', 'className':'jScrollArrowUp', 'tabindex':-1})
.css({'width':settings.scrollbarWidth+'px'})
.html('Scroll up')
.bind('mousedown', function()
{
currentArrowButton = $(this);
currentArrowDirection = -1;
onArrowMouseDown();
this.blur();
return false;
})
.bind('click', rf),
$('
')
.attr({'href':'javascript:;', 'className':'jScrollArrowDown', 'tabindex':-1})
.css({'width':settings.scrollbarWidth+'px'})
.html('Scroll down')
.bind('mousedown', function()
{
currentArrowButton = $(this);
currentArrowDirection = 1;
onArrowMouseDown();
this.blur();
return false;
})
.bind('click', rf)
);
var $upArrow = $('>.jScrollArrowUp', $container);
var $downArrow = $('>.jScrollArrowDown', $container);
if (settings.arrowSize) {
trackHeight = paneHeight - settings.arrowSize - settings.arrowSize;
$track
.css({'height': trackHeight+'px', top:settings.arrowSize+'px'})
} else {
var topArrowHeight = $upArrow.height();
settings.arrowSize = topArrowHeight;
trackHeight = paneHeight - topArrowHeight - $downArrow.height();
$track
.css({'height': trackHeight+'px', top:topArrowHeight+'px'})
}
}
var $pane = $(this).css({'position':'absolute', 'overflow':'visible'});
var currentOffset;
var maxY;
var mouseWheelMultiplier;
// store this in a seperate variable so we can keep track more accurately than just updating the css property..
var dragPosition = 0;
var dragMiddle = percentInView*paneHeight/2;
// pos function borrowed from tooltip plugin and adapted...
var getPos = function (event, c) {
var p = c == 'X' ? 'Left' : 'Top';
return event['page' + c] || (event['client' + c] + (document.documentElement['scroll' + p] || document.body['scroll' + p])) || 0;
};
var ignoreNativeDrag = function() { return false; };
var initDrag = function()
{
ceaseAnimation();
currentOffset = $drag.offset(false);
currentOffset.top -= dragPosition;
maxY = trackHeight - $drag[0].offsetHeight;
mouseWheelMultiplier = 2 * settings.wheelSpeed * maxY / contentHeight;
};
var onStartDrag = function(event)
{
initDrag();
dragMiddle = getPos(event, 'Y') - dragPosition - currentOffset.top;
$('html').bind('mouseup', onStopDrag).bind('mousemove', updateScroll);
if ($.browser.msie) {
$('html').bind('dragstart', ignoreNativeDrag).bind('selectstart', ignoreNativeDrag);
}
return false;
};
var onStopDrag = function()
{
$('html').unbind('mouseup', onStopDrag).unbind('mousemove', updateScroll);
dragMiddle = percentInView*paneHeight/2;
if ($.browser.msie) {
$('html').unbind('dragstart', ignoreNativeDrag).unbind('selectstart', ignoreNativeDrag);
}
};
var positionDrag = function(destY)
{
destY = destY < 0 ? 0 : (destY > maxY ? maxY : destY);
dragPosition = destY;
$drag.css({'top':destY+'px'});
var p = destY / maxY;
$this.data('jScrollPanePosition', (paneHeight-contentHeight)*-p);
$pane.css({'top':((paneHeight-contentHeight)*p) + 'px'});
$this.trigger('scroll');
if (settings.showArrows) {
$upArrow[destY == 0 ? 'addClass' : 'removeClass']('disabled');
$downArrow[destY == maxY ? 'addClass' : 'removeClass']('disabled');
}
};
var updateScroll = function(e)
{
positionDrag(getPos(e, 'Y') - currentOffset.top - dragMiddle);
};
var dragH = Math.max(Math.min(percentInView*(paneHeight-settings.arrowSize*2), settings.dragMaxHeight), settings.dragMinHeight);
$drag.css(
{'height':dragH+'px'}
).bind('mousedown', onStartDrag);
var trackScrollInterval;
var trackScrollInc;
var trackScrollMousePos;
var doTrackScroll = function()
{
if (trackScrollInc > 8 || trackScrollInc%4==0) {
positionDrag((dragPosition - ((dragPosition - trackScrollMousePos) / 2)));
}
trackScrollInc ++;
};
var onStopTrackClick = function()
{
clearInterval(trackScrollInterval);
$('html').unbind('mouseup', onStopTrackClick).unbind('mousemove', onTrackMouseMove);
};
var onTrackMouseMove = function(event)
{
trackScrollMousePos = getPos(event, 'Y') - currentOffset.top - dragMiddle;
};
var onTrackClick = function(event)
{
initDrag();
onTrackMouseMove(event);
trackScrollInc = 0;
$('html').bind('mouseup', onStopTrackClick).bind('mousemove', onTrackMouseMove);
trackScrollInterval = setInterval(doTrackScroll, 100);
doTrackScroll();
return false;
};
$track.bind('mousedown', onTrackClick);
$container.bind(
'mousewheel',
function (event, delta) {
delta = delta || (event.wheelDelta ? event.wheelDelta / 120 : (event.detail) ?
-event.detail/3 : 0);
initDrag();
ceaseAnimation();
var d = dragPosition;
positionDrag(dragPosition - delta * mouseWheelMultiplier);
var dragOccured = d != dragPosition;
return !dragOccured;
}
);
var _animateToPosition;
var _animateToInterval;
function animateToPosition()
{
var diff = (_animateToPosition - dragPosition) / settings.animateStep;
if (diff > 1 || diff < -1) {
positionDrag(dragPosition + diff);
} else {
positionDrag(_animateToPosition);
ceaseAnimation();
}
}
var ceaseAnimation = function()
{
if (_animateToInterval) {
clearInterval(_animateToInterval);
delete _animateToPosition;
}
};
var scrollTo = function(pos, preventAni)
{
if (typeof pos == "string") {
$e = $(pos, $this);
if (!$e.length) return;
pos = $e.offset().top - $this.offset().top;
}
$container.scrollTop(0);
ceaseAnimation();
var maxScroll = contentHeight - paneHeight;
pos = pos > maxScroll ? maxScroll : pos;
$this.data('jScrollPaneMaxScroll', maxScroll);
var destDragPosition = pos/maxScroll * maxY;
if (preventAni || !settings.animateTo) {
positionDrag(destDragPosition);
} else {
_animateToPosition = destDragPosition;
_animateToInterval = setInterval(animateToPosition, settings.animateInterval);
}
};
$this[0].scrollTo = scrollTo;
$this[0].scrollBy = function(delta)
{
var currentPos = -parseInt($pane.css('top')) || 0;
scrollTo(currentPos + delta);
};
initDrag();
scrollTo(-currentScrollPosition, true);
// Deal with it when the user tabs to a link or form element within this scrollpane
$('*', this).bind(
'focus',
function(event)
{
var $e = $(this);
// loop through parents adding the offset top of any elements that are relatively positioned between
// the focused element and the jScrollPaneContainer so we can get the true distance from the top
// of the focused element to the top of the scrollpane...
var eleTop = 0;
while ($e[0] != $this[0]) {
eleTop += $e.position().top;
$e = $e.offsetParent();
}
var viewportTop = -parseInt($pane.css('top')) || 0;
var maxVisibleEleTop = viewportTop + paneHeight;
var eleInView = eleTop > viewportTop && eleTop < maxVisibleEleTop;
if (!eleInView) {
var destPos = eleTop - settings.scrollbarMargin;
if (eleTop > viewportTop) { // element is below viewport - scroll so it is at bottom.
destPos += $(this).height() + 15 + settings.scrollbarMargin - paneHeight;
}
scrollTo(destPos);
}
}
)
if (location.hash) {
setTimeout(function() {scrollTo(location.hash);}, $.browser.safari ? 100 : 0);
}
// use event delegation to listen for all clicks on links and hijack them if they are links to
// anchors within our content...
$(document).bind(
'click',
function(e)
{
$target = $(e.target);
if ($target.is('a')) {
var h = $target.attr('href');
if (h && h.substr(0, 1) == '#' && h.length > 1) {
setTimeout(function() {scrollTo(h, !settings.animateToInternalLinks);}, $.browser.safari ? 100 : 0);
}
}
}
);
// Deal with dragging and selecting text to make the scrollpane scroll...
function onSelectScrollMouseDown(e)
{
$(document).bind('mousemove.jScrollPaneDragging', onTextSelectionScrollMouseMove);
$(document).bind('mouseup.jScrollPaneDragging', onSelectScrollMouseUp);
}
var textDragDistanceAway;
var textSelectionInterval;
function onTextSelectionInterval()
{
direction = textDragDistanceAway < 0 ? -1 : 1;
$this[0].scrollBy(textDragDistanceAway / 2);
}
function clearTextSelectionInterval()
{
if (textSelectionInterval) {
clearInterval(textSelectionInterval);
textSelectionInterval = undefined;
}
}
function onTextSelectionScrollMouseMove(e)
{
var offset = $this.parent().offset().top;
var maxOffset = offset + paneHeight;
var mouseOffset = getPos(e, 'Y');
textDragDistanceAway = mouseOffset < offset ? mouseOffset - offset : (mouseOffset > maxOffset ? mouseOffset - maxOffset : 0);
if (textDragDistanceAway == 0) {
clearTextSelectionInterval();
} else {
if (!textSelectionInterval) {
textSelectionInterval = setInterval(onTextSelectionInterval, 100);
}
}
}
function onSelectScrollMouseUp(e)
{
$(document)
.unbind('mousemove.jScrollPaneDragging')
.unbind('mouseup.jScrollPaneDragging');
clearTextSelectionInterval();
}
$container.bind('mousedown.jScrollPane', onSelectScrollMouseDown);
$.jScrollPane.active.push($this[0]);
} else {
$this.css(
{
'height':paneHeight+'px',
'width':paneWidth-this.originalSidePaddingTotal+'px',
'padding':this.originalPadding
}
);
$this[0].scrollTo = $this[0].scrollBy = function() {};
// clean up listeners
$this.parent().unbind('mousewheel').unbind('mousedown.jScrollPane').unbind('keydown.jscrollpane').unbind('keyup.jscrollpane');
}
}
)
};
$.fn.jScrollPaneRemove = function()
{
$(this).each(function()
{
$this = $(this);
var $c = $this.parent();
if ($c.is('.jScrollPaneContainer')) {
$this.css(
{
'top':'',
'height':'',
'width':'',
'padding':'',
'overflow':'',
'position':''
}
);
$c.after($this).remove();
}
});
}
$.fn.jScrollPane.defaults = {
scrollbarWidth : 8,
scrollbarMargin : 35,
wheelSpeed : 18,
showArrows : false,
arrowSize : 0,
animateTo : false,
dragMinHeight : 1,
dragMaxHeight : 99999,
animateInterval : 100,
animateStep: 3,
maintainPosition: true,
scrollbarOnLeft: false,
reinitialiseOnImageLoad: false,
tabIndex : 0,
enableKeyboardNavigation: true,
animateToInternalLinks: false
};
// clean up the scrollTo expandos
$(window)
.bind('unload', function() {
var els = $.jScrollPane.active;
for (var i=0; i
");
} else {
$("body").append("");
}
$("#TB_overlay").click(tb_remove);
}
}else{//all others
if(document.getElementById("TB_overlay") === null){
if(mapTB) {
$("body").append("");
} else {
$("body").append("");
}
$("#TB_overlay").click(tb_remove);
}
}
if(tb_detectMacXFF()){
$("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
}else{
$("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
}
if(caption===null){caption="";}
$("body").append("");//add loader to the page
$('#TB_load').show();//show loader
var baseURL;
if(url.indexOf("?")!==-1){ //ff there is a query string involved
baseURL = url.substr(0, url.indexOf("?"));
}else{
baseURL = url;
}
var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
var urlType = baseURL.toLowerCase().match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
TB_PrevCaption = "";
TB_PrevURL = "";
TB_PrevHTML = "";
TB_NextCaption = "";
TB_NextURL = "";
TB_NextHTML = "";
TB_imageCount = "";
TB_FoundURL = false;
if(imageGroup){
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++) {
var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
if (!(TB_TempArray[TB_Counter].href == url)) {
if (TB_FoundURL) {
TB_NextCaption = TB_TempArray[TB_Counter].title;
TB_NextURL = TB_TempArray[TB_Counter].href;
TB_NextHTML = " Next >";
} else {
TB_PrevCaption = TB_TempArray[TB_Counter].title;
TB_PrevURL = TB_TempArray[TB_Counter].href;
TB_PrevHTML = " < Prev";
}
} else {
TB_FoundURL = true;
TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);
}
}
}
imgPreloader = new Image();
imgPreloader.onload = function(){
imgPreloader.onload = null;
// Resizing large images - orginal by Christian Montoya edited by me.
var pagesize = tb_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}
// End Resizing
TB_WIDTH = imageWidth + 30;
TB_HEIGHT = imageHeight + 60;
$("#TB_window").append("!["+caption+"]("+url+")
" + ""+caption+"
" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "