| Current File : /home/k/a/r/karenpetzb/www/items/category/issues.tar |
7/before.html 0000604 00000011421 15071137203 0007034 0 ustar 00 <!DOCTYPE html>
<html lang="en">
<head>
<!-- Thanks to Rob Lifford ( http://www.lifford.org/ ) for the test case -->
<meta charset="utf-8">
<title>jScrollPane 2 reinit bug?</title>
<style type="text/css">
body, html {
margin: 0;
padding: 20px;
font-family: Verdana, sans-serif;
font-size: 85%;
line-height: 1.5;
}
.float {
float: left;
}
.clear {
clear: both;
}
.scroll-container {
width: 400px;
height: 200px;
overflow: auto;
margin: 0 2em 1.5em 0;
}
.fluid-width {
width: 100%;
}
.padded {
padding: 5px;
}
ul {
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
border-bottom: solid 1px #ccc;
}
li {
margin: 0;
padding: 10px 5px;
border-top: solid 1px #ccc;
}
</style>
<link rel="stylesheet" type="text/css" href="jscrollpane-2b1.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jscrollpane-2b2.js"></script>
<script type="text/javascript">
$(function()
{
var element = $('.scroll-container').jScrollPane();
var api = element.data('jsp');
$('#jsp').click(function() {
elem = $('.scroll-container').jScrollPane();
});
$('#api').click(function() {
api.reinitialise();
});
});
</script>
</head>
<body>
<div class="scroll-container float">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<div class="scroll-container float">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
</ul>
</div>
<div class="scroll-container padded clear">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<div class="scroll-container fluid-width clear">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<p class="clear"><button id="api">reinit via API</button> <button id="jsp">Reinit by re-calling .jScrollPane</button> </p>
<p>In the above testcase: reinitialising jScrollPane (either via the api or simply by re-calling .jScrollPane() on the original element) strips out the width of the div.jspPane and causes a rendering issue: the absolutely-positioned div renders only as wide as its text content. The expected behavior is that it'll fill the available width, as it does on page load after the first call to .jScrollPane().</p>
<p><strong>UPDATE:</strong> this is fixed for scrollable content in v2b2, but when the content is not scrollable there's still undesired rendering on first load.</p>
<p>Additionally, padding calculations might need some tweaks. The third list box here is identical to the first two except for an added 5px of padding all the way around: note how the jspVerticalBar is partially pushed out of view.</p>
</body>
</html> 7/jscrollpane-2b1.css 0000604 00000002617 15071137203 0010323 0 ustar 00 /*
* CSS Styles that are needed by jScrollPane for it to operate correctly.
*
* Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
* may not operate correctly without them.
*/
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #dde;
position: relative;
}
.jspDrag
{
background: #bbd;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
} 7/jscrollpane-2b2.js 0000604 00000072635 15071137203 0010157 0 ustar 00 /*!
* jScrollPane - v2.0.0beta2 - 2010-08-19
* http://jscrollpane.kelvinluck.com/
*
* Copyright (c) 2010 Kelvin Luck
* Dual licensed under the MIT or GPL licenses.
*/
// Script: jScrollPane - cross browser customisable scrollbars
//
// *Version: 2.0.0beta2, Last updated: 2010-08-19*
//
// Project Home - http://jscrollpane.kelvinluck.com/
// GitHub - http://github.com/vitch/jScrollPane
// Source - http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.js
// (Minified) - http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.min.js
//
// About: License
//
// Copyright (c) 2010 Kelvin Luck
// Dual licensed under the MIT or GPL Version 2 licenses.
// http://jscrollpane.kelvinluck.com/MIT-LICENSE.txt
// http://jscrollpane.kelvinluck.com/GPL-LICENSE.txt
//
// About: Examples
//
// All examples and demos are available through the jScrollPane example site at:
// http://jscrollpane.kelvinluck.com/
//
// About: Support and Testing
//
// This plugin is tested on the browsers below and has been found to work reliably on them. If you run
// into a problem on one of the supported browsers then please visit the support section on the jScrollPane
// website (http://jscrollpane.kelvinluck.com/) for more information on getting support. You are also
// welcome to fork the project on GitHub if you can contribute a fix for a given issue.
//
// jQuery Versions - 1.4.2
// Browsers Tested - Firefox 3.6.8, Safari 5, Opera 10.6, Chrome 5.0, IE 6, 7, 8
//
// About: Release History
//
// 2.0.0beta2 - (2010-08-19) Bug fixes
// 2.0.0beta1 - (2010-08-17) Rewrite to follow modern best practices and enable horizontal scrolling, initially hidden
// elements and dynamically sized elements.
// 1.x - (2006-12-31 - 2010-07-31) Initial version, hosted at googlecode, deprecated
(function($,window,undefined){
$.fn.jScrollPane = function(settings)
{
// JScrollPane "class" - public methods are available through $('selector').data('jsp')
function JScrollPane(elem, s)
{
var settings, jsp = this, pane, paneWidth, paneHeight, container, contentWidth, contentHeight,
percentInViewH, percentInViewV, isScrollableV, isScrollableH, verticalDrag, dragMaxY,
verticalDragPosition, horizontalDrag, dragMaxX, horizontalDragPosition,
verticalBar, verticalTrack, scrollbarWidth, verticalTrackHeight, verticalDragHeight, arrowUp, arrowDown,
horizontalBar, horizontalTrack, horizontalTrackWidth, horizontalDragWidth, arrowLeft, arrowRight,
reinitialiseInterval, originalPadding, originalPaddingTotalWidth, previousPaneWidth;
originalPadding = elem.css('paddingTop') + ' ' +
elem.css('paddingRight') + ' ' +
elem.css('paddingBottom') + ' ' +
elem.css('paddingLeft');
originalPaddingTotalWidth = (parseInt(elem.css('paddingLeft')) || 0) +
(parseInt(elem.css('paddingRight')) || 0);
initialise(s);
function initialise(s)
{
var clonedElem, tempWrapper, /*firstChild, lastChild, */isMaintainingPositon, lastContentX, lastContentY,
hasContainingSpaceChanged;
settings = s;
if (pane == undefined) {
elem.css(
{
'overflow': 'hidden',
'padding': 0
}
);
// TODO: Deal with where width/ height is 0 as it probably means the element is hidden and we should
// come back to it later and check once it is unhidden...
paneWidth = elem.innerWidth() + originalPaddingTotalWidth;
paneHeight = elem.innerHeight();
pane = $('<div class="jspPane" />').wrap(
$('<div class="jspContainer" />')
.css({
'width': paneWidth + 'px',
'height': paneHeight + 'px'
}
)
);
elem.wrapInner(pane.parent());
// Need to get the vars after being added to the document, otherwise they reference weird
// disconnected orphan elements...
container = elem.find('>.jspContainer');
pane = container.find('>.jspPane');
pane.css('padding', originalPadding);
/*
// Move any margins from the first and last children up to the container so they can still
// collapse with neighbouring elements as they would before jScrollPane
firstChild = pane.find(':first-child');
lastChild = pane.find(':last-child');
elem.css(
{
'margin-top': firstChild.css('margin-top'),
'margin-bottom': lastChild.css('margin-bottom')
}
);
firstChild.css('margin-top', 0);
lastChild.css('margin-bottom', 0);
*/
} else {
hasContainingSpaceChanged = elem.outerWidth() != paneWidth || elem.outerHeight() != paneHeight;
if (hasContainingSpaceChanged) {
paneWidth = elem.innerWidth();
paneHeight = elem.innerHeight();
container.css({
'width': paneWidth + 'px',
'height': paneHeight + 'px'
});
}
previousPaneWidth = pane.innerWidth();
pane.css('width', null);
if (!hasContainingSpaceChanged && pane.outerWidth() == contentWidth && pane.outerHeight() == contentHeight) {
// Nothing has changed since we last initialised
if (isScrollableH || isScrollableV) { // If we had already set a width then re-set it
pane.css('width', previousPaneWidth + 'px');
}
// Then abort...
return;
}
container.find('>.jspVerticalBar,>.jspHorizontalBar').remove().end();
}
// Unfortunately it isn't that easy to find out the width of the element as it will always report the
// width as allowed by its container, regardless of overflow settings.
// A cunning workaround is to clone the element, set its position to absolute and place it in a narrow
// container. Now it will push outwards to its maxium real width...
clonedElem = pane.clone().css('position', 'absolute');
tempWrapper = $('<div style="width:1px; position: relative;" />').append(clonedElem);
$('body').append(tempWrapper);
contentWidth = Math.max(pane.outerWidth(), clonedElem.outerWidth());
tempWrapper.remove();
contentHeight = pane.outerHeight();
percentInViewH = contentWidth / paneWidth;
percentInViewV = contentHeight / paneHeight;
isScrollableV = percentInViewV > 1;
isScrollableH = percentInViewH > 1;
//console.log(paneWidth, paneHeight, contentWidth, contentHeight, percentInViewH, percentInViewV, isScrollableH, isScrollableV);
if (!(isScrollableH || isScrollableV)) {
elem.removeClass('jspScrollable');
pane.css('top', 0);
removeMousewheel();
removeFocusHandler();
unhijackInternalLinks();
} else {
elem.addClass('jspScrollable');
isMaintainingPositon = settings.maintainPosition && (verticalDragPosition || horizontalDragPosition);
if (isMaintainingPositon) {
lastContentX = contentPositionX();
lastContentY = contentPositionY();
}
initialiseVerticalScroll();
initialiseHorizontalScroll();
resizeScrollbars();
if (isMaintainingPositon) {
scrollToX(lastContentX);
scrollToY(lastContentY);
}
initFocusHandler();
observeHash();
if (settings.hijackInternalLinks) {
hijackInternalLinks();
}
}
if (settings.autoReinitialise && !reinitialiseInterval) {
reinitialiseInterval = setInterval(
function()
{
initialise(settings);
},
settings.autoReinitialiseDelay
);
} else if (!settings.autoReinitialise && reinitialiseInterval) {
clearInterval(reinitialiseInterval)
}
}
function initialiseVerticalScroll()
{
if (isScrollableV) {
container.append(
$('<div class="jspVerticalBar" />').append(
$('<div class="jspCap jspCapTop" />'),
$('<div class="jspTrack" />').append(
$('<div class="jspDrag" />').append(
$('<div class="jspDragTop" />'),
$('<div class="jspDragBottom" />')
)
),
$('<div class="jspCap jspCapBottom" />')
)
);
verticalBar = container.find('>.jspVerticalBar');
verticalTrack = verticalBar.find('>.jspTrack');
verticalDrag = verticalTrack.find('>.jspDrag');
if (settings.showArrows) {
arrowUp = $('<a href="#" class="jspArrow jspArrowUp">Scroll up</a>').bind(
'mousedown.jsp', getArrowScroll(0, -1)
).bind('click.jsp', nil);
arrowDown = $('<a href="#" class="jspArrow jspArrowDown">Scroll down</a>').bind(
'mousedown.jsp', getArrowScroll(0, 1)
).bind('click.jsp', nil);
if (settings.arrowScrollOnHover) {
arrowUp.bind('mouseover.jsp', getArrowScroll(0, -1, arrowUp));
arrowDown.bind('mouseover.jsp', getArrowScroll(0, 1, arrowDown));
}
appendArrows(verticalTrack, settings.verticalArrowPositions, arrowUp, arrowDown);
}
verticalTrackHeight = paneHeight;
container.find('>.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow').each(
function()
{
verticalTrackHeight -= $(this).outerHeight();
}
);
verticalDrag.hover(
function()
{
verticalDrag.addClass('jspHover');
},
function()
{
verticalDrag.removeClass('jspHover');
}
).bind(
'mousedown.jsp',
function(e)
{
// Stop IE from allowing text selection
$('html').bind('dragstart.jsp selectstart.jsp', function() { return false; });
verticalDrag.addClass('jspActive');
var startY = e.pageY - verticalDrag.position().top;
$('html').bind(
'mousemove.jsp',
function(e)
{
positionDragY(e.pageY - startY, false);
}
).bind('mouseup.jsp mouseleave.jsp', cancelDrag);
return false;
}
);
sizeVerticalScrollbar();
updateVerticalArrows();
initMousewheel();
} else {
// no vertical scroll
removeMousewheel();
}
}
function sizeVerticalScrollbar()
{
verticalTrack.height(verticalTrackHeight + 'px');
verticalDragPosition = 0;
scrollbarWidth = settings.verticalGutter + verticalTrack.outerWidth();
// Make the pane thinner to allow for the vertical scrollbar
pane.width(paneWidth - scrollbarWidth - originalPaddingTotalWidth);
// Add margin to the left of the pane if scrollbars are on that side (to position
// the scrollbar on the left or right set it's left or right property in CSS)
if (verticalBar.position().left == 0) {
pane.css('margin-left', scrollbarWidth + 'px');
}
}
function initialiseHorizontalScroll()
{
if (isScrollableH) {
container.append(
$('<div class="jspHorizontalBar" />').append(
$('<div class="jspCap jspCapLeft" />'),
$('<div class="jspTrack" />').append(
$('<div class="jspDrag" />').append(
$('<div class="jspDragLeft" />'),
$('<div class="jspDragRight" />')
)
),
$('<div class="jspCap jspCapRight" />')
)
);
horizontalBar = container.find('>.jspHorizontalBar');
horizontalTrack = horizontalBar.find('>.jspTrack');
horizontalDrag = horizontalTrack.find('>.jspDrag');
if (settings.showArrows) {
arrowLeft = $('<a href="#" class="jspArrow jspArrowLeft">Scroll left</a>').bind(
'mousedown.jsp', getArrowScroll(-1, 0)
).bind('click.jsp', nil);
arrowRight = $('<a href="#" class="jspArrow jspArrowRight">Scroll right</a>').bind(
'mousedown.jsp', getArrowScroll(1, 0)
).bind('click.jsp', nil);
if (settings.arrowScrollOnHover) {
arrowLeft.bind('mouseover.jsp', getArrowScroll(-1, 0, arrowLeft));
arrowRight.bind('mouseover.jsp', getArrowScroll(1, 0, arrowRight));
}
appendArrows(horizontalTrack, settings.horizontalArrowPositions, arrowLeft, arrowRight);
}
horizontalDrag.hover(
function()
{
horizontalDrag.addClass('jspHover');
},
function()
{
horizontalDrag.removeClass('jspHover');
}
).bind(
'mousedown.jsp',
function(e)
{
// Stop IE from allowing text selection
$('html').bind('dragstart.jsp selectstart.jsp', function() { return false; });
horizontalDrag.addClass('jspActive');
var startX = e.pageX - horizontalDrag.position().left;
$('html').bind(
'mousemove.jsp',
function(e)
{
positionDragX(e.pageX - startX, false);
}
).bind('mouseup.jsp mouseleave.jsp', cancelDrag);
return false;
}
);
horizontalTrackWidth = container.innerWidth();
sizeHorizontalScrollbar();
updateHorizontalArrows();
} else {
// no horizontal scroll
}
}
function sizeHorizontalScrollbar()
{
container.find('>.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow').each(
function()
{
horizontalTrackWidth -= $(this).outerWidth();
}
);
horizontalTrack.width(horizontalTrackWidth + 'px');
horizontalDragPosition = 0;
}
function resizeScrollbars()
{
if (isScrollableH && isScrollableV) {
var horizontalTrackHeight = horizontalTrack.outerHeight(),
verticalTrackWidth = verticalTrack.outerWidth();
verticalTrackHeight -= horizontalTrackHeight;
$(horizontalBar).find('>.jspCap:visible,>.jspArrow').each(
function()
{
horizontalTrackWidth += $(this).outerWidth();
}
);
horizontalTrackWidth -= verticalTrackWidth;
paneHeight -= verticalTrackWidth;
paneWidth -= horizontalTrackHeight;
horizontalTrack.parent().append(
$('<div class="jspCorner" />').css('width', horizontalTrackHeight + 'px')
);
sizeVerticalScrollbar();
sizeHorizontalScrollbar();
}
// reflow content
if (isScrollableH) {
pane.width((container.outerWidth() - originalPaddingTotalWidth) + 'px');
}
contentHeight = pane.outerHeight();
percentInViewV = contentHeight / paneHeight;
if (isScrollableH) {
horizontalDragWidth = 1 / percentInViewH * horizontalTrackWidth;
if (horizontalDragWidth > settings.horizontalDragMaxWidth) {
horizontalDragWidth = settings.horizontalDragMaxWidth;
} else if (horizontalDragWidth < settings.horizontalDragMinWidth) {
horizontalDragWidth = settings.horizontalDragMinWidth;
}
horizontalDrag.width(horizontalDragWidth + 'px');
dragMaxX = horizontalTrackWidth - horizontalDragWidth;
}
if (isScrollableV) {
verticalDragHeight = 1 / percentInViewV * verticalTrackHeight;
if (verticalDragHeight > settings.verticalDragMaxHeight) {
verticalDragHeight = settings.verticalDragMaxHeight;
} else if (verticalDragHeight < settings.verticalDragMinHeight) {
verticalDragHeight = settings.verticalDragMinHeight;
}
verticalDrag.height(verticalDragHeight + 'px');
dragMaxY = verticalTrackHeight - verticalDragHeight;
}
}
function appendArrows(ele, p, a1, a2)
{
var p1 = "before", p2 = "after", aTemp;
// Sniff for mac... Is there a better way to determine whether the arrows would naturally appear
// at the top or the bottom of the bar?
if (p == "os") {
p = /Mac/.test(navigator.platform) ? "after" : "split";
}
if (p == p1) {
p2 = p;
} else if (p == p2) {
p1 = p;
aTemp = a1;
a1 = a2;
a2 = aTemp;
}
ele[p1](a1)[p2](a2);
}
function getArrowScroll(dirX, dirY, ele) {
return function()
{
arrowScroll(dirX, dirY, this, ele);
this.blur();
return false;
}
}
function arrowScroll(dirX, dirY, arrow, ele)
{
arrow = $(arrow).addClass('jspActive');
var eve, doScroll = function()
{
if (dirX != 0) {
positionDragX(horizontalDragPosition + dirX * settings.arrowButtonSpeed, false);
}
if (dirY != 0) {
positionDragY(verticalDragPosition + dirY * settings.arrowButtonSpeed, false);
}
},
scrollInt = setInterval(doScroll, settings.arrowRepeatFreq);
doScroll();
eve = ele == undefined ? 'mouseup.jsp' : 'mouseout.jsp';
ele = ele || $('html');
ele.bind(
eve,
function()
{
arrow.removeClass('jspActive');
clearInterval(scrollInt);
ele.unbind(eve);
}
);
}
function cancelDrag()
{
$('html').unbind('dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp');
verticalDrag && verticalDrag.removeClass('jspActive');
horizontalDrag && horizontalDrag.removeClass('jspActive');
}
function positionDragY(destY, animate)
{
if (!isScrollableV) {
return;
}
if (destY < 0) {
destY = 0;
} else if (destY > dragMaxY) {
destY = dragMaxY;
}
// can't just check if(animate) because false is a valid value that could be passed in...
if (animate == undefined) {
animate = settings.animateScroll;
}
if (animate) {
jsp.animate(verticalDrag, 'top', destY, _positionDragY);
} else {
verticalDrag.css('top', destY);
_positionDragY(destY);
}
}
function _positionDragY(destY)
{
if (destY == undefined) {
destY = verticalDrag.position().top;
}
container.scrollTop(0);
verticalDragPosition = destY;
var isAtTop = verticalDragPosition == 0,
isAtBottom = verticalDragPosition == dragMaxY,
percentScrolled = destY/ dragMaxY,
destTop = -percentScrolled * (contentHeight - paneHeight);
updateVerticalArrows(isAtTop, isAtBottom);
pane.css('top', destTop);
elem.trigger('jsp-scroll-y', [-destTop, isAtTop, isAtBottom]);
}
function positionDragX(destX, animate)
{
if (!isScrollableH) {
return;
}
if (destX < 0) {
destX = 0;
} else if (destX > dragMaxX) {
destX = dragMaxX;
}
if (animate == undefined) {
animate = settings.animateScroll;
}
if (animate) {
jsp.animate(horizontalDrag, 'left', destX, _positionDragX);
} else {
horizontalDrag.css('left', destX);
_positionDragX(destX);
}
}
function _positionDragX(destX)
{
if (destX == undefined) {
destX = horizontalDrag.position().left;
}
container.scrollTop(0);
horizontalDragPosition = destX;
var isAtLeft = horizontalDragPosition == 0,
isAtRight = horizontalDragPosition == dragMaxY,
percentScrolled = destX / dragMaxX,
destLeft = -percentScrolled * (contentWidth - paneWidth);
updateHorizontalArrows(isAtLeft, isAtRight);
pane.css('left', destLeft);
elem.trigger('jsp-scroll-x', [-destLeft, isAtLeft, isAtRight]);
}
function updateVerticalArrows(isAtTop, isAtBottom)
{
if (settings.showArrows) {
arrowUp[isAtTop ? 'addClass' : 'removeClass']('jspDisabled');
arrowDown[isAtBottom ? 'addClass' : 'removeClass']('jspDisabled');
}
}
function updateHorizontalArrows(isAtLeft, isAtRight)
{
if (settings.showArrows) {
arrowLeft[isAtLeft ? 'addClass' : 'removeClass']('jspDisabled');
arrowRight[isAtRight ? 'addClass' : 'removeClass']('jspDisabled');
}
}
function scrollToY(destY, animate)
{
var percentScrolled = destY / (contentHeight - paneHeight);
positionDragY(percentScrolled * dragMaxY, animate);
}
function scrollToX(destX, animate)
{
var percentScrolled = destX / (contentWidth - paneWidth);
positionDragX(percentScrolled * dragMaxX, animate);
}
function scrollToElement(ele, stickToTop, animate)
{
var e, eleHeight, eleTop = 0, viewportTop, maxVisibleEleTop, destY;
// Legal hash values aren't necessarily legal jQuery selectors so we need to catch any
// errors from the lookup...
try {
e = $(ele);
} catch (err) {
return;
}
eleHeight = e.outerHeight();
container.scrollTop(0);
// loop through parents adding the offset top of any elements that are relatively positioned between
// the focused element and the jspPane so we can get the true distance from the top
// of the focused element to the top of the scrollpane...
while (!e.is('.jspPane')) {
eleTop += e.position().top;
e = e.offsetParent();
if (/^body|html$/i.test(e[0].nodeName)) {
// we ended up too high in the document structure. Quit!
return;
}
}
viewportTop = contentPositionY();
maxVisibleEleTop = viewportTop + paneHeight;
if (eleTop < viewportTop || stickToTop) { // element is above viewport
destY = eleTop - settings.verticalGutter;
} else if (eleTop + eleHeight > maxVisibleEleTop) { // element is below viewport
destY = eleTop - paneHeight + eleHeight + settings.verticalGutter;
}
if (destY) {
scrollToY(destY, animate);
}
// TODO: Implement automatic horizontal scrolling?
}
function contentPositionX()
{
return -pane.position().left;
}
function contentPositionY()
{
return -pane.position().top;
}
function initMousewheel()
{
container.unbind('mousewheel.jsp').bind(
'mousewheel.jsp',
function (event, delta) {
var d = verticalDragPosition;
positionDragY(verticalDragPosition - delta * settings.mouseWheelSpeed, false);
// return true if there was no movement so rest of screen can scroll
return d == verticalDragPosition;
}
);
}
function removeMousewheel()
{
container.unbind('mousewheel.jsp');
}
function nil()
{
return false;
}
function initFocusHandler()
{
pane.find(':input,a').bind(
'focus.jsp',
function()
{
scrollToElement(this, false);
}
);
}
function removeFocusHandler()
{
pane.find(':input,a').unbind('focus.jsp')
}
function observeHash()
{
if (location.hash && location.hash.length > 1) {
var e, retryInt;
try {
e = $(location.hash);
} catch (err) {
return;
}
if (e.length && pane.find(e)) {
// nasty workaround but it appears to take a little while before the hash has done its thing
// to the rendered page so we just wait until the container's scrollTop has been messed up.
if (container.scrollTop() == 0) {
retryInt = setInterval(
function()
{
if (container.scrollTop() > 0) {
scrollToElement(location.hash, true);
$(document).scrollTop(container.position().top);
clearInterval(retryInt);
}
},
50
)
} else {
scrollToElement(location.hash, true);
$(document).scrollTop(container.position().top);
}
}
}
}
function unhijackInternalLinks()
{
$('a.jspHijack').unbind('click.jsp-hijack').removeClass('jspHijack');
}
function hijackInternalLinks()
{
unhijackInternalLinks();
$('a[href^=#]').addClass('jspHijack').bind(
'click.jsp-hijack',
function()
{
var uriParts = this.href.split('#'), hash;
if (uriParts.length > 1) {
hash = uriParts[1];
if (hash.length > 0 && pane.find('#' + hash).length > 0) {
scrollToElement('#' + hash, true);
// Need to return false otherwise things mess up... Would be nice to maybe also scroll
// the window to the top of the scrollpane?
return false;
}
}
}
)
}
// Public API
$.extend(
jsp,
{
// Reinitialises the scroll pane (if it's internal dimensions have changed since the last time it
// was initialised). The settings object which is passed in will override any settings from the
// previous time it was initialised - if you don't pass any settings then the ones from the previous
// initialisation will be used.
reinitialise: function(s)
{
s = $.extend({}, s, settings);
initialise(s);
},
// Scrolls the specified element (a jQuery object, DOM node or jQuery selector string) into view so
// that it can be seen within the viewport. If stickToTop is true then the element will appear at
// the top of the viewport, if it is false then the viewport will scroll as little as possible to
// show the element. You can also specify if you want animation to occur. If you don't provide this
// argument then the animateScroll value from the settings object is used instead.
scrollToElement: function(ele, stickToTop, animate)
{
scrollToElement(ele, stickToTop, animate);
},
// Scrolls the pane so that the specified co-ordinates within the content are at the top left
// of the viewport. animate is optional and if not passed then the value of animateScroll from
// the settings object this jScrollPane was initialised with is used.
scrollTo: function(destX, destY, animate)
{
scrollToX(destX, animate);
scrollToY(destY, animate);
},
// Scrolls the pane so that the specified co-ordinate within the content is at the left of the
// viewport. animate is optional and if not passed then the value of animateScroll from the settings
// object this jScrollPane was initialised with is used.
scrollToX: function(destX, animate)
{
scrollToX(destX, animate);
},
// Scrolls the pane so that the specified co-ordinate within the content is at the top of the
// viewport. animate is optional and if not passed then the value of animateScroll from the settings
// object this jScrollPane was initialised with is used.
scrollToY: function(destY, animate)
{
scrollToY(destY, animate);
},
// Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
// the value of animateScroll from the settings object this jScrollPane was initialised with is used.
scrollBy: function(deltaX, deltaY, animate)
{
jsp.scrollByX(deltaX, animate);
jsp.scrollByY(deltaY, animate);
},
// Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
// the value of animateScroll from the settings object this jScrollPane was initialised with is used.
scrollByX: function(deltaX, animate)
{
var destX = contentPositionX() + deltaX,
percentScrolled = destX / (contentWidth - paneWidth);
positionDragX(percentScrolled * dragMaxX, animate);
},
// Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
// the value of animateScroll from the settings object this jScrollPane was initialised with is used.
scrollByY: function(deltaY, animate)
{
var destY = contentPositionY() + deltaY,
percentScrolled = destY / (contentHeight - paneHeight);
positionDragY(percentScrolled * dragMaxY, animate);
},
// This method is called when jScrollPane is trying to animate to a new position. You can override
// it if you want to provide advanced animation functionality. It is passed the following arguments:
// * ele - the element whose position is being animated
// * prop - the property that is being animated
// * value - the value it's being animated to
// * stepCallback - a function that you must execute each time you update the value of the property
// You can use the default implementation (below) as a starting point for your own implementation.
animate: function(ele, prop, value, stepCallback)
{
var params = {};
params[prop] = value;
ele.animate(
params,
{
'duration' : settings.animateDuration,
'ease' : settings.animateEase,
'queue' : false,
'step' : stepCallback
}
);
},
// Returns the current x position of the viewport with regards to the content pane.
getContentPositionX: function()
{
return contentPositionX();
},
// Returns the current y position of the viewport with regards to the content pane.
getContentPositionY: function()
{
return contentPositionY();
},
// Gets a reference to the content pane. It is important that you use this method if you want to
// edit the content of your jScrollPane as if you access the element directly then you may have some
// problems (as your original element has had additional elements for the scrollbars etc added into
// it).
getContentPane: function()
{
return pane;
},
// Scrolls this jScrollPane down as far as it can currently scroll. If animate isn't passed then the
// animateScroll value from settings is used instead.
scrollToBottom: function(animate)
{
positionDragY(dragMaxY, animate);
},
// Hijacks the links on the page which link to content inside the scrollpane. If you have changed
// the content of your page (e.g. via AJAX) and want to make sure any new anchor links to the
// contents of your scroll pane will work then call this function.
hijackInternalLinks: function()
{
hijackInternalLinks();
}
}
);
}
// Pluginifying code...
settings = $.extend({}, $.fn.jScrollPane.defaults, settings);
var ret;
this.each(
function()
{
var elem = $(this), jspApi = elem.data('jsp');
if (jspApi) {
jspApi.reinitialise(settings);
} else {
jspApi = new JScrollPane(elem, settings);
elem.data('jsp', jspApi);
}
ret = ret ? ret.add(elem) : elem;
}
)
return ret;
};
$.fn.jScrollPane.defaults = {
'showArrows' : false,
'maintainPosition' : true,
'autoReinitialise' : false,
'autoReinitialiseDelay' : 500,
'verticalDragMinHeight' : 0,
'verticalDragMaxHeight' : 99999,
'horizontalDragMinWidth' : 0,
'horizontalDragMaxWidth' : 99999,
'animateScroll' : false,
'animateDuration' : 300,
'animateEase' : 'linear',
'hijackInternalLinks' : false,
'verticalGutter' : 4,
'horizontalGutter' : 4,
'mouseWheelSpeed' : 10,
'arrowButtonSpeed' : 10,
'arrowRepeatFreq' : 100,
'arrowScrollOnHover' : false,
'verticalArrowPositions' : 'split',
'horizontalArrowPositions' : 'split'
};
})(jQuery,this);
7/native.html 0000604 00000010562 15071137203 0007065 0 ustar 00 <!DOCTYPE html>
<html lang="en">
<head>
<!-- Thanks to Rob Lifford ( http://www.lifford.org/ ) for the test case -->
<meta charset="utf-8">
<title>jScrollPane 2 reinit bug?</title>
<style type="text/css">
body, html {
margin: 0;
padding: 20px;
font-family: Verdana, sans-serif;
font-size: 85%;
line-height: 1.5;
}
.float {
float: left;
}
.clear {
clear: both;
}
.scroll-container {
width: 400px;
height: 200px;
overflow: auto;
margin: 0 2em 1.5em 0;
}
.fluid-width {
width: 100%;
}
.padded {
padding: 5px;
}
ul {
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
border-bottom: solid 1px #ccc;
}
li {
margin: 0;
padding: 10px 5px;
border-top: solid 1px #ccc;
}
</style>
<link rel="stylesheet" type="text/css" href="jscrollpane-2b1.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<div class="scroll-container float">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<div class="scroll-container float">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
</ul>
</div>
<div class="scroll-container padded clear">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<div class="scroll-container fluid-width clear">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<p class="clear"><button id="api">reinit via API</button> <button id="jsp">Reinit by re-calling .jScrollPane</button> </p>
<p>In the above testcase: reinitialising jScrollPane (either via the api or simply by re-calling .jScrollPane() on the original element) strips out the width of the div.jspPane and causes a rendering issue: the absolutely-positioned div renders only as wide as its text content. The expected behavior is that it'll fill the available width, as it does on page load after the first call to .jScrollPane().</p>
<p><strong>UPDATE:</strong> this is fixed for scrollable content in v2b2, but when the content is not scrollable there's still undesired rendering on first load.</p>
<p>Additionally, padding calculations might need some tweaks. The third list box here is identical to the first two except for an added 5px of padding all the way around: note how the jspVerticalBar is partially pushed out of view.</p>
</body>
</html> 7/index.html 0000604 00000003723 15071137203 0006707 0 ustar 00 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jScrollPane - issue 7</title>
<!-- styles specific to demo site -->
<link type="text/css" href="../../style/demo.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- scripts specific to this demo site -->
<script type="text/javascript" src="../../script/demo.js"></script>
</head>
<body>
<div id="top-nav">
<img src="../../image/logo.png" width="196" height="69" alt="jScrollPane">
<ul>
<li><a href="../../index.html">Home</a></li>
<li><a href="../../index.html#examples">Examples</a></li>
<li><a href="../../index.html#themes">Themes</a></li>
<li><a href="../../index.html#usage">How to use</a></li>
<li><a href="../../faqs.html">FAQs</a></li>
<li><a href="../../known_issues.html">Known issues</a></li>
<li><a href="../../index.html#support">Support</a></li>
<li><a href="../../index.html#download">Download</a></li>
</ul>
</div>
<div id="container">
<h1>jScrollPane - issue 7</h1>
<p>
This page demonstrates the bug described in <a href="http://github.com/vitch/jScrollPane/issues#issue/7">
issue 7</a> as reported (with nice striped down test cases) by <a href="http://rob.lifford.org/">Rob
Lifford</a>.
</p>
<ul class="link-list">
<li>
<a href="before.html">Before</a> - showing the bug as it appears in the version of jScrollPane which
was current when it was reported.
</li>
<li>
<a href="native.html">Native</a> - showing how the page looks with native scrollbars (i.e. if
jScrollPane isn't initialised).
</li>
<li>
<a href="after.html">After</a> - showing the page which was displaying the bug with the latest
version of jScrollPane.
</li>
</ul>
</div>
</body>
</html> 7/after.html 0000604 00000011456 15071137203 0006703 0 ustar 00 <!DOCTYPE html>
<html lang="en">
<head>
<!-- Thanks to Rob Lifford ( http://www.lifford.org/ ) for the test case -->
<meta charset="utf-8">
<title>jScrollPane 2 reinit bug?</title>
<style type="text/css">
body, html {
margin: 0;
padding: 20px;
font-family: Verdana, sans-serif;
font-size: 85%;
line-height: 1.5;
}
.float {
float: left;
}
.clear {
clear: both;
}
.scroll-container {
width: 400px;
height: 200px;
overflow: auto;
margin: 0 2em 1.5em 0;
}
.fluid-width {
width: 100%;
}
.padded {
padding: 5px;
}
ul {
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
border-bottom: solid 1px #ccc;
}
li {
margin: 0;
padding: 10px 5px;
border-top: solid 1px #ccc;
}
</style>
<link rel="stylesheet" type="text/css" href="../../style/jquery.jscrollpane.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="../../script/jquery.jscrollpane.js"></script>
<script type="text/javascript">
$(function()
{
var element = $('.scroll-container').jScrollPane();
var api = element.data('jsp');
$('#jsp').click(function() {
elem = $('.scroll-container').jScrollPane();
});
$('#api').click(function() {
api.reinitialise();
});
});
</script>
</head>
<body>
<div class="scroll-container float">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<div class="scroll-container float">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
</ul>
</div>
<div class="scroll-container padded clear">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<div class="scroll-container fluid-width clear">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<p class="clear"><button id="api">reinit via API</button> <button id="jsp">Reinit by re-calling .jScrollPane</button> </p>
<p>In the above testcase: reinitialising jScrollPane (either via the api or simply by re-calling .jScrollPane() on the original element) strips out the width of the div.jspPane and causes a rendering issue: the absolutely-positioned div renders only as wide as its text content. The expected behavior is that it'll fill the available width, as it does on page load after the first call to .jScrollPane().</p>
<p><strong>UPDATE:</strong> this is fixed for scrollable content in v2b2, but when the content is not scrollable there's still undesired rendering on first load.</p>
<p>Additionally, padding calculations might need some tweaks. The third list box here is identical to the first two except for an added 5px of padding all the way around: note how the jspVerticalBar is partially pushed out of view.</p>
</body>
</html> 12/before_reinit.html 0000604 00000033756 15071137203 0010501 0 ustar 00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ven67p9fXoMQpbw1icSXo8l+I5Z+upY90LnIqaPDgKo=" />
<link href="brs_main.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="jscrollpane-2b3.css" rel="stylesheet" media="all" />
<title>The History of Tinyfish</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 8]><script src="../__js/IE8.js" type="text/javascript"></script><![endif]-->
<script src="http://cdn.jquerytools.org/1.2.2/full/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jscrollpane-2b3.js"></script>
<script language="javascript" type="text/javascript">
$(function()
{
$("#content").jScrollPane({
showArrows: true,
autoReinitialise: true
});
});
</script>
</head>
<body class="nopage">
<div id="content">
<h1>The History of Tinyfish</h1>
<p>It all began with a pair of broken arms and two dodgy eyes.</p>
<p>It’s 1978, the year that <a href="../__imgs/band/history/schoolboyjim.jpg" title="Jim at school" rel="#hist02">Jim Sanders</a> and <a href="../__imgs/band/history/babysimon.jpg" title="Simon as a baby" rel="#hist01">Simon Godfrey</a> met at school in East Sheen (South London). Although each had been aware of the other since the age of five, the two would have been on nothing more than nodding acquaintance, save for two medical problems that forced them together and would eventually lead to the band we know today as Tinyfish.</p>
<p>Bloody weaklings.</p>
<p>Jim had been diagnosed with a rare retinal disease which had a good chance of robbing him of his vision, and had recently undergone laser eye surgery. Simon more comedically had broken both arms after falling off a roof, leaving him with seriously weakened joints. As part of their convalescence from their respective surgeries, both boys were excused sports for six months.</p>
<p>While the rest of the kids kicked the living crap out of each other under the pretence of playing football or rugby, Jim and Simon sat on a low school wall watching the on-field carnage and eyeing one another warily. Initially Simon was the talkative one while Jim sat silently, but as soon as the subject matter turned to music, both began to find some common ground, and the conversation became a two way street.</p>
<p>Initially, Jim had been a Rock/New Wave fan who loved Thin Lizzy (above all others), but incongruously, also the Skids (who would later become Big Country) and the Rezillos (who wouldn’t). Simon on the other hand was a fan of ELO and The Sweet but both agreed that music, and in particular, rock bands, were the bee’s knees.</p>
<p>Around the same time , Simon had struck up a friendship with another boy at school called <a href="../__imgs/band/history/youngpaul.jpg" title="Paul - much younger" rel="#hist03">Paul Worwood</a>, initially during school music lessons. The pair were both big fans of Dungeons and Dragons and would play the game constantly throughout their teenage years.</p>
<p>Bloody geeks.</p>
<p>As the 70’s gave way to the 80’s and the three grew to be good friends, Jim drew Simon and Paul towards a new love; heavy metal. Over the next three years, the trio saw every metal band that played at their local venue (The Hammersmith Odeon). While the three saw the likes of Thin Lizzy, Saxon, MSG, Iron Maiden and The Scorpions, their listening tastes also encompassed bands such as Yes, Genesis, King Crimson and Magnum.</p>
<p>Jim had first played ‘Going For The One’ by Yes to Simon back in the 70's (Simon rather uncharitably dubbed it ‘f***ing Country & Western’. To be fair, Jim told Simon not to bother with Jethro Tull, as he thought they were arse... without actually having ever heard them. Twit.). Jim persevered however, and when he spun ‘A Farewell To Kings’ by Rush in an afternoon listening session, Simon was well and truly hooked. He now also likes Yes very much. Hah! Jim now also likes Jethro Tull. Hah! Hah!</p>
<p>During their time at Richmond College (South West London), Jim and Simon met guitarist Nick Denville, and formed their first band, with Paul joining on bass soon after. Paul was the only person they knew who owned a car. They also thought he was a top bloke, and so without mentioning the car caveat, the three miscreants cajoled Paul into buying a bass guitar and an amplifier. They called themselves <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">‘Blackstone Edge’</a> and they were bloody rubbish. All they needed was a keyboard player to crown their musical ineptitude.</p>
<p>Simon’s younger brother Jem was 14 when he received his first keyboard (a Casio home synth which he put through a flanger pedal to make it sound cosmic). Jem was initially invited to rehearsals to hold the lyrics up for Jim to sing from while the rest of the band played. It soon became obvious to the guys that Jem's talents were wasted as a music stand and so he was invited into the band. This line up survived for a few months before Nick Denville left to live a happier and entirely more melodic life elsewhere.</p>
<p>Bloody kids.</p>
<p>The band continued, and Simon relentlessly poured prog music into Jem's head which was immediately absorbed by the young keyboard player. Less than six months later, Jem had learned all of Tony Banks’ keyboard solos from both Seconds Out and Three Sides Live along with Rick Wakeman's and Patrick Moraz's solos from Yesshows. With Jem's considerable technique, and the band hungry to write original music, the direction of the band was truely set towards progressive rock. The name <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">Blackstone Edge</a> was soon dropped in favour of ‘Freefall Warriors’ (after a story in a Doctor Who comic) which very quickly contracted simply to <a href="../__imgs/band/history/freefall.jpg" title="Freefall Mk.1" rel="#hist06">‘Freefall’</a> and with the addition of vocalist Andrew Lovatt, the band began to rehearse <a href="../__imgs/band/history/freefallposter.jpg" title="Poster for Freefall's first gig" rel="#hist05">in preparation for live gigs.</a></p>
<p>During this time the band bumped into actor <a href="../__imgs/band/history/tonyaitken.jpg" title="Tony Aitken" rel="#hist07">Tony Aitken</a> who had worked during his less successful years as a supply teacher at Jim and Simon’s school in the 70’s. Tony was looking for musicians to back him in a covers band, and the guys duly offered their services (even though they then had no live experience whatsoever). The arrangement worked so well that they kept the band going for over a decade and it was there, working the pubs and clubs of southern England, that they learned the musical chops that would serve them so well in later years.</p>
<p>In parallel to their function band work, Freefall practice/writing sessions continued. As luck would have it, IQ rehearsed in the studio next door to them, and on the back of their first gig, attended by IQ’s then manager, they managed to land the support slot at IQ’s Christmas show <a href="../__imgs/band/history/freefallmarquee.jpg" title="Freefall at the Marquee" rel="#hist08">at the Marquee Club in London. Gulp.</a></p>
<p>Thankfully, the band hit it off immediately with the crowd and soon managed to get a string of gigs with bands like Jadis, Ark, Galahad, Mentaur and Geoff Mann from Twelth Night. Freefall looked as though they were going to make a big impact with the prog community but after an ill-judged attempt to ‘go commercial’ in the early ‘90s, (Bloody managers!) Jim left the band and the remaining members recruited a very nice gentleman called <a href="../__imgs/band/history/johnboyes.jpg" title="and on guitar - Mr. John Boyes!" rel="#hist09">John Boyes</a> on guitar. However, the moment was lost and the band soon fell apart.</p>
<p>Bloody idiots.</p>
<p>Jim and Jem briefly went on, to form Pop-proggers “Charlottes’ Web” before Jem gave up the scene to work for national radio (although Jem's involvement with prog would be re-ignited a decade later with the formation (with John Boyes) of the Prog supergroup Frost*).</p>
<p>Meanwhile, Simon and Paul formed an acoustic outfit called <a href="../__imgs/band/history/maddogs.jpg" title="Men Are Dead Mk. I" rel="#hist10">‘Men Are Dead’</a> with keyboard player Col Alkins and lyricist/harmonica player Rob Ramsay. Simon had met Rob way back in the early 80’s at Richmond College, at the same time Freefall were making their first tentative steps in music. They became good friends and Rob was always involved at some level, either by helping out at gigs or writing the occasional lyric.</p>
<br />
<p>Men Are Dead began to play gigs on London's open mic scene (where any artist can roll up and play a short set of between two and five songs) and the band proved to be extremely popular with both audience and fellow musos alike. Col left after their first album, but thankfully, Jim once again joined up with Simon and Paul as a second guitarist, along with <a href="../__imgs/band/history/wayne.jpg" title="Wayne caught in the headlights" rel="#hist12">Wayne Collier</a>, an extraordinary drummer who played in almost every band in West London. <a href="../__imgs/band/history/menaredead.jpg" title="Men Are Dead Mk. II" rel="#hist11">What evolved was a prototype Tinyfish</a> sound and much of the band’s current style comes from these early twin guitar shows.</p>
<p>The millennium came and went, and so did the name ‘Men Are Dead’. In came Simon’s alter ego ‘Simon Walsh’, a <em>nom-de-guerre</em> he still uses today when playing solo acoustic gigs. Whilst notching up appearances in the UK, Germany, France, Estonia and America, they recruited a third guitarist <a href="../__imgs/band/history/hw1.jpg" title="Tim solos at the Hope and Anchor" rel="#hist13">(Tim Eyles)</a> and all looked rosy (if a little Lynyrd Skynyrd) in the garden. Behind the scenes however, things were not going well with the band. Frustration with the strict definitions of acoustic music imposed by many clubs and venues began to take their toll on both the music and musicians. Their material was becoming more complex and the songs started to push past the three minute mark, as the band's deep-seated prog influences once again made themselves felt.</p>
<p>Finally in the late autumn of 2004, after much soul searching, Simon sent Jim an e-mail suggesting that maybe there was little more they could achieve as an acoustic unit and perhaps they should return to their progressive roots. Jim happily agreed and an invite was duly sent out to both Paul and Rob asking if they would be interested in joining, which thankfully they did.</p>
<p>Simon disbanded the acoustic band, with Tim Eyles joining the punk-pop band ‘The Random’ and the four remaining musicians <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">assembled in Simon's loft</a> and began writing and rehearsing. Within six weeks it was obvious that there were real possibilities in the music they were making, but the question as to how to record this new material was causing them concern. None of them could afford to go the professional route, so the decision was made to turn the loft into a studio, and try it themselves.</p>
<p>Robert had set up Lazy Gun Records several years previously, to promote both Men Are Dead and Simon Walsh, and suggested that this new band join the roster. This gave them complete artistic and financial control of their work. </p>
<p>Bloody tight bastards.</p>
<p>Finally the subject of the name for the band reared its ugly head. There were thoughts that they could resurrect the name Freefall but that idea was soon discarded. This was a new band, and it deserved a new name (besides, someone else was now using ‘Freefall’ and they looked bigger and meaner than this band). It was Jim that quipped that they were just tiny fish compared to some of the huge prog bands still out there and within moments the name had stuck.</p>
<p>The problem remained that they were a man short for playing live shows, but in the studio, that base was covered by Simon who, happily, can play both <a href="../__imgs/band/history/drumkit.jpg" title="Simon's electronic drumkit" rel="#hist15">drums</a> and <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">guitar</a> in equal measure (although not at the same time). Meanwhile, the studio had taken shape and the band had found that familiar progressive chemistry once again. The smiles were back on everybody’s faces, and the band had a sound they could work to develop.</p>
<p>When the talk turned once more to live performances, Jim mentioned that he knew a drummer of many bands, the semi-Italian <a href="../__imgs/band/history/leonstatue.jpg" title="Leon at the kit" rel="#hist16">Leon Camfield</a>, and after a few rehearsals (and many beers) together, Leon (for whom truely progressive music is a long held love (note King Crimson tattoo on arm)) enthusiastically joined to complete the Fab Five.</p>
<p>So here we are in 2010. <a href="../__imgs/band/history/tinyfish1.jpg" title="tinyfish" rel="#hist17">Tinyfish</a> have gigged around the country, released both two albums, a mini-album, and a live album & DVD, and have <a href="../__imgs/band/history/tinyfish2.jpg" title="tinyfish" rel="#hist18">arrived at a destination</a> where they feel at home, and are proud of their journey to this place of better dreams.</p>
<p class="centre"><a href="../__imgs/band/history/strangestudioshot.jpg" title="a tinyfish close encounter" rel="#hist19">Bloody pretentious tossers.</a></p>
</div>
</body>
</html>
12/native.html 0000604 00000033713 15071137203 0007144 0 ustar 00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ven67p9fXoMQpbw1icSXo8l+I5Z+upY90LnIqaPDgKo=" />
<link href="brs_main.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<title>The History of Tinyfish</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 8]><script src="../__js/IE8.js" type="text/javascript"></script><![endif]-->
<script src="http://cdn.jquerytools.org/1.2.2/full/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../script/jquery.jscrollpane.js"></script>
<script language="javascript" type="text/javascript">
$(function()
{
});
</script>
</head>
<body class="nopage">
<div id="content">
<h1>The History of Tinyfish</h1>
<p>It all began with a pair of broken arms and two dodgy eyes.</p>
<p>It’s 1978, the year that <a href="../__imgs/band/history/schoolboyjim.jpg" title="Jim at school" rel="#hist02">Jim Sanders</a> and <a href="../__imgs/band/history/babysimon.jpg" title="Simon as a baby" rel="#hist01">Simon Godfrey</a> met at school in East Sheen (South London). Although each had been aware of the other since the age of five, the two would have been on nothing more than nodding acquaintance, save for two medical problems that forced them together and would eventually lead to the band we know today as Tinyfish.</p>
<p>Bloody weaklings.</p>
<p>Jim had been diagnosed with a rare retinal disease which had a good chance of robbing him of his vision, and had recently undergone laser eye surgery. Simon more comedically had broken both arms after falling off a roof, leaving him with seriously weakened joints. As part of their convalescence from their respective surgeries, both boys were excused sports for six months.</p>
<p>While the rest of the kids kicked the living crap out of each other under the pretence of playing football or rugby, Jim and Simon sat on a low school wall watching the on-field carnage and eyeing one another warily. Initially Simon was the talkative one while Jim sat silently, but as soon as the subject matter turned to music, both began to find some common ground, and the conversation became a two way street.</p>
<p>Initially, Jim had been a Rock/New Wave fan who loved Thin Lizzy (above all others), but incongruously, also the Skids (who would later become Big Country) and the Rezillos (who wouldn’t). Simon on the other hand was a fan of ELO and The Sweet but both agreed that music, and in particular, rock bands, were the bee’s knees.</p>
<p>Around the same time , Simon had struck up a friendship with another boy at school called <a href="../__imgs/band/history/youngpaul.jpg" title="Paul - much younger" rel="#hist03">Paul Worwood</a>, initially during school music lessons. The pair were both big fans of Dungeons and Dragons and would play the game constantly throughout their teenage years.</p>
<p>Bloody geeks.</p>
<p>As the 70’s gave way to the 80’s and the three grew to be good friends, Jim drew Simon and Paul towards a new love; heavy metal. Over the next three years, the trio saw every metal band that played at their local venue (The Hammersmith Odeon). While the three saw the likes of Thin Lizzy, Saxon, MSG, Iron Maiden and The Scorpions, their listening tastes also encompassed bands such as Yes, Genesis, King Crimson and Magnum.</p>
<p>Jim had first played ‘Going For The One’ by Yes to Simon back in the 70's (Simon rather uncharitably dubbed it ‘f***ing Country & Western’. To be fair, Jim told Simon not to bother with Jethro Tull, as he thought they were arse... without actually having ever heard them. Twit.). Jim persevered however, and when he spun ‘A Farewell To Kings’ by Rush in an afternoon listening session, Simon was well and truly hooked. He now also likes Yes very much. Hah! Jim now also likes Jethro Tull. Hah! Hah!</p>
<p>During their time at Richmond College (South West London), Jim and Simon met guitarist Nick Denville, and formed their first band, with Paul joining on bass soon after. Paul was the only person they knew who owned a car. They also thought he was a top bloke, and so without mentioning the car caveat, the three miscreants cajoled Paul into buying a bass guitar and an amplifier. They called themselves <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">‘Blackstone Edge’</a> and they were bloody rubbish. All they needed was a keyboard player to crown their musical ineptitude.</p>
<p>Simon’s younger brother Jem was 14 when he received his first keyboard (a Casio home synth which he put through a flanger pedal to make it sound cosmic). Jem was initially invited to rehearsals to hold the lyrics up for Jim to sing from while the rest of the band played. It soon became obvious to the guys that Jem's talents were wasted as a music stand and so he was invited into the band. This line up survived for a few months before Nick Denville left to live a happier and entirely more melodic life elsewhere.</p>
<p>Bloody kids.</p>
<p>The band continued, and Simon relentlessly poured prog music into Jem's head which was immediately absorbed by the young keyboard player. Less than six months later, Jem had learned all of Tony Banks’ keyboard solos from both Seconds Out and Three Sides Live along with Rick Wakeman's and Patrick Moraz's solos from Yesshows. With Jem's considerable technique, and the band hungry to write original music, the direction of the band was truely set towards progressive rock. The name <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">Blackstone Edge</a> was soon dropped in favour of ‘Freefall Warriors’ (after a story in a Doctor Who comic) which very quickly contracted simply to <a href="../__imgs/band/history/freefall.jpg" title="Freefall Mk.1" rel="#hist06">‘Freefall’</a> and with the addition of vocalist Andrew Lovatt, the band began to rehearse <a href="../__imgs/band/history/freefallposter.jpg" title="Poster for Freefall's first gig" rel="#hist05">in preparation for live gigs.</a></p>
<p>During this time the band bumped into actor <a href="../__imgs/band/history/tonyaitken.jpg" title="Tony Aitken" rel="#hist07">Tony Aitken</a> who had worked during his less successful years as a supply teacher at Jim and Simon’s school in the 70’s. Tony was looking for musicians to back him in a covers band, and the guys duly offered their services (even though they then had no live experience whatsoever). The arrangement worked so well that they kept the band going for over a decade and it was there, working the pubs and clubs of southern England, that they learned the musical chops that would serve them so well in later years.</p>
<p>In parallel to their function band work, Freefall practice/writing sessions continued. As luck would have it, IQ rehearsed in the studio next door to them, and on the back of their first gig, attended by IQ’s then manager, they managed to land the support slot at IQ’s Christmas show <a href="../__imgs/band/history/freefallmarquee.jpg" title="Freefall at the Marquee" rel="#hist08">at the Marquee Club in London. Gulp.</a></p>
<p>Thankfully, the band hit it off immediately with the crowd and soon managed to get a string of gigs with bands like Jadis, Ark, Galahad, Mentaur and Geoff Mann from Twelth Night. Freefall looked as though they were going to make a big impact with the prog community but after an ill-judged attempt to ‘go commercial’ in the early ‘90s, (Bloody managers!) Jim left the band and the remaining members recruited a very nice gentleman called <a href="../__imgs/band/history/johnboyes.jpg" title="and on guitar - Mr. John Boyes!" rel="#hist09">John Boyes</a> on guitar. However, the moment was lost and the band soon fell apart.</p>
<p>Bloody idiots.</p>
<p>Jim and Jem briefly went on, to form Pop-proggers “Charlottes’ Web” before Jem gave up the scene to work for national radio (although Jem's involvement with prog would be re-ignited a decade later with the formation (with John Boyes) of the Prog supergroup Frost*).</p>
<p>Meanwhile, Simon and Paul formed an acoustic outfit called <a href="../__imgs/band/history/maddogs.jpg" title="Men Are Dead Mk. I" rel="#hist10">‘Men Are Dead’</a> with keyboard player Col Alkins and lyricist/harmonica player Rob Ramsay. Simon had met Rob way back in the early 80’s at Richmond College, at the same time Freefall were making their first tentative steps in music. They became good friends and Rob was always involved at some level, either by helping out at gigs or writing the occasional lyric.</p>
<br />
<p>Men Are Dead began to play gigs on London's open mic scene (where any artist can roll up and play a short set of between two and five songs) and the band proved to be extremely popular with both audience and fellow musos alike. Col left after their first album, but thankfully, Jim once again joined up with Simon and Paul as a second guitarist, along with <a href="../__imgs/band/history/wayne.jpg" title="Wayne caught in the headlights" rel="#hist12">Wayne Collier</a>, an extraordinary drummer who played in almost every band in West London. <a href="../__imgs/band/history/menaredead.jpg" title="Men Are Dead Mk. II" rel="#hist11">What evolved was a prototype Tinyfish</a> sound and much of the band’s current style comes from these early twin guitar shows.</p>
<p>The millennium came and went, and so did the name ‘Men Are Dead’. In came Simon’s alter ego ‘Simon Walsh’, a <em>nom-de-guerre</em> he still uses today when playing solo acoustic gigs. Whilst notching up appearances in the UK, Germany, France, Estonia and America, they recruited a third guitarist <a href="../__imgs/band/history/hw1.jpg" title="Tim solos at the Hope and Anchor" rel="#hist13">(Tim Eyles)</a> and all looked rosy (if a little Lynyrd Skynyrd) in the garden. Behind the scenes however, things were not going well with the band. Frustration with the strict definitions of acoustic music imposed by many clubs and venues began to take their toll on both the music and musicians. Their material was becoming more complex and the songs started to push past the three minute mark, as the band's deep-seated prog influences once again made themselves felt.</p>
<p>Finally in the late autumn of 2004, after much soul searching, Simon sent Jim an e-mail suggesting that maybe there was little more they could achieve as an acoustic unit and perhaps they should return to their progressive roots. Jim happily agreed and an invite was duly sent out to both Paul and Rob asking if they would be interested in joining, which thankfully they did.</p>
<p>Simon disbanded the acoustic band, with Tim Eyles joining the punk-pop band ‘The Random’ and the four remaining musicians <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">assembled in Simon's loft</a> and began writing and rehearsing. Within six weeks it was obvious that there were real possibilities in the music they were making, but the question as to how to record this new material was causing them concern. None of them could afford to go the professional route, so the decision was made to turn the loft into a studio, and try it themselves.</p>
<p>Robert had set up Lazy Gun Records several years previously, to promote both Men Are Dead and Simon Walsh, and suggested that this new band join the roster. This gave them complete artistic and financial control of their work. </p>
<p>Bloody tight bastards.</p>
<p>Finally the subject of the name for the band reared its ugly head. There were thoughts that they could resurrect the name Freefall but that idea was soon discarded. This was a new band, and it deserved a new name (besides, someone else was now using ‘Freefall’ and they looked bigger and meaner than this band). It was Jim that quipped that they were just tiny fish compared to some of the huge prog bands still out there and within moments the name had stuck.</p>
<p>The problem remained that they were a man short for playing live shows, but in the studio, that base was covered by Simon who, happily, can play both <a href="../__imgs/band/history/drumkit.jpg" title="Simon's electronic drumkit" rel="#hist15">drums</a> and <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">guitar</a> in equal measure (although not at the same time). Meanwhile, the studio had taken shape and the band had found that familiar progressive chemistry once again. The smiles were back on everybody’s faces, and the band had a sound they could work to develop.</p>
<p>When the talk turned once more to live performances, Jim mentioned that he knew a drummer of many bands, the semi-Italian <a href="../__imgs/band/history/leonstatue.jpg" title="Leon at the kit" rel="#hist16">Leon Camfield</a>, and after a few rehearsals (and many beers) together, Leon (for whom truely progressive music is a long held love (note King Crimson tattoo on arm)) enthusiastically joined to complete the Fab Five.</p>
<p>So here we are in 2010. <a href="../__imgs/band/history/tinyfish1.jpg" title="tinyfish" rel="#hist17">Tinyfish</a> have gigged around the country, released both two albums, a mini-album, and a live album & DVD, and have <a href="../__imgs/band/history/tinyfish2.jpg" title="tinyfish" rel="#hist18">arrived at a destination</a> where they feel at home, and are proud of their journey to this place of better dreams.</p>
<p class="centre"><a href="../__imgs/band/history/strangestudioshot.jpg" title="a tinyfish close encounter" rel="#hist19">Bloody pretentious tossers.</a></p>
</div>
</body>
</html>
12/wrapped.html 0000604 00000034136 15071137203 0007320 0 ustar 00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ven67p9fXoMQpbw1icSXo8l+I5Z+upY90LnIqaPDgKo=" />
<link href="brs_main.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="jscrollpane-2b3.css" rel="stylesheet" media="all" />
<style type="text/css">
#content
{
overflow: hidden;
}
#scroller
{
width: 100%;
height: 100%;
}
</style>
<title>The History of Tinyfish</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 8]><script src="../__js/IE8.js" type="text/javascript"></script><![endif]-->
<script src="http://cdn.jquerytools.org/1.2.2/full/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jscrollpane-2b3.js"></script>
<script language="javascript" type="text/javascript">
$(function()
{
$("#scroller").jScrollPane({
showArrows: true
});
});
</script>
</head>
<body class="nopage">
<div id="content">
<div id="scroller">
<h1>The History of Tinyfish</h1>
<p>It all began with a pair of broken arms and two dodgy eyes.</p>
<p>It’s 1978, the year that <a href="../__imgs/band/history/schoolboyjim.jpg" title="Jim at school" rel="#hist02">Jim Sanders</a> and <a href="../__imgs/band/history/babysimon.jpg" title="Simon as a baby" rel="#hist01">Simon Godfrey</a> met at school in East Sheen (South London). Although each had been aware of the other since the age of five, the two would have been on nothing more than nodding acquaintance, save for two medical problems that forced them together and would eventually lead to the band we know today as Tinyfish.</p>
<p>Bloody weaklings.</p>
<p>Jim had been diagnosed with a rare retinal disease which had a good chance of robbing him of his vision, and had recently undergone laser eye surgery. Simon more comedically had broken both arms after falling off a roof, leaving him with seriously weakened joints. As part of their convalescence from their respective surgeries, both boys were excused sports for six months.</p>
<p>While the rest of the kids kicked the living crap out of each other under the pretence of playing football or rugby, Jim and Simon sat on a low school wall watching the on-field carnage and eyeing one another warily. Initially Simon was the talkative one while Jim sat silently, but as soon as the subject matter turned to music, both began to find some common ground, and the conversation became a two way street.</p>
<p>Initially, Jim had been a Rock/New Wave fan who loved Thin Lizzy (above all others), but incongruously, also the Skids (who would later become Big Country) and the Rezillos (who wouldn’t). Simon on the other hand was a fan of ELO and The Sweet but both agreed that music, and in particular, rock bands, were the bee’s knees.</p>
<p>Around the same time , Simon had struck up a friendship with another boy at school called <a href="../__imgs/band/history/youngpaul.jpg" title="Paul - much younger" rel="#hist03">Paul Worwood</a>, initially during school music lessons. The pair were both big fans of Dungeons and Dragons and would play the game constantly throughout their teenage years.</p>
<p>Bloody geeks.</p>
<p>As the 70’s gave way to the 80’s and the three grew to be good friends, Jim drew Simon and Paul towards a new love; heavy metal. Over the next three years, the trio saw every metal band that played at their local venue (The Hammersmith Odeon). While the three saw the likes of Thin Lizzy, Saxon, MSG, Iron Maiden and The Scorpions, their listening tastes also encompassed bands such as Yes, Genesis, King Crimson and Magnum.</p>
<p>Jim had first played ‘Going For The One’ by Yes to Simon back in the 70's (Simon rather uncharitably dubbed it ‘f***ing Country & Western’. To be fair, Jim told Simon not to bother with Jethro Tull, as he thought they were arse... without actually having ever heard them. Twit.). Jim persevered however, and when he spun ‘A Farewell To Kings’ by Rush in an afternoon listening session, Simon was well and truly hooked. He now also likes Yes very much. Hah! Jim now also likes Jethro Tull. Hah! Hah!</p>
<p>During their time at Richmond College (South West London), Jim and Simon met guitarist Nick Denville, and formed their first band, with Paul joining on bass soon after. Paul was the only person they knew who owned a car. They also thought he was a top bloke, and so without mentioning the car caveat, the three miscreants cajoled Paul into buying a bass guitar and an amplifier. They called themselves <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">‘Blackstone Edge’</a> and they were bloody rubbish. All they needed was a keyboard player to crown their musical ineptitude.</p>
<p>Simon’s younger brother Jem was 14 when he received his first keyboard (a Casio home synth which he put through a flanger pedal to make it sound cosmic). Jem was initially invited to rehearsals to hold the lyrics up for Jim to sing from while the rest of the band played. It soon became obvious to the guys that Jem's talents were wasted as a music stand and so he was invited into the band. This line up survived for a few months before Nick Denville left to live a happier and entirely more melodic life elsewhere.</p>
<p>Bloody kids.</p>
<p>The band continued, and Simon relentlessly poured prog music into Jem's head which was immediately absorbed by the young keyboard player. Less than six months later, Jem had learned all of Tony Banks’ keyboard solos from both Seconds Out and Three Sides Live along with Rick Wakeman's and Patrick Moraz's solos from Yesshows. With Jem's considerable technique, and the band hungry to write original music, the direction of the band was truely set towards progressive rock. The name <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">Blackstone Edge</a> was soon dropped in favour of ‘Freefall Warriors’ (after a story in a Doctor Who comic) which very quickly contracted simply to <a href="../__imgs/band/history/freefall.jpg" title="Freefall Mk.1" rel="#hist06">‘Freefall’</a> and with the addition of vocalist Andrew Lovatt, the band began to rehearse <a href="../__imgs/band/history/freefallposter.jpg" title="Poster for Freefall's first gig" rel="#hist05">in preparation for live gigs.</a></p>
<p>During this time the band bumped into actor <a href="../__imgs/band/history/tonyaitken.jpg" title="Tony Aitken" rel="#hist07">Tony Aitken</a> who had worked during his less successful years as a supply teacher at Jim and Simon’s school in the 70’s. Tony was looking for musicians to back him in a covers band, and the guys duly offered their services (even though they then had no live experience whatsoever). The arrangement worked so well that they kept the band going for over a decade and it was there, working the pubs and clubs of southern England, that they learned the musical chops that would serve them so well in later years.</p>
<p>In parallel to their function band work, Freefall practice/writing sessions continued. As luck would have it, IQ rehearsed in the studio next door to them, and on the back of their first gig, attended by IQ’s then manager, they managed to land the support slot at IQ’s Christmas show <a href="../__imgs/band/history/freefallmarquee.jpg" title="Freefall at the Marquee" rel="#hist08">at the Marquee Club in London. Gulp.</a></p>
<p>Thankfully, the band hit it off immediately with the crowd and soon managed to get a string of gigs with bands like Jadis, Ark, Galahad, Mentaur and Geoff Mann from Twelth Night. Freefall looked as though they were going to make a big impact with the prog community but after an ill-judged attempt to ‘go commercial’ in the early ‘90s, (Bloody managers!) Jim left the band and the remaining members recruited a very nice gentleman called <a href="../__imgs/band/history/johnboyes.jpg" title="and on guitar - Mr. John Boyes!" rel="#hist09">John Boyes</a> on guitar. However, the moment was lost and the band soon fell apart.</p>
<p>Bloody idiots.</p>
<p>Jim and Jem briefly went on, to form Pop-proggers “Charlottes’ Web” before Jem gave up the scene to work for national radio (although Jem's involvement with prog would be re-ignited a decade later with the formation (with John Boyes) of the Prog supergroup Frost*).</p>
<p>Meanwhile, Simon and Paul formed an acoustic outfit called <a href="../__imgs/band/history/maddogs.jpg" title="Men Are Dead Mk. I" rel="#hist10">‘Men Are Dead’</a> with keyboard player Col Alkins and lyricist/harmonica player Rob Ramsay. Simon had met Rob way back in the early 80’s at Richmond College, at the same time Freefall were making their first tentative steps in music. They became good friends and Rob was always involved at some level, either by helping out at gigs or writing the occasional lyric.</p>
<br />
<p>Men Are Dead began to play gigs on London's open mic scene (where any artist can roll up and play a short set of between two and five songs) and the band proved to be extremely popular with both audience and fellow musos alike. Col left after their first album, but thankfully, Jim once again joined up with Simon and Paul as a second guitarist, along with <a href="../__imgs/band/history/wayne.jpg" title="Wayne caught in the headlights" rel="#hist12">Wayne Collier</a>, an extraordinary drummer who played in almost every band in West London. <a href="../__imgs/band/history/menaredead.jpg" title="Men Are Dead Mk. II" rel="#hist11">What evolved was a prototype Tinyfish</a> sound and much of the band’s current style comes from these early twin guitar shows.</p>
<p>The millennium came and went, and so did the name ‘Men Are Dead’. In came Simon’s alter ego ‘Simon Walsh’, a <em>nom-de-guerre</em> he still uses today when playing solo acoustic gigs. Whilst notching up appearances in the UK, Germany, France, Estonia and America, they recruited a third guitarist <a href="../__imgs/band/history/hw1.jpg" title="Tim solos at the Hope and Anchor" rel="#hist13">(Tim Eyles)</a> and all looked rosy (if a little Lynyrd Skynyrd) in the garden. Behind the scenes however, things were not going well with the band. Frustration with the strict definitions of acoustic music imposed by many clubs and venues began to take their toll on both the music and musicians. Their material was becoming more complex and the songs started to push past the three minute mark, as the band's deep-seated prog influences once again made themselves felt.</p>
<p>Finally in the late autumn of 2004, after much soul searching, Simon sent Jim an e-mail suggesting that maybe there was little more they could achieve as an acoustic unit and perhaps they should return to their progressive roots. Jim happily agreed and an invite was duly sent out to both Paul and Rob asking if they would be interested in joining, which thankfully they did.</p>
<p>Simon disbanded the acoustic band, with Tim Eyles joining the punk-pop band ‘The Random’ and the four remaining musicians <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">assembled in Simon's loft</a> and began writing and rehearsing. Within six weeks it was obvious that there were real possibilities in the music they were making, but the question as to how to record this new material was causing them concern. None of them could afford to go the professional route, so the decision was made to turn the loft into a studio, and try it themselves.</p>
<p>Robert had set up Lazy Gun Records several years previously, to promote both Men Are Dead and Simon Walsh, and suggested that this new band join the roster. This gave them complete artistic and financial control of their work. </p>
<p>Bloody tight bastards.</p>
<p>Finally the subject of the name for the band reared its ugly head. There were thoughts that they could resurrect the name Freefall but that idea was soon discarded. This was a new band, and it deserved a new name (besides, someone else was now using ‘Freefall’ and they looked bigger and meaner than this band). It was Jim that quipped that they were just tiny fish compared to some of the huge prog bands still out there and within moments the name had stuck.</p>
<p>The problem remained that they were a man short for playing live shows, but in the studio, that base was covered by Simon who, happily, can play both <a href="../__imgs/band/history/drumkit.jpg" title="Simon's electronic drumkit" rel="#hist15">drums</a> and <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">guitar</a> in equal measure (although not at the same time). Meanwhile, the studio had taken shape and the band had found that familiar progressive chemistry once again. The smiles were back on everybody’s faces, and the band had a sound they could work to develop.</p>
<p>When the talk turned once more to live performances, Jim mentioned that he knew a drummer of many bands, the semi-Italian <a href="../__imgs/band/history/leonstatue.jpg" title="Leon at the kit" rel="#hist16">Leon Camfield</a>, and after a few rehearsals (and many beers) together, Leon (for whom truely progressive music is a long held love (note King Crimson tattoo on arm)) enthusiastically joined to complete the Fab Five.</p>
<p>So here we are in 2010. <a href="../__imgs/band/history/tinyfish1.jpg" title="tinyfish" rel="#hist17">Tinyfish</a> have gigged around the country, released both two albums, a mini-album, and a live album & DVD, and have <a href="../__imgs/band/history/tinyfish2.jpg" title="tinyfish" rel="#hist18">arrived at a destination</a> where they feel at home, and are proud of their journey to this place of better dreams.</p>
<p class="centre"><a href="../__imgs/band/history/strangestudioshot.jpg" title="a tinyfish close encounter" rel="#hist19">Bloody pretentious tossers.</a></p>
</div>
</div>
</body>
</html>
12/jquery.mousewheel.js 0000604 00000004230 15071137203 0011011 0 ustar 00 /*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.3
*
* Requires: 1.2.2+
*/
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(event || window.event);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
if ( event.detail ) { delta = -event.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return $.event.handle.apply(this, args);
}
})(jQuery); 12/before.html 0000604 00000033724 15071137203 0007122 0 ustar 00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ven67p9fXoMQpbw1icSXo8l+I5Z+upY90LnIqaPDgKo=" />
<link href="brs_main.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="jscrollpane-2b3.css" rel="stylesheet" media="all" />
<title>The History of Tinyfish</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 8]><script src="../__js/IE8.js" type="text/javascript"></script><![endif]-->
<script src="http://cdn.jquerytools.org/1.2.2/full/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jscrollpane-2b3.js"></script>
<script language="javascript" type="text/javascript">
$(function()
{
$("#content").jScrollPane({
showArrows: true
});
});
</script>
</head>
<body class="nopage">
<div id="content">
<h1>The History of Tinyfish</h1>
<p>It all began with a pair of broken arms and two dodgy eyes.</p>
<p>It’s 1978, the year that <a href="../__imgs/band/history/schoolboyjim.jpg" title="Jim at school" rel="#hist02">Jim Sanders</a> and <a href="../__imgs/band/history/babysimon.jpg" title="Simon as a baby" rel="#hist01">Simon Godfrey</a> met at school in East Sheen (South London). Although each had been aware of the other since the age of five, the two would have been on nothing more than nodding acquaintance, save for two medical problems that forced them together and would eventually lead to the band we know today as Tinyfish.</p>
<p>Bloody weaklings.</p>
<p>Jim had been diagnosed with a rare retinal disease which had a good chance of robbing him of his vision, and had recently undergone laser eye surgery. Simon more comedically had broken both arms after falling off a roof, leaving him with seriously weakened joints. As part of their convalescence from their respective surgeries, both boys were excused sports for six months.</p>
<p>While the rest of the kids kicked the living crap out of each other under the pretence of playing football or rugby, Jim and Simon sat on a low school wall watching the on-field carnage and eyeing one another warily. Initially Simon was the talkative one while Jim sat silently, but as soon as the subject matter turned to music, both began to find some common ground, and the conversation became a two way street.</p>
<p>Initially, Jim had been a Rock/New Wave fan who loved Thin Lizzy (above all others), but incongruously, also the Skids (who would later become Big Country) and the Rezillos (who wouldn’t). Simon on the other hand was a fan of ELO and The Sweet but both agreed that music, and in particular, rock bands, were the bee’s knees.</p>
<p>Around the same time , Simon had struck up a friendship with another boy at school called <a href="../__imgs/band/history/youngpaul.jpg" title="Paul - much younger" rel="#hist03">Paul Worwood</a>, initially during school music lessons. The pair were both big fans of Dungeons and Dragons and would play the game constantly throughout their teenage years.</p>
<p>Bloody geeks.</p>
<p>As the 70’s gave way to the 80’s and the three grew to be good friends, Jim drew Simon and Paul towards a new love; heavy metal. Over the next three years, the trio saw every metal band that played at their local venue (The Hammersmith Odeon). While the three saw the likes of Thin Lizzy, Saxon, MSG, Iron Maiden and The Scorpions, their listening tastes also encompassed bands such as Yes, Genesis, King Crimson and Magnum.</p>
<p>Jim had first played ‘Going For The One’ by Yes to Simon back in the 70's (Simon rather uncharitably dubbed it ‘f***ing Country & Western’. To be fair, Jim told Simon not to bother with Jethro Tull, as he thought they were arse... without actually having ever heard them. Twit.). Jim persevered however, and when he spun ‘A Farewell To Kings’ by Rush in an afternoon listening session, Simon was well and truly hooked. He now also likes Yes very much. Hah! Jim now also likes Jethro Tull. Hah! Hah!</p>
<p>During their time at Richmond College (South West London), Jim and Simon met guitarist Nick Denville, and formed their first band, with Paul joining on bass soon after. Paul was the only person they knew who owned a car. They also thought he was a top bloke, and so without mentioning the car caveat, the three miscreants cajoled Paul into buying a bass guitar and an amplifier. They called themselves <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">‘Blackstone Edge’</a> and they were bloody rubbish. All they needed was a keyboard player to crown their musical ineptitude.</p>
<p>Simon’s younger brother Jem was 14 when he received his first keyboard (a Casio home synth which he put through a flanger pedal to make it sound cosmic). Jem was initially invited to rehearsals to hold the lyrics up for Jim to sing from while the rest of the band played. It soon became obvious to the guys that Jem's talents were wasted as a music stand and so he was invited into the band. This line up survived for a few months before Nick Denville left to live a happier and entirely more melodic life elsewhere.</p>
<p>Bloody kids.</p>
<p>The band continued, and Simon relentlessly poured prog music into Jem's head which was immediately absorbed by the young keyboard player. Less than six months later, Jem had learned all of Tony Banks’ keyboard solos from both Seconds Out and Three Sides Live along with Rick Wakeman's and Patrick Moraz's solos from Yesshows. With Jem's considerable technique, and the band hungry to write original music, the direction of the band was truely set towards progressive rock. The name <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">Blackstone Edge</a> was soon dropped in favour of ‘Freefall Warriors’ (after a story in a Doctor Who comic) which very quickly contracted simply to <a href="../__imgs/band/history/freefall.jpg" title="Freefall Mk.1" rel="#hist06">‘Freefall’</a> and with the addition of vocalist Andrew Lovatt, the band began to rehearse <a href="../__imgs/band/history/freefallposter.jpg" title="Poster for Freefall's first gig" rel="#hist05">in preparation for live gigs.</a></p>
<p>During this time the band bumped into actor <a href="../__imgs/band/history/tonyaitken.jpg" title="Tony Aitken" rel="#hist07">Tony Aitken</a> who had worked during his less successful years as a supply teacher at Jim and Simon’s school in the 70’s. Tony was looking for musicians to back him in a covers band, and the guys duly offered their services (even though they then had no live experience whatsoever). The arrangement worked so well that they kept the band going for over a decade and it was there, working the pubs and clubs of southern England, that they learned the musical chops that would serve them so well in later years.</p>
<p>In parallel to their function band work, Freefall practice/writing sessions continued. As luck would have it, IQ rehearsed in the studio next door to them, and on the back of their first gig, attended by IQ’s then manager, they managed to land the support slot at IQ’s Christmas show <a href="../__imgs/band/history/freefallmarquee.jpg" title="Freefall at the Marquee" rel="#hist08">at the Marquee Club in London. Gulp.</a></p>
<p>Thankfully, the band hit it off immediately with the crowd and soon managed to get a string of gigs with bands like Jadis, Ark, Galahad, Mentaur and Geoff Mann from Twelth Night. Freefall looked as though they were going to make a big impact with the prog community but after an ill-judged attempt to ‘go commercial’ in the early ‘90s, (Bloody managers!) Jim left the band and the remaining members recruited a very nice gentleman called <a href="../__imgs/band/history/johnboyes.jpg" title="and on guitar - Mr. John Boyes!" rel="#hist09">John Boyes</a> on guitar. However, the moment was lost and the band soon fell apart.</p>
<p>Bloody idiots.</p>
<p>Jim and Jem briefly went on, to form Pop-proggers “Charlottes’ Web” before Jem gave up the scene to work for national radio (although Jem's involvement with prog would be re-ignited a decade later with the formation (with John Boyes) of the Prog supergroup Frost*).</p>
<p>Meanwhile, Simon and Paul formed an acoustic outfit called <a href="../__imgs/band/history/maddogs.jpg" title="Men Are Dead Mk. I" rel="#hist10">‘Men Are Dead’</a> with keyboard player Col Alkins and lyricist/harmonica player Rob Ramsay. Simon had met Rob way back in the early 80’s at Richmond College, at the same time Freefall were making their first tentative steps in music. They became good friends and Rob was always involved at some level, either by helping out at gigs or writing the occasional lyric.</p>
<br />
<p>Men Are Dead began to play gigs on London's open mic scene (where any artist can roll up and play a short set of between two and five songs) and the band proved to be extremely popular with both audience and fellow musos alike. Col left after their first album, but thankfully, Jim once again joined up with Simon and Paul as a second guitarist, along with <a href="../__imgs/band/history/wayne.jpg" title="Wayne caught in the headlights" rel="#hist12">Wayne Collier</a>, an extraordinary drummer who played in almost every band in West London. <a href="../__imgs/band/history/menaredead.jpg" title="Men Are Dead Mk. II" rel="#hist11">What evolved was a prototype Tinyfish</a> sound and much of the band’s current style comes from these early twin guitar shows.</p>
<p>The millennium came and went, and so did the name ‘Men Are Dead’. In came Simon’s alter ego ‘Simon Walsh’, a <em>nom-de-guerre</em> he still uses today when playing solo acoustic gigs. Whilst notching up appearances in the UK, Germany, France, Estonia and America, they recruited a third guitarist <a href="../__imgs/band/history/hw1.jpg" title="Tim solos at the Hope and Anchor" rel="#hist13">(Tim Eyles)</a> and all looked rosy (if a little Lynyrd Skynyrd) in the garden. Behind the scenes however, things were not going well with the band. Frustration with the strict definitions of acoustic music imposed by many clubs and venues began to take their toll on both the music and musicians. Their material was becoming more complex and the songs started to push past the three minute mark, as the band's deep-seated prog influences once again made themselves felt.</p>
<p>Finally in the late autumn of 2004, after much soul searching, Simon sent Jim an e-mail suggesting that maybe there was little more they could achieve as an acoustic unit and perhaps they should return to their progressive roots. Jim happily agreed and an invite was duly sent out to both Paul and Rob asking if they would be interested in joining, which thankfully they did.</p>
<p>Simon disbanded the acoustic band, with Tim Eyles joining the punk-pop band ‘The Random’ and the four remaining musicians <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">assembled in Simon's loft</a> and began writing and rehearsing. Within six weeks it was obvious that there were real possibilities in the music they were making, but the question as to how to record this new material was causing them concern. None of them could afford to go the professional route, so the decision was made to turn the loft into a studio, and try it themselves.</p>
<p>Robert had set up Lazy Gun Records several years previously, to promote both Men Are Dead and Simon Walsh, and suggested that this new band join the roster. This gave them complete artistic and financial control of their work. </p>
<p>Bloody tight bastards.</p>
<p>Finally the subject of the name for the band reared its ugly head. There were thoughts that they could resurrect the name Freefall but that idea was soon discarded. This was a new band, and it deserved a new name (besides, someone else was now using ‘Freefall’ and they looked bigger and meaner than this band). It was Jim that quipped that they were just tiny fish compared to some of the huge prog bands still out there and within moments the name had stuck.</p>
<p>The problem remained that they were a man short for playing live shows, but in the studio, that base was covered by Simon who, happily, can play both <a href="../__imgs/band/history/drumkit.jpg" title="Simon's electronic drumkit" rel="#hist15">drums</a> and <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">guitar</a> in equal measure (although not at the same time). Meanwhile, the studio had taken shape and the band had found that familiar progressive chemistry once again. The smiles were back on everybody’s faces, and the band had a sound they could work to develop.</p>
<p>When the talk turned once more to live performances, Jim mentioned that he knew a drummer of many bands, the semi-Italian <a href="../__imgs/band/history/leonstatue.jpg" title="Leon at the kit" rel="#hist16">Leon Camfield</a>, and after a few rehearsals (and many beers) together, Leon (for whom truely progressive music is a long held love (note King Crimson tattoo on arm)) enthusiastically joined to complete the Fab Five.</p>
<p>So here we are in 2010. <a href="../__imgs/band/history/tinyfish1.jpg" title="tinyfish" rel="#hist17">Tinyfish</a> have gigged around the country, released both two albums, a mini-album, and a live album & DVD, and have <a href="../__imgs/band/history/tinyfish2.jpg" title="tinyfish" rel="#hist18">arrived at a destination</a> where they feel at home, and are proud of their journey to this place of better dreams.</p>
<p class="centre"><a href="../__imgs/band/history/strangestudioshot.jpg" title="a tinyfish close encounter" rel="#hist19">Bloody pretentious tossers.</a></p>
</div>
</body>
</html>
12/jscrollpane-2b3.js 0000604 00000101440 15071137203 0010217 0 ustar 00 /*!
* jScrollPane - v2.0.0beta3 - 2010-08-27
* http://jscrollpane.kelvinluck.com/
*
* Copyright (c) 2010 Kelvin Luck
* Dual licensed under the MIT or GPL licenses.
*/
// Script: jScrollPane - cross browser customisable scrollbars
//
// *Version: 2.0.0beta3, Last updated: 2010-08-27*
//
// Project Home - http://jscrollpane.kelvinluck.com/
// GitHub - http://github.com/vitch/jScrollPane
// Source - http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.js
// (Minified) - http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.min.js
//
// About: License
//
// Copyright (c) 2010 Kelvin Luck
// Dual licensed under the MIT or GPL Version 2 licenses.
// http://jscrollpane.kelvinluck.com/MIT-LICENSE.txt
// http://jscrollpane.kelvinluck.com/GPL-LICENSE.txt
//
// About: Examples
//
// All examples and demos are available through the jScrollPane example site at:
// http://jscrollpane.kelvinluck.com/
//
// About: Support and Testing
//
// This plugin is tested on the browsers below and has been found to work reliably on them. If you run
// into a problem on one of the supported browsers then please visit the support section on the jScrollPane
// website (http://jscrollpane.kelvinluck.com/) for more information on getting support. You are also
// welcome to fork the project on GitHub if you can contribute a fix for a given issue.
//
// jQuery Versions - 1.4.2
// Browsers Tested - Firefox 3.6.8, Safari 5, Opera 10.6, Chrome 5.0, IE 6, 7, 8
//
// About: Release History
//
// 2.0.0beta3 - (2010-08-27) Horizontal mousewheel, mwheelIntent, keyboard support, bug fixes
// 2.0.0beta2 - (2010-08-21) Bug fixes
// 2.0.0beta1 - (2010-08-17) Rewrite to follow modern best practices and enable horizontal scrolling, initially hidden
// elements and dynamically sized elements.
// 1.x - (2006-12-31 - 2010-07-31) Initial version, hosted at googlecode, deprecated
(function($,window,undefined){
$.fn.jScrollPane = function(settings)
{
// JScrollPane "class" - public methods are available through $('selector').data('jsp')
function JScrollPane(elem, s)
{
var settings, jsp = this, pane, paneWidth, paneHeight, container, contentWidth, contentHeight,
percentInViewH, percentInViewV, isScrollableV, isScrollableH, verticalDrag, dragMaxY,
verticalDragPosition, horizontalDrag, dragMaxX, horizontalDragPosition,
verticalBar, verticalTrack, scrollbarWidth, verticalTrackHeight, verticalDragHeight, arrowUp, arrowDown,
horizontalBar, horizontalTrack, horizontalTrackWidth, horizontalDragWidth, arrowLeft, arrowRight,
reinitialiseInterval, originalPadding, originalPaddingTotalWidth, previousPaneWidth,
wasAtTop = true, wasAtLeft = true, wasAtBottom = false, wasAtRight = false,
mwEvent = $.fn.mwheelIntent ? 'mwheelIntent.jsp' : 'mousewheel.jsp';
originalPadding = elem.css('paddingTop') + ' ' +
elem.css('paddingRight') + ' ' +
elem.css('paddingBottom') + ' ' +
elem.css('paddingLeft');
originalPaddingTotalWidth = (parseInt(elem.css('paddingLeft')) || 0) +
(parseInt(elem.css('paddingRight')) || 0);
initialise(s);
function initialise(s)
{
var clonedElem, tempWrapper, /*firstChild, lastChild, */isMaintainingPositon, lastContentX, lastContentY,
hasContainingSpaceChanged;
settings = s;
if (pane == undefined) {
elem.css(
{
'overflow': 'hidden',
'padding': 0
}
);
// TODO: Deal with where width/ height is 0 as it probably means the element is hidden and we should
// come back to it later and check once it is unhidden...
paneWidth = elem.innerWidth() + originalPaddingTotalWidth;
paneHeight = elem.innerHeight();
elem.width(paneWidth);
pane = $('<div class="jspPane" />').wrap(
$('<div class="jspContainer" />')
.css({
'width': paneWidth + 'px',
'height': paneHeight + 'px'
}
)
);
elem.wrapInner(pane.parent());
// Need to get the vars after being added to the document, otherwise they reference weird
// disconnected orphan elements...
container = elem.find('>.jspContainer');
pane = container.find('>.jspPane');
pane.css('padding', originalPadding);
/*
// Move any margins from the first and last children up to the container so they can still
// collapse with neighbouring elements as they would before jScrollPane
firstChild = pane.find(':first-child');
lastChild = pane.find(':last-child');
elem.css(
{
'margin-top': firstChild.css('margin-top'),
'margin-bottom': lastChild.css('margin-bottom')
}
);
firstChild.css('margin-top', 0);
lastChild.css('margin-bottom', 0);
*/
} else {
elem.css('width', null);
hasContainingSpaceChanged = elem.outerWidth() + originalPaddingTotalWidth != paneWidth || elem.outerHeight() != paneHeight;
if (hasContainingSpaceChanged) {
paneWidth = elem.innerWidth() + originalPaddingTotalWidth;
paneHeight = elem.innerHeight();
container.css({
'width': paneWidth + 'px',
'height': paneHeight + 'px'
});
}
previousPaneWidth = pane.innerWidth();
if (!hasContainingSpaceChanged && pane.outerWidth() == contentWidth && pane.outerHeight() == contentHeight) {
// Nothing has changed since we last initialised
if (isScrollableH || isScrollableV) { // If we had already set a width then re-set it
pane.css('width', previousPaneWidth + 'px');
elem.css('width', (previousPaneWidth + originalPaddingTotalWidth) + 'px');
}
// Then abort...
return;
}
pane.css('width', null);
elem.css('width', (paneWidth + originalPaddingTotalWidth) + 'px');
container.find('>.jspVerticalBar,>.jspHorizontalBar').remove().end();
}
// Unfortunately it isn't that easy to find out the width of the element as it will always report the
// width as allowed by its container, regardless of overflow settings.
// A cunning workaround is to clone the element, set its position to absolute and place it in a narrow
// container. Now it will push outwards to its maxium real width...
clonedElem = pane.clone().css('position', 'absolute');
tempWrapper = $('<div style="width:1px; position: relative;" />').append(clonedElem);
$('body').append(tempWrapper);
contentWidth = Math.max(pane.outerWidth(), clonedElem.outerWidth());
tempWrapper.remove();
contentHeight = pane.outerHeight(true);
/*alert(contentHeight); */
percentInViewH = contentWidth / paneWidth;
percentInViewV = contentHeight / paneHeight;
isScrollableV = percentInViewV > 1;
isScrollableH = percentInViewH > 1;
//console.log(paneWidth, paneHeight, contentWidth, contentHeight, percentInViewH, percentInViewV, isScrollableH, isScrollableV);
if (!(isScrollableH || isScrollableV)) {
elem.removeClass('jspScrollable');
pane.css({
'top': 0,
'width': container.width() + 'px'
});
removeMousewheel();
removeFocusHandler();
removeKeyboardNav();
unhijackInternalLinks();
} else {
elem.addClass('jspScrollable');
isMaintainingPositon = settings.maintainPosition && (verticalDragPosition || horizontalDragPosition);
if (isMaintainingPositon) {
lastContentX = contentPositionX();
lastContentY = contentPositionY();
}
initialiseVerticalScroll();
initialiseHorizontalScroll();
resizeScrollbars();
if (isMaintainingPositon) {
scrollToX(lastContentX);
scrollToY(lastContentY);
}
initFocusHandler();
initMousewheel();
if (settings.enableKeyboardNavigation) {
initKeyboardNav();
}
observeHash();
if (settings.hijackInternalLinks) {
hijackInternalLinks();
}
}
if (settings.autoReinitialise && !reinitialiseInterval) {
reinitialiseInterval = setInterval(
function()
{
initialise(settings);
},
settings.autoReinitialiseDelay
);
} else if (!settings.autoReinitialise && reinitialiseInterval) {
clearInterval(reinitialiseInterval)
}
elem.trigger('jsp-initialised', [isScrollableH || isScrollableV]);
}
function initialiseVerticalScroll()
{
if (isScrollableV) {
container.append(
$('<div class="jspVerticalBar" />').append(
$('<div class="jspCap jspCapTop" />'),
$('<div class="jspTrack" />').append(
$('<div class="jspDrag" />').append(
$('<div class="jspDragTop" />'),
$('<div class="jspDragBottom" />')
)
),
$('<div class="jspCap jspCapBottom" />')
)
);
verticalBar = container.find('>.jspVerticalBar');
verticalTrack = verticalBar.find('>.jspTrack');
verticalDrag = verticalTrack.find('>.jspDrag');
if (settings.showArrows) {
arrowUp = $('<a class="jspArrow jspArrowUp" />').bind(
'mousedown.jsp', getArrowScroll(0, -1)
).bind('click.jsp', nil);
arrowDown = $('<a class="jspArrow jspArrowDown" />').bind(
'mousedown.jsp', getArrowScroll(0, 1)
).bind('click.jsp', nil);
if (settings.arrowScrollOnHover) {
arrowUp.bind('mouseover.jsp', getArrowScroll(0, -1, arrowUp));
arrowDown.bind('mouseover.jsp', getArrowScroll(0, 1, arrowDown));
}
appendArrows(verticalTrack, settings.verticalArrowPositions, arrowUp, arrowDown);
}
verticalTrackHeight = paneHeight;
container.find('>.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow').each(
function()
{
verticalTrackHeight -= $(this).outerHeight();
}
);
verticalDrag.hover(
function()
{
verticalDrag.addClass('jspHover');
},
function()
{
verticalDrag.removeClass('jspHover');
}
).bind(
'mousedown.jsp',
function(e)
{
// Stop IE from allowing text selection
$('html').bind('dragstart.jsp selectstart.jsp', function() { return false; });
verticalDrag.addClass('jspActive');
var startY = e.pageY - verticalDrag.position().top;
$('html').bind(
'mousemove.jsp',
function(e)
{
positionDragY(e.pageY - startY, false);
}
).bind('mouseup.jsp mouseleave.jsp', cancelDrag);
return false;
}
);
sizeVerticalScrollbar();
updateVerticalArrows();
}
}
function sizeVerticalScrollbar()
{
verticalTrack.height(verticalTrackHeight + 'px');
verticalDragPosition = 0;
scrollbarWidth = settings.verticalGutter + verticalTrack.outerWidth();
// Make the pane thinner to allow for the vertical scrollbar
pane.width(paneWidth - scrollbarWidth - originalPaddingTotalWidth);
// Add margin to the left of the pane if scrollbars are on that side (to position
// the scrollbar on the left or right set it's left or right property in CSS)
if (verticalBar.position().left == 0) {
pane.css('margin-left', scrollbarWidth + 'px');
}
}
function initialiseHorizontalScroll()
{
if (isScrollableH) {
container.append(
$('<div class="jspHorizontalBar" />').append(
$('<div class="jspCap jspCapLeft" />'),
$('<div class="jspTrack" />').append(
$('<div class="jspDrag" />').append(
$('<div class="jspDragLeft" />'),
$('<div class="jspDragRight" />')
)
),
$('<div class="jspCap jspCapRight" />')
)
);
horizontalBar = container.find('>.jspHorizontalBar');
horizontalTrack = horizontalBar.find('>.jspTrack');
horizontalDrag = horizontalTrack.find('>.jspDrag');
if (settings.showArrows) {
arrowLeft = $('<a class="jspArrow jspArrowLeft" />').bind(
'mousedown.jsp', getArrowScroll(-1, 0)
).bind('click.jsp', nil);
arrowRight = $('<a class="jspArrow jspArrowRight" />').bind(
'mousedown.jsp', getArrowScroll(1, 0)
).bind('click.jsp', nil);
if (settings.arrowScrollOnHover) {
arrowLeft.bind('mouseover.jsp', getArrowScroll(-1, 0, arrowLeft));
arrowRight.bind('mouseover.jsp', getArrowScroll(1, 0, arrowRight));
}
appendArrows(horizontalTrack, settings.horizontalArrowPositions, arrowLeft, arrowRight);
}
horizontalDrag.hover(
function()
{
horizontalDrag.addClass('jspHover');
},
function()
{
horizontalDrag.removeClass('jspHover');
}
).bind(
'mousedown.jsp',
function(e)
{
// Stop IE from allowing text selection
$('html').bind('dragstart.jsp selectstart.jsp', function() { return false; });
horizontalDrag.addClass('jspActive');
var startX = e.pageX - horizontalDrag.position().left;
$('html').bind(
'mousemove.jsp',
function(e)
{
positionDragX(e.pageX - startX, false);
}
).bind('mouseup.jsp mouseleave.jsp', cancelDrag);
return false;
}
);
horizontalTrackWidth = container.innerWidth();
sizeHorizontalScrollbar();
updateHorizontalArrows();
} else {
// no horizontal scroll
}
}
function sizeHorizontalScrollbar()
{
container.find('>.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow').each(
function()
{
horizontalTrackWidth -= $(this).outerWidth();
}
);
horizontalTrack.width(horizontalTrackWidth + 'px');
horizontalDragPosition = 0;
}
function resizeScrollbars()
{
if (isScrollableH && isScrollableV) {
var horizontalTrackHeight = horizontalTrack.outerHeight(),
verticalTrackWidth = verticalTrack.outerWidth();
verticalTrackHeight -= horizontalTrackHeight;
$(horizontalBar).find('>.jspCap:visible,>.jspArrow').each(
function()
{
horizontalTrackWidth += $(this).outerWidth();
}
);
horizontalTrackWidth -= verticalTrackWidth;
paneHeight -= verticalTrackWidth;
paneWidth -= horizontalTrackHeight;
horizontalTrack.parent().append(
$('<div class="jspCorner" />').css('width', horizontalTrackHeight + 'px')
);
sizeVerticalScrollbar();
sizeHorizontalScrollbar();
}
// reflow content
if (isScrollableH) {
pane.width((container.outerWidth() - originalPaddingTotalWidth) + 'px');
}
contentHeight = pane.outerHeight();
percentInViewV = contentHeight / paneHeight;
if (isScrollableH) {
horizontalDragWidth = 1 / percentInViewH * horizontalTrackWidth;
if (horizontalDragWidth > settings.horizontalDragMaxWidth) {
horizontalDragWidth = settings.horizontalDragMaxWidth;
} else if (horizontalDragWidth < settings.horizontalDragMinWidth) {
horizontalDragWidth = settings.horizontalDragMinWidth;
}
horizontalDrag.width(horizontalDragWidth + 'px');
dragMaxX = horizontalTrackWidth - horizontalDragWidth;
}
if (isScrollableV) {
verticalDragHeight = 1 / percentInViewV * verticalTrackHeight;
if (verticalDragHeight > settings.verticalDragMaxHeight) {
verticalDragHeight = settings.verticalDragMaxHeight;
} else if (verticalDragHeight < settings.verticalDragMinHeight) {
verticalDragHeight = settings.verticalDragMinHeight;
}
verticalDrag.height(verticalDragHeight + 'px');
dragMaxY = verticalTrackHeight - verticalDragHeight;
}
}
function appendArrows(ele, p, a1, a2)
{
var p1 = "before", p2 = "after", aTemp;
// Sniff for mac... Is there a better way to determine whether the arrows would naturally appear
// at the top or the bottom of the bar?
if (p == "os") {
p = /Mac/.test(navigator.platform) ? "after" : "split";
}
if (p == p1) {
p2 = p;
} else if (p == p2) {
p1 = p;
aTemp = a1;
a1 = a2;
a2 = aTemp;
}
ele[p1](a1)[p2](a2);
}
function getArrowScroll(dirX, dirY, ele) {
return function()
{
arrowScroll(dirX, dirY, this, ele);
this.blur();
return false;
}
}
function arrowScroll(dirX, dirY, arrow, ele)
{
arrow = $(arrow).addClass('jspActive');
var eve, doScroll = function()
{
if (dirX != 0) {
positionDragX(horizontalDragPosition + dirX * settings.arrowButtonSpeed, false);
}
if (dirY != 0) {
positionDragY(verticalDragPosition + dirY * settings.arrowButtonSpeed, false);
}
},
scrollInt = setInterval(doScroll, settings.arrowRepeatFreq);
doScroll();
eve = ele == undefined ? 'mouseup.jsp' : 'mouseout.jsp';
ele = ele || $('html');
ele.bind(
eve,
function()
{
arrow.removeClass('jspActive');
clearInterval(scrollInt);
ele.unbind(eve);
}
);
}
function cancelDrag()
{
$('html').unbind('dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp');
verticalDrag && verticalDrag.removeClass('jspActive');
horizontalDrag && horizontalDrag.removeClass('jspActive');
}
function positionDragY(destY, animate)
{
if (!isScrollableV) {
return;
}
if (destY < 0) {
destY = 0;
} else if (destY > dragMaxY) {
destY = dragMaxY;
}
// can't just check if(animate) because false is a valid value that could be passed in...
if (animate == undefined) {
animate = settings.animateScroll;
}
if (animate) {
jsp.animate(verticalDrag, 'top', destY, _positionDragY);
} else {
verticalDrag.css('top', destY);
_positionDragY(destY);
}
}
function _positionDragY(destY)
{
if (destY == undefined) {
destY = verticalDrag.position().top;
}
container.scrollTop(0);
verticalDragPosition = destY;
var isAtTop = verticalDragPosition == 0,
isAtBottom = verticalDragPosition == dragMaxY,
percentScrolled = destY/ dragMaxY,
destTop = -percentScrolled * (contentHeight - paneHeight);
if (wasAtTop != isAtTop || wasAtBottom != isAtBottom) {
wasAtTop = isAtTop;
wasAtBottom = isAtBottom;
elem.trigger('jsp-arrow-change', [wasAtTop, wasAtBottom, wasAtLeft, wasAtRight]);
}
updateVerticalArrows(isAtTop, isAtBottom);
pane.css('top', destTop);
elem.trigger('jsp-scroll-y', [-destTop, isAtTop, isAtBottom]);
}
function positionDragX(destX, animate)
{
if (!isScrollableH) {
return;
}
if (destX < 0) {
destX = 0;
} else if (destX > dragMaxX) {
destX = dragMaxX;
}
if (animate == undefined) {
animate = settings.animateScroll;
}
if (animate) {
jsp.animate(horizontalDrag, 'left', destX, _positionDragX);
} else {
horizontalDrag.css('left', destX);
_positionDragX(destX);
}
}
function _positionDragX(destX)
{
if (destX == undefined) {
destX = horizontalDrag.position().left;
}
container.scrollTop(0);
horizontalDragPosition = destX;
var isAtLeft = horizontalDragPosition == 0,
isAtRight = horizontalDragPosition == dragMaxY,
percentScrolled = destX / dragMaxX,
destLeft = -percentScrolled * (contentWidth - paneWidth);
if (wasAtLeft != isAtLeft || wasAtRight != isAtRight) {
wasAtLeft = isAtLeft;
wasAtRight = isAtRight;
elem.trigger('jsp-arrow-change', [wasAtTop, wasAtBottom, wasAtLeft, wasAtRight]);
}
updateHorizontalArrows(isAtLeft, isAtRight);
pane.css('left', destLeft);
elem.trigger('jsp-scroll-x', [-destLeft, isAtLeft, isAtRight]);
}
function updateVerticalArrows(isAtTop, isAtBottom)
{
if (settings.showArrows) {
arrowUp[isAtTop ? 'addClass' : 'removeClass']('jspDisabled');
arrowDown[isAtBottom ? 'addClass' : 'removeClass']('jspDisabled');
}
}
function updateHorizontalArrows(isAtLeft, isAtRight)
{
if (settings.showArrows) {
arrowLeft[isAtLeft ? 'addClass' : 'removeClass']('jspDisabled');
arrowRight[isAtRight ? 'addClass' : 'removeClass']('jspDisabled');
}
}
function scrollToY(destY, animate)
{
var percentScrolled = destY / (contentHeight - paneHeight);
positionDragY(percentScrolled * dragMaxY, animate);
}
function scrollToX(destX, animate)
{
var percentScrolled = destX / (contentWidth - paneWidth);
positionDragX(percentScrolled * dragMaxX, animate);
}
function scrollToElement(ele, stickToTop, animate)
{
var e, eleHeight, eleTop = 0, viewportTop, maxVisibleEleTop, destY;
// Legal hash values aren't necessarily legal jQuery selectors so we need to catch any
// errors from the lookup...
try {
e = $(ele);
} catch (err) {
return;
}
eleHeight = e.outerHeight();
container.scrollTop(0);
// loop through parents adding the offset top of any elements that are relatively positioned between
// the focused element and the jspPane so we can get the true distance from the top
// of the focused element to the top of the scrollpane...
while (!e.is('.jspPane')) {
eleTop += e.position().top;
e = e.offsetParent();
if (/^body|html$/i.test(e[0].nodeName)) {
// we ended up too high in the document structure. Quit!
return;
}
}
viewportTop = contentPositionY();
maxVisibleEleTop = viewportTop + paneHeight;
if (eleTop < viewportTop || stickToTop) { // element is above viewport
destY = eleTop - settings.verticalGutter;
} else if (eleTop + eleHeight > maxVisibleEleTop) { // element is below viewport
destY = eleTop - paneHeight + eleHeight + settings.verticalGutter;
}
if (destY) {
scrollToY(destY, animate);
}
// TODO: Implement automatic horizontal scrolling?
}
function contentPositionX()
{
return -pane.position().left;
}
function contentPositionY()
{
return -pane.position().top;
}
function initMousewheel()
{
container.unbind(mwEvent).bind(
mwEvent,
function (event, delta, deltaX, deltaY) {
var dX = horizontalDragPosition, dY = verticalDragPosition;
positionDragX(horizontalDragPosition + deltaX * settings.mouseWheelSpeed, false)
positionDragY(verticalDragPosition - deltaY * settings.mouseWheelSpeed, false);
// return true if there was no movement so rest of screen can scroll
return dX == horizontalDragPosition && dY == verticalDragPosition;
}
);
}
function removeMousewheel()
{
container.unbind(mwEvent);
}
function nil()
{
return false;
}
function initFocusHandler()
{
pane.unbind('focusin.jsp').bind(
'focusin.jsp',
function(e)
{
if(e.target === pane[0]){return;}
scrollToElement(e.target, false);
}
);
}
function removeFocusHandler()
{
pane.unbind('focusin.jsp');
}
function initKeyboardNav()
{
var pressed, pressedTimer;
elem.attr('tabindex', 0)
.unbind('keydown.jsp')
.bind(
'keydown.jsp',
function(e)
{
if(e.target !== elem[0]){
return;
}
var dX = horizontalDragPosition, dY = verticalDragPosition, step = pressed ? 2 : 16;
switch(e.keyCode) {
case 40: // down
positionDragY(verticalDragPosition + step, false);
break;
case 38: // up
positionDragY(verticalDragPosition - step, false);
break;
case 34: // page down
case 32: // space
scrollToY(contentPositionY() + Math.max(32, paneHeight) - 16);
break;
case 33: // page up
scrollToY(contentPositionY() - paneHeight + 16);
break;
case 35: // end
scrollToY(contentHeight - paneHeight);
break;
case 36: // home
scrollToY(0);
break;
case 39: // right
positionDragX(horizontalDragPosition + step, false);
break;
case 37: // left
positionDragX(horizontalDragPosition - step, false);
break;
}
if( !(dX == horizontalDragPosition && dY == verticalDragPosition) ){
pressed = true;
clearTimeout(pressedTimer);
pressedTimer = setTimeout(function(){
pressed = false;
}, 260);
return false;
}
}
);
if(settings.hideFocus) {
elem.css('outline', 'none');
if('hideFocus' in container[0]){
elem.attr('hideFocus', true);
}
} else {
elem.css('outline', '');
if('hideFocus' in container[0]){
elem.attr('hideFocus', false);
}
}
}
function removeKeyboardNav()
{
elem.attr('tabindex', '-1')
.removeAttr('tabindex')
.unbind('keydown.jsp');
}
function observeHash()
{
if (location.hash && location.hash.length > 1) {
var e, retryInt;
try {
e = $(location.hash);
} catch (err) {
return;
}
if (e.length && pane.find(e)) {
// nasty workaround but it appears to take a little while before the hash has done its thing
// to the rendered page so we just wait until the container's scrollTop has been messed up.
if (container.scrollTop() == 0) {
retryInt = setInterval(
function()
{
if (container.scrollTop() > 0) {
scrollToElement(location.hash, true);
$(document).scrollTop(container.position().top);
clearInterval(retryInt);
}
},
50
)
} else {
scrollToElement(location.hash, true);
$(document).scrollTop(container.position().top);
}
}
}
}
function unhijackInternalLinks()
{
$('a.jspHijack').unbind('click.jsp-hijack').removeClass('jspHijack');
}
function hijackInternalLinks()
{
unhijackInternalLinks();
$('a[href^=#]').addClass('jspHijack').bind(
'click.jsp-hijack',
function()
{
var uriParts = this.href.split('#'), hash;
if (uriParts.length > 1) {
hash = uriParts[1];
if (hash.length > 0 && pane.find('#' + hash).length > 0) {
scrollToElement('#' + hash, true);
// Need to return false otherwise things mess up... Would be nice to maybe also scroll
// the window to the top of the scrollpane?
return false;
}
}
}
)
}
// Public API
$.extend(
jsp,
{
// Reinitialises the scroll pane (if it's internal dimensions have changed since the last time it
// was initialised). The settings object which is passed in will override any settings from the
// previous time it was initialised - if you don't pass any settings then the ones from the previous
// initialisation will be used.
reinitialise: function(s)
{
s = $.extend({}, s, settings);
initialise(s);
},
// Scrolls the specified element (a jQuery object, DOM node or jQuery selector string) into view so
// that it can be seen within the viewport. If stickToTop is true then the element will appear at
// the top of the viewport, if it is false then the viewport will scroll as little as possible to
// show the element. You can also specify if you want animation to occur. If you don't provide this
// argument then the animateScroll value from the settings object is used instead.
scrollToElement: function(ele, stickToTop, animate)
{
scrollToElement(ele, stickToTop, animate);
},
// Scrolls the pane so that the specified co-ordinates within the content are at the top left
// of the viewport. animate is optional and if not passed then the value of animateScroll from
// the settings object this jScrollPane was initialised with is used.
scrollTo: function(destX, destY, animate)
{
scrollToX(destX, animate);
scrollToY(destY, animate);
},
// Scrolls the pane so that the specified co-ordinate within the content is at the left of the
// viewport. animate is optional and if not passed then the value of animateScroll from the settings
// object this jScrollPane was initialised with is used.
scrollToX: function(destX, animate)
{
scrollToX(destX, animate);
},
// Scrolls the pane so that the specified co-ordinate within the content is at the top of the
// viewport. animate is optional and if not passed then the value of animateScroll from the settings
// object this jScrollPane was initialised with is used.
scrollToY: function(destY, animate)
{
scrollToY(destY, animate);
},
// Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
// the value of animateScroll from the settings object this jScrollPane was initialised with is used.
scrollBy: function(deltaX, deltaY, animate)
{
jsp.scrollByX(deltaX, animate);
jsp.scrollByY(deltaY, animate);
},
// Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
// the value of animateScroll from the settings object this jScrollPane was initialised with is used.
scrollByX: function(deltaX, animate)
{
var destX = contentPositionX() + deltaX,
percentScrolled = destX / (contentWidth - paneWidth);
positionDragX(percentScrolled * dragMaxX, animate);
},
// Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
// the value of animateScroll from the settings object this jScrollPane was initialised with is used.
scrollByY: function(deltaY, animate)
{
var destY = contentPositionY() + deltaY,
percentScrolled = destY / (contentHeight - paneHeight);
positionDragY(percentScrolled * dragMaxY, animate);
},
// This method is called when jScrollPane is trying to animate to a new position. You can override
// it if you want to provide advanced animation functionality. It is passed the following arguments:
// * ele - the element whose position is being animated
// * prop - the property that is being animated
// * value - the value it's being animated to
// * stepCallback - a function that you must execute each time you update the value of the property
// You can use the default implementation (below) as a starting point for your own implementation.
animate: function(ele, prop, value, stepCallback)
{
var params = {};
params[prop] = value;
ele.animate(
params,
{
'duration' : settings.animateDuration,
'ease' : settings.animateEase,
'queue' : false,
'step' : stepCallback
}
);
},
// Returns the current x position of the viewport with regards to the content pane.
getContentPositionX: function()
{
return contentPositionX();
},
// Returns the current y position of the viewport with regards to the content pane.
getContentPositionY: function()
{
return contentPositionY();
},
// Returns whether or not this scrollpane has a horizontal scrollbar.
getIsScrollableH: function()
{
return isScrollableH;
},
// Returns whether or not this scrollpane has a vertical scrollbar.
getIsScrollableV: function()
{
return isScrollableV;
},
// Gets a reference to the content pane. It is important that you use this method if you want to
// edit the content of your jScrollPane as if you access the element directly then you may have some
// problems (as your original element has had additional elements for the scrollbars etc added into
// it).
getContentPane: function()
{
return pane;
},
// Scrolls this jScrollPane down as far as it can currently scroll. If animate isn't passed then the
// animateScroll value from settings is used instead.
scrollToBottom: function(animate)
{
positionDragY(dragMaxY, animate);
},
// Hijacks the links on the page which link to content inside the scrollpane. If you have changed
// the content of your page (e.g. via AJAX) and want to make sure any new anchor links to the
// contents of your scroll pane will work then call this function.
hijackInternalLinks: function()
{
hijackInternalLinks();
}
}
);
}
// Pluginifying code...
settings = $.extend({}, $.fn.jScrollPane.defaults, settings);
var ret;
this.each(
function()
{
var elem = $(this), jspApi = elem.data('jsp');
if (jspApi) {
jspApi.reinitialise(settings);
} else {
jspApi = new JScrollPane(elem, settings);
elem.data('jsp', jspApi);
}
ret = ret ? ret.add(elem) : elem;
}
)
return ret;
};
$.fn.jScrollPane.defaults = {
'showArrows' : false,
'maintainPosition' : true,
'autoReinitialise' : false,
'autoReinitialiseDelay' : 500,
'verticalDragMinHeight' : 0,
'verticalDragMaxHeight' : 99999,
'horizontalDragMinWidth' : 0,
'horizontalDragMaxWidth' : 99999,
'animateScroll' : false,
'animateDuration' : 300,
'animateEase' : 'linear',
'hijackInternalLinks' : false,
'verticalGutter' : 4,
'horizontalGutter' : 4,
'mouseWheelSpeed' : 10,
'arrowButtonSpeed' : 10,
'arrowRepeatFreq' : 100,
'arrowScrollOnHover' : false,
'verticalArrowPositions' : 'split',
'horizontalArrowPositions' : 'split',
'enableKeyboardNavigation' : true,
'hideFocus' : false
};
})(jQuery,this);
12/jscrollpane-2b3.css 0000604 00000003510 15071137203 0010372 0 ustar 00 /*
* CSS Styles that are needed by jScrollPane for it to operate correctly.
*
* Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
* may not operate correctly without them.
*/
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #000 url(../__imgs/furn/track.gif) repeat-y center;
position: relative;
}
.jspDrag
{
background: #666;
border: solid #aaa 2px;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background-color: rgba(0,0,0,0.9);
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrowUp
{
background-image: url("../__imgs/furn/arrow_up.gif");
}
.jspArrowDown
{
background-image: url("../__imgs/furn/arrow_down.gif");
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspArrowUp.jspDisabled
{
cursor: default;
background-image: url("../__imgs/furn/arrow_up.gif");
}
.jspArrowDown.jspDisabled
{
cursor: default;
background-image: url("../__imgs/furn/arrow_down.gif");
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
} 12/after.html 0000604 00000034166 15071137203 0006762 0 ustar 00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ven67p9fXoMQpbw1icSXo8l+I5Z+upY90LnIqaPDgKo=" />
<link href="brs_main.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<title>The History of Tinyfish</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 8]><script src="../__js/IE8.js" type="text/javascript"></script><![endif]-->
<script src="http://cdn.jquerytools.org/1.2.2/full/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../script/jquery.jscrollpane.js"></script>
<script language="javascript" type="text/javascript">
$(function()
{
var api = $("#content").jScrollPane({
showArrows: true
}).data('jsp');
$(window).bind(
'resize',
function()
{
api.reinitialise();
}
).trigger('resize');
});
</script>
</head>
<body class="nopage">
<div id="content">
<h1>The History of Tinyfish</h1>
<p>It all began with a pair of broken arms and two dodgy eyes.</p>
<p>It’s 1978, the year that <a href="../__imgs/band/history/schoolboyjim.jpg" title="Jim at school" rel="#hist02">Jim Sanders</a> and <a href="../__imgs/band/history/babysimon.jpg" title="Simon as a baby" rel="#hist01">Simon Godfrey</a> met at school in East Sheen (South London). Although each had been aware of the other since the age of five, the two would have been on nothing more than nodding acquaintance, save for two medical problems that forced them together and would eventually lead to the band we know today as Tinyfish.</p>
<p>Bloody weaklings.</p>
<p>Jim had been diagnosed with a rare retinal disease which had a good chance of robbing him of his vision, and had recently undergone laser eye surgery. Simon more comedically had broken both arms after falling off a roof, leaving him with seriously weakened joints. As part of their convalescence from their respective surgeries, both boys were excused sports for six months.</p>
<p>While the rest of the kids kicked the living crap out of each other under the pretence of playing football or rugby, Jim and Simon sat on a low school wall watching the on-field carnage and eyeing one another warily. Initially Simon was the talkative one while Jim sat silently, but as soon as the subject matter turned to music, both began to find some common ground, and the conversation became a two way street.</p>
<p>Initially, Jim had been a Rock/New Wave fan who loved Thin Lizzy (above all others), but incongruously, also the Skids (who would later become Big Country) and the Rezillos (who wouldn’t). Simon on the other hand was a fan of ELO and The Sweet but both agreed that music, and in particular, rock bands, were the bee’s knees.</p>
<p>Around the same time , Simon had struck up a friendship with another boy at school called <a href="../__imgs/band/history/youngpaul.jpg" title="Paul - much younger" rel="#hist03">Paul Worwood</a>, initially during school music lessons. The pair were both big fans of Dungeons and Dragons and would play the game constantly throughout their teenage years.</p>
<p>Bloody geeks.</p>
<p>As the 70’s gave way to the 80’s and the three grew to be good friends, Jim drew Simon and Paul towards a new love; heavy metal. Over the next three years, the trio saw every metal band that played at their local venue (The Hammersmith Odeon). While the three saw the likes of Thin Lizzy, Saxon, MSG, Iron Maiden and The Scorpions, their listening tastes also encompassed bands such as Yes, Genesis, King Crimson and Magnum.</p>
<p>Jim had first played ‘Going For The One’ by Yes to Simon back in the 70's (Simon rather uncharitably dubbed it ‘f***ing Country & Western’. To be fair, Jim told Simon not to bother with Jethro Tull, as he thought they were arse... without actually having ever heard them. Twit.). Jim persevered however, and when he spun ‘A Farewell To Kings’ by Rush in an afternoon listening session, Simon was well and truly hooked. He now also likes Yes very much. Hah! Jim now also likes Jethro Tull. Hah! Hah!</p>
<p>During their time at Richmond College (South West London), Jim and Simon met guitarist Nick Denville, and formed their first band, with Paul joining on bass soon after. Paul was the only person they knew who owned a car. They also thought he was a top bloke, and so without mentioning the car caveat, the three miscreants cajoled Paul into buying a bass guitar and an amplifier. They called themselves <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">‘Blackstone Edge’</a> and they were bloody rubbish. All they needed was a keyboard player to crown their musical ineptitude.</p>
<p>Simon’s younger brother Jem was 14 when he received his first keyboard (a Casio home synth which he put through a flanger pedal to make it sound cosmic). Jem was initially invited to rehearsals to hold the lyrics up for Jim to sing from while the rest of the band played. It soon became obvious to the guys that Jem's talents were wasted as a music stand and so he was invited into the band. This line up survived for a few months before Nick Denville left to live a happier and entirely more melodic life elsewhere.</p>
<p>Bloody kids.</p>
<p>The band continued, and Simon relentlessly poured prog music into Jem's head which was immediately absorbed by the young keyboard player. Less than six months later, Jem had learned all of Tony Banks’ keyboard solos from both Seconds Out and Three Sides Live along with Rick Wakeman's and Patrick Moraz's solos from Yesshows. With Jem's considerable technique, and the band hungry to write original music, the direction of the band was truely set towards progressive rock. The name <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">Blackstone Edge</a> was soon dropped in favour of ‘Freefall Warriors’ (after a story in a Doctor Who comic) which very quickly contracted simply to <a href="../__imgs/band/history/freefall.jpg" title="Freefall Mk.1" rel="#hist06">‘Freefall’</a> and with the addition of vocalist Andrew Lovatt, the band began to rehearse <a href="../__imgs/band/history/freefallposter.jpg" title="Poster for Freefall's first gig" rel="#hist05">in preparation for live gigs.</a></p>
<p>During this time the band bumped into actor <a href="../__imgs/band/history/tonyaitken.jpg" title="Tony Aitken" rel="#hist07">Tony Aitken</a> who had worked during his less successful years as a supply teacher at Jim and Simon’s school in the 70’s. Tony was looking for musicians to back him in a covers band, and the guys duly offered their services (even though they then had no live experience whatsoever). The arrangement worked so well that they kept the band going for over a decade and it was there, working the pubs and clubs of southern England, that they learned the musical chops that would serve them so well in later years.</p>
<p>In parallel to their function band work, Freefall practice/writing sessions continued. As luck would have it, IQ rehearsed in the studio next door to them, and on the back of their first gig, attended by IQ’s then manager, they managed to land the support slot at IQ’s Christmas show <a href="../__imgs/band/history/freefallmarquee.jpg" title="Freefall at the Marquee" rel="#hist08">at the Marquee Club in London. Gulp.</a></p>
<p>Thankfully, the band hit it off immediately with the crowd and soon managed to get a string of gigs with bands like Jadis, Ark, Galahad, Mentaur and Geoff Mann from Twelth Night. Freefall looked as though they were going to make a big impact with the prog community but after an ill-judged attempt to ‘go commercial’ in the early ‘90s, (Bloody managers!) Jim left the band and the remaining members recruited a very nice gentleman called <a href="../__imgs/band/history/johnboyes.jpg" title="and on guitar - Mr. John Boyes!" rel="#hist09">John Boyes</a> on guitar. However, the moment was lost and the band soon fell apart.</p>
<p>Bloody idiots.</p>
<p>Jim and Jem briefly went on, to form Pop-proggers “Charlottes’ Web” before Jem gave up the scene to work for national radio (although Jem's involvement with prog would be re-ignited a decade later with the formation (with John Boyes) of the Prog supergroup Frost*).</p>
<p>Meanwhile, Simon and Paul formed an acoustic outfit called <a href="../__imgs/band/history/maddogs.jpg" title="Men Are Dead Mk. I" rel="#hist10">‘Men Are Dead’</a> with keyboard player Col Alkins and lyricist/harmonica player Rob Ramsay. Simon had met Rob way back in the early 80’s at Richmond College, at the same time Freefall were making their first tentative steps in music. They became good friends and Rob was always involved at some level, either by helping out at gigs or writing the occasional lyric.</p>
<br />
<p>Men Are Dead began to play gigs on London's open mic scene (where any artist can roll up and play a short set of between two and five songs) and the band proved to be extremely popular with both audience and fellow musos alike. Col left after their first album, but thankfully, Jim once again joined up with Simon and Paul as a second guitarist, along with <a href="../__imgs/band/history/wayne.jpg" title="Wayne caught in the headlights" rel="#hist12">Wayne Collier</a>, an extraordinary drummer who played in almost every band in West London. <a href="../__imgs/band/history/menaredead.jpg" title="Men Are Dead Mk. II" rel="#hist11">What evolved was a prototype Tinyfish</a> sound and much of the band’s current style comes from these early twin guitar shows.</p>
<p>The millennium came and went, and so did the name ‘Men Are Dead’. In came Simon’s alter ego ‘Simon Walsh’, a <em>nom-de-guerre</em> he still uses today when playing solo acoustic gigs. Whilst notching up appearances in the UK, Germany, France, Estonia and America, they recruited a third guitarist <a href="../__imgs/band/history/hw1.jpg" title="Tim solos at the Hope and Anchor" rel="#hist13">(Tim Eyles)</a> and all looked rosy (if a little Lynyrd Skynyrd) in the garden. Behind the scenes however, things were not going well with the band. Frustration with the strict definitions of acoustic music imposed by many clubs and venues began to take their toll on both the music and musicians. Their material was becoming more complex and the songs started to push past the three minute mark, as the band's deep-seated prog influences once again made themselves felt.</p>
<p>Finally in the late autumn of 2004, after much soul searching, Simon sent Jim an e-mail suggesting that maybe there was little more they could achieve as an acoustic unit and perhaps they should return to their progressive roots. Jim happily agreed and an invite was duly sent out to both Paul and Rob asking if they would be interested in joining, which thankfully they did.</p>
<p>Simon disbanded the acoustic band, with Tim Eyles joining the punk-pop band ‘The Random’ and the four remaining musicians <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">assembled in Simon's loft</a> and began writing and rehearsing. Within six weeks it was obvious that there were real possibilities in the music they were making, but the question as to how to record this new material was causing them concern. None of them could afford to go the professional route, so the decision was made to turn the loft into a studio, and try it themselves.</p>
<p>Robert had set up Lazy Gun Records several years previously, to promote both Men Are Dead and Simon Walsh, and suggested that this new band join the roster. This gave them complete artistic and financial control of their work. </p>
<p>Bloody tight bastards.</p>
<p>Finally the subject of the name for the band reared its ugly head. There were thoughts that they could resurrect the name Freefall but that idea was soon discarded. This was a new band, and it deserved a new name (besides, someone else was now using ‘Freefall’ and they looked bigger and meaner than this band). It was Jim that quipped that they were just tiny fish compared to some of the huge prog bands still out there and within moments the name had stuck.</p>
<p>The problem remained that they were a man short for playing live shows, but in the studio, that base was covered by Simon who, happily, can play both <a href="../__imgs/band/history/drumkit.jpg" title="Simon's electronic drumkit" rel="#hist15">drums</a> and <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">guitar</a> in equal measure (although not at the same time). Meanwhile, the studio had taken shape and the band had found that familiar progressive chemistry once again. The smiles were back on everybody’s faces, and the band had a sound they could work to develop.</p>
<p>When the talk turned once more to live performances, Jim mentioned that he knew a drummer of many bands, the semi-Italian <a href="../__imgs/band/history/leonstatue.jpg" title="Leon at the kit" rel="#hist16">Leon Camfield</a>, and after a few rehearsals (and many beers) together, Leon (for whom truely progressive music is a long held love (note King Crimson tattoo on arm)) enthusiastically joined to complete the Fab Five.</p>
<p>So here we are in 2010. <a href="../__imgs/band/history/tinyfish1.jpg" title="tinyfish" rel="#hist17">Tinyfish</a> have gigged around the country, released both two albums, a mini-album, and a live album & DVD, and have <a href="../__imgs/band/history/tinyfish2.jpg" title="tinyfish" rel="#hist18">arrived at a destination</a> where they feel at home, and are proud of their journey to this place of better dreams.</p>
<p class="centre"><a href="../__imgs/band/history/strangestudioshot.jpg" title="a tinyfish close encounter" rel="#hist19">Bloody pretentious tossers.</a></p>
</div>
</body>
</html>
12/index.html 0000604 00000004015 15071137203 0006756 0 ustar 00 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jScrollPane - issue 12</title>
<!-- styles specific to demo site -->
<link type="text/css" href="../../style/demo.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- scripts specific to this demo site -->
<script type="text/javascript" src="../../script/demo.js"></script>
</head>
<body>
<div id="top-nav">
<img src="../../image/logo.png" width="196" height="69" alt="jScrollPane">
<ul>
<li><a href="../../index.html">Home</a></li>
<li><a href="../../index.html#examples">Examples</a></li>
<li><a href="../../index.html#themes">Themes</a></li>
<li><a href="../../index.html#usage">How to use</a></li>
<li><a href="../../faqs.html">FAQs</a></li>
<li><a href="../../known_issues.html">Known issues</a></li>
<li><a href="../../index.html#support">Support</a></li>
<li><a href="../../index.html#download">Download</a></li>
</ul>
</div>
<div id="container">
<h1>jScrollPane - issue 12</h1>
<p>
This page demonstrates the bug described in <a href="http://github.com/vitch/jScrollPane/issues#issue/12">
issue 12</a> as reported (with nice striped down test cases) by
<a href="http://groups.google.com/group/jscrollpane/browse_thread/thread/98efa9ded76d5729">TinyFish</a>.
</p>
<ul class="link-list">
<li>
<a href="before.html">Before</a> - showing the bug as it appears in the version of jScrollPane which
was current when it was reported.
</li>
<li>
<a href="native.html">Native</a> - showing how the page looks with native scrollbars (i.e. if
jScrollPane isn't initialised).
</li>
<li>
<a href="after.html">After</a> - showing the page which was displaying the bug with the latest
version of jScrollPane.
</li>
</ul>
</div>
</body>
</html> 12/brs_main.css 0000604 00000011745 15071137203 0007275 0 ustar 00 @charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'HelveticaNeueThin';
src: url('helveticaneue-thin-webfont.eot');
src: local('���'), url('helveticaneue-thin-webfont.woff') format('woff'), url('helveticaneue-thin-webfont.ttf') format('truetype'), url('helveticaneue-thin-webfont.svg#webfont2SG3yTkB') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
body {
font-family: 'HelveticaNeueThin',Helvetica,Arial,sans-serif;
font-weight: normal;
font-style: normal;
line-height: normal;
font-size-adjust: 0.51;
margin: 0px;
color: #fff;
background-color: #000;
overflow:hidden;
}
P, A {
font-size: 1em;
line-height: 1.2em;
}
P {
text-align: justify;
margin-bottom: 1.0em;
}
a:active {color:#e0262f; text-decoration: none;} /* selected link */
a:visited {color:#c62128; text-decoration: none;} /* visited link */
a:link {color:#d2232a; text-decoration: none;} /* unvisited link */
a:hover {color:#df262e; text-decoration: underline;} /* mouse over link */
LI LI, LI LI A, TD, TD P, BLOCKQUOTE P {
font-size: 1em;
line-height: 1.2em;
}
TABLE {
border: none;
}
TD {
vertical-align: top;
padding: 0px;
}
A {
outline: none;
}
A IMG {
border: none;
}
object { outline:none; }
.red {
color: #d2232a;
}
STRONG {
color: #d2232a;
font-weight: bold;
}
h1,h2,h3,h4,h5 {
color: #d2232a;
}
h1 {
font-size: 1.6em;
font-weight: normal;
font-style: normal;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
h2 {
font-size: 1.3em;
font-weight: normal;
font-style: italic;
margin-top: 0.8em;
margin-bottom: 0px;
}
h5 {
font-size: 0.8em;
margin: 0.5em 0px 0px 0px;
}
hr {
color: #ff0000;
}
/* ----------------- begin supersize --------------------- */
#loading {
position: absolute;
top: 49.5%;
left: 49.5%;
z-index: 5;
width: 24px;
height: 24px;
text-indent: -999em;
background-image: url('../__imgs/furn/loading.gif');
}
#supersize {
position:fixed;
}
#supersize img, #supersize a {
height:100%;
width:100%;
position:absolute;
z-index: 0;
}
#supersize img {
image-rendering: optimizeQuality; /* Firefox 3.6+; default behavior is identical, no need to specify */
-ms-interpolation-mode: bicubic; /* Internet Explorer 7.0; default in IE8+ */
}
#supersize .prevslide, #supersize .prevslide img {
z-index: 1;
}
#supersize .activeslide, #supersize .activeslide img {
z-index: 2;
}
/* ------------------ end supersize ---------------------- */
/* ------------------- begin header ---------------------- */
#header {
position: absolute;
top: 15px;
width: 100%;
margin: 0px auto;
z-index: 4;
text-align: center;
}
#header p {
text-align: center;
margin-top: 0.5em;
}
/* -------------------- end header ----------------------- */
/* ------------------- begin content --------------------- */
#content {
z-index: 3;
background-color: #000;
background-color: rgba(0,0,0,0.9);
position: absolute;
left: 0px;
bottom: 17%;
height: 62%;
width: 45%;
border: 1px solid #555;
border-left: 0px;
padding: 0px;
padding-left: 30px;
padding-right: 20px;
overflow: auto;
}
.frontpage #content {
visibility: hidden;
}
.gallerypage #content {
border: none;
width: 100%;
height: 33em;
bottom: 15%;
padding: 0px;
margin: 0px;
}
.gallerypage #content p {
text-align: center;
}
.videopage #content {
border: none;
width: 100%;
height: 65%;
bottom: 15%;
padding: 0px;
margin: 0px;
}
.videopage #content p {
text-align: center;
}
/* -------------------- end content ---------------------- */
/* ----------------- begin navigation -------------------- */
#navigate {
position: absolute;
height: 4em;
width: 100%;
padding: 0px;
margin: 0px auto;
bottom: 5%;
z-index: 3;
background-color: #000;
background-color: rgba(0,0,0,0.9);
border: 1px solid #555;
border-left: 0px;
border-right: 0px;
}
#nav, #nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-position: outside;
position: relative;
line-height: 1.6em;
}
#nav {
padding: 0.4em;
}
#nav a {
display: block;
height: 1.6em;
padding: 0px 10px;
text-decoration:none;
line-height: 1.6em;
background-color: #000;
background-color: rgba(0,0,0,0.9); /* bug in Opera!!! */
}
#nav a:link, #nav a:active, #nav a:visited {
color: #fff;
}
#nav a:hover {
color: #d2232a;
}
#nav li {
float: left;
font-size: 1em;
line-height: 1.6em;
}
#nav ul {
position:absolute;
display: none;
}
#nav ul li a {
float: left;
font-size: 1em;
line-height: 1.6em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display: block;
height: 1.6em;
}
/* ------------------ end navigation --------------------- */
/* ------------------ begin viewcart --------------------- */
#viewcart {
z-index: 4;
background-color: #000;
background-color: rgba(0,0,0,0.9);
position: absolute;
right: 10px;
bottom: 5.5%;
height: 51px;
width: 130px;
padding: 0px;
overflow: hidden;
}
/* ------------------- end viewcart ---------------------- */
12/after_reinit.html 0000604 00000034032 15071137203 0010324 0 ustar 00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ven67p9fXoMQpbw1icSXo8l+I5Z+upY90LnIqaPDgKo=" />
<link href="brs_main.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<title>The History of Tinyfish</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 8]><script src="../__js/IE8.js" type="text/javascript"></script><![endif]-->
<script src="http://cdn.jquerytools.org/1.2.2/full/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../script/jquery.jscrollpane.js"></script>
<script language="javascript" type="text/javascript">
$(function()
{
$("#content").jScrollPane({
showArrows: true,
autoReinitialise: true
});
});
</script>
</head>
<body class="nopage">
<div id="content">
<h1>The History of Tinyfish</h1>
<p>It all began with a pair of broken arms and two dodgy eyes.</p>
<p>It’s 1978, the year that <a href="../__imgs/band/history/schoolboyjim.jpg" title="Jim at school" rel="#hist02">Jim Sanders</a> and <a href="../__imgs/band/history/babysimon.jpg" title="Simon as a baby" rel="#hist01">Simon Godfrey</a> met at school in East Sheen (South London). Although each had been aware of the other since the age of five, the two would have been on nothing more than nodding acquaintance, save for two medical problems that forced them together and would eventually lead to the band we know today as Tinyfish.</p>
<p>Bloody weaklings.</p>
<p>Jim had been diagnosed with a rare retinal disease which had a good chance of robbing him of his vision, and had recently undergone laser eye surgery. Simon more comedically had broken both arms after falling off a roof, leaving him with seriously weakened joints. As part of their convalescence from their respective surgeries, both boys were excused sports for six months.</p>
<p>While the rest of the kids kicked the living crap out of each other under the pretence of playing football or rugby, Jim and Simon sat on a low school wall watching the on-field carnage and eyeing one another warily. Initially Simon was the talkative one while Jim sat silently, but as soon as the subject matter turned to music, both began to find some common ground, and the conversation became a two way street.</p>
<p>Initially, Jim had been a Rock/New Wave fan who loved Thin Lizzy (above all others), but incongruously, also the Skids (who would later become Big Country) and the Rezillos (who wouldn’t). Simon on the other hand was a fan of ELO and The Sweet but both agreed that music, and in particular, rock bands, were the bee’s knees.</p>
<p>Around the same time , Simon had struck up a friendship with another boy at school called <a href="../__imgs/band/history/youngpaul.jpg" title="Paul - much younger" rel="#hist03">Paul Worwood</a>, initially during school music lessons. The pair were both big fans of Dungeons and Dragons and would play the game constantly throughout their teenage years.</p>
<p>Bloody geeks.</p>
<p>As the 70’s gave way to the 80’s and the three grew to be good friends, Jim drew Simon and Paul towards a new love; heavy metal. Over the next three years, the trio saw every metal band that played at their local venue (The Hammersmith Odeon). While the three saw the likes of Thin Lizzy, Saxon, MSG, Iron Maiden and The Scorpions, their listening tastes also encompassed bands such as Yes, Genesis, King Crimson and Magnum.</p>
<p>Jim had first played ‘Going For The One’ by Yes to Simon back in the 70's (Simon rather uncharitably dubbed it ‘f***ing Country & Western’. To be fair, Jim told Simon not to bother with Jethro Tull, as he thought they were arse... without actually having ever heard them. Twit.). Jim persevered however, and when he spun ‘A Farewell To Kings’ by Rush in an afternoon listening session, Simon was well and truly hooked. He now also likes Yes very much. Hah! Jim now also likes Jethro Tull. Hah! Hah!</p>
<p>During their time at Richmond College (South West London), Jim and Simon met guitarist Nick Denville, and formed their first band, with Paul joining on bass soon after. Paul was the only person they knew who owned a car. They also thought he was a top bloke, and so without mentioning the car caveat, the three miscreants cajoled Paul into buying a bass guitar and an amplifier. They called themselves <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">‘Blackstone Edge’</a> and they were bloody rubbish. All they needed was a keyboard player to crown their musical ineptitude.</p>
<p>Simon’s younger brother Jem was 14 when he received his first keyboard (a Casio home synth which he put through a flanger pedal to make it sound cosmic). Jem was initially invited to rehearsals to hold the lyrics up for Jim to sing from while the rest of the band played. It soon became obvious to the guys that Jem's talents were wasted as a music stand and so he was invited into the band. This line up survived for a few months before Nick Denville left to live a happier and entirely more melodic life elsewhere.</p>
<p>Bloody kids.</p>
<p>The band continued, and Simon relentlessly poured prog music into Jem's head which was immediately absorbed by the young keyboard player. Less than six months later, Jem had learned all of Tony Banks’ keyboard solos from both Seconds Out and Three Sides Live along with Rick Wakeman's and Patrick Moraz's solos from Yesshows. With Jem's considerable technique, and the band hungry to write original music, the direction of the band was truely set towards progressive rock. The name <a href="../__imgs/band/history/blackstoneedge.jpg" title="Blackstone Edge" rel="#hist04">Blackstone Edge</a> was soon dropped in favour of ‘Freefall Warriors’ (after a story in a Doctor Who comic) which very quickly contracted simply to <a href="../__imgs/band/history/freefall.jpg" title="Freefall Mk.1" rel="#hist06">‘Freefall’</a> and with the addition of vocalist Andrew Lovatt, the band began to rehearse <a href="../__imgs/band/history/freefallposter.jpg" title="Poster for Freefall's first gig" rel="#hist05">in preparation for live gigs.</a></p>
<p>During this time the band bumped into actor <a href="../__imgs/band/history/tonyaitken.jpg" title="Tony Aitken" rel="#hist07">Tony Aitken</a> who had worked during his less successful years as a supply teacher at Jim and Simon’s school in the 70’s. Tony was looking for musicians to back him in a covers band, and the guys duly offered their services (even though they then had no live experience whatsoever). The arrangement worked so well that they kept the band going for over a decade and it was there, working the pubs and clubs of southern England, that they learned the musical chops that would serve them so well in later years.</p>
<p>In parallel to their function band work, Freefall practice/writing sessions continued. As luck would have it, IQ rehearsed in the studio next door to them, and on the back of their first gig, attended by IQ’s then manager, they managed to land the support slot at IQ’s Christmas show <a href="../__imgs/band/history/freefallmarquee.jpg" title="Freefall at the Marquee" rel="#hist08">at the Marquee Club in London. Gulp.</a></p>
<p>Thankfully, the band hit it off immediately with the crowd and soon managed to get a string of gigs with bands like Jadis, Ark, Galahad, Mentaur and Geoff Mann from Twelth Night. Freefall looked as though they were going to make a big impact with the prog community but after an ill-judged attempt to ‘go commercial’ in the early ‘90s, (Bloody managers!) Jim left the band and the remaining members recruited a very nice gentleman called <a href="../__imgs/band/history/johnboyes.jpg" title="and on guitar - Mr. John Boyes!" rel="#hist09">John Boyes</a> on guitar. However, the moment was lost and the band soon fell apart.</p>
<p>Bloody idiots.</p>
<p>Jim and Jem briefly went on, to form Pop-proggers “Charlottes’ Web” before Jem gave up the scene to work for national radio (although Jem's involvement with prog would be re-ignited a decade later with the formation (with John Boyes) of the Prog supergroup Frost*).</p>
<p>Meanwhile, Simon and Paul formed an acoustic outfit called <a href="../__imgs/band/history/maddogs.jpg" title="Men Are Dead Mk. I" rel="#hist10">‘Men Are Dead’</a> with keyboard player Col Alkins and lyricist/harmonica player Rob Ramsay. Simon had met Rob way back in the early 80’s at Richmond College, at the same time Freefall were making their first tentative steps in music. They became good friends and Rob was always involved at some level, either by helping out at gigs or writing the occasional lyric.</p>
<br />
<p>Men Are Dead began to play gigs on London's open mic scene (where any artist can roll up and play a short set of between two and five songs) and the band proved to be extremely popular with both audience and fellow musos alike. Col left after their first album, but thankfully, Jim once again joined up with Simon and Paul as a second guitarist, along with <a href="../__imgs/band/history/wayne.jpg" title="Wayne caught in the headlights" rel="#hist12">Wayne Collier</a>, an extraordinary drummer who played in almost every band in West London. <a href="../__imgs/band/history/menaredead.jpg" title="Men Are Dead Mk. II" rel="#hist11">What evolved was a prototype Tinyfish</a> sound and much of the band’s current style comes from these early twin guitar shows.</p>
<p>The millennium came and went, and so did the name ‘Men Are Dead’. In came Simon’s alter ego ‘Simon Walsh’, a <em>nom-de-guerre</em> he still uses today when playing solo acoustic gigs. Whilst notching up appearances in the UK, Germany, France, Estonia and America, they recruited a third guitarist <a href="../__imgs/band/history/hw1.jpg" title="Tim solos at the Hope and Anchor" rel="#hist13">(Tim Eyles)</a> and all looked rosy (if a little Lynyrd Skynyrd) in the garden. Behind the scenes however, things were not going well with the band. Frustration with the strict definitions of acoustic music imposed by many clubs and venues began to take their toll on both the music and musicians. Their material was becoming more complex and the songs started to push past the three minute mark, as the band's deep-seated prog influences once again made themselves felt.</p>
<p>Finally in the late autumn of 2004, after much soul searching, Simon sent Jim an e-mail suggesting that maybe there was little more they could achieve as an acoustic unit and perhaps they should return to their progressive roots. Jim happily agreed and an invite was duly sent out to both Paul and Rob asking if they would be interested in joining, which thankfully they did.</p>
<p>Simon disbanded the acoustic band, with Tim Eyles joining the punk-pop band ‘The Random’ and the four remaining musicians <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">assembled in Simon's loft</a> and began writing and rehearsing. Within six weeks it was obvious that there were real possibilities in the music they were making, but the question as to how to record this new material was causing them concern. None of them could afford to go the professional route, so the decision was made to turn the loft into a studio, and try it themselves.</p>
<p>Robert had set up Lazy Gun Records several years previously, to promote both Men Are Dead and Simon Walsh, and suggested that this new band join the roster. This gave them complete artistic and financial control of their work. </p>
<p>Bloody tight bastards.</p>
<p>Finally the subject of the name for the band reared its ugly head. There were thoughts that they could resurrect the name Freefall but that idea was soon discarded. This was a new band, and it deserved a new name (besides, someone else was now using ‘Freefall’ and they looked bigger and meaner than this band). It was Jim that quipped that they were just tiny fish compared to some of the huge prog bands still out there and within moments the name had stuck.</p>
<p>The problem remained that they were a man short for playing live shows, but in the studio, that base was covered by Simon who, happily, can play both <a href="../__imgs/band/history/drumkit.jpg" title="Simon's electronic drumkit" rel="#hist15">drums</a> and <a href="../__imgs/band/history/guitars.jpg" title="A plethora of guitars" rel="#hist14">guitar</a> in equal measure (although not at the same time). Meanwhile, the studio had taken shape and the band had found that familiar progressive chemistry once again. The smiles were back on everybody’s faces, and the band had a sound they could work to develop.</p>
<p>When the talk turned once more to live performances, Jim mentioned that he knew a drummer of many bands, the semi-Italian <a href="../__imgs/band/history/leonstatue.jpg" title="Leon at the kit" rel="#hist16">Leon Camfield</a>, and after a few rehearsals (and many beers) together, Leon (for whom truely progressive music is a long held love (note King Crimson tattoo on arm)) enthusiastically joined to complete the Fab Five.</p>
<p>So here we are in 2010. <a href="../__imgs/band/history/tinyfish1.jpg" title="tinyfish" rel="#hist17">Tinyfish</a> have gigged around the country, released both two albums, a mini-album, and a live album & DVD, and have <a href="../__imgs/band/history/tinyfish2.jpg" title="tinyfish" rel="#hist18">arrived at a destination</a> where they feel at home, and are proud of their journey to this place of better dreams.</p>
<p class="centre"><a href="../__imgs/band/history/strangestudioshot.jpg" title="a tinyfish close encounter" rel="#hist19">Bloody pretentious tossers.</a></p>
</div>
</body>
</html>
11/after.html 0000604 00000004160 15071137203 0006750 0 ustar 00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ven67p9fXoMQpbw1icSXo8l+I5Z+upY90LnIqaPDgKo=" />
<meta name="description" content="Tinyfish is the smallest progressive rock band in the world, self-taught, self-financed, and self-abusing - no, wait..." />
<meta name="keywords" content="Tinyfish, Pink Floyd, Porcupine Tree, progrock, progressive rock, prog rock, prog, Marillion, King Crimson, Rush, The Big Red Spark, Curious Things" />
<link href="brs_main.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<title>latest news</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 8]><script src="../__js/IE8.js" type="text/javascript"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../script/jquery.jscrollpane.js"></script>
<script language="javascript" type="text/javascript">
$(function()
{
$("#content").jScrollPane({
showArrows: true
});
});
</script>
</head>
<body class="nopage">
<div id="content">
<h1>news</h1>
<p>After three years of toil, The new Tinyfish album, The Big Red Spark,
is finally finished, and to celebrate, you'll be able to join us at The Luminaire
in Kilburn for a very special gig to launch the album on an unsuspecting world.</p>
<p>Although by this point, some people may already have suspected.</p>
<p>Support will be provided by the excellent Dec Burke and his new band,
Destroy All Monsters</p>
<p>When: Friday, 10th September<br />
Where: The Luminaire (click for map)<br />
How much: £10 in advance (£8 CRS members advance) or £12 on the door.<br />
Doors open at 7:30.</p>
<p>Tickets: www.linktoticket website.co.uk</p>
</div>
</body>
</html>
11/brs_main.css 0000604 00000011745 15071137203 0007274 0 ustar 00 @charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'HelveticaNeueThin';
src: url('helveticaneue-thin-webfont.eot');
src: local('���'), url('helveticaneue-thin-webfont.woff') format('woff'), url('helveticaneue-thin-webfont.ttf') format('truetype'), url('helveticaneue-thin-webfont.svg#webfont2SG3yTkB') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
body {
font-family: 'HelveticaNeueThin',Helvetica,Arial,sans-serif;
font-weight: normal;
font-style: normal;
line-height: normal;
font-size-adjust: 0.51;
margin: 0px;
color: #fff;
background-color: #000;
overflow:hidden;
}
P, A {
font-size: 1em;
line-height: 1.2em;
}
P {
text-align: justify;
margin-bottom: 1.0em;
}
a:active {color:#e0262f; text-decoration: none;} /* selected link */
a:visited {color:#c62128; text-decoration: none;} /* visited link */
a:link {color:#d2232a; text-decoration: none;} /* unvisited link */
a:hover {color:#df262e; text-decoration: underline;} /* mouse over link */
LI LI, LI LI A, TD, TD P, BLOCKQUOTE P {
font-size: 1em;
line-height: 1.2em;
}
TABLE {
border: none;
}
TD {
vertical-align: top;
padding: 0px;
}
A {
outline: none;
}
A IMG {
border: none;
}
object { outline:none; }
.red {
color: #d2232a;
}
STRONG {
color: #d2232a;
font-weight: bold;
}
h1,h2,h3,h4,h5 {
color: #d2232a;
}
h1 {
font-size: 1.6em;
font-weight: normal;
font-style: normal;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
h2 {
font-size: 1.3em;
font-weight: normal;
font-style: italic;
margin-top: 0.8em;
margin-bottom: 0px;
}
h5 {
font-size: 0.8em;
margin: 0.5em 0px 0px 0px;
}
hr {
color: #ff0000;
}
/* ----------------- begin supersize --------------------- */
#loading {
position: absolute;
top: 49.5%;
left: 49.5%;
z-index: 5;
width: 24px;
height: 24px;
text-indent: -999em;
background-image: url('../__imgs/furn/loading.gif');
}
#supersize {
position:fixed;
}
#supersize img, #supersize a {
height:100%;
width:100%;
position:absolute;
z-index: 0;
}
#supersize img {
image-rendering: optimizeQuality; /* Firefox 3.6+; default behavior is identical, no need to specify */
-ms-interpolation-mode: bicubic; /* Internet Explorer 7.0; default in IE8+ */
}
#supersize .prevslide, #supersize .prevslide img {
z-index: 1;
}
#supersize .activeslide, #supersize .activeslide img {
z-index: 2;
}
/* ------------------ end supersize ---------------------- */
/* ------------------- begin header ---------------------- */
#header {
position: absolute;
top: 15px;
width: 100%;
margin: 0px auto;
z-index: 4;
text-align: center;
}
#header p {
text-align: center;
margin-top: 0.5em;
}
/* -------------------- end header ----------------------- */
/* ------------------- begin content --------------------- */
#content {
z-index: 3;
background-color: #000;
background-color: rgba(0,0,0,0.9);
position: absolute;
left: 0px;
bottom: 17%;
height: 62%;
width: 45%;
border: 1px solid #555;
border-left: 0px;
padding: 0px;
padding-left: 30px;
padding-right: 20px;
overflow: auto;
}
.frontpage #content {
visibility: hidden;
}
.gallerypage #content {
border: none;
width: 100%;
height: 33em;
bottom: 15%;
padding: 0px;
margin: 0px;
}
.gallerypage #content p {
text-align: center;
}
.videopage #content {
border: none;
width: 100%;
height: 65%;
bottom: 15%;
padding: 0px;
margin: 0px;
}
.videopage #content p {
text-align: center;
}
/* -------------------- end content ---------------------- */
/* ----------------- begin navigation -------------------- */
#navigate {
position: absolute;
height: 4em;
width: 100%;
padding: 0px;
margin: 0px auto;
bottom: 5%;
z-index: 3;
background-color: #000;
background-color: rgba(0,0,0,0.9);
border: 1px solid #555;
border-left: 0px;
border-right: 0px;
}
#nav, #nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-position: outside;
position: relative;
line-height: 1.6em;
}
#nav {
padding: 0.4em;
}
#nav a {
display: block;
height: 1.6em;
padding: 0px 10px;
text-decoration:none;
line-height: 1.6em;
background-color: #000;
background-color: rgba(0,0,0,0.9); /* bug in Opera!!! */
}
#nav a:link, #nav a:active, #nav a:visited {
color: #fff;
}
#nav a:hover {
color: #d2232a;
}
#nav li {
float: left;
font-size: 1em;
line-height: 1.6em;
}
#nav ul {
position:absolute;
display: none;
}
#nav ul li a {
float: left;
font-size: 1em;
line-height: 1.6em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display: block;
height: 1.6em;
}
/* ------------------ end navigation --------------------- */
/* ------------------ begin viewcart --------------------- */
#viewcart {
z-index: 4;
background-color: #000;
background-color: rgba(0,0,0,0.9);
position: absolute;
right: 10px;
bottom: 5.5%;
height: 51px;
width: 130px;
padding: 0px;
overflow: hidden;
}
/* ------------------- end viewcart ---------------------- */
11/jquery.mousewheel.js 0000604 00000004230 15071137203 0011010 0 ustar 00 /*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.3
*
* Requires: 1.2.2+
*/
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(event || window.event);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
if ( event.detail ) { delta = -event.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return $.event.handle.apply(this, args);
}
})(jQuery); 11/jscrollpane-2b3.js 0000604 00000101440 15071137203 0010216 0 ustar 00 /*!
* jScrollPane - v2.0.0beta3 - 2010-08-27
* http://jscrollpane.kelvinluck.com/
*
* Copyright (c) 2010 Kelvin Luck
* Dual licensed under the MIT or GPL licenses.
*/
// Script: jScrollPane - cross browser customisable scrollbars
//
// *Version: 2.0.0beta3, Last updated: 2010-08-27*
//
// Project Home - http://jscrollpane.kelvinluck.com/
// GitHub - http://github.com/vitch/jScrollPane
// Source - http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.js
// (Minified) - http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.min.js
//
// About: License
//
// Copyright (c) 2010 Kelvin Luck
// Dual licensed under the MIT or GPL Version 2 licenses.
// http://jscrollpane.kelvinluck.com/MIT-LICENSE.txt
// http://jscrollpane.kelvinluck.com/GPL-LICENSE.txt
//
// About: Examples
//
// All examples and demos are available through the jScrollPane example site at:
// http://jscrollpane.kelvinluck.com/
//
// About: Support and Testing
//
// This plugin is tested on the browsers below and has been found to work reliably on them. If you run
// into a problem on one of the supported browsers then please visit the support section on the jScrollPane
// website (http://jscrollpane.kelvinluck.com/) for more information on getting support. You are also
// welcome to fork the project on GitHub if you can contribute a fix for a given issue.
//
// jQuery Versions - 1.4.2
// Browsers Tested - Firefox 3.6.8, Safari 5, Opera 10.6, Chrome 5.0, IE 6, 7, 8
//
// About: Release History
//
// 2.0.0beta3 - (2010-08-27) Horizontal mousewheel, mwheelIntent, keyboard support, bug fixes
// 2.0.0beta2 - (2010-08-21) Bug fixes
// 2.0.0beta1 - (2010-08-17) Rewrite to follow modern best practices and enable horizontal scrolling, initially hidden
// elements and dynamically sized elements.
// 1.x - (2006-12-31 - 2010-07-31) Initial version, hosted at googlecode, deprecated
(function($,window,undefined){
$.fn.jScrollPane = function(settings)
{
// JScrollPane "class" - public methods are available through $('selector').data('jsp')
function JScrollPane(elem, s)
{
var settings, jsp = this, pane, paneWidth, paneHeight, container, contentWidth, contentHeight,
percentInViewH, percentInViewV, isScrollableV, isScrollableH, verticalDrag, dragMaxY,
verticalDragPosition, horizontalDrag, dragMaxX, horizontalDragPosition,
verticalBar, verticalTrack, scrollbarWidth, verticalTrackHeight, verticalDragHeight, arrowUp, arrowDown,
horizontalBar, horizontalTrack, horizontalTrackWidth, horizontalDragWidth, arrowLeft, arrowRight,
reinitialiseInterval, originalPadding, originalPaddingTotalWidth, previousPaneWidth,
wasAtTop = true, wasAtLeft = true, wasAtBottom = false, wasAtRight = false,
mwEvent = $.fn.mwheelIntent ? 'mwheelIntent.jsp' : 'mousewheel.jsp';
originalPadding = elem.css('paddingTop') + ' ' +
elem.css('paddingRight') + ' ' +
elem.css('paddingBottom') + ' ' +
elem.css('paddingLeft');
originalPaddingTotalWidth = (parseInt(elem.css('paddingLeft')) || 0) +
(parseInt(elem.css('paddingRight')) || 0);
initialise(s);
function initialise(s)
{
var clonedElem, tempWrapper, /*firstChild, lastChild, */isMaintainingPositon, lastContentX, lastContentY,
hasContainingSpaceChanged;
settings = s;
if (pane == undefined) {
elem.css(
{
'overflow': 'hidden',
'padding': 0
}
);
// TODO: Deal with where width/ height is 0 as it probably means the element is hidden and we should
// come back to it later and check once it is unhidden...
paneWidth = elem.innerWidth() + originalPaddingTotalWidth;
paneHeight = elem.innerHeight();
elem.width(paneWidth);
pane = $('<div class="jspPane" />').wrap(
$('<div class="jspContainer" />')
.css({
'width': paneWidth + 'px',
'height': paneHeight + 'px'
}
)
);
elem.wrapInner(pane.parent());
// Need to get the vars after being added to the document, otherwise they reference weird
// disconnected orphan elements...
container = elem.find('>.jspContainer');
pane = container.find('>.jspPane');
pane.css('padding', originalPadding);
/*
// Move any margins from the first and last children up to the container so they can still
// collapse with neighbouring elements as they would before jScrollPane
firstChild = pane.find(':first-child');
lastChild = pane.find(':last-child');
elem.css(
{
'margin-top': firstChild.css('margin-top'),
'margin-bottom': lastChild.css('margin-bottom')
}
);
firstChild.css('margin-top', 0);
lastChild.css('margin-bottom', 0);
*/
} else {
elem.css('width', null);
hasContainingSpaceChanged = elem.outerWidth() + originalPaddingTotalWidth != paneWidth || elem.outerHeight() != paneHeight;
if (hasContainingSpaceChanged) {
paneWidth = elem.innerWidth() + originalPaddingTotalWidth;
paneHeight = elem.innerHeight();
container.css({
'width': paneWidth + 'px',
'height': paneHeight + 'px'
});
}
previousPaneWidth = pane.innerWidth();
if (!hasContainingSpaceChanged && pane.outerWidth() == contentWidth && pane.outerHeight() == contentHeight) {
// Nothing has changed since we last initialised
if (isScrollableH || isScrollableV) { // If we had already set a width then re-set it
pane.css('width', previousPaneWidth + 'px');
elem.css('width', (previousPaneWidth + originalPaddingTotalWidth) + 'px');
}
// Then abort...
return;
}
pane.css('width', null);
elem.css('width', (paneWidth + originalPaddingTotalWidth) + 'px');
container.find('>.jspVerticalBar,>.jspHorizontalBar').remove().end();
}
// Unfortunately it isn't that easy to find out the width of the element as it will always report the
// width as allowed by its container, regardless of overflow settings.
// A cunning workaround is to clone the element, set its position to absolute and place it in a narrow
// container. Now it will push outwards to its maxium real width...
clonedElem = pane.clone().css('position', 'absolute');
tempWrapper = $('<div style="width:1px; position: relative;" />').append(clonedElem);
$('body').append(tempWrapper);
contentWidth = Math.max(pane.outerWidth(), clonedElem.outerWidth());
tempWrapper.remove();
contentHeight = pane.outerHeight(true);
/*alert(contentHeight); */
percentInViewH = contentWidth / paneWidth;
percentInViewV = contentHeight / paneHeight;
isScrollableV = percentInViewV > 1;
isScrollableH = percentInViewH > 1;
//console.log(paneWidth, paneHeight, contentWidth, contentHeight, percentInViewH, percentInViewV, isScrollableH, isScrollableV);
if (!(isScrollableH || isScrollableV)) {
elem.removeClass('jspScrollable');
pane.css({
'top': 0,
'width': container.width() + 'px'
});
removeMousewheel();
removeFocusHandler();
removeKeyboardNav();
unhijackInternalLinks();
} else {
elem.addClass('jspScrollable');
isMaintainingPositon = settings.maintainPosition && (verticalDragPosition || horizontalDragPosition);
if (isMaintainingPositon) {
lastContentX = contentPositionX();
lastContentY = contentPositionY();
}
initialiseVerticalScroll();
initialiseHorizontalScroll();
resizeScrollbars();
if (isMaintainingPositon) {
scrollToX(lastContentX);
scrollToY(lastContentY);
}
initFocusHandler();
initMousewheel();
if (settings.enableKeyboardNavigation) {
initKeyboardNav();
}
observeHash();
if (settings.hijackInternalLinks) {
hijackInternalLinks();
}
}
if (settings.autoReinitialise && !reinitialiseInterval) {
reinitialiseInterval = setInterval(
function()
{
initialise(settings);
},
settings.autoReinitialiseDelay
);
} else if (!settings.autoReinitialise && reinitialiseInterval) {
clearInterval(reinitialiseInterval)
}
elem.trigger('jsp-initialised', [isScrollableH || isScrollableV]);
}
function initialiseVerticalScroll()
{
if (isScrollableV) {
container.append(
$('<div class="jspVerticalBar" />').append(
$('<div class="jspCap jspCapTop" />'),
$('<div class="jspTrack" />').append(
$('<div class="jspDrag" />').append(
$('<div class="jspDragTop" />'),
$('<div class="jspDragBottom" />')
)
),
$('<div class="jspCap jspCapBottom" />')
)
);
verticalBar = container.find('>.jspVerticalBar');
verticalTrack = verticalBar.find('>.jspTrack');
verticalDrag = verticalTrack.find('>.jspDrag');
if (settings.showArrows) {
arrowUp = $('<a class="jspArrow jspArrowUp" />').bind(
'mousedown.jsp', getArrowScroll(0, -1)
).bind('click.jsp', nil);
arrowDown = $('<a class="jspArrow jspArrowDown" />').bind(
'mousedown.jsp', getArrowScroll(0, 1)
).bind('click.jsp', nil);
if (settings.arrowScrollOnHover) {
arrowUp.bind('mouseover.jsp', getArrowScroll(0, -1, arrowUp));
arrowDown.bind('mouseover.jsp', getArrowScroll(0, 1, arrowDown));
}
appendArrows(verticalTrack, settings.verticalArrowPositions, arrowUp, arrowDown);
}
verticalTrackHeight = paneHeight;
container.find('>.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow').each(
function()
{
verticalTrackHeight -= $(this).outerHeight();
}
);
verticalDrag.hover(
function()
{
verticalDrag.addClass('jspHover');
},
function()
{
verticalDrag.removeClass('jspHover');
}
).bind(
'mousedown.jsp',
function(e)
{
// Stop IE from allowing text selection
$('html').bind('dragstart.jsp selectstart.jsp', function() { return false; });
verticalDrag.addClass('jspActive');
var startY = e.pageY - verticalDrag.position().top;
$('html').bind(
'mousemove.jsp',
function(e)
{
positionDragY(e.pageY - startY, false);
}
).bind('mouseup.jsp mouseleave.jsp', cancelDrag);
return false;
}
);
sizeVerticalScrollbar();
updateVerticalArrows();
}
}
function sizeVerticalScrollbar()
{
verticalTrack.height(verticalTrackHeight + 'px');
verticalDragPosition = 0;
scrollbarWidth = settings.verticalGutter + verticalTrack.outerWidth();
// Make the pane thinner to allow for the vertical scrollbar
pane.width(paneWidth - scrollbarWidth - originalPaddingTotalWidth);
// Add margin to the left of the pane if scrollbars are on that side (to position
// the scrollbar on the left or right set it's left or right property in CSS)
if (verticalBar.position().left == 0) {
pane.css('margin-left', scrollbarWidth + 'px');
}
}
function initialiseHorizontalScroll()
{
if (isScrollableH) {
container.append(
$('<div class="jspHorizontalBar" />').append(
$('<div class="jspCap jspCapLeft" />'),
$('<div class="jspTrack" />').append(
$('<div class="jspDrag" />').append(
$('<div class="jspDragLeft" />'),
$('<div class="jspDragRight" />')
)
),
$('<div class="jspCap jspCapRight" />')
)
);
horizontalBar = container.find('>.jspHorizontalBar');
horizontalTrack = horizontalBar.find('>.jspTrack');
horizontalDrag = horizontalTrack.find('>.jspDrag');
if (settings.showArrows) {
arrowLeft = $('<a class="jspArrow jspArrowLeft" />').bind(
'mousedown.jsp', getArrowScroll(-1, 0)
).bind('click.jsp', nil);
arrowRight = $('<a class="jspArrow jspArrowRight" />').bind(
'mousedown.jsp', getArrowScroll(1, 0)
).bind('click.jsp', nil);
if (settings.arrowScrollOnHover) {
arrowLeft.bind('mouseover.jsp', getArrowScroll(-1, 0, arrowLeft));
arrowRight.bind('mouseover.jsp', getArrowScroll(1, 0, arrowRight));
}
appendArrows(horizontalTrack, settings.horizontalArrowPositions, arrowLeft, arrowRight);
}
horizontalDrag.hover(
function()
{
horizontalDrag.addClass('jspHover');
},
function()
{
horizontalDrag.removeClass('jspHover');
}
).bind(
'mousedown.jsp',
function(e)
{
// Stop IE from allowing text selection
$('html').bind('dragstart.jsp selectstart.jsp', function() { return false; });
horizontalDrag.addClass('jspActive');
var startX = e.pageX - horizontalDrag.position().left;
$('html').bind(
'mousemove.jsp',
function(e)
{
positionDragX(e.pageX - startX, false);
}
).bind('mouseup.jsp mouseleave.jsp', cancelDrag);
return false;
}
);
horizontalTrackWidth = container.innerWidth();
sizeHorizontalScrollbar();
updateHorizontalArrows();
} else {
// no horizontal scroll
}
}
function sizeHorizontalScrollbar()
{
container.find('>.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow').each(
function()
{
horizontalTrackWidth -= $(this).outerWidth();
}
);
horizontalTrack.width(horizontalTrackWidth + 'px');
horizontalDragPosition = 0;
}
function resizeScrollbars()
{
if (isScrollableH && isScrollableV) {
var horizontalTrackHeight = horizontalTrack.outerHeight(),
verticalTrackWidth = verticalTrack.outerWidth();
verticalTrackHeight -= horizontalTrackHeight;
$(horizontalBar).find('>.jspCap:visible,>.jspArrow').each(
function()
{
horizontalTrackWidth += $(this).outerWidth();
}
);
horizontalTrackWidth -= verticalTrackWidth;
paneHeight -= verticalTrackWidth;
paneWidth -= horizontalTrackHeight;
horizontalTrack.parent().append(
$('<div class="jspCorner" />').css('width', horizontalTrackHeight + 'px')
);
sizeVerticalScrollbar();
sizeHorizontalScrollbar();
}
// reflow content
if (isScrollableH) {
pane.width((container.outerWidth() - originalPaddingTotalWidth) + 'px');
}
contentHeight = pane.outerHeight();
percentInViewV = contentHeight / paneHeight;
if (isScrollableH) {
horizontalDragWidth = 1 / percentInViewH * horizontalTrackWidth;
if (horizontalDragWidth > settings.horizontalDragMaxWidth) {
horizontalDragWidth = settings.horizontalDragMaxWidth;
} else if (horizontalDragWidth < settings.horizontalDragMinWidth) {
horizontalDragWidth = settings.horizontalDragMinWidth;
}
horizontalDrag.width(horizontalDragWidth + 'px');
dragMaxX = horizontalTrackWidth - horizontalDragWidth;
}
if (isScrollableV) {
verticalDragHeight = 1 / percentInViewV * verticalTrackHeight;
if (verticalDragHeight > settings.verticalDragMaxHeight) {
verticalDragHeight = settings.verticalDragMaxHeight;
} else if (verticalDragHeight < settings.verticalDragMinHeight) {
verticalDragHeight = settings.verticalDragMinHeight;
}
verticalDrag.height(verticalDragHeight + 'px');
dragMaxY = verticalTrackHeight - verticalDragHeight;
}
}
function appendArrows(ele, p, a1, a2)
{
var p1 = "before", p2 = "after", aTemp;
// Sniff for mac... Is there a better way to determine whether the arrows would naturally appear
// at the top or the bottom of the bar?
if (p == "os") {
p = /Mac/.test(navigator.platform) ? "after" : "split";
}
if (p == p1) {
p2 = p;
} else if (p == p2) {
p1 = p;
aTemp = a1;
a1 = a2;
a2 = aTemp;
}
ele[p1](a1)[p2](a2);
}
function getArrowScroll(dirX, dirY, ele) {
return function()
{
arrowScroll(dirX, dirY, this, ele);
this.blur();
return false;
}
}
function arrowScroll(dirX, dirY, arrow, ele)
{
arrow = $(arrow).addClass('jspActive');
var eve, doScroll = function()
{
if (dirX != 0) {
positionDragX(horizontalDragPosition + dirX * settings.arrowButtonSpeed, false);
}
if (dirY != 0) {
positionDragY(verticalDragPosition + dirY * settings.arrowButtonSpeed, false);
}
},
scrollInt = setInterval(doScroll, settings.arrowRepeatFreq);
doScroll();
eve = ele == undefined ? 'mouseup.jsp' : 'mouseout.jsp';
ele = ele || $('html');
ele.bind(
eve,
function()
{
arrow.removeClass('jspActive');
clearInterval(scrollInt);
ele.unbind(eve);
}
);
}
function cancelDrag()
{
$('html').unbind('dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp');
verticalDrag && verticalDrag.removeClass('jspActive');
horizontalDrag && horizontalDrag.removeClass('jspActive');
}
function positionDragY(destY, animate)
{
if (!isScrollableV) {
return;
}
if (destY < 0) {
destY = 0;
} else if (destY > dragMaxY) {
destY = dragMaxY;
}
// can't just check if(animate) because false is a valid value that could be passed in...
if (animate == undefined) {
animate = settings.animateScroll;
}
if (animate) {
jsp.animate(verticalDrag, 'top', destY, _positionDragY);
} else {
verticalDrag.css('top', destY);
_positionDragY(destY);
}
}
function _positionDragY(destY)
{
if (destY == undefined) {
destY = verticalDrag.position().top;
}
container.scrollTop(0);
verticalDragPosition = destY;
var isAtTop = verticalDragPosition == 0,
isAtBottom = verticalDragPosition == dragMaxY,
percentScrolled = destY/ dragMaxY,
destTop = -percentScrolled * (contentHeight - paneHeight);
if (wasAtTop != isAtTop || wasAtBottom != isAtBottom) {
wasAtTop = isAtTop;
wasAtBottom = isAtBottom;
elem.trigger('jsp-arrow-change', [wasAtTop, wasAtBottom, wasAtLeft, wasAtRight]);
}
updateVerticalArrows(isAtTop, isAtBottom);
pane.css('top', destTop);
elem.trigger('jsp-scroll-y', [-destTop, isAtTop, isAtBottom]);
}
function positionDragX(destX, animate)
{
if (!isScrollableH) {
return;
}
if (destX < 0) {
destX = 0;
} else if (destX > dragMaxX) {
destX = dragMaxX;
}
if (animate == undefined) {
animate = settings.animateScroll;
}
if (animate) {
jsp.animate(horizontalDrag, 'left', destX, _positionDragX);
} else {
horizontalDrag.css('left', destX);
_positionDragX(destX);
}
}
function _positionDragX(destX)
{
if (destX == undefined) {
destX = horizontalDrag.position().left;
}
container.scrollTop(0);
horizontalDragPosition = destX;
var isAtLeft = horizontalDragPosition == 0,
isAtRight = horizontalDragPosition == dragMaxY,
percentScrolled = destX / dragMaxX,
destLeft = -percentScrolled * (contentWidth - paneWidth);
if (wasAtLeft != isAtLeft || wasAtRight != isAtRight) {
wasAtLeft = isAtLeft;
wasAtRight = isAtRight;
elem.trigger('jsp-arrow-change', [wasAtTop, wasAtBottom, wasAtLeft, wasAtRight]);
}
updateHorizontalArrows(isAtLeft, isAtRight);
pane.css('left', destLeft);
elem.trigger('jsp-scroll-x', [-destLeft, isAtLeft, isAtRight]);
}
function updateVerticalArrows(isAtTop, isAtBottom)
{
if (settings.showArrows) {
arrowUp[isAtTop ? 'addClass' : 'removeClass']('jspDisabled');
arrowDown[isAtBottom ? 'addClass' : 'removeClass']('jspDisabled');
}
}
function updateHorizontalArrows(isAtLeft, isAtRight)
{
if (settings.showArrows) {
arrowLeft[isAtLeft ? 'addClass' : 'removeClass']('jspDisabled');
arrowRight[isAtRight ? 'addClass' : 'removeClass']('jspDisabled');
}
}
function scrollToY(destY, animate)
{
var percentScrolled = destY / (contentHeight - paneHeight);
positionDragY(percentScrolled * dragMaxY, animate);
}
function scrollToX(destX, animate)
{
var percentScrolled = destX / (contentWidth - paneWidth);
positionDragX(percentScrolled * dragMaxX, animate);
}
function scrollToElement(ele, stickToTop, animate)
{
var e, eleHeight, eleTop = 0, viewportTop, maxVisibleEleTop, destY;
// Legal hash values aren't necessarily legal jQuery selectors so we need to catch any
// errors from the lookup...
try {
e = $(ele);
} catch (err) {
return;
}
eleHeight = e.outerHeight();
container.scrollTop(0);
// loop through parents adding the offset top of any elements that are relatively positioned between
// the focused element and the jspPane so we can get the true distance from the top
// of the focused element to the top of the scrollpane...
while (!e.is('.jspPane')) {
eleTop += e.position().top;
e = e.offsetParent();
if (/^body|html$/i.test(e[0].nodeName)) {
// we ended up too high in the document structure. Quit!
return;
}
}
viewportTop = contentPositionY();
maxVisibleEleTop = viewportTop + paneHeight;
if (eleTop < viewportTop || stickToTop) { // element is above viewport
destY = eleTop - settings.verticalGutter;
} else if (eleTop + eleHeight > maxVisibleEleTop) { // element is below viewport
destY = eleTop - paneHeight + eleHeight + settings.verticalGutter;
}
if (destY) {
scrollToY(destY, animate);
}
// TODO: Implement automatic horizontal scrolling?
}
function contentPositionX()
{
return -pane.position().left;
}
function contentPositionY()
{
return -pane.position().top;
}
function initMousewheel()
{
container.unbind(mwEvent).bind(
mwEvent,
function (event, delta, deltaX, deltaY) {
var dX = horizontalDragPosition, dY = verticalDragPosition;
positionDragX(horizontalDragPosition + deltaX * settings.mouseWheelSpeed, false)
positionDragY(verticalDragPosition - deltaY * settings.mouseWheelSpeed, false);
// return true if there was no movement so rest of screen can scroll
return dX == horizontalDragPosition && dY == verticalDragPosition;
}
);
}
function removeMousewheel()
{
container.unbind(mwEvent);
}
function nil()
{
return false;
}
function initFocusHandler()
{
pane.unbind('focusin.jsp').bind(
'focusin.jsp',
function(e)
{
if(e.target === pane[0]){return;}
scrollToElement(e.target, false);
}
);
}
function removeFocusHandler()
{
pane.unbind('focusin.jsp');
}
function initKeyboardNav()
{
var pressed, pressedTimer;
elem.attr('tabindex', 0)
.unbind('keydown.jsp')
.bind(
'keydown.jsp',
function(e)
{
if(e.target !== elem[0]){
return;
}
var dX = horizontalDragPosition, dY = verticalDragPosition, step = pressed ? 2 : 16;
switch(e.keyCode) {
case 40: // down
positionDragY(verticalDragPosition + step, false);
break;
case 38: // up
positionDragY(verticalDragPosition - step, false);
break;
case 34: // page down
case 32: // space
scrollToY(contentPositionY() + Math.max(32, paneHeight) - 16);
break;
case 33: // page up
scrollToY(contentPositionY() - paneHeight + 16);
break;
case 35: // end
scrollToY(contentHeight - paneHeight);
break;
case 36: // home
scrollToY(0);
break;
case 39: // right
positionDragX(horizontalDragPosition + step, false);
break;
case 37: // left
positionDragX(horizontalDragPosition - step, false);
break;
}
if( !(dX == horizontalDragPosition && dY == verticalDragPosition) ){
pressed = true;
clearTimeout(pressedTimer);
pressedTimer = setTimeout(function(){
pressed = false;
}, 260);
return false;
}
}
);
if(settings.hideFocus) {
elem.css('outline', 'none');
if('hideFocus' in container[0]){
elem.attr('hideFocus', true);
}
} else {
elem.css('outline', '');
if('hideFocus' in container[0]){
elem.attr('hideFocus', false);
}
}
}
function removeKeyboardNav()
{
elem.attr('tabindex', '-1')
.removeAttr('tabindex')
.unbind('keydown.jsp');
}
function observeHash()
{
if (location.hash && location.hash.length > 1) {
var e, retryInt;
try {
e = $(location.hash);
} catch (err) {
return;
}
if (e.length && pane.find(e)) {
// nasty workaround but it appears to take a little while before the hash has done its thing
// to the rendered page so we just wait until the container's scrollTop has been messed up.
if (container.scrollTop() == 0) {
retryInt = setInterval(
function()
{
if (container.scrollTop() > 0) {
scrollToElement(location.hash, true);
$(document).scrollTop(container.position().top);
clearInterval(retryInt);
}
},
50
)
} else {
scrollToElement(location.hash, true);
$(document).scrollTop(container.position().top);
}
}
}
}
function unhijackInternalLinks()
{
$('a.jspHijack').unbind('click.jsp-hijack').removeClass('jspHijack');
}
function hijackInternalLinks()
{
unhijackInternalLinks();
$('a[href^=#]').addClass('jspHijack').bind(
'click.jsp-hijack',
function()
{
var uriParts = this.href.split('#'), hash;
if (uriParts.length > 1) {
hash = uriParts[1];
if (hash.length > 0 && pane.find('#' + hash).length > 0) {
scrollToElement('#' + hash, true);
// Need to return false otherwise things mess up... Would be nice to maybe also scroll
// the window to the top of the scrollpane?
return false;
}
}
}
)
}
// Public API
$.extend(
jsp,
{
// Reinitialises the scroll pane (if it's internal dimensions have changed since the last time it
// was initialised). The settings object which is passed in will override any settings from the
// previous time it was initialised - if you don't pass any settings then the ones from the previous
// initialisation will be used.
reinitialise: function(s)
{
s = $.extend({}, s, settings);
initialise(s);
},
// Scrolls the specified element (a jQuery object, DOM node or jQuery selector string) into view so
// that it can be seen within the viewport. If stickToTop is true then the element will appear at
// the top of the viewport, if it is false then the viewport will scroll as little as possible to
// show the element. You can also specify if you want animation to occur. If you don't provide this
// argument then the animateScroll value from the settings object is used instead.
scrollToElement: function(ele, stickToTop, animate)
{
scrollToElement(ele, stickToTop, animate);
},
// Scrolls the pane so that the specified co-ordinates within the content are at the top left
// of the viewport. animate is optional and if not passed then the value of animateScroll from
// the settings object this jScrollPane was initialised with is used.
scrollTo: function(destX, destY, animate)
{
scrollToX(destX, animate);
scrollToY(destY, animate);
},
// Scrolls the pane so that the specified co-ordinate within the content is at the left of the
// viewport. animate is optional and if not passed then the value of animateScroll from the settings
// object this jScrollPane was initialised with is used.
scrollToX: function(destX, animate)
{
scrollToX(destX, animate);
},
// Scrolls the pane so that the specified co-ordinate within the content is at the top of the
// viewport. animate is optional and if not passed then the value of animateScroll from the settings
// object this jScrollPane was initialised with is used.
scrollToY: function(destY, animate)
{
scrollToY(destY, animate);
},
// Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
// the value of animateScroll from the settings object this jScrollPane was initialised with is used.
scrollBy: function(deltaX, deltaY, animate)
{
jsp.scrollByX(deltaX, animate);
jsp.scrollByY(deltaY, animate);
},
// Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
// the value of animateScroll from the settings object this jScrollPane was initialised with is used.
scrollByX: function(deltaX, animate)
{
var destX = contentPositionX() + deltaX,
percentScrolled = destX / (contentWidth - paneWidth);
positionDragX(percentScrolled * dragMaxX, animate);
},
// Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
// the value of animateScroll from the settings object this jScrollPane was initialised with is used.
scrollByY: function(deltaY, animate)
{
var destY = contentPositionY() + deltaY,
percentScrolled = destY / (contentHeight - paneHeight);
positionDragY(percentScrolled * dragMaxY, animate);
},
// This method is called when jScrollPane is trying to animate to a new position. You can override
// it if you want to provide advanced animation functionality. It is passed the following arguments:
// * ele - the element whose position is being animated
// * prop - the property that is being animated
// * value - the value it's being animated to
// * stepCallback - a function that you must execute each time you update the value of the property
// You can use the default implementation (below) as a starting point for your own implementation.
animate: function(ele, prop, value, stepCallback)
{
var params = {};
params[prop] = value;
ele.animate(
params,
{
'duration' : settings.animateDuration,
'ease' : settings.animateEase,
'queue' : false,
'step' : stepCallback
}
);
},
// Returns the current x position of the viewport with regards to the content pane.
getContentPositionX: function()
{
return contentPositionX();
},
// Returns the current y position of the viewport with regards to the content pane.
getContentPositionY: function()
{
return contentPositionY();
},
// Returns whether or not this scrollpane has a horizontal scrollbar.
getIsScrollableH: function()
{
return isScrollableH;
},
// Returns whether or not this scrollpane has a vertical scrollbar.
getIsScrollableV: function()
{
return isScrollableV;
},
// Gets a reference to the content pane. It is important that you use this method if you want to
// edit the content of your jScrollPane as if you access the element directly then you may have some
// problems (as your original element has had additional elements for the scrollbars etc added into
// it).
getContentPane: function()
{
return pane;
},
// Scrolls this jScrollPane down as far as it can currently scroll. If animate isn't passed then the
// animateScroll value from settings is used instead.
scrollToBottom: function(animate)
{
positionDragY(dragMaxY, animate);
},
// Hijacks the links on the page which link to content inside the scrollpane. If you have changed
// the content of your page (e.g. via AJAX) and want to make sure any new anchor links to the
// contents of your scroll pane will work then call this function.
hijackInternalLinks: function()
{
hijackInternalLinks();
}
}
);
}
// Pluginifying code...
settings = $.extend({}, $.fn.jScrollPane.defaults, settings);
var ret;
this.each(
function()
{
var elem = $(this), jspApi = elem.data('jsp');
if (jspApi) {
jspApi.reinitialise(settings);
} else {
jspApi = new JScrollPane(elem, settings);
elem.data('jsp', jspApi);
}
ret = ret ? ret.add(elem) : elem;
}
)
return ret;
};
$.fn.jScrollPane.defaults = {
'showArrows' : false,
'maintainPosition' : true,
'autoReinitialise' : false,
'autoReinitialiseDelay' : 500,
'verticalDragMinHeight' : 0,
'verticalDragMaxHeight' : 99999,
'horizontalDragMinWidth' : 0,
'horizontalDragMaxWidth' : 99999,
'animateScroll' : false,
'animateDuration' : 300,
'animateEase' : 'linear',
'hijackInternalLinks' : false,
'verticalGutter' : 4,
'horizontalGutter' : 4,
'mouseWheelSpeed' : 10,
'arrowButtonSpeed' : 10,
'arrowRepeatFreq' : 100,
'arrowScrollOnHover' : false,
'verticalArrowPositions' : 'split',
'horizontalArrowPositions' : 'split',
'enableKeyboardNavigation' : true,
'hideFocus' : false
};
})(jQuery,this);
11/jscrollpane-2b3.css 0000604 00000003510 15071137203 0010371 0 ustar 00 /*
* CSS Styles that are needed by jScrollPane for it to operate correctly.
*
* Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
* may not operate correctly without them.
*/
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #000 url(../__imgs/furn/track.gif) repeat-y center;
position: relative;
}
.jspDrag
{
background: #666;
border: solid #aaa 2px;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background-color: rgba(0,0,0,0.9);
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrowUp
{
background-image: url("../__imgs/furn/arrow_up.gif");
}
.jspArrowDown
{
background-image: url("../__imgs/furn/arrow_down.gif");
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspArrowUp.jspDisabled
{
cursor: default;
background-image: url("../__imgs/furn/arrow_up.gif");
}
.jspArrowDown.jspDisabled
{
cursor: default;
background-image: url("../__imgs/furn/arrow_down.gif");
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
} 11/index.html 0000604 00000004015 15071137203 0006755 0 ustar 00 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jScrollPane - issue 11</title>
<!-- styles specific to demo site -->
<link type="text/css" href="../../style/demo.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- scripts specific to this demo site -->
<script type="text/javascript" src="../../script/demo.js"></script>
</head>
<body>
<div id="top-nav">
<img src="../../image/logo.png" width="196" height="69" alt="jScrollPane">
<ul>
<li><a href="../../index.html">Home</a></li>
<li><a href="../../index.html#examples">Examples</a></li>
<li><a href="../../index.html#themes">Themes</a></li>
<li><a href="../../index.html#usage">How to use</a></li>
<li><a href="../../faqs.html">FAQs</a></li>
<li><a href="../../known_issues.html">Known issues</a></li>
<li><a href="../../index.html#support">Support</a></li>
<li><a href="../../index.html#download">Download</a></li>
</ul>
</div>
<div id="container">
<h1>jScrollPane - issue 11</h1>
<p>
This page demonstrates the bug described in <a href="http://github.com/vitch/jScrollPane/issues#issue/11">
issue 11</a> as reported (with nice striped down test cases) by
<a href="http://groups.google.com/group/jscrollpane/browse_thread/thread/09d5097b536d7064">TinyFish</a>.
</p>
<ul class="link-list">
<li>
<a href="before.html">Before</a> - showing the bug as it appears in the version of jScrollPane which
was current when it was reported.
</li>
<li>
<a href="native.html">Native</a> - showing how the page looks with native scrollbars (i.e. if
jScrollPane isn't initialised).
</li>
<li>
<a href="after.html">After</a> - showing the page which was displaying the bug with the latest
version of jScrollPane.
</li>
</ul>
</div>
</body>
</html> 11/before.html 0000604 00000004104 15071137203 0007107 0 ustar 00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ven67p9fXoMQpbw1icSXo8l+I5Z+upY90LnIqaPDgKo=" />
<meta name="description" content="Tinyfish is the smallest progressive rock band in the world, self-taught, self-financed, and self-abusing - no, wait..." />
<meta name="keywords" content="Tinyfish, Pink Floyd, Porcupine Tree, progrock, progressive rock, prog rock, prog, Marillion, King Crimson, Rush, The Big Red Spark, Curious Things" />
<link href="brs_main.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="jscrollpane-2b3.css" rel="stylesheet" media="all" />
<title>latest news</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 8]><script src="../__js/IE8.js" type="text/javascript"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jscrollpane-2b3.js"></script>
<script language="javascript" type="text/javascript">
$(function()
{
$("#content").jScrollPane({
showArrows: true
});
});
</script>
</head>
<body class="nopage">
<div id="content">
<h1>news</h1>
<p>After three years of toil, The new Tinyfish album, The Big Red Spark,
is finally finished, and to celebrate, you'll be able to join us at The Luminaire
in Kilburn for a very special gig to launch the album on an unsuspecting world.</p>
<p>Although by this point, some people may already have suspected.</p>
<p>Support will be provided by the excellent Dec Burke and his new band,
Destroy All Monsters</p>
<p>When: Friday, 10th September<br />
Where: The Luminaire (click for map)<br />
How much: £10 in advance (£8 CRS members advance) or £12 on the door.<br />
Doors open at 7:30.</p>
<p>Tickets: www.linktoticket website.co.uk</p>
</div>
</body>
</html>
11/native.html 0000604 00000004073 15071137203 0007140 0 ustar 00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ven67p9fXoMQpbw1icSXo8l+I5Z+upY90LnIqaPDgKo=" />
<meta name="description" content="Tinyfish is the smallest progressive rock band in the world, self-taught, self-financed, and self-abusing - no, wait..." />
<meta name="keywords" content="Tinyfish, Pink Floyd, Porcupine Tree, progrock, progressive rock, prog rock, prog, Marillion, King Crimson, Rush, The Big Red Spark, Curious Things" />
<link href="brs_main.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<title>latest news</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 8]><script src="../__js/IE8.js" type="text/javascript"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../script/jquery.jscrollpane.js"></script>
<script language="javascript" type="text/javascript">
$(function()
{
});
</script>
</head>
<body class="nopage">
<div id="content">
<h1>news</h1>
<p>After three years of toil, The new Tinyfish album, The Big Red Spark,
is finally finished, and to celebrate, you'll be able to join us at The Luminaire
in Kilburn for a very special gig to launch the album on an unsuspecting world.</p>
<p>Although by this point, some people may already have suspected.</p>
<p>Support will be provided by the excellent Dec Burke and his new band,
Destroy All Monsters</p>
<p>When: Friday, 10th September<br />
Where: The Luminaire (click for map)<br />
How much: £10 in advance (£8 CRS members advance) or £12 on the door.<br />
Doors open at 7:30.</p>
<p>Tickets: www.linktoticket website.co.uk</p>
</div>
</body>
</html>