Safari 4 problems - HTMLDataSet/Sliding Panels
Hi,
I've been building a fairly basic photo gallery site and was having no problems with the site until I downloaded and installed Safari 4. For some reason the detailRegions are not loading properly in Safari 4. I have thumbnails in the sliding panels that load fine but the larger versions of the photos no longer appear in Safari below the sliding panels and on the right sidebar the paypal buttons no longer appear either. IE and FF seem to be working fine still. Any help would be greatly appreciated. I'm very new to this so please bear with me if I have any glaring mistakes. THANKS!!!
<!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>Flowers</title>
<link href="mainStyles.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#sidebar1 { padding-top: 30px; }
#mainContent { zoom: 1; padding-top: 15px; }
div.mainContent { overflow:hidden; word-wrap: break-word;}
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SprySlidingPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">var ds1 = new Spry.Data.HTMLDataSet(null, "gallery", {columnNames: ['Thumbnail', 'PictureTitle', 'PictureResolution1', 'Price1', 'Button1', 'PictureResolution2', 'Price2', 'Button2', 'HiRes_Id',], rowSelector: "div.galleryItem", dataSelector: "p"});</script>
</head>
<body class="thrColHybHdr">
<div id="container">
<div id="header">
<a href="index.html"><img src="images/dmlogo.jpg" width="400" height="100" alt="Eye Focus Photography" /></a></div>
<!-- end #header -->
<div id="sidebar1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.html">Home</a></li>
<li><a href="animals.php">Animals</a></li>
<li><a href="barns.php">Barns</a></li>
<li><a href="cities.php" class="MenuBarItemSubmenu">Cities</a>
<ul>
<li><a href="washingtondc.php">Washington DC</a></li>
<li><a href="nyc.php">New York City</a></li>
</ul>
</li>
<li><a href="fireworks.php">Fireworks</a></li>
<li><a href="flowers.php" class="selected">Flowers</a></li>
<li><a href="lighthouses.php">Lighthouses</a></li>
<li><a href="misc.php">Miscellaneous</a></li>
<li><a href="national_parks.php">National Parks</a></li>
<li><a href="plants.php">Plants</a></li>
<li><a href="waterfalls.php">Waterfalls</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<div id="detailArea1" spry:detailregion="ds1">
<div class="detailText">
<h1>{PictureTitle}</h1>
<p>{PictureResolution1}</p>
<p>{Price1}</p>
<p>{Button1}</p>
<p>{PictureResolution2}</p>
<p>{Price2}</p>
<p>{Button2}</p>
<br class="clearfloat"/>
</div>
</div>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<div id="slidingGallery" class="SlidingPanels" tabindex="0" spry:region="ds1">
<div id="galleryContentGroup" class="SlidingPanelsContentGroup">
<div id="panelContents" class="SlidingPanelsContent" spry:repeat="ds1" spry:setrow="ds1">
<div class="galleryItem">
<p class="thumbnail">{Thumbnail}</p>
<p class="pictureTitle">{PictureTitle}</p>
</div>
</div>
</div>
</div>
<p id="panelNav" class="fltlft">
<a href="#" id="firstPanel" onclick="sp.showFirstPanel(); return false;">First</a>
<a href="#" id="previousPanel" onclick="sp.showPreviousPanel(); return false;">Previous</a>
<a href="#" id="nextPanel" onclick="sp.showNextPanel(); return false;">Next</a>
<a href="#" id="lastPanel" onclick="sp.showLastPanel(); return false;">Last</a>
</p>
<div id="detailArea2" spry:detailregion="ds1">
<div class="detailImg">
<img src="images/flowers/{HiRes_Id}" alt="{PictureTitle}" /><br class="clearfloat"/>
</div>
</div>
<div id="gallery">
<div class="galleryItem">
<p class="thumbnail"> <a href="images/flowers/3454_thumb.jpg"><img src="images/flowers/3454_thumb.jpg" alt="Daisy" width="145" height="97" class="thumbnail" /> </a> </p>
<p class="pictureTitle">Daisy</p>
<p class="pictureResolution">Resolution: 900x600</p>
<p class="picturePrice">Price: $1.00</p>
<p class="button">
<span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397389"/>
<input type="hidden" name="item_name" value="Daisy"/>
<input type="hidden" name="custom" value="3454_900.jpg"/>
<input type="hidden" name="amount" value="1.00"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureResolution">Resolution: 2048x1365</p>
<p class="picturePrice">Price: $5.00</p>
<p class="button">
<span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5111872"/>
<input type="hidden" name="item_name" value="Daisy"/>
<input type="hidden" name="custom" value="3454_2048.jpg"/>
<input type="hidden" name="amount" value="5.00"/>
<input type="hidden" name="option_name_1" value="flowers"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureHires">3454_wm.jpg</p>
</div>
<div class="galleryItem">
<p class="thumbnail"> <a href="images/flowers/6586_thumb.jpg"><img src="images/flowers/6586_thumb.jpg" alt="Sun Orchid" width="145" height="97" class="thumbnail" /> </a> </p>
<p class="pictureTitle">Sun Orchid</p>
<p class="pictureResolution">Resolution: 900x600</p>
<p class="picturePrice">Price: $1.00</p>
<p class="button">
<span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397419"/>
<input type="hidden" name="item_name" value="Sun Orchid"/>
<input type="hidden" name="custom" value="6586_900.jpg"/>
<input type="hidden" name="amount" value="1.00"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureResolution">Resolution: 2048x1365</p>
<p class="picturePrice">Price: $5.00</p>
<p class="button">
<span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397432"/>
<input type="hidden" name="item_name" value="Sun Orchid"/>
<input type="hidden" name="custom" value="6586_2048.jpg"/>
<input type="hidden" name="amount" value="5.00"/>
<input type="hidden" name="option_name_1" value="flowers"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureHires">6586_wm.jpg</p>
</div>
</div>
<br class="clearfloat"/>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p><!-- <span class="fltrt">ADD SOMETHING ELSE HERE</span>-->© 2009</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var sp = new Spry.Widget.SlidingPanels("slidingGallery");
Spry.$$(".thumbnail a").removeAttribute("href");
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
It doesn't work correctly in Firefox either,
If you check out generated code, you will see that the data ins't selected correctly, or that maybe your HTML is correctly.
For example.. type this in the url bar of your browser; javascript:alert(ds1.getData()[0]['HiRes_Id']); and you will see it alerts <span></span>.
So i would suggest to recheck your rowSelectors and validate your page for HTML errors.
Related documentation:
http://labs.adobe.com/technologies/spry/samples/htmldataset/RowAndDataSelectorSamples.html
Similar Messages
-
Problems with Sliding Panels in IE
I have *finally* gotten my sliding panels script working
properly. However (and not surprisingly), I am having an issue with
the addClass and removeClass functions. Although they work properly
in Firefox, in IE 6 and 7 the add and remove class functions are
not working properly.
Any ideas on this?
Here's the
example
Thanks, as always!
JoelMellymel2000 wrote:
> Hi There,
> I'm new to CS3 and can't understand why my animated
collapsible panels don't
> work in Internet Explorer. Did I miss some basic notes
somewhere? Is it just IE
> 5.2 it doesn't work in? I have created a vertical menu
bar with them and need
> to know If it can't be done here does anyone know how
else I might go about it?
> Starting to feel a little desperate and any help would
be welcome.
> Cheers!
>
>
Is that IE 5.2 on the Mac? If so, don't worry about it, test
it on IE6
on a PC instead. The last Mac IE was 5.5 and has not been
developed in
about 5 years, its dead, and not a lot works on it nowadays.
On Mac test
Safari and Firefox, same on PC but with Opera and IE6 and 7.
Steve -
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. -
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 -
Sliding Panel div Moving when acitvated in Safari
Hey,
If you go to my website, in safari, and click on "Resume" on the left side, and then begin to use the sliding panels it becomes very apparent that something is wrong. Feel free to look at my source code.
http://web.ics.purdue.edu/~jrathke
I have a hunch that it may be the iframe, that being said... does anyone know of any jquery solutions to replace iframes? Because that would solve quite a few problems in itself, thanks.
-JoshI forgot to mention that I put some test pages which
demonstrate the panels outside the table structure.
just the sliding panels:
http://www.rightonstudio.com/client/staging/jenko/chelsea/html/testimonials2.html
and with a table on top for the header section, divs in the
middle for the panels, and table on the bottom for the footer
section. This works but the alignment is all off in IE6,7 but not
in Safari and a little off in FF. :
http://www.rightonstudio.com/client/staging/jenko/chelsea/html/testimonials3.html
-L -
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 -
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 Problem: Content panels with different width?
I'm trying to create the exact same behaviour as this Argentinian Photographer have done:
http://germansaezphoto.com/music/radiohead/
I've read and used the files in your tutorial: http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html
and searched the forum but couldn't find an answer.
I'm almost there. The problem is that I have 6 test photos that are of the same height (and the same height as the slidingpanel view port) but different in width. If I set the class .SlidingPanelsContent to the same width as the largest picture(i.e. panel) then it creates a white space until the next pic starts. And If I set the width to the same as the smallest picture then it crops the other ones.
Here is the div in the index file:
<div class="SlidingPanels" id="panelwidget">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" <img src="images/panel-2.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-1.jpg" width="594" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-3.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-4.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-5.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-6.jpg" width="594" height="430" /></div>
</div>
</div><br />
<a href="#" onclick="sp1.showFirstPanel();">First Panel</a> | <a
href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a> |
<a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a href="#"
onclick="sp1.showLastPanel();">Last Panel</a>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
And here is the classes in the css:
.SlidingPanels {
position: relative;
float: left;
width: 1000px;
height: 430px;
padding: 0px;
border: none;
.SlidingPanelsContentGroup {
position: relative;
float: left;
width: 10000px;
margin: 0px;
padding: 0px;
min-height:0;
border: none;
.SlidingPanelsContent {
width: 645px;
height: 430px;
float: left;
overflow: hidden;
margin: 0px;
padding: 0px;
border: none;
In the css file before the .SlidingPanelsContent class Adobe states that they in their default implementation has set the width to the same as the view port to ensure that only one panel at a time can be viewed within the view port. But I want the opposite.
How do I solve this?It seems to me that if you have all different width images, you will want to remove the width from the content pane. That should allow the images to butt up next to each other without either extra white space (for smaller images) or cropping (of larger images). Saenz's photos are in divs with a class of .panelfoto that has the definition of float: left; width: auto;
I have not played around a lot with sliding panels, but it seems reasonable to me that that would work.
You have probably already read and digested this page: http://labs.adobe.com/technologies/spry/articles/sliding_panels/index.html
You know, if you really want something very close to what the example site looks like, look into his code and imitate it.
It does not appear that every move of the pane goes the same distance, and I'm not sure what controls that, but I see some of his images moving part-way, exposing part of the next, and so forth, instead of a complete image change each time. Using different width photos will do that partly, of course.
Beth -
Spry Sliding Panel Problem - Repost
Hi hope you can help.
My Spry Sliding panel is appearing over my floats in IE, fine
in Firefox.
I previously posted but it is in fact not working.
Test
page here
Sliding
Panels CSS Here
Any ideas?
Is this a spry problem or my CSS?
Thanks.
Richquote:
Originally posted by:
kinblas
If you're getting a "Spry is undefined" error, it probably
means that the browser is not finding the JS files you included at
the top of your HTML file. Make sure the path to your JS files are
correct ... you can do this by trying to load the JS files directly
in the URL field at the top of your browser.
--== Kin ==--
if u look at the code.. u will seee:
<link href="SprySlidingPanels.js" rel="stylesheet"
type="text/javascript"/>
it should be
<script src="SprySlidingPanels.js"
type="text/javascript"></script> -
Hi,
I'm using the sliding panels on my website, but I'm getting
an error when I use a vertical scrollbar.
To the right of the sliding panels I have an image, and when
I press the up and down arrows, the hidden sliding panels are
visible under the image!
Any ideas?
Lukequote:
Originally posted by:
Donald Booth
Hi Spry Users,
We are pleased that you are using Spry!
When posting issues for help, please help us help you.
Providing a URL is the quickest way
for the Spry team, and our valued forum community, to help you with
your page.
Code samples are also great if you
can't provide a URL.
And of course, having the latest code
is always a good idea. Use the latest download if possible.
Questions posted without urls/code inevitably take more back
and forth to get figured out.
And now that this forum has been up for a year and a half, we
have a good record of fixes previously given. Search the forums and
see if your question has been solved already.
Thanks for reading. Now, how can we help you?
The Spry Team
^ else we cant Identify the problem -
Sliding panels adjustment problem - urgent
Hi
i have a div for header and footer and the sliding panels in between. it works but for one thing:
i need to make it so when the inner panels have large contents it will be at that height. so the footer div will be pushed down to make room for the contents. and so, the sliding widgets adgust its height according the contents that is within each inner panel.
how can i make it? it is really urgent.
best regards
derridaIt seems to me that if you have all different width images, you will want to remove the width from the content pane. That should allow the images to butt up next to each other without either extra white space (for smaller images) or cropping (of larger images). Saenz's photos are in divs with a class of .panelfoto that has the definition of float: left; width: auto;
I have not played around a lot with sliding panels, but it seems reasonable to me that that would work.
You have probably already read and digested this page: http://labs.adobe.com/technologies/spry/articles/sliding_panels/index.html
You know, if you really want something very close to what the example site looks like, look into his code and imitate it.
It does not appear that every move of the pane goes the same distance, and I'm not sure what controls that, but I see some of his images moving part-way, exposing part of the next, and so forth, instead of a complete image change each time. Using different width photos will do that partly, of course.
Beth -
Spry Sliding Panel Widget problem
I have tried to use the Spry Widget Sliding Panel code from
the Adobe tutorial and I keep getting an error message. The message
is that "Spry" is undefined in line 26. Please help! I have been
trying to figure this out for 2 days. Is there any code I have to
change in the .css file or in the .js file that comes with the Spry
Widget Sliding Panel download.
I am just getting familiar with the on-line community and I
have posted this to two other fora -- so please forgive the
repetition. I am also new to Spry and am eager to learn how to use
it. I hope it is not too advanced for my level.
Attached, please find the code.
Attach Code
<!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>Untitled Document</title>
<link href="SprySlidingPanels3.css" rel="stylesheet"
type="text/css" />
<link href="SprySlidingPanels.js" rel="stylesheet"
type="text/javascript"/>
</head>
<body>
<a href="#" onClick="sp0.showPanel(0);"> Panel
1</a>
<a href="#" onClick="sp1.showPanel(1);">Panel
2</a>
<a href="#" onClick="sp2.showPanel(2);">Panel
3</a>
<a href="#" onclick="sp3.showPanel(3);">Panel
4</a>
<div id="slidingPanel_1" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div id="sp1"
class="SlidingPanelsContent">Content1</div>
<div id="sp1"
class="SlidingPanelsContent">Content2</div>
<div id="sp1"
class="SlidingPanelsContent">Content3</div>
<div id="sp1"
class="SlidingPanelsContent">Content4</div>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("SlidingPanel_1");
</script>
</body>
</html>quote:
Originally posted by:
kinblas
If you're getting a "Spry is undefined" error, it probably
means that the browser is not finding the JS files you included at
the top of your HTML file. Make sure the path to your JS files are
correct ... you can do this by trying to load the JS files directly
in the URL field at the top of your browser.
--== Kin ==--
if u look at the code.. u will seee:
<link href="SprySlidingPanels.js" rel="stylesheet"
type="text/javascript"/>
it should be
<script src="SprySlidingPanels.js"
type="text/javascript"></script> -
Sliding panel horizontal scrollbar problem
Issue: This is about horizontal sliding panels.
I want to restrict the height on the sliding panel to say,
200px. Some of the panel content is longer than that. So I want a
scrollbar to appear vertically (overflow:auto). It does this.
However, when the panel with the scrollbar slides off to the left,
its scrollbar remains present at the leftmost part of the window...
where the new content panel is.
Is there any way to prevent this from happening, and allow
the content that needs the scrollbars to have it?
thank youHi jratlantic,
So it appears that you changed the default setting for
overflow on the .SlidingPanelsContent rule:
.SlidingPanelsContent {
width: 547px;
height: 100px;
overflow:auto;
Instead of putting it on the .SlidingPanelsContent, try
putting it on:
.SlidingPanelsCurrentPanel {
overflow:auto;
And see if that makes a difference. That will ensure that
only the panel that is currently showing, and not animating, has
scrollbars.
--== Kin ==-- -
Horizontal Sliding Panels flicker IE
Hello
I'm using the horizontal Sliding Panel to slide some Images
and text. It works fine with Safari on Mac, but with IE and Firefox
on Windows the animation isn't very smooth (the problem concerns
only the image, the text-sliding works fine). With the vertical
Sliding Panels I don't have this problem...
Can anyone help me? Thankssolaris23 wrote:
> Hello Danilo
>
> Horizontal:
http://www.miomedia.ch/test/SprySlidingPanels.html
> Vertical:
http://www.miomedia.ch/test/SprySlidingPanels2.html
>
> Look on the image in the horizontal slide, the animation
flickers on the left
> and right image-borders.
> In the vertical slide the animation is much smoother.
This probably has to do with the rendering of the moved
elements on the page and IE redrawing portions of the images at a
time during the slide. I'd suspect that the issue actually exists
in the vertical slide as well, but is minimized due to the angled
top and bottom of the images, but that's just a suspicion, not a
known fact. It seems that if I look closely enough at the animation
in Firefox it seems to be doing something similar, but it is indeed
a good bit smoother than IE.
> I'm using transparent png images, I've also tried with
jpg, with different
> duration time, different fps... but still the same
problem....
That would have been my suggestion too. A quick local copy of
your page and it seems that making the duration 1000 milliseconds
seems to help with moving left to right, but moving right to left
still has a little bit of flicker.
I tried making the images smaller and it seemed to be
lessened, so perhaps it's IE and the larger images rendering. You
might also try making the vertical lines of the screenshot to be a
bit less vertical, or perhaps add a shadow or glow to the image to
soften the hard vertical edge.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert
Maybe you are looking for
-
Benefits of using SAP CAR compared to SAP BW on HANA
Hi I' like to understand the benefits of using SAP Customer Activity Repository. How is it better than SAP BW on HANA? What extra functions does the customer get?
-
Why Can't i use Adobe Presenter on iPad???
Hi there I want to watch my lectures on Adobe Presenter as this is used by my teachers. How come it won't work on my ipad. Is there another program i can use etc. I need a solution please so i can watch my lectures. Thanks for your time
-
How can I keep my account safe from enemies?
I've made some enemies that are still my Skype friends, and they are capable of taking my Skype name, and posting it on other sites saying that I want requests for XXX chatting. It's not fair how I can't hide my Skype name from them, so they are guar
-
WSS security and clustering in SOA Suite 11g
We are calling one composite from another as a reference. Both are on the same clustered domain. We are using AIA WSDLs so there is a default WSS username password token as policy. While on the single server domain, we do not need to pass the credent
-
Windows Vista System download timeout error
Hi, Every Adobe Reader download i've tried keeps giving me a download timeout error. I have removed all Adobe programs Adobe Reader X (10.1.3) Adobe Air Acrobat.com Adobe Reader 9 AcroRead.msi then i re-started my laptop and tried to re-install Adobe