Sliding Panels Help for Javascript Idiot

I have a simple thumbnail gallery to which I am attempting to
apply the Spry Sliding Panels widget. I am creating the gallery
from an xml file, and this seems to be working fine.
I looked at the code of the Sliding Panels examples, but
being the Spry and javascript idiot that I am, I was not able to
incorporate the Sliding Panels successfully. Would someone mind
taking a look at my code and perhaps commenting about how I would
go about adding the sliding panel? I would appreciate it.
P.s., I currently have 5 thumbnails visible. I would like to
slide to the next 5 on the click of the arrows that are included.
Here is the code, without any of my failed attempts at SP
included:

<div id="thumbsmask">
<div id="thumbsbox" spry:region="dsPhotos dsGalleries
dsGallery">
<div id="p{ds_RowNumber}" spry:repeat="dsPhotos">
<div class="thumb">
<img id="tn{ds_RowID}"
alt=""
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade('tn{ds_RowID}', 500, 30,
100, false)"
onmouseout="MM_effectAppearFade('tn{ds_RowID}', 500, 100,
30, true)"
onclick="HandleThumbnailClick('{ds_RowID}');"
title="tn{ds_RowID}" />
</div>
<div class="thumbspacer"></div>
</div>
</div>
</div>

<div id="arrowholder">
<div id="arrowright">
<a href="#">
<img src="images/arrowright.png" alt="left" width="20"
height="20" align="right" border="0" />
</a>
</div>
<div id="arrowleft">
<a href="#">
<img src="images/arrowlef.png" alt="right" width="20"
height="20" border="0" />
</a>
</div>
</div>

Thanks for the response.
I have tried to implement that, and it still does not work.
Here is my code with it implemented.
Thanks again.
<script type="text/javascript">

</script>
<script type="text/javascript"
src="scripts/gallery.js"></script>
<<<<<<<<<<<<<<body>>>>>>>>>>>>>>>

<div id="thumbsmask">
<div id="thumbsbox" spry:region="dsPhotos dsGalleries
dsGallery">
<div id="p{ds_RowNumber}" spry:repeat="dsPhotos">
<div class="thumb">
<img id="tn{ds_RowID}"
alt=""
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade('tn{ds_RowID}', 500, 30,
100, false)"
onmouseout="MM_effectAppearFade('tn{ds_RowID}', 500, 100,
30, true)"
onclick="HandleThumbnailClick('{ds_RowID}');"
title="tn{ds_RowID}" />
</div>
<div class="thumbspacer"></div>
</div>
</div>
</div>

<div id="arrowholder">
<div id="arrowright" spry:if="{ds_RowNumber} % 2 == 0
&& {prevStartIndex} >= 0">
<a href="#" onclick="sp1.showPanel('p{prevStartIndex}');
return false;">
<img src="images/arrowright.png" alt="left" width="20"
height="20" align="right" border="0" />
</a>
</div>
<div id="arrowleft"spry:if="{ds_RowNumber} % 2 != 0
&& {nextStartIndex} < {ds_RowCount}">
<a href="#" onclick="sp1.showPanel('p{nextStartIndex}');
return false;">
<img src="images/arrowlef.png" alt="right" width="20"
height="20" border="0" />
</a>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("thumbsmask");
</script>

Similar Messages

Spry Gallery and Sliding Panel help.

Hi all,
Sorry for my english, i'm french lol.
I want combined the gallery with the sliding panel for
display the thumbnails but I am blocked.
Any help would be appreciated!
Thanks

Can you provide more information about your project?
Are you loading the thumbs through Spry Data?
Have you seen:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample2.html
Thanks,
Don

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

Help for an idiot - ipod syncing in internet cafes

I recently had to upgrade my old ipod to an ipod touch after a few technical issues and was able to sync my music from my library on my laptop at home.
Unfortunately since then I have went travelling and am currently in New Zealand. Well, I was in an internet cafe and had just bought a few apps for the first time and on the itunes apps page under my ipod touch I pressed the sync button to sync all the apps - this had the great effect of adding in all the apps but deleting my music. Now this probably my fault somehow although I've used itunes for years and never had problems.
On the plus side I have my old ipod with me, but not my laptop so don't have my music library. Is there an easy way to transfer the files between the two ipods as I can't use my old one - it has a battery life of about 5 minutes.
Any help would be greatly appreciated!

