Make default sliding panel load first
Hi,
I am using SpryURLUtils to link directly to certain sliding panels on a page, so for example:
mysite.com/thepage.html?panel=3
sets the 3rd panel (working from 0 of course) on that page to be displayed by default.
The only problem here is that panels 0,1 and 2 still get loaded before 3 by the browser because they come first in the page structure, and as a result panel 0 is being displayed until panel 3 has been loaded, after which it 'jumps' to panel 3, which doesn't look too smooth and I think could confuse the user. Each panel on my page has a background image specified in CSS rules in the header of the page.
What I want is for panel 3 (in this example) to be displayed straight away. I assume the problem may lie partly with the fact the widget constructor code (shown above) where the default panel is specified is located beneath all the page content, but I can't think of a way around this.
Does anybody have any ideas?
Thanks
I solved this way:
<body onLoad="myPanelsSlides('slide2');"/>
Thanks
Similar Messages
-
Getting a sliding panel loaded into an html panel to work.
Hi. This is my first post on the forum.
I've been using Spry a little here and there. Today I ran
into a situation where I want to load an external page, that has a
sliding panel in it, into an html panel. So far I have not had luck
and I suppose it has to do with loading the js file. At the moment
I have a right column that already has a sliding panel (working).
But it would appear that the loaded external html file (in the left
"main" column) is not picking that up. Any suggestions for a noob
as to what to do next? Viewing the external page by itself allows
the sliding panel to work (that is when I add the js file import to
the head of the external html file... but that head section does no
good when loaded into an html panel)
Anyway, any help at all is greatly appreciated.
Thanks,
EricThank you very much! I found the topic
here.
It will require a bit of a small learning curve for me as html
panel and sliding panels are my first interaction with js... even
my rollovers are css driven. Thanks! -
Spry Sliding Panels - current panel height problem
Hi guys,
Ive been trying for a while to make the sliding panels widget
show each panel in its own height instead of the longest panel's height in the container.
I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
I do, however, have a list of things that i believe if implemented should work,
could you guys help me do these fixes on the js? ( the one you think will work )
1. edit so that: Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
2. edit so that: PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
3. edit so that: Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
Please, if you can make the change in the js, i would appreciate greatly appreciate it. There is nothing in the entire web in to fixing this.
This is the SprySlidingPanels.js:
// SprySlidingPanels.js - version 0.5 - Spry Pre-Release 1.6
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.SlidingPanels = function(element, opts)
this.element = this.getElement(element);
this.enableAnimation = true;
this.currentPanel = null;
this.enableKeyboardNavigation = true;
this.hasFocus = false;
this.previousPanelKeyCode = Spry.Widget.SlidingPanels.KEY_LEFT;
this.nextPanelKeyCode = Spry.Widget.SlidingPanels.KEY_RIGHT;
this.currentPanelClass = "SlidingPanelsCurrentPanel";
this.focusedClass = "SlidingPanelsFocused";
this.animatingClass = "SlidingPanelsAnimating";
Spry.Widget.SlidingPanels.setOptions(this, opts);
if (this.element)
this.element.style.overflow = "hidden";
// Developers can specify the default panel as an index,
// id or an actual element node. Make sure to normalize
// it into an element node because that is what we expect
// internally.
if (this.defaultPanel)
if (typeof this.defaultPanel == "number")
this.currentPanel = this.getContentPanels()[this.defaultPanel];
else
this.currentPanel = this.getElement(this.defaultPanel);
// If we still don't have a current panel, use the first one!
if (!this.currentPanel)
this.currentPanel = this.getContentPanels()[0];
// Since we rely on the positioning information of the
// panels, we need to wait for the onload event to fire before
// we can attempt to show the initial panel. Once the onload
// fires, we know that all CSS files have loaded. This is
// especially important for Safari.
if (Spry.Widget.SlidingPanels.onloadDidFire)
this.attachBehaviors();
else
Spry.Widget.SlidingPanels.loadQueue.push(this);
Spry.Widget.SlidingPanels.prototype.onFocus = function(e)
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
Spry.Widget.SlidingPanels.prototype.onBlur = function(e)
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
return false;
Spry.Widget.SlidingPanels.KEY_LEFT = 37;
Spry.Widget.SlidingPanels.KEY_UP = 38;
Spry.Widget.SlidingPanels.KEY_RIGHT = 39;
Spry.Widget.SlidingPanels.KEY_DOWN = 40;
Spry.Widget.SlidingPanels.prototype.onKeyDown = function(e)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
if (key == this.nextPanelKeyCode)
this.showNextPanel();
else /* if (key == this.previousPanelKeyCode) */
this.showPreviousPanel();
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.SlidingPanels.prototype.attachBehaviors = function()
var ele = this.element;
if (!ele)
return;
if (this.enableKeyboardNavigation)
var focusEle = null;
var tabIndexAttr = ele.attributes.getNamedItem("tabindex");
if (tabIndexAttr || ele.nodeName.toLowerCase() == "a")
focusEle = ele;
if (focusEle)
var self = this;
Spry.Widget.SlidingPanels.addEventListener(focusEle, "focus", function(e) { return self.onFocus(e || window.event); }, false);
Spry.Widget.SlidingPanels.addEventListener(focusEle, "blur", function(e) { return self.onBlur(e || window.event); }, false);
Spry.Widget.SlidingPanels.addEventListener(focusEle, "keydown", function(e) { return self.onKeyDown(e || window.event); }, false);
if (this.currentPanel)
// Temporarily turn off animation when showing the
// initial panel.
var ea = this.enableAnimation;
this.enableAnimation = false;
this.showPanel(this.currentPanel);
this.enableAnimation = ea;
Spry.Widget.SlidingPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.SlidingPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.SlidingPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.SlidingPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.SlidingPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.SlidingPanels.prototype.getCurrentPanel = function()
return this.currentPanel;
Spry.Widget.SlidingPanels.prototype.getContentGroup = function()
return this.getElementChildren(this.element)[0];
Spry.Widget.SlidingPanels.prototype.getContentPanels = function()
return this.getElementChildren(this.getContentGroup());
Spry.Widget.SlidingPanels.prototype.getContentPanelsCount = function()
return this.getContentPanels().length;
Spry.Widget.SlidingPanels.onloadDidFire = false;
Spry.Widget.SlidingPanels.loadQueue = [];
Spry.Widget.SlidingPanels.addLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('load', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('load', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onload', handler);
Spry.Widget.SlidingPanels.processLoadQueue = function(handler)
Spry.Widget.SlidingPanels.onloadDidFire = true;
var q = Spry.Widget.SlidingPanels.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen; i++)
q[i].attachBehaviors();
Spry.Widget.SlidingPanels.addLoadListener(Spry.Widget.SlidingPanels.pr ocessLoadQueue);
Spry.Widget.SlidingPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.SlidingPanels.prototype.getContentPanelIndex = function(ele)
if (ele)
ele = this.getElement(ele);
var panels = this.getContentPanels();
var numPanels = panels.length;
for (var i = 0; i < numPanels; i++)
if (panels[i] == ele)
return i;
return -1;
Spry.Widget.SlidingPanels.prototype.showPanel = function(elementOrIndex)
var pIndex = -1;
if (typeof elementOrIndex == "number")
pIndex = elementOrIndex;
else // Must be the element for the content panel.
pIndex = this.getContentPanelIndex(elementOrIndex);
var numPanels = this.getContentPanelsCount();
if (numPanels > 0)
pIndex = (pIndex >= numPanels) ? numPanels - 1 : pIndex;
else
pIndex = 0;
var panel = this.getContentPanels()[pIndex];
var contentGroup = this.getContentGroup();
if (panel && contentGroup)
if (this.currentPanel)
this.removeClassName(this.currentPanel, this.currentPanelClass);
this.currentPanel = panel;
var nx = -panel.offsetLeft;
var ny = -panel.offsetTop;
if (this.enableAnimation)
if (this.animator)
this.animator.stop();
var cx = contentGroup.offsetLeft;
var cy = contentGroup.offsetTop;
if (cx != nx || cy != ny)
var self = this;
this.addClassName(this.element, this.animatingClass);
this.animator = new Spry.Widget.SlidingPanels.PanelAnimator(contentGroup, cx, cy, nx, ny, { duration: this.duration, fps: this.fps, transition: this.transition, finish: function()
self.removeClassName(self.element, self.animatingClass);
self.addClassName(panel, self.currentPanelClass);
this.animator.start();
else
contentGroup.style.left = nx + "px";
contentGroup.style.top = ny + "px";
this.addClassName(panel, this.currentPanelClass);
return panel;
Spry.Widget.SlidingPanels.prototype.showFirstPanel = function()
return this.showPanel(0);
Spry.Widget.SlidingPanels.prototype.showLastPanel = function()
return this.showPanel(this.getContentPanels().length - 1);
Spry.Widget.SlidingPanels.prototype.showPreviousPanel = function()
return this.showPanel(this.getContentPanelIndex(this.currentPanel) - 1);
Spry.Widget.SlidingPanels.prototype.showNextPanel = function()
return this.showPanel(this.getContentPanelIndex(this.currentPanel) + 1);
Spry.Widget.SlidingPanels.PanelAnimator = function(ele, curX, curY, dstX, dstY, opts)
this.element = ele;
this.curX = curX;
this.curY = curY;
this.dstX = dstX;
this.dstY = dstY;
this.fps = 60;
this.duration = 500;
this.transition = Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition;
this.startTime = 0;
this.timerID = 0;
this.finish = null;
var self = this;
this.intervalFunc = function() { self.step(); };
Spry.Widget.SlidingPanels.setOptions(this, opts, true);
this.interval = 1000/this.fps;
Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.SlidingPanels.PanelAnimator.prototype.start = function()
this.stop();
this.startTime = (new Date()).getTime();
this.timerID = setTimeout(this.intervalFunc, this.interval);
Spry.Widget.SlidingPanels.PanelAnimator.prototype.stop = function()
if (this.timerID)
clearTimeout(this.timerID);
this.timerID = 0;
Spry.Widget.SlidingPanels.PanelAnimator.prototype.step = function()
var elapsedTime = (new Date()).getTime() - this.startTime;
var done = elapsedTime >= this.duration;
var x, y;
if (done)
x = this.curX = this.dstX;
y = this.curY = this.dstY;
else
x = this.transition(elapsedTime, this.curX, this.dstX - this.curX, this.duration);
y = this.transition(elapsedTime, this.curY, this.dstY - this.curY, this.duration);
this.element.style.left = x + "px";
this.element.style.top = y + "px";
if (!done)
this.timerID = setTimeout(this.intervalFunc, this.interval);
else if (this.finish)
this.finish();Add a valid Document Type Declaration on your page. (DTD) and it should work smoothly.. You could have found this out if you would just validate your page. validator.w3.org.
-
Spry Sliding Panels - Panel Height Problem
Hi guys,
Ive been trying for a while to make the sliding panels widget
show each panel in its own height instead of the longest panel's height in the container.
I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
I do, however, have a list of things that i believe if implemented should work,
could you guys help me do these fixes on the js? ( the one you think will work )
1. edit so that: Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
2. edit so that: PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
3. edit so that: Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
Please, if you can make the change in the js, i would appreciate greatly appreciate it. There is nothing in the entire web in to fixing this.
This is the SprySlidingPanels.js:
// SprySlidingPanels.js - version 0.5 - Spry Pre-Release 1.6
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.SlidingPanels = function(element, opts)
this.element = this.getElement(element);
this.enableAnimation = true;
this.currentPanel = null;
this.enableKeyboardNavigation = true;
this.hasFocus = false;
this.previousPanelKeyCode = Spry.Widget.SlidingPanels.KEY_LEFT;
this.nextPanelKeyCode = Spry.Widget.SlidingPanels.KEY_RIGHT;
this.currentPanelClass = "SlidingPanelsCurrentPanel";
this.focusedClass = "SlidingPanelsFocused";
this.animatingClass = "SlidingPanelsAnimating";
Spry.Widget.SlidingPanels.setOptions(this, opts);
if (this.element)
this.element.style.overflow = "hidden";
// Developers can specify the default panel as an index,
// id or an actual element node. Make sure to normalize
// it into an element node because that is what we expect
// internally.
if (this.defaultPanel)
if (typeof this.defaultPanel == "number")
this.currentPanel = this.getContentPanels()[this.defaultPanel];
else
this.currentPanel = this.getElement(this.defaultPanel);
// If we still don't have a current panel, use the first one!
if (!this.currentPanel)
this.currentPanel = this.getContentPanels()[0];
// Since we rely on the positioning information of the
// panels, we need to wait for the onload event to fire before
// we can attempt to show the initial panel. Once the onload
// fires, we know that all CSS files have loaded. This is
// especially important for Safari.
if (Spry.Widget.SlidingPanels.onloadDidFire)
this.attachBehaviors();
else
Spry.Widget.SlidingPanels.loadQueue.push(this);
Spry.Widget.SlidingPanels.prototype.onFocus = function(e)
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
Spry.Widget.SlidingPanels.prototype.onBlur = function(e)
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
return false;
Spry.Widget.SlidingPanels.KEY_LEFT = 37;
Spry.Widget.SlidingPanels.KEY_UP = 38;
Spry.Widget.SlidingPanels.KEY_RIGHT = 39;
Spry.Widget.SlidingPanels.KEY_DOWN = 40;
Spry.Widget.SlidingPanels.prototype.onKeyDown = function(e)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
if (key == this.nextPanelKeyCode)
this.showNextPanel();
else /* if (key == this.previousPanelKeyCode) */
this.showPreviousPanel();
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.SlidingPanels.prototype.attachBehaviors = function()
var ele = this.element;
if (!ele)
return;
if (this.enableKeyboardNavigation)
var focusEle = null;
var tabIndexAttr = ele.attributes.getNamedItem("tabindex");
if (tabIndexAttr || ele.nodeName.toLowerCase() == "a")
focusEle = ele;
if (focusEle)
var self = this;
Spry.Widget.SlidingPanels.addEventListener(focusEle, "focus", function(e) { return self.onFocus(e || window.event); }, false);
Spry.Widget.SlidingPanels.addEventListener(focusEle, "blur", function(e) { return self.onBlur(e || window.event); }, false);
Spry.Widget.SlidingPanels.addEventListener(focusEle, "keydown", function(e) { return self.onKeyDown(e || window.event); }, false);
if (this.currentPanel)
// Temporarily turn off animation when showing the
// initial panel.
var ea = this.enableAnimation;
this.enableAnimation = false;
this.showPanel(this.currentPanel);
this.enableAnimation = ea;
Spry.Widget.SlidingPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.SlidingPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.SlidingPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.SlidingPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.SlidingPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.SlidingPanels.prototype.getCurrentPanel = function()
return this.currentPanel;
Spry.Widget.SlidingPanels.prototype.getContentGroup = function()
return this.getElementChildren(this.element)[0];
Spry.Widget.SlidingPanels.prototype.getContentPanels = function()
return this.getElementChildren(this.getContentGroup());
Spry.Widget.SlidingPanels.prototype.getContentPanelsCount = function()
return this.getContentPanels().length;
Spry.Widget.SlidingPanels.onloadDidFire = false;
Spry.Widget.SlidingPanels.loadQueue = [];
Spry.Widget.SlidingPanels.addLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('load', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('load', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onload', handler);
Spry.Widget.SlidingPanels.processLoadQueue = function(handler)
Spry.Widget.SlidingPanels.onloadDidFire = true;
var q = Spry.Widget.SlidingPanels.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen; i++)
q[i].attachBehaviors();
Spry.Widget.SlidingPanels.addLoadListener(Spry.Widget.SlidingPanels.pr ocessLoadQueue);
Spry.Widget.SlidingPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.SlidingPanels.prototype.getContentPanelIndex = function(ele)
if (ele)
ele = this.getElement(ele);
var panels = this.getContentPanels();
var numPanels = panels.length;
for (var i = 0; i < numPanels; i++)
if (panels[i] == ele)
return i;
return -1;
Spry.Widget.SlidingPanels.prototype.showPanel = function(elementOrIndex)
var pIndex = -1;
if (typeof elementOrIndex == "number")
pIndex = elementOrIndex;
else // Must be the element for the content panel.
pIndex = this.getContentPanelIndex(elementOrIndex);
var numPanels = this.getContentPanelsCount();
if (numPanels > 0)
pIndex = (pIndex >= numPanels) ? numPanels - 1 : pIndex;
else
pIndex = 0;
var panel = this.getContentPanels()[pIndex];
var contentGroup = this.getContentGroup();
if (panel && contentGroup)
if (this.currentPanel)
this.removeClassName(this.currentPanel, this.currentPanelClass);
this.currentPanel = panel;
var nx = -panel.offsetLeft;
var ny = -panel.offsetTop;
if (this.enableAnimation)
if (this.animator)
this.animator.stop();
var cx = contentGroup.offsetLeft;
var cy = contentGroup.offsetTop;
if (cx != nx || cy != ny)
var self = this;
this.addClassName(this.element, this.animatingClass);
this.animator = new Spry.Widget.SlidingPanels.PanelAnimator(contentGroup, cx, cy, nx, ny, { duration: this.duration, fps: this.fps, transition: this.transition, finish: function()
self.removeClassName(self.element, self.animatingClass);
self.addClassName(panel, self.currentPanelClass);
this.animator.start();
else
contentGroup.style.left = nx + "px";
contentGroup.style.top = ny + "px";
this.addClassName(panel, this.currentPanelClass);
return panel;
Spry.Widget.SlidingPanels.prototype.showFirstPanel = function()
return this.showPanel(0);
Spry.Widget.SlidingPanels.prototype.showLastPanel = function()
return this.showPanel(this.getContentPanels().length - 1);
Spry.Widget.SlidingPanels.prototype.showPreviousPanel = function()
return this.showPanel(this.getContentPanelIndex(this.currentPanel) - 1);
Spry.Widget.SlidingPanels.prototype.showNextPanel = function()
return this.showPanel(this.getContentPanelIndex(this.currentPanel) + 1);
Spry.Widget.SlidingPanels.PanelAnimator = function(ele, curX, curY, dstX, dstY, opts)
this.element = ele;
this.curX = curX;
this.curY = curY;
this.dstX = dstX;
this.dstY = dstY;
this.fps = 60;
this.duration = 500;
this.transition = Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition;
this.startTime = 0;
this.timerID = 0;
this.finish = null;
var self = this;
this.intervalFunc = function() { self.step(); };
Spry.Widget.SlidingPanels.setOptions(this, opts, true);
this.interval = 1000/this.fps;
Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.SlidingPanels.PanelAnimator.prototype.start = function()
this.stop();
this.startTime = (new Date()).getTime();
this.timerID = setTimeout(this.intervalFunc, this.interval);
Spry.Widget.SlidingPanels.PanelAnimator.prototype.stop = function()
if (this.timerID)
clearTimeout(this.timerID);
this.timerID = 0;
Spry.Widget.SlidingPanels.PanelAnimator.prototype.step = function()
var elapsedTime = (new Date()).getTime() - this.startTime;
var done = elapsedTime >= this.duration;
var x, y;
if (done)
x = this.curX = this.dstX;
y = this.curY = this.dstY;
else
x = this.transition(elapsedTime, this.curX, this.dstX - this.curX, this.duration);
y = this.transition(elapsedTime, this.curY, this.dstY - this.curY, this.duration);
this.element.style.left = x + "px";
this.element.style.top = y + "px";
if (!done)
this.timerID = setTimeout(this.intervalFunc, this.interval);
else if (this.finish)
this.finish();And on a side note, if it's just IE6 where the problem arises, should I care???
Have a look here http://www.w3counter.com/globalstats.php
Gramps -
Sliding Panels Auto Advance w/ Timer
Hi everyone. I'm looking to make my sliding panels advance
with a simple timer. I know this can be done (right?) but can't
find any way to do this. I have text content in my panels (no
images) so the posted example of a gallery doesn't help me much.
I have no problem setting up the panels as I want, I just
want to make them advance every few seconds.
Anyone please help!!
Thanks so much,
Varen SwaabInstead of creating a custom script, I decided to extend the widget it self. So everything can be controlled from the widget constructor.
Before we get started a small side note:
I would advice to put the changes in a seperate script, and not to modify the current SlidingPanels.js. This way, if you happen to update to Spry 1.7 it will not overwrite the change you made. But if you do not wish to update just paste it in the SprySlidingPanels.js (This saves a HTTP request, resulting in a slightly faster page load, maintainablity vs performance)
The changes allow you specify the following new options in the constructor:
- automatic: true / false [boolean]
turns automatic sliding panels on or off, off by default
- direction: 0 / 1 [number or Spry.forward , Spry.backward if you have SpryEffects included]
direction that panels should automaticly slide to, 1 is forward, 2 is backward
- each: 1000 [number]
time in miliseconds, note I had to name this "each" instead of duration, because duration handles the sliding panel animation duration.
Example constructor:
var sp1 = new Spry.Widget.SlidingPanels("SlidingPanels1", { automatic: false, direction: 0, each: 5000 });
It also adds 3 new methods to the sliding panel:
- .start [ sp1.start(); ]
This allows you to start the automatic sliding of the panels, this will also work, if you did not specify automatic in your constructor
- .stop [ sp1.stop(); ]
Stops automatic sliding of the panels
- .setDirection [ sp1.setDirection(1); ]
Sets a new direction for the sliding panels, requires the same values as you can specify in the sliding panels constructor
The new code:
// line 121 of SprySlidingPanels.js
Spry.Widget.SlidingPanels.prototype.attachBehaviors = function()
var ele = this.element;
if (!ele)
return;
if (this.enableKeyboardNavigation)
var focusEle = null;
var tabIndexAttr = ele.attributes.getNamedItem("tabindex");
if (tabIndexAttr || ele.nodeName.toLowerCase() == "a")
focusEle = ele;
if (focusEle)
var self = this;
Spry.Widget.SlidingPanels.addEventListener(focusEle, "focus", function(e) { return self.onFocus(e || window.event); }, false);
Spry.Widget.SlidingPanels.addEventListener(focusEle, "blur", function(e) { return self.onBlur(e || window.event); }, false);
Spry.Widget.SlidingPanels.addEventListener(focusEle, "keydown", function(e) { return self.onKeyDown(e || window.event); }, false);
if (this.currentPanel)
// Temporarily turn off animation when showing the
// initial panel.
var ea = this.enableAnimation;
this.enableAnimation = false;
this.showPanel(this.currentPanel);
this.enableAnimation = ea;
if (this.automatic){
this.start();
// These are all new methods
Spry.Widget.SlidingPanels.prototype.start = function(){
var self = this; // reference to this, so we can use it inside our function
this.automaticStarted = setInterval(function(){
var panels = self.getContentPanels(),
panelcount = panels.length,
current = self.getCurrentPanel(),
newpanel;
// locate the current panel index, and check if we need to increase or decrease the panel
for(var i = 0; i < panelcount; i++){
if(panels[i] == current){
self.direction == 1 ? (i++) : (i--);
self.showPanel( self.direction == 1 ? (i >= panels.length ? 0 : i) : (i < 0 ? panels.length -1 : i));
break; // stop looping, we already found and are displaying our new panel
}, this.each || 3000);
Spry.Widget.SlidingPanels.prototype.stop = function(){
if(this.automaticStarted && typeof this.automaticStarted == 'number'){
clearInterval(this.automaticStarted);
this.automaticStarted = null;
Spry.Widget.SlidingPanels.prototype.setDirection = function(direction){
this.direction = direction;
Hopes this helps -
Edit JS on spry sliding panels widget to fix auto panel height problem
Hi guys,
Ive been trying for a while to make the sliding panels widget
show each panel in its own height instead of the longest panel's height in the container.
I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
I do, however, have a list of things that i believe if implemented should work,
could you help me do these fixes on the js? ( any one you know how to or think will work )
1. edit so that: Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
2. edit so that: PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
3. edit so that: Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
4. Using SpryDOMUtils.js I am currently playing with the code pasted below,
the idea came from Gramp's Spry Sliding Panels Group Navigation Buttons cookbook
He addresses a different problem, but since it has to do with identifying the current panel and doing something when the panel is x number, i thought there could be a height property set for each panel when each is the current one, atleast something can be done with this, my problem is i dont know how to set that something. Please check out the following code:
<script>
// The following function - setPanelNavigation() - assumes the following
// 1. Sliding Panels have a class of SlidingPanelsContent AND a unique ID
// 2. The Previous Panel button has an ID of previousPanel
// 3. The Next Panel button has an ID of nextPanel
// 4. SpryDOMUtils.js has been linked
function setPanelNavigation() {
var current = sp1.getCurrentPanel(); // Get the current panel
var panelCount = sp1.getContentPanelsCount(); // Get the total number of panels
var panelNumber=1; // Give a value to the first panel number
Spry.$$(".SlidingPanelsContent").forEach(function(node) { // Cycle through the panels
if (node.id==current.id){ // The current panel now receives a number
if ( panelNumber==1 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 750); //
if ( panelNumber==2 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 250); //
panelNumber++; // Go to next panel after incrementing the count
Spry.Utils.addLoadListener(setPanelNavigation); // Set buttons to initial value
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
What am i doing wrong in that bit ? I thought i had it there, but it didnt work.
Anyone, please help. Thank you.wait my bad, the link to my page is:
http://www.pupr.edu/department/industrial/students.asp
** no s on department -
Sliding Panels No Javascript Enabled,
I'm not crazy about how the Sliding Panels widget degrades if
JavaScript is disabled (it exposes all the panels side by side
horizontally). Go to the sliding panels widget example from Adobe
and disable your JavaScript:
Adobe
Sliding Panels example page.
As an alternative for users who have JavaScript disabled, I
would only like to show only the first panel (preserving the
original width of the sliding panel as if JavaScript were enabled)
or I'm looking for a way to create an error message (not on a
separate page, but in the section where the sliding panels would
be) that reads something like "please enable javascript etc. and
will hide the sliding panels content). Netflix does this with their
sliding panels if you have JavaScript disabled- located on the new
releases page after you login (would give the link but you have to
login). Or if someone has a better solution I am all ears. Thank
you.elen,
I had to make the sliding panel the same height as my container div.
For example, my main container div is 500px tall, my sliding panel also has to be 500px tall. I figured this out by changing the sizes several times and got it to slide, but skip a panel every time. I soon figured out the size issue. -
Sliding Panels - Problems Scrolling Horizontal in Safari
I have adjusted the CSS in order to make the Sliding Panels widget scroll horizontal using the float: left;
It is working fine in Firefox but no matter what I do it does not scroll horizontal in Safari, it continues to scroll verticle. It seems as if it is just not responding to the float in the style.
What am I doing wrong?
Here is the URL to the page I'm working on.
www.wyndetryst.com/testportfolio/portfolio.htmlIt works fine in my safari. Do the examples work in safari? (Example 2: http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html )
Did you also change the rest of the setting or just the float:left. As it needs width changes as well as seen in the example. -
How can I make iTunes sort on the first word by default, even though that word is "The" or "A"?
I myself think that (for instance) "A tribe called Quest" should be sorted under "A", not "T".
Now I can edit the sort options manually per track and/or per selection, but I would really like to just kill this "iTunes-knows-how-you-should-sort"-feature in iTunes.
Anyone any suggestion on how to do that?
ThanksHere is a modified version of one of Doug's Scripts. My modification was to add Sort Name to the list of tags that could be changed. I tried it on a single track and it worked. I recommend backing up your library first. Select the tracks you want to change (or all tracks) and run the script from the Applescript Editor. If it works as intended, save it so you can apply it to newly imported tracks. And, yes, I know this isn't the exact answer to your question, you want to change a preference setting in iTunes (if there is such a setting).
Original script can be forund at http://dougscripts.com/itunes/scripts/ss.php?sp=thistagthattag
Modified script is below. Start up Applescript Editor, paste it into a new window. Start up iTunes and select the tracks to modify. Click Run in the Applescript Editor. Follow the instructions.
(* Put This In That
v2.0 april 22 2008
- runs as universal binary
- adds "Show" tag
- consolidated code
- saved as script bundle
v1.7 October 3, 2006
- adds "Album Artist" as option
v1.6 October 28, 2004
- works around iTunes 4.7 selection bug
v1.5 ('04/1)-- adds "grouping" tag
Get more free AppleScripts and info on writing your own
at Doug's AppleScripts for iTunes
http://dougscripts.com/itunes/
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
Get a copy of the GNU General Public License by writing to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
or visit http://www.gnu.org/copyleft/gpl.html
-- CONSTANTS
property allOptions : {"Song Name", "Artist", "Album", "Album Artist", "Composer", "Genre", "Comments", "Show", "Grouping", "Sort Name"}
property my_title : "Put This In That"
global thisTag, thatTag, theNewTags, theOriginalTags, yn
tell application "iTunes"
if selection is not {} then -- if tracks are selected...
set sel to selection
set numTracks to (length of sel)
set s to "s"
if numTracks is 1 then set s to ""
display dialog "The data from one tag REPLACES the data in another tag in all the selected tracks, with option to delete data in first tag." & return & return & (numTracks & " track" & s & " selected.") buttons {"Cancel", "Continue"} default button 2 with title my_title giving up after 30
if gave up of result is true then return
my choose_this_tag()
my choose_that_tag()
set yn to (button returned of (display dialog "Delete data in " & thisTag & " afterwards?" buttons {"Yes", "No"} default button 2 with title my_title giving up after 45) is "Yes")
set oldfi to fixed indexing
set fixed indexing to true
repeat with t from 1 to numTracks
tell contents of item t of sel
set theOriginalTags to {get name, get artist, get album, get album artist, get composer, get genre, get comment, get show, get grouping, get sort name}
set theNewTags to theOriginalTags
my do_put()
set {name, artist, album, album artist, composer, genre, comment, show, grouping, sort name} to theNewTags
end tell
end repeat
set fixed indexing to oldfi
else
display dialog "No tracks have been selected." buttons {"Cancel"} default button 1 with icon 0 giving up after 30
end if -- no selection
end tell
to choose_this_tag()
tell application "iTunes"
set n to (choose from list allOptions with prompt ("Select a tag to get data from:") with title my_title)
if n is false then error number -128
set thisTag to (n as text)
end tell
end choose_this_tag
to choose_that_tag()
set o to {}
repeat with t in allOptions
if (t as text) is not thisTag then copy t to end of o
end repeat
tell application "iTunes"
set n to choose from list o with prompt ("Use data from the " & thisTag & " tag to REPLACE data in...") with title my_title
if n is false then error number -128
set thatTag to n as text
end tell
end choose_that_tag
to do_put()
try
repeat with i from 1 to (length of allOptions)
if thisTag is (item i of allOptions) then
set thisTag_sto to (item i of theOriginalTags)
exit repeat
end if
end repeat
repeat with i from 1 to (length of allOptions)
if thatTag is (item i of allOptions) then
set (item i of theNewTags) to thisTag_sto
exit repeat
end if
end repeat
if yn then
repeat with i from 1 to (length of allOptions)
if thisTag is (item i of allOptions) then
set (item i of theNewTags) to ""
exit repeat
end if
end repeat
end if
end try
end do_put -
Sliding panels hidden content on page load, SprySlidingPanels.js
There was a
previous
post about the issue of hidden content flashing on page load.
That issue was solved with a "hideGroup" class and an additional
line in the JS file under the addEventListener lines. My sliding
panels JS file isn't as simple and I would like to accomplish the
same thing. I'm using SprySlidingPanels.js. Can anyone help?All you really need to do is add this to your CSS:
.SlidingPanels {
overflow: hidden;
No additional JS or CSS class required.
--== Kin ==-- -
Sliding Panels hidden content shows on page load
Greetings,
I am working on a site for a child abuse prevention
non-profit and need some help asap!
I am using the unobtrusive sliding panels at:
Adobe
Unobtrusive Sliding Panels Example
I have two panels side by side. When the page loads, all of
the hidden content is briefly shown to the right of the panels. It
does this on the adobe sample as well.
Is there ANY way to hide this hidden content during the page
load? If so, could I get exact instructions? I am more of a
front-end person and not the best with scripting.
BTW, all of the content is static so the "Adobe Hiding Data
References During Page Load" does not work in this instance.
Thanks in advance!!Try this:
1. Set a class that sets visibiliity to hidden:
.hideGroup{visibility:hidden;}
2. Add this class to your content group:
<div class="SlidingPanelsContentGroup hideGroup">
3. Add a line to sp_unobtrusive.js to remove this new class
after the widget made.
Spry.$$(".SlidingPanelsContentGroup").removeClassName("hideGroup");
Add that right under the addEventListener lines.
That should do it.
Don -
Hello,
I have looked in the documents section for the sliding panels
but I can't find a solution how NOT to show the content until a
user clicks on a link. If there is a solution documented, please
point me in the right direction. If not, can you advise how to best
go about it - or is it an effect?
Cheers,
tintinadd style visibility hidden to the div,
than use the SpryDOMUtirls.js onloadlistener to show it
(using document.getElementById and style.visibility -
Sliding panel inside tabbed panel - onclick both
I have two tabbed panels, tab one has a sliding panel function in it with 5 panels. I am wondering that when you are in tab 2 that you can have a button that clicks to tab 1 AND to sliding panel 3 at the same time? I can make them work independently, but can't get it to accomplish both. I don't have a site that I can post but I could dummy one up if that would help.
OK I have another scenario as well....
You are on tab 1, sliding panel 4 and then go to tab 2. When you go back to tab 1 it holds the sliding panel 4 active. Is there a way that when you go back to tab 1 and it to default back to sliding panel 1? Basically I don't want it to hold the position of sliding panel 4 on tab 1.Try this and adapt to your needs:
<!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=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
<script type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style>
.SlidingPanels {
position: relative;
width: 200px;
height: 200px;
padding: 0px;
.SlidingPanelsContentGroup {
position: relative;
height:600px;
margin: 0px;
padding: 0px;
.SlidingPanelsContent {
width: 100%;
height: 400px;
overflow: hidden;
margin: 0px;
padding: 0px;
</style>
</head>
<body>
<a href="#" id="trigger1">Click me to go to Tab 1 and Panel 3</a>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" id="trigger2">Click mo to go to Tab1 and Panel 1</li>
<li class="TabbedPanelsTab" tabindex="0">Onglet 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Contenu 1
<a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
<a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
<a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
<div id="slidingPanel_1" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div id="content1" class="SlidingPanelsContent">The Content 1</div>
<div id="content2" class="SlidingPanelsContent">The Content 2</div>
<div id="content3" class="SlidingPanelsContent">The Content 3</div>
</div>
</div>
</div>
<div class="TabbedPanelsContent">Contenu 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
Spry.Utils.addLoadListener(function() {
Spry.$$("#trigger1").addEventListener('click', function() {
TabbedPanels1.showPanel(0);
sp1.showPanel(2);
}, false);
Spry.$$("#trigger2").addEventListener('click', function() {
//TabbedPanels1.showPanel(0);
sp1.showPanel(0);
}, false);
</script>
</body>
</html>
You may even do better using Spry.$$() CSS3-like selector (:first-child, nth-of-type(n), etc) to avoid adding ids on elements.
Xav -
HTML Panel with Tabs like Sliding Panel tabs
Hi, what do I need to add/change to have HTML panels
switching with tabs that switches background image like the tabs in
sliding panels example?
Or can I modify the
sp_withTabs.js to have graphic tabs work with HTML
Panels?Nevermind, I got it. I used the SpryTabbedPanels.js and
modified the SpryTabbedPanels.css with my graphics, size, position
and what not.
I do have one more question. I'm using HTML Panels with Fade
in and out and when loading my page I have to have default content
in the main html doc for something to display when the page loads.
Then when I click on the first button, it then loads the real
external HTML panels. Is there any way I can load my first external
HTML page right when my site loads? -
Spry Sliding Panels--how to get it to repeat at the end?
I have a beautiful working Sliding Panels set up--you can see
it at:
http://www.traditional-building.com/index-anim.htm
(Scroll down to "Browse the Product Gallery")(and no, I did not
design this attrocious, table-riffic site!). My question is, when I
get to the last panel, how do I get it to automatically start over
at the first panel? I can't seem to figure this out...
thanks!Hi Kin,
ljlindhurst posted this http://forums.adobe.com/message/97681# back in April 2008 without a positive conclusion. It looks like the same conundrum that I posted a couple of days ago http://forums.adobe.com/thread/851757 :
“ Spry SlidingPanels
By default, after the last panel has displayed The Spry slidingPanels Widget causes the panels to zoom backward (visibly) through all the panels to arrive back at the first panel (sp1) to start the cycle again !?
Well I don't see any sliding panels on line that do that these days, thank goodness, they all transition (continue) from the last to the first panel without a break or “reverse zoom” ! So what am I missing? “
Your reply to ljlindhurst started with the following line:
“Since none of the geniuses have answered your question, I'll give it a try. :-P “
Well I appreciate your humor and greatly respect all the work you do on the forums, as I suspect many of us do.
So could you please revisit this item and have a stab at the javascript or code that will make this needed action work.
Thanks in anticipation.
Maybe you are looking for
-
What is 'Growl' and why do I need it?
My system keeps telling me to install GROWL. What is it and why do I need it? Harold
-
ZOMG PLEASE HELP! - ColorMatrixFilter - How to set a SPECIFIC HLS to a greyscale png
I am able to use the color matrix filter to change the pngs that I am loading dynamicly. Thing is, I can't seem to figure out how to apply a SPECIFIC hue, saturation and luminance. Basically I can successfully modify my grey scale png to all sorts of
-
Qurey to get all the sundays in a year
Hello, Can anyone help me in building a qurey that returns all the sundays in a year (from 01-Jan to 31-Dec)? I'll be grateful. Hasan.
-
Unable to unshare a share point due to forced drive (volume) name change.
I just upgraded a single CPU G4 Xserve from 10.3.9 to 10.5.2. I have run into a bug that I found discussed in another thread here; the bug that two drives on the server cannot have very similar names or it leads to the File Sharing pane in Server adm
-
Processing multiple Files, no longer lets me convert to jpeg.
I have Elements 6 for Mac. I have a folder full of raw images (which I downloaded an update on Camera Raw for my mac a couple of weeks ago, just remembered this) anyways, ...I made an empty folder and title it jpeg. Then I go to Elements and click