Sliding Panels Sample
I'm trying to pull a data set from xml into the Unobtrusive
Sliding Panels Sample from
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanels_unobtrusive.ht ml
but I'm not sure where to set it up to repeat and how to tag it so
that it actually pulls the data in...you can see what I have so far
(and the source code) at:
http://www.brianwpiper.com/demos/slider.htm
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>Unobtrusive Sliding Panels Sample</title>
<script type="text/javascript"
src="widgets/slidingpanels/SprySlidingPanels.js"></script>
<script type="text/javascript"
src="includes/SpryDOMUtils.js"></script>
<script type="text/javascript"
src="sp_unobtrusive.js"></script>
<script type="text/javascript">
<!--
var dsProducts = new Spry.Data.XMLDataSet("products.xml",
"products/product");
//Get the URL parameter for the row number
var params = Spry.Utils.getLocationParamsAsObject();
//Set an observer so that when the data is loaded, we update
the current row to the url param value
dsProducts.addObserver({ onPostLoad: function(ds, type) {
dsProducts.setCurrentRow(params.row); }
</script>
-->
<link href="widgets/slidingpanels/SprySlidingPanels.css"
rel="stylesheet" type="text/css" />
<link href="samples.css" rel="stylesheet" type="text/css"
/>
<link href="slider.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<h3>Project Gallery</h3>
<div id="newsTicker">
<div id="ticker" class="SlidingPanels">
<div class="SlidingPanelsContentGroup"
spry:region="dsTest" spry:repeatchildren="dsTest">
<div id="detail{ds_RowID}" class="SlidingPanelsContent"
spry:repeat="dsProducts">
<div spry:detailregion="dsProducts" class="content">
<img src="{boximage}" alt="project screenshot"
width="{width}" height="{height}"/>
</div>
<div spry:detailregion="dsProducts">{desc}</div>
<div><a href="{link}"
target="blank">{linkText}</a></div>
</div>
</div>
</div>
<p class="navLinks">
<a href="#" id="link5">1</a> |
<a href="#" id="link6">2</a> |
<a href="#" id="link7">3</a>
</p>
</div>
</body>
</html>
Sweet!! Getting much closer. I had to remove a few extra
detailregion tags I had in there. Now the only issue is that the
numbers at the bottom don't actually jump to page 2 & 3, and in
the static htm sample, it also had a Next or Prev tags that would
have to be conditionally added...not sure how that would work...
Hmm...and it doesn't seem to work in IE at all??
Thanks for your help!! Any ideas on the other two issues and
the browser problem would be MUCH appreciated...
Similar Messages
-
Sliding panels from data - single panel
I would like to use the spry sliding panels from data widget
with only 1 panel at a time. The sample has two at a time.
Most of the code makes sense, but every modification I try
breaks the next/previous navigation.I modified the code from the example for you, so now it works
with just one panel visible.
Changes are:
set the width of the wigdet en
slidingpanel class to 250 instead of 500.
var numberOfPanelsPerView = 1
remove all the
spry:if="{ds_RowNumber} % 2 == 0" attributes
change
onclick="sp1.showPanel('p{prevStartIndex}') to
onclick="sp1.showPreviousPanel()
change
onclick="sp1.showPanel('p{nextStartIndex}') to
onclick="sp1.showNextPanel()
This all leads to the following 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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Sliding Panels Sample</title>
<script type="text/javascript"
src="../../widgets/slidingpanels/SprySlidingPanels.js"></script>
<script src="../../includes/xpath.js"
type="text/javascript"></script>
<script src="../../includes/SpryData.js"
type="text/javascript"></script>
<style type="text/css">
<!--
.widget {
/* width: 500px;*/
width: 250px;
height: 230px;
border: solid 1px black;
background-color: #CCCCCC;
.SlidingPanels {
/* width: 500px; */
width: 250px;
height: 230px;
overflow: visible;
position: relative;
float: left;
padding: 0px;
.SlidingPanelsContainer {
width:8000em;
height:230px;
position: absolute;
float:left;
margin: 0px;
padding: 0px;
.SlidingPanelsContent {
width: 250px;
height: 230px;
float: left;
.content {
width: 241px;
height: 200px;
float: left;
overflow: hidden;
padding: 4px;
border-right: solid 1px #999999;
.panelnav {
clear: both;
height: 42px;
.left {
text-align: left;
margin-left: 4px;
.right {
text-align: right;
margin-right: 4px;
-->
</style>
<link href="../../css/samples.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
<!--
var ds1 = new
Spry.Data.XMLDataSet("../../demos/products/products.xml",
"/products/product");
function TruncateStrIfNeeded(str, maxChars)
// Decode our string so when we count characters, we aren't
counting
// the chars in an entity name.
str = Spry.Utils.decodeEntities(str);
if (str.length > maxChars)
str = str.substr(0, maxChars - 4) + " ...";
return Spry.Utils.encodeEntities(str);
ds1.addObserver({ onPostLoad: function() {
var numberOfPanelsPerView = 1; //was 2
var rows = ds1.getData();
var numRows = rows.length;
// Add some custom columns to our data set.
for (var i = 0; i < numRows; i++)
var row = rows
// Add a 'teaser' column which is basically the description,
// but truncated so it can fit within our panel.
row.teaser = TruncateStrIfNeeded(row.desc, 400);
// Add a 'viewStartIndex' column that indicates what view
this row
// belongs to.
row.viewNumber = Math.floor(i / numberOfPanelsPerView) + 1;
row.viewStartIndex = i - (i % numberOfPanelsPerView);
row.prevStartIndex = row.viewStartIndex -
numberOfPanelsPerView;
row.nextStartIndex = row.viewStartIndex +
numberOfPanelsPerView;
//-->
</script>
</head>
<body>
<h3>Building a Sliding Panels widget with Spry
Data</h3>
<p>This sample creates a Sliding Panels widget by using
Spry Data to build the repeating markup. In this sample the content
panels are generated dynamically and the photo in each panel comes
from Spry Data. The text is static, which is just there for
example.</p>
<p>The content panel is generated in a Spry:repeat
region. An important thing in the panel widget is that each panel
should have a unique ID. This ID is generated with a Spry data
reference. Using the same method, the Panel links are generated the
same way, using the same data values. This ensures that the panel
links and IDs match up correctly. In this sample, the visible
window is twice as wide as the content panel. This allows for 2
panels to show at once. The links, therefore, need to show only
every other panel number. This will allow the panel to move by 2
content panels each time. To do this, a spry:if is used to only
display the even number panel numbers.</p>
<p>Note: Since this sample depends on Spry Data for the
content and markup, it will not degrade when JavaScript is turned
off. This sample shows how to construct this widget with Data.
Determine if this method fits your needs with degredation and
accessibility in mind. Also, this sample is more complicated only
because we are showing 2 panels at once and there are differing
lengths of text in the panels.</p>
<p>Page: <span spry:region="ds1"
spry:repeatchildren="ds1"> <a href="#"
onclick="sp1.showPanel('p{viewStartIndex}'); return
false;">{viewNumber}</a> </span></p>
<div class="widget">
<div id="apDiv1" class="SlidingPanels"
spry:region="ds1">
<div class="SlidingPanelsContainer">
<div id="p{ds_RowNumber}" class="SlidingPanelsContent"
spry:repeat="ds1">
<div class="content"> <img
src="../../demos/products/{boximage}" width="75" height="56"
hspace="5" vspace="5" align="left" alt="Sample Images from Spry
Data." />
<p>{desc}</p>
</div>
<div class="panelnav left"><a href="#"
onclick="sp1.showPreviousPanel(); return
false;"><<
Previous</a> <a
href="#" onclick="sp1.showNextPanel(); return false;">Next
>></a></div>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("apDiv1");
</script>
</div>
</div>
</body>
</html> -
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 -
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 -
How to apply sliding panels Spry Widget in Dreamwevaer CS4
Could someone please share how to apply sliding panels widget in Dreamwevaer CS4 as it is not in insert spry panel?
Thanks kindly!Hi Brad,
I meant something like this:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample2.html
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsFromData.html
or the one used on their site:
http://labs.adobe.com/technologies/spry/home.html
Thanks kindly -
I want to create some vertical sliding panels but can't seem
to find the JS and the spry code files anywhere on the Spry site. I
have CS3 but they do not include this as a built in widget. Is
there a place where I can get the code so I can implement this?
Seems easy enough.
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.htmljergerb wrote:
> I want to create some vertical sliding panels but can't
seem to find the JS and
> the spry code files anywhere on the Spry site. I have
CS3 but they do not
> include this as a built in widget. Is there a place
where I can get the code so
> I can implement this? Seems easy enough.
>
>
>
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
FWIW: the sliding panel widget isn't built into DWCS4 either.
The page you linked to has all the code you need, simply view
source and look for the vertical section in the code. If it's
easier, you can also check out the samples within the Spry
Download:
http://labs.adobe.com/technologies/spry/home.html
and look within the "samples" folder and open up the files for the
various sliding panel examples to see how the code is constructed.
Also, you can visit Spry API page:
http://labs.adobe.com/technologies/spry/articles/data_api/index.html
click on Sliding Panels on the left, then Overview, and you'll see
the code you can insert into your page as well as a list of the
required JS and CSS files for the panel.
HTH
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert -
How do i place content in a sliding panel one beside the other?
my site: www.islamobec.com
how can i populate my sliding panel by placing content beside each other??The following is an example of a two content slide http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample2.html
Gramps -
I have an issue with the buttons in the Sliding Panels Widget
after I implemented it in my page. The first time, I have to click
a button twice in order to have it working. Has someone seen this
problem before?Hi Natasa,
If you go to http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSampl e.html and right click on the page, a popup menu will appear. There you will see an item name 'view source'. By clicking on that item it will open a new window with the source code. Select all and copy the source code to your HTML editor on your own computer. There you can experiment with the code at hearts content.
I hope this helps.
Ben
PS. My apologies, I did not realize that this topic had already been answered.
Message was edited by: vw2ureg -
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. -
Hi,
I do not know if this is the right place. If not, please tell me where to ask.
I do not know nothing of programing and my use of a program is to "click" on shortuct. I am familiar with using Tabbed panels, Accordion and Collapsible panel.
But I would like to know how to use sliding panels. I have read a lot on this links:
http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS5F39D2B9-A298-472a-8E50-AC4B1 0984EFC.html
but I do not know how to start. I do not understand English very much and do not have computer knowledge.
So, is there a way for me to "click" on a widget or icon of a SPry to make sliding panels?
On this link are samples, but I realy have no idea, how to make this.
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Thank youHi Natasa,
If you go to http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSampl e.html and right click on the page, a popup menu will appear. There you will see an item name 'view source'. By clicking on that item it will open a new window with the source code. Select all and copy the source code to your HTML editor on your own computer. There you can experiment with the code at hearts content.
I hope this helps.
Ben
PS. My apologies, I did not realize that this topic had already been answered.
Message was edited by: vw2ureg -
I am using trial DW CS3. I have updated to Spry 1.5 as
recommended. I do not see any support for inserting "sliding
panels" through the spry insert interface.
What is wrong here. Am i doing something wrong, is it through
another interface.
The 1.5 update package includes samples and code updates, so
how do I use this widget?Hi,
In most ways, Spry and Dreamweaver are separate projects.
Spry 1.5 does not add new features to Dreamweaver. I did write an
extension that simply updates the javascript files that Dreamweaver
copies to the users site. It does not add any additional features.
It does update the code hinting but that's it.
In order to add new features to DW, the DW team would have to
write, test and package an update to the product. So far there are
no plans for that, but they are discussing options.
Spry has a shorter development time, so it will keep making
new features for the framework, independent of DW.
The updater extension can be found here:
http://www.dbooth.net/spry/spry_1.5.mxp
To use the new 1.5 features, check out the samples and read
the docs and it should be simple enough to build. If not, let us
know.
I hope this clears things up.
Donald Booth
Adobe Spry Team -
Sliding Panels hidden content shows on page load
Greetings,
I am working on a site for a child abuse prevention
non-profit and need some help asap!
I am using the unobtrusive sliding panels at:
Adobe
Unobtrusive Sliding Panels Example
I have two panels side by side. When the page loads, all of
the hidden content is briefly shown to the right of the panels. It
does this on the adobe sample as well.
Is there ANY way to hide this hidden content during the page
load? If so, could I get exact instructions? I am more of a
front-end person and not the best with scripting.
BTW, all of the content is static so the "Adobe Hiding Data
References During Page Load" does not work in this instance.
Thanks in advance!!Try this:
1. Set a class that sets visibiliity to hidden:
.hideGroup{visibility:hidden;}
2. Add this class to your content group:
<div class="SlidingPanelsContentGroup hideGroup">
3. Add a line to sp_unobtrusive.js to remove this new class
after the widget made.
Spry.$$(".SlidingPanelsContentGroup").removeClassName("hideGroup");
Add that right under the addEventListener lines.
That should do it.
Don -
Sliding panel widget controls a la Brightcove website
I'm interesting in building a sliding panels widget with controls that behave as seen on the Brightcove website (Aug.2010). Specifically, when the user clicks on the previous or next buttons, the controls along the bottom change to an "active" state to properly indicate which is the current slide/panel. I assume this would be achieved through javascript. I have been trying to find a source where this method has been documented and have had no luck so far. Can anyone point me in the right direction?
Thanks in advance for any advice.Brightcove uses a JQuery sliding panel. Google the subject and you will find your answer.
If you want to use Spry, have a look at the second example here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Or have a look at customizing http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2141541 -
Using anchors for Sliding panel
I want to use external links with anchors to specific panel in Spry Sliding Panels i.e.
www.mysite.com/Portfolio.html#Panel1
www.mysite.com/Portfolio.html#Panel2
Is it possible to do so? kindly guide meYou can use this technique http://foundationphp.com/tutorials/spry_url_utils.php. You can then use the Spry Loadlistener to trigger the showpanel instead of of an onclick event that is used here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Gramps -
Sliding panel / Dockable window
I am looking for sample code for implementing a sliding panel or dockable window. IntelliJ IDE has label on left "Project" which when clicked slides-in a panel (or something) which has project elements in a tree. I am looking for a similar effect for a swing based application.
I tried using scrollpane and try setting its "setDividerLocation" property incrementally but it does not give the same effect. It "jumps" the last position, no matter how much I try repainting/updateUI etc.
If you have any sample / hint for code please let me know.
Thanks
PrakashPerhaps using a jsplitpane with continuouslayout as true might solve your problem when you are incrementing the divider location. With continuousLayout you shouldn't get the jumping effect.
JSplitPane sp = new JSplitPane();
sp.setContinuousLayout(true);
Maybe you are looking for
-
Migration and DVD/CD Sharing Update Problem
Hi, my Mac OS 10.4.11 has a software update on 10-19-2008. It installed the update Migration and DVD/CD Sharing Update, since then, my sharing panel stopped working, I can`t set any option of Services tab and my Firewall tab does not open, it is gray
-
I used to use Pluginlab for building my site navigation as it had a wonderful integration into DW and also created a sitemap.xml perfectly. However, that being said, the drop downs don't work on iPhone and it seems they've gone out of business, anyw
-
Cluster Apex MS's across multiple nodes for load balancing?
Can Cluster Apex MS's across multiple nodes for load balancing? If Yes/No, any supportive doc's will be much appreciated. Here is what I did .......... I tried multiple MS's on different nodes for Apex Domain (clustered) Deployed apex.war, i.war with
-
Couln't save a buffered image as BMP with java 1.4
Dear friends, I tried to save a buffered image as BMP with java 1.4. When I run the program ,it executes sucessfully, but no image wasn't created. When I tried the same code with java 1.5 got the right result. This is the code I have written. public
-
Directory Server 5.2patch4 index question
Hello, Hopefully just a really simple question about indexes. After creating indexes from the console, do you have to restart the ldap server for it to actually start using the indexes. The reason I ask, is that we have setup a box with ldapclient to