Well, I can tell you the issue that happened.
What you did is you synced to a different computer, and a public one at that. As a word of caution, never make purchases or sync with a public computer. If you accidentally save your account login information, anyone who uses the computer may be able to make purchases with your account. What happened to you is your iPod content now mirrors the cafe computer, which had just those apps. This is what it does for any auto-sync, match the computer you are syncing with.
A better option for downloading content on your touch, is to simply find a wi-fi hot spot, and either access the iTunes Store or App Store from your device directly and download it directly.
As for transferring the music, there is no way to sync content between the two devices. You COULD hypothetically put your music from your iPod onto a computer, and then sync your touch back up with that, but getting your music from iPod to computer requires additional software and possibly a lot of trouble. The easiest way would be to wait until you can access your laptop and sync your touch back up with that, restoring all of your content.
To learn more about transferring content from your iPod back to computer, try a google search regarding that. I don't know much about it, maybe someone else here can help more.

Restore help for an idiot

Hi all,
Its probably an easy one for you guys but I am fed up and bewildered by how complicated Apple make things!
I got an iPhone 5 from my other half as she upgraded to the 6. I was using the 4s prior to it. I backed up my data to iCloud from the 4s. Erased her data from the 5 and then restored my data to the 5 via iCloud.
Most of my data transferred over to the 5 with the exception of 80% of my music which was purchased through iTunes directly from the 4s. i connected it up to iTunes on the laptop and could see all the music there but 80% was greyed out and inaccessible. No matter what I tried, I could not transfer my music on to the iPhone 5.
Unfortunately, a lot of her songs (which were on her laptop) are now on my iPhone. I did another back up and restore but its still the same.
Im freaking out. All the songs I bought through iTunes are on the iPhone 4 and not on my iTunes library on the laptop or iPhone 5.
Any help would be appreciated. Iv no idea where I went wrong!

As the poster above suggests....
Download past purchases - Apple Support
(980)

New computer help for a idiot

Hi I have looked on the forums for an answer but I cant seem to follow them. I get really confussed by all this stuff. Could anyone help me with this question. I have just got a new computer after the last one died and I want to get the tunes off my ipod into the new itunes. I saw that lots of you recomend a third party sysytem but what do I do first? I havent downloaded itunes yet. Do I do that then plug in the ipod or download the thrid party thing first? Could some kind and patient soul help.
Thankyou

I would first read the directions carefully for whatever third party program you choose.
It may depend on the one you plan on using, so if you told us that, then i might be able to be more specific. But i would download itunes first, and then follow the instructions. If you plug your ipod in with itunes it will ask you to sync with the library, DO NOT do that, it will erase your ipod. but like i said you need to tell what your going to use first before i can be specific

Help for an idiot please .....

