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.
-Josh

I 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

Similar Messages

Sliding Panels DIV Shifting

Hello,
I have a page that is loading the Sliding Panels in a wierd way. It seems that the text and the image are racing to get displayed and then once they stop, the page rearranges itself to end up looking the way I intended. Has anyone seen this before and if so, did you find a way to fix this behavior?
Please see the enclosed link:
http://www.nga.gov/exhibitions/2009/tullio/test.shtm

Well it appears the problem is because the outer div had no
ID.
The panel works without the ID, but if you add 2 panels it
only runs the constructor for 1 of the 2 panels. The collapsible
panels content overflow was hidden for both in CSS.
Thank you Donald for prompting me to look at the code again
as it was not so apparent to see the problem.

Divs moving when zooming in on screen

Hi I am finding that the lower four divs on my homepage design are jumping around if I zoom in and out, only in IE works OK in FF and Chrome.
It was working ok even though the divs are fixed width and floated left. But I must have changed something that has had a knock on effect??
Any suggestions appreciated
http://www.katebellingham.co.uk/index.php
Regards
Mark

There is no way to "zoom" a photo other than for viewing - you can crop it and then thecropped image is saved when you click done and you can print it
LN

Sliding Panels Unwanted "Bouncing" Effect

Hey there,
When a sliding panel is moving, it bounces downwards and slowly makes it's way back up.
Here's the page where it's happening: http://www.newerthleague.com/test.php
You can move forward through the panels by clicking on the play button (fourth button from the left).
The cause is that I have the SlidingPanels class padded 10 pixels on the top and left. As soon as I remove the padding there's no bounce. But the problem is I need to keep it there in order for the images to look right inside the border.
Can anyone please suggest something to fix this? I have tried using margins and padding almost everywhere and absolutely nothing takes this bounce effect away.
Thanks in advance, Chris

You're great thank you!
I added 10px of padding to the left and top of the images and then simply increased the width and height of the SlidingPanels class by 10px to show the change and it's working great!
Thank you very much Beth

Sliding Panel - Content

Hi,
can someone help me to put content like THIS into my sliding panel DIV?
The way I want it:
http://www.localhero.de/divs.php
The way it already is:
http://www.localhero.de/slide4.php
Thanks a lot,
Denis

;-) Sorry I cleaned my server.
http://www.localhero.de/_Teaser/slide.php
Here is the thing I try to create with the SPRY SLIDE.
I wamt 5 Images, small Text and Links out of my database.
They have to move on their own, and also be klickable by the arrows. The showen image should be highlighted.
And the small Text should be presented on the transparent white.
Thats what I need :-)
Cheers
Denis

Spry Sliding Panels not working in IE7

I just created page with sliding panels horizontally and
works fine on safari FF and opera but in IE7 just not working
properly. The slides are expanding outside the page and i cant fix
that. Is that normal for IE?
the link is :
http://ironspiderart.com/Pages/mentshirts/mentshirts.html
Thank you

Thanks for your help :] I ended up realizing that a huge
bloated js navbar wasn't all that great of an idea anyway, so I
scrapped it and used a CSS-based one instead...much cleaner and
works better (no preloading! woohoo.) It looks like the problem was
probably an amalgamation of many things, but it's resolved now.
quote:
IE doesn't seem to like the PNG images you are using
understatement of the decade.

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" />

<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>

<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>
</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>
</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"/>
     </div>
     <br class="clearfloat" />
   <div id="footer">
    <p>© 2009</p>
</div>
     </div>
<script type="text/javascript">

</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

Sliding Panels in a Div

I can load the Sliding panels and it works fine except if you
use "onload" with the Spry.Utils.updateContent.
Tried many things so far and it will not work when loaded
into a Div.
Hmmm
Can't figure out why.
Anybody have a answer why it will not run in a Div.?

Well it appears the problem is because the outer div had no
ID.
The panel works without the ID, but if you add 2 panels it
only runs the constructor for 1 of the 2 panels. The collapsible
panels content overflow was hidden for both in CSS.
Thank you Donald for prompting me to look at the code again
as it was not so apparent to see the problem.

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.html

It 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.

When transfering tracks across to ipod a sliding panel appears on the right hand side of itunes. after acknowleadging the transfer the panel does not slide back out of the way to alow another transfer.

When transfering tracks to an ipod a sliding panel appears on the right hand side of itunes. This allows the selected track to be transfered. After registering this action the panel does not slide back out of the way to allow scrolling and more song selection. Any solutions..Help?

I have an even simpler method. I use MyPublisher to print my books. I select their page layout for a two-page spread, drag and drop the image. DONE! I understand that most people have their favorite places to have work done. I have been extremely pleased with MyPublisher.com, so I haven't even tried the book module in Lightroom.

Multiple sets of Spry Tabbed Sliding Panels?

I have my code set up for one sliding panel set with three tabs but I want to copy that set and create another set of the same 3 sliding tabs right below it with different content. However, when I copy it to the next set, clicking the second set of tabs still causes the first sets sliding Panel to slide. Furthermore, a few elements of the css are no longer being read for the second set, including the script in the .SlidingPanels that hides any of the text box outside of the specified dimensions.
Attached are a txt file for my html and css if that helps.
Any help on this would be greatly appreciated.
Thanks!
[Moved to Spry forum by moderator]

