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
Similar Messages
-
Problem with Accordion Widget INSIDE Sliding Panel Widget
Hello,
perhaps I should not do this, but I nested an Accordion
Widget inside a Sliding Panels Widget:
- There are eight Panels.
- Each one contains a complete Accordion.
The sliding works fine, and so does the Accordion animation,
but the text inside the Accordion Panel Tabs won't move along, when
a tab is activated. I need to hover the mouse over the accordion to
make the panel texts appear again.
Of course, when I un-nest the widgets and move the Accordion
widget out of the Sliding Panel widget, everything is fine.
My question is:
- am I demanding "too much" by nesting the widgets?
- or should this basically work, and the problem arises from
rivalling scripts?
Here is a link:
Nested
widgets Test
The horizontal top menu will activate the sliding panels, but
as of now only the leftmost menu item contains an Accordion (I know
the CSS does not look nice yet).
Is there anything I can optimise to get this to work?
Thank you so much,
Greetings, Jensen
Edit: The problem does NOT occur in Firefox, but in
Safari.Hi John,
That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
Regards,
Aish -
Two or more spry sliding panels nested in tabbed panels?
Hi
I have a tabbed panel widget on one page. Inside the first
tab I inserted a sliding panel widget. Now this works fine.
I put another sliding panel widget into the second panel.
I changed the div id ( <div id="panelwidget2"
class="SlidingPanels"> ) and placed a second variable at the end
of the code ( var sp2 = new
Spry.Widget.SlidingPanels("panelwidget2"); ) But the second sliding
panel doesn't work and Dreamweaver highlights <div
id="panelwidget2" class="SlidingPanels"> as invalid code.
What do I do wrong?
Here's the code of the page:
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="SpryAssets/SprySlidingPanels.js"
type="text/javascript"></script>
<link href="SpryAssets/SprySlidingPanels.css"
rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<h1> Main Content </h1>
<table border="0">
<tr>
<td><div id="TabbedPanels1"
class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab
1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab
2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><div
align="center"><span class="style3"><a href="#"
onclick="sp1.showFirstPanel();">Bild l</a> | <a
href="#" onclick="sp1.showPanel('p2');">Bild 2</a> | <a
href="#" onclick="sp1.showPanel('p3');">Bild 3</a> | <a
href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
</span> </div>
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent aliquam, Phasellus
trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/bensonopti.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p2">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p3">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
quis ligula. Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p4">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
quis ligula. Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="TabbedPanelsContent">
<div align="center"><span class="style3"><a
href="#" onclick="sp1.showFirstPanel();">Bild l</a> |
<a href="#" onclick="sp1.showPanel('p2');">Bild 2</a> |
<a href="#" onclick="sp1.showPanel('p3');">Bild 3</a> |
<a href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
</span> </div>
<div id="panelwidget2" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/bensonopti.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p2">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p3">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p4">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div></td>
</tr>
</table>
<!-- end #mainContent --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1");
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
var sp2 = new Spry.Widget.SlidingPanels("panelwidget2");
//-->
</script>
</body>
</html>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 Panel Widget Template
I have inserted the Spry Tabs and Accordion widgets and
adjusted using CSS. Can I do the same with a Spry Sliding Panel
Widget?, if so where can I access a sliding panel widget to
adjust?.
I have found a tutorial to create a Spry Sliding Panel Widget
inserting code, but my code experience is zero.
ThanksAlso copy the required Javascript file and CSS file to the
correct location..
in the <head></head> of the page u will see
<script src=""> go to the location of the src.. copy and
paste the files to your new location in the same folder, or change
the src to match the new location of the file. Do the same for the
CSS wich is included at the <link href= -
Okay, So I'm dense at times!
I want to try and learn the Spry Sliding Panels. Problem is that it does not appear in my Insert – Spry menu. After reading at Labs it assumes that since I have DW CS4 that it is installed. I can't be that dense.
Yeah, I located the CSS and and JS files online at Adobe. But that sure won't install it into my DW – Insert menu.
Am I really that dense?To my knowledge it shouldn't appear in the insert menu?
I did the below tutorial to learn all about sliding panels.
The tutorial will show you how to link your js and css files to your html etc, which make the panels work.
http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html -
I have an issue with the buttons in the Sliding Panels Widget
after I implemented it in my page. The first time, I have to click
a button twice in order to have it working. Has someone seen this
problem before?Hi Natasa,
If you go to http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSampl e.html and right click on the page, a popup menu will appear. There you will see an item name 'view source'. By clicking on that item it will open a new window with the source code. Select all and copy the source code to your HTML editor on your own computer. There you can experiment with the code at hearts content.
I hope this helps.
Ben
PS. My apologies, I did not realize that this topic had already been answered.
Message was edited by: vw2ureg -
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 -
I've been working on extending Spry's Sliding Panels to allow
me to set a timer to auto advance to the next panel. Whilst I had
success with a script that targeted a particular element (eg sp1)
it really isn't terribly useful to have to recode per panel. So
trying to extend instead. Problem is that I keep getting an error
that says the advanceToNextPanel function doesn't exist. Hoping
someone might be able to point me in the right direction. Code
below:
// Sliding Panel Timer
// Based upon
http://labs.adobe.com/technologies/spry/demos/gallery/gallery.js
and feedback within the Adobe Spry forum
// Extend SlidingPanels to include additional data
Spry.Widget.SlidingPanels.prototype.gPanelShowInterval =
1000; // msecs between panels
Spry.Widget.SlidingPanels.prototype.gPanelShowOn = false;
Spry.Widget.SlidingPanels.prototype.gPanelShowTimer = null;
Spry.Widget.SlidingPanels.prototype.gAutoStartPanelShow =
true;
Spry.Widget.SlidingPanels.prototype.addPanelShowTimer =
function()
if (this.gPanelShowInterval == undefined)
this.gPanelShowInterval = 10000; // msecs between panels
if (this.gAutoStartPanelShow)
this.startPanelShow();
// Kill any previous timer event
Spry.Widget.SlidingPanels.prototype.killPanelShowTimer =
function() {
if (this.gPanelShowTimer)
clearTimeout(this.gPanelShowTimer);
this.gPanelShowTimer = null;
// Display next sliding panel on rotational loop
Spry.Widget.SlidingPanels.prototype.advanceToNextPanel =
function() {
var tPanels = this.getContentPanels().length - 1; // Total
Panels
var cPanel = this.getContentPanelIndex(this.currentPanel);
// Index of currently displayed panel
if (tPanels == cPanel)
this.showFirstPanel(); // Return to the first panel
else
this.showNextPanel(); // Show the next sliding panel
this.setPanelShowTimer();
// Setup timer event to change to next panel
Spry.Widget.SlidingPanels.prototype.setPanelShowTimer =
function() {
this.killPanelShowTimer(); // Kill any previous timer event
this.gPanelShowTimer = setTimeout( function() {
this.gPanelShowTimer = null; this.advanceToNextPanel(); },
this.gPanelShowInterval);
// Start the timed sliding panel
Spry.Widget.SlidingPanels.prototype.startPanelShow =
function() {
this.gPanelShowOn = true;
this.setPanelShowTimer();
};My previously posted I'd fixed this but it is in fact not
working.
Hi hope you can help.
My Spry Sliding panel is appearing over my floats in IE, fine
in Firefox.
Test
page here
Sliding
Panels CSS Here
Any ideas?
Is this a spry problem or my CSS?
Thanks.
Rich -
Maybe I'm missing something but I've been stuck on this for a
long time. In one example of the spry sliding panel with tab there
are <li> elements for the menu like this...
<ul class="slidingTabPanel">
<li><a href="#" id="about" class="tabActive"
title="about"></a></li>
<li><a href="#" id="contact" class="tab"
title="contact"></a></li>
</ul>
and they should link to...
<div id="aboutPanel" class="p1"></div>
<div id="contactPanel" class="p2"></div>
with contents in each of those DIV
I just can't seem to get the buttons to do anything, how are
the <li> calling the panels?Actually, I figured it out. I had to edit the sp_withTabs.js
file with the IDs as well, that's whats calling the CSS class.
My problem now is that everything is all good with 4 tabs,
but when I try to add another tab, no matter what path I set for
the background image state it always shows the image of the fourth
tab and not a new image. -
SPRY SLIDING PANELS & DW V.9 BUILD 3481
Hi Folks,
Does anyone know of a way to get rid of the DW error message
that pops up when you use
the sliding panels widget? If not, I'll submit an SR with the
DW folks...
Error message upon opening any document in the code window
that contains the standard
sliding panels widget code:
"This document contains JavaScript code for a widget that no
longer exists. If you don't remove
the code, the browser might display JavaScript errors when
loading the page.......
mentions: var sp1 = new Spry.Widget.SlidingPanels(......
- GRThis document contains JavaScript code for a widget that no
longer exists. If you don't remove
the code, the browser might display JavaScript errors when
loading the page. Would you like
Dreamweaver to find all instances of this code for you?
var sp1 = new Spry.Widget.SlidingPanels("PANELS",{
duration:850, fps: 60, defaultPanel:0 });
Yes No
Just above the end-body tag I have the script:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{
duration: 350, useFixedPanelHeights: false, defaultPanel: 0 });
The only ID I have is " <DIV id="Accordion1"
class="accordian_div Accordion">" as a container for the panels.
Should I
change an ID name or a var name ? The SlidingPanels work
fine. It's just that I'm using the "open recent files automatically
on startup" sort of option and each page displays the above
error and stops, until I reply to it, then continues to load the
next file.
- GR -
Sliding panel widget controls a la Brightcove website
I'm interesting in building a sliding panels widget with controls that behave as seen on the Brightcove website (Aug.2010). Specifically, when the user clicks on the previous or next buttons, the controls along the bottom change to an "active" state to properly indicate which is the current slide/panel. I assume this would be achieved through javascript. I have been trying to find a source where this method has been documented and have had no luck so far. Can anyone point me in the right direction?
Thanks in advance for any advice.Brightcove uses a JQuery sliding panel. Google the subject and you will find your answer.
If you want to use Spry, have a look at the second example here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Or have a look at customizing http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2141541 -
Spry HTML Panel Widget breaks ICE
I'm using the spry html panel widget to load a side bar
across my site. It has Ice tags as do the main pages its loaded
into. When editing a main page, it will not save saying. "the html
sent to save was not in the page". (referring to my spry sidebar).
Taking ICE out of the side bar page allows it to work.
Is there a work around to use this adobe spry widget with in
context editing? It would be a shame is the sidebar can't be
edited, or has to be done for every page it loads into not using
the spry widget.Hello Addis,
I'm not entirely clear on your workflow, but InContext
Editing does not support editable or repeating region groups inside
Spry Dynamic Regions.
You can create editable regions on the html page that loads
into the spry html panel widget, but you cannot have editable
regions on the
dynamic widget region itself.
Essentially, you can apply InContext Editing editable regions
to the content in the external HTML page (e.g.,
panelWidget.loadContent('
widget_contents.html'). Then, when you want to edit the
content that loads into the widget on the main pages, you would
edit the
widget_contents.html page with InContext Editing. You can
also apply InContext Editing editable regions to any
static content regions on your main pages.
Please let me know if this needs clarification.
Best regards,
Corey -
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. -
Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images
Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
ChrisGreetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris
Maybe you are looking for
-
Dear Guruji In which tansaction code i can get report.It is compolsury to click on Capacity Durring Process order creation.i searching standard report Thanks Pankaj Kapadia
-
For some reason iMovie '11 won't let me import videos. Specifically, I'm trying to add MP4 files that I copied to my hard drive from my GoPro HD 960. For GoPro users, I used the R2 (720p) format. They open properly in QuickTime and VLC but can't b
-
Can you identify respondents to a survey without asking for a name?
Hey Does any one out there know how to create a survey on forms central, send out the survey link, perhaps appending an additional identifier to the link which i am tracking against my own internal database and then use that as an identifying field i
-
WCF Serialization List of objects
Below is a WCF REST service, which accepts TestEmp object. This TestEmp has a list of Jobs which I'm not able to deserialize. Below is a test application which I'm using for testing the deserialization When I declare as public List<TestJob> Jobs { ge
-
hi everyone....here i found a bench mark of Java vs C++...it says java is slower, another bench mark i saw said java vs C++, java is faster than C++, which is true, can u please give me some of teh true benchmarked sites of Java vs C++... this is the