Hi
I think I've done something really stupid - any suggestions of how to fix would be greatly appreciated.
I recently had my Ipod replaced by Apple and I think it was a refurbished model (it works fine, no problem there). I got it all working, transfered a few songs and a couple of films (i manage syncing manually usually)
Tonight when I connected it it flashed me a message (which I obviously didnt read carefully enough) that said "this Ipod is synced with another library do you want to replace? (or somehing to that effect) Without thinking I clicked yes and wandered off to do somethin else while it charged. When I came back it had deleted my entire Itunes library (about 3 years worth of stuff, I had to buy more memory to store it all) and replaced it with the few bits that were on the Ipod.
Help - can I get all my stuff back?
(if this has been posted before I did search but couldn't find it)

Quit iTunes.
Hold Shift and launch iTunes.
Select *Choose library* and select the /Music/iTunes/ folder.

Some help for an idiot please

Hello,
I have made some changes to the SystemInfo Application (<drive>:\usr\sap\<SID>\JC00\j2ee\cluster\server0\apps\sap.com\tcmonitoringsysteminfo) that I am happy with.
How do I take the whole application now and stick it into a war file so that I can deploy it properly?
The SAP original file is called SystemInfo.war. I can open that with winzip - can I just put my changes into it and zip it again with winzip and rename it to .war?
Or can I import a war into the Developer Studio, do the changes there and then build a new war file (please explain in plain english how that works if it works).
Please do excuse my ignorance in this field, as you can guess I havent done much Java Programming .
Thanks for out thoughts!
Regards,
Andi

Hi,
So if you found the answer please post it (maybe someone has the same problem) and close the thread:
Regards,
Daniel

Sliding Panels No Javascript Enabled,

I'm not crazy about how the Sliding Panels widget degrades if
JavaScript is disabled (it exposes all the panels side by side
horizontally). Go to the sliding panels widget example from Adobe
and disable your JavaScript:
Adobe
Sliding Panels example page.
As an alternative for users who have JavaScript disabled, I
would only like to show only the first panel (preserving the
original width of the sliding panel as if JavaScript were enabled)
or I'm looking for a way to create an error message (not on a
separate page, but in the section where the sliding panels would
be) that reads something like "please enable javascript etc. and
will hide the sliding panels content). Netflix does this with their
sliding panels if you have JavaScript disabled- located on the new
releases page after you login (would give the link but you have to
login). Or if someone has a better solution I am all ears. Thank
you.

elen,
I had to make the sliding panel the same height as my container div.
For example, my main container div is 500px tall, my sliding panel also has to be 500px tall. I figured this out by changing the sizes several times and got it to slide, but skip a panel every time. I soon figured out the size issue.

Possible to have two occurences of sliding panels in same location on page?

Hi, any help you guys could give me would be greatly appreciated.
I'm redesigning my portfolio page, and am trying to use the sliding panels widget for the two gallery areas. Ideally, when you click the links in the Design area on the left side navigation section, a Sliding Panels Content Group containing all the design work slides should appear on the right side of the page. When you click the links in the Illustration area, a Sliding Panels Content Group containing all the illustration work slides should replace the Design group in the exact same location on the page. Similar to links appearing in an iframe, but without having to click links and upload a page in the frame for each image.
I've managed to get the two different Content Groups to both be on the same page at the same time, like is done with the multiple examples at http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html, but no luck getting a single Content Group to appear and then be replaced by the second group by clicking one of the links to the left.
Here's the page I'm working with, with only one of the Content Groups active:
http://www.susanmeyerart.com/redesign/
eta: I'm working with Spry Pre-Release 1.6.1.

I think you can do this by using Spry Tabbed Panels as your container for the two sets of Sliding Panels. I have not tried this particular nesting before, but if you set up a test page, you can try it out.
Each set of Sliding Panels would appear as content on one of the Tabbed Panels. When each Tabbed Panel Tab is clicked, the corresponding Panel appears, holding your Sliding Panels.
This may not work, but, as they say...you don't know until you try!
Beth

Jump Menu for Sliding Panels Widget

I have used the sliding panels tutorial to build a 15 page
sliding document inside a new site I am building. It works
briliantly. However I want to be able to use a jump menu to access
any of the 15 pages as well as use the next and previous buttons.
I tried by inserting a form, then jump menu but couldnt put
it all together code wise.
Is it possible to use a jump menu for this widget (Im sure it
must be) and what bits do I put where? Any ideaas greatly
appreciated.
Nigel

OK Ive given it a shot but I dont where to put that code in
the mix so to speak.
The widget code skeleton is below: as per the tutorial.
Where exactly in this mix would I put the code you suggested.
Im not sure if its css, html or js.
Sorry Im such a novice at this business but I would be very
grateful for a bit more help here.
Nige
<!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>
<script type="text/javascript"
src="SpryAssets/SprySlidingPanels.js"></script>
<link type="text/css" rel="stylesheet"
href="SpryAssets/SprySlidingPanels.css">
<script type="text/javascript">

</script>
</head>
<body>
<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>|
<div id="panelwidget" class="SlidingPanels">
<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>
</body>
</html>

Having trouble with flash and linking to Sliding panels - PLEASE help