The constructor appears at the bottom of your sliding panel code, in exactly the format that Arnout has shown. You do not need to go into the javascript file for it.
But the first thing I think you need to do is to make sure that you match the classes (and format) you are using with the classes per your sliding panels style sheet.
Here is the essential markup (your content is not here; this is based on a plain example widget):
<div style="margin: 0 auto; width: 350px; border: solid 1px red;">
<a href="#" onclick="sp.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> | <a href="#" onclick="sp1.showPanel('p4');">Panel 4</a>
<div id="panelwidget" class="SlidingPanels" style="margin: 0 auto;">
<div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="p1">Panel 1</div>
    <div class="SlidingPanelsContent" id="p2">Panel 2</div>
    <div class="SlidingPanelsContent" id="p3">Panel 3</div>
    <div class="SlidingPanelsContent" id="p4">Panel 4</div>
    <div class="SlidingPanelsContent" id="p5">Panel 5</div>
    <div class="SlidingPanelsContent" id="p6">Panel 6</div>
        </div>
    </div>
    <script type="text/javascript">
   var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    </script>
Note that the ID of the <div id="panelwidget" class="SlidingPanels"> matches the "panelwidget" in the constructor
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
For your second panelgroup, make <div id="panelwidget_01" class="SlidingPanels"> and change the constructor to
var sp2 = new Spry.Widget.SlidingPanels("panelwidget_01");
And of course the onclicks in the nav area should change for the second sliding panels set to use sp2 instead of sp1.
I hope that Arnout will correct me if I have got it wrong!
Best,
Beth

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
derrida

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

AS 2 sliding panel - AS 3 sliding panel help

hey all,
i was using a script to animate some site content with a
sliding panel easing effect in AS 2, but when i try to run the
script in AS 3 it doesn't work. is there a way to convert this to
AS 3 quickly?
baseRate = 3.5;
difference = _parent.targetx - _parent.panel._x;
rate = difference / baseRate
_parent.panel._x += rate;
if this doesn't convert to AS 3, does anyone know of a good
easing formula in flash 9?
thanks for the help!

I 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

Background image instead of color for each sliding panel

I'm working with sliding panels and trying to add some style to the page. I have figured out how to put a different background color on each slide and even how to put a background image on the whole thing, but I cannot figure out how to use multiple images (one for each pannel). When I put the images in place of the colors it works fine in the Dreamweaver screen but totally disapears in a web browser. Here is the url:    http://www.centerofdiscovery.com/the_center_of_discovery_home_page.html
any help would be great!

Regarding getting the tabs to sit on top of the content panel, speaking generally here, make the containing div for both the tabs and the content panel to have a margin: 0 auto; setting.This is for horizontal alignment.
The blue rectangle can be belayed by setting border: none; on the specific rule that applies to the "a" links within that container. It is an indication that there is a link there.
Please rename the images that have word-spaces in their file names. Some browsers react badly to word-spaces.
I see that you have
<p>
</p><div class="slidingpanelandtab">
    <blockquote>
      <p><a onclick="sp1.showPanel(0); return false;" href="#"><img width="144" height="70" class="oneColFixCtrHdr" src="Images/panneltab.jpg"/></a><a onclick="sp1.showPanel(1); return false;" href="#"><img width="144" height="70" src="Images/panneltabb.jpg"/></a><a onclick="sp1.showPanel(2); return false;" href="#"><img width="144" height="70" src="Images/panneltaba.jpg"/></a><a onclick="sp1.showPanel(3); return false;" href="#"><img width="144" height="70" src="Images/panneltabc.jpg"/></a></p>
    </blockquote>
Which sets off your "slidingpanelandtab" class div with an empty paragraph space <p></p> and then sets off the next section not only with <p></p> paragraph spacing but also with a <blockquote></blockquote>, which will by all rights indent that element.
I suggest that you get rid of the spurious paragraph tags and the blockquote; that should tighten up your spacing.
Beth

Sliding Panels

Have a problem with the sliding panels widget. Say for
example I have 2 panels - each with a number of form fields on. If
I tab through the form fields on panel 1 the focus automatically
goes to the form fields on panel 2 and therefore panel 2 is visible
in it's current position.
Here's an example:
Spry
Panel Test
Any ideas how to fix this?

So the problem with just showing the panel that has focus is
that we don't know what the designer/developer intended. For
example, the sliding panels widget could be used to present a
wizard, where the user is not allowed to proceed to the next page
(panel) until they have dones something specific.
So a possible workaround for this is to use CSS to hide
elements that are not visible. Elements on the page that are not
visible, can't receive focus. Try adding the following CSS
somewhere *BELOW* SprySlidingPanels.css on your page:
<style type="text/css">
.SlidingPanelsContent {
overflow: hidden;
.SlidingPanelsContent * {
visibility: hidden;
.SlidingPanelsCurrentPanel *, .SlidingPanelsAnimating * {
visibility: visible;
</style>
The sliding panels widget programatically places
SlidingPanelsCurrentPanel and SlidingPanelsAnimating classes on the
various panels at strategic times. The styles above make use of
these classes to hide content when they aren't showing. Thus
preventing them from getting focus. Note that the overflow:hidden
on the SlidingPanelsContent class is necessary because if it is
auto or scroll, the browser will place the div in the tab order so
it can get focus. If it is overflow:hidden, it does not do this.
--== Kin ==--

Sliding Panel div Moving when acitvated in Safari

Similar Messages

Maybe you are looking for