Having trouble with Sliding panels and flash. Otherwise everything works fine but when I'm trying to implement the link
<a href="#" onclick="sp1.showPanel('panel1'); return false;">Panel1</a>
to a flash button I get confused. I have tried following
on (press) {
getURL("javascript:sp1.showPanel('panel1');");
and it did not work. What would you suggest? I am desperate. Please help me! Any suggestions are highly appreciated!!!!

Thanks for your answer!
I have tried both sp1.ShowPanel('panel1'); and window.sp1.ShowPanel('panel1'); they both give blank window with [object]
I have found a solution that works in other browsers, but not in IE. Well basicly it works, but after a few clicks IE freezes.
on (press) {
getURL("javascript:sp1.showPanel('panel1'); void(0);");
Would you happen to have a solution other than that? I believe that the void(0); causes the IE to freeze.

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 all visible. Help!

OK- I just can't figure this one out. I am a first timer with the spry widgets not built into Dreamweaver. I've added a sliding panel widget, I want to break a story into two parts without adding a second page. When I open in a browser, both panels are visible. I don't know what I'm missing. Help.

Still have not come up with workable solution for what I am trying to do. It looks like my problem is I am trying to make the box size on the sliding panels container elastic, so it looks like my text on other pages. But, when I set it up so it gets bigger to include all the text, it includes the text on all the panels, not just one. When I set it with the width "auto" and a px height, sometimes it includes the right amount of text and sometimes it doesn't. probelm is the varying screen sizes.
So, it is true, then, that the size of the sliding panel container MUST match the size of the sliding panel content, and be fixed?
If so, it will never do what I am trying to get it to do. I guess I'd be better off playing with an accordian panel, to see if I can get close to the look I want there.
Thanks!

How do i style an inactive navigation for sliding panel?

How can i style my navigation when they are not active(for example i would like to style my "previous" navigation arrow in a specific manner when there is no previous content to show)

With great difficulty. We must first determine the current panel and then, if the current panel is 0 then the previous button has to be changed and if the current panel matches the total number of panels, the next button has to be changed.
The following is a complete document that will work. Make sure you have all of the support (read JS) files in the allocated directory.
<!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>Sliding Panels Example.</title>
<script src="SpryAssets/SprySlidingPanels.js" language="javascript" type="text/javascript"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<style>
.SlidingPanelsContentGroup {min-height:0;}
.disabled {color:#F00;}
</style>
<script>
function slideNextPanel() {
     sp1.showNextPanel();
     var currentPanel = getCurrentPanel();
     var panelCount = sp1.getContentPanelsCount()-1;
     if (currentPanel==panelCount) {
          Spry.$$("a#nextPanel").addClassName("disabled");
     } else {
          Spry.$$("a#previousPanel").removeClassName("disabled");
function slidePreviousPanel() {
     sp1.showPreviousPanel();
     var currentPanel = getCurrentPanel();
     if (currentPanel==0) {
          Spry.$$("a#previousPanel").addClassName("disabled");
     } else {
          Spry.$$("a#nextPanel").removeClassName("disabled");
function getCurrentPanel() {
     var className = 'SlidingPanelsContent'; //change the className that is on all your content panels..
     var panelCount = sp1.getContentPanelsCount();//get panel length
     var current = sp1.getCurrentPanel(); //get current panel
     var group = sp1.getContentGroup(); //get our group
     var panelNumber = 0;
     if(group.hasChildNodes()){
          var j = 0;
          for(var i = 0, l = group.childNodes.length; i < l; i ++){
               if(group.childNodes[i].className && group.childNodes[i].className.search(new RegExp("\\b" + className + "\\b")) != -1){ // if it has SlidingPanelsContent class we found the correct node.
                    if(group.childNodes[i] == current){ // if it matches our current panel, we have a number
                         panelNumber = j;
                         return panelNumber;
                    j++; //increase our panelcounter
</script>
</head>
<body>
<a href="#" id="previousPanel" onclick="slidePreviousPanel();">Previous Panel</a> |
<a href="#" id="nextPanel" onclick="slideNextPanel()">Next Panel</a> |
<div id="panelwidget" class="SlidingPanels">
<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>
</body>
</html>
Gramps

Sliding Panels Help for Javascript Idiot

Similar Messages

Maybe you are looking for