Spry Tabs question
I have a page that uses the Spry tabs. It's set to use the
first tab (default).
I have another page wherein I'd like to put a link tot his
page but
have the link display the SECOND tab.
Is this possible? How is it done?
I'm a newbie to Dreamweaver CS 5.5 (so please go easy)
You are out of luck, you copped me.
<script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 }); </script>
That's correct, that will vary the content area depending on the contents and will start with all panels closed.
My code currently looks like this:
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
And this is where I stop being nice. Your code entails a lot more than these two lines. Your code will look a lot more like
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
The line that you are looking for is called a constructor. The function of a constructor is to create an instance of the widget, without which a widget would not exist. Another function of the constructor is to override the default JavaScript using overriding settings. Hence, if you change the 4th last line (hopefully highlighted bold red) to
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
or similar, you should be fine.
Gramps
Similar Messages
-
I've got the use of the spry tab figured out, but what I'd like to know is if I can change the 'look' of the tabs. Rather than just have them be plain ol' squares, I'd like to change the style of them (more than just the color). Is it possible to change the shapes? Or to specify a .jpg to use as the tab?
Thanks!I appreciate all the feedback, but I have a few more questions...
I want to do something like the example I've provided, but have two questions in that regard.
The 1st - those tabs overlap. Is their an easy way to accomplish that, as a newbie? I don't know much, still learning. Obviously it would be easier to create tabs that don't overlap and avoid this issue altogether, but I really like the look.
My 2nd question is the drop shadow. I can create the drop shadow in Photoshop, but I'm wondering if there's an easier way to do it in Dreamweaver. Just apply the Spry Tab Menu and tell it to put a drop shadow behind it. Is there something that easy, or do I need to create the drop shadow in Photoshop and use div tags to basically put it 'around' the spry tab menu? Does that even make sense? I know what I mean in my head, but might not be explaining it properly... -
Simple (?) question about Spry tabbed panel
Hi, I'm a bit of a noob at DW and am wondering if there's any way to open a link from within a Spry tabbed panel, and have the content load in the same panel.
I would have thought this would be simple, or even default behavior, but every target I try opens a new browser window or just loads it over everything in the current window.
Any advice would be greatly appreciated.See if this article by David Powers is any help towards getting what you're after:
http://foundationphp.com/tutorials/spry_url_utils.php
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Book: Ultimate CSS Reference
http://www.sitepoint.com/launch/005dfd4/3/133
http://twitter.com/nadiap -
I am designing a new site which for the most part will be one
page of Spry Tab Panesl.
Is it possible to have the contect section grow or shrink
vertically according to the amount of content in a slow motion,
like the accordian or collapasible panels?Morning Arnout,
Thank you for both links. I tried every permutation that was on Mr. Power's site (Thank you!) and the Adobe Labs site. Neither worked. And believe me when I say that I spent five hours working on it.
I can get the first file (00a.php) to open the second file (index.php) very easily by using <a href="../../index.php"> tag. But getting the following code to open the target file AND the tab at the same time is beyond my limited understanding of java script.
<a href="../../index.php" onclick="TabbedPanels1.showPanel('dontarget')"
onmouseover="MM_swapImage('donate','','../../images/donate1_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="../../images/donate1.png" alt="Donate to Support this Site — PayPal" name="donate" width="70" height="44" border="0" id="donate1" /></a>
I even tried pasting in the java script "var TabbedPanels1 = ..." code from the target file at the bottom of the file I am linking from. I tried so many variations that eventually I corrupted my file. But I had two back ups just in case. The problem is just beyond my understanding of java script.
Heck, I would not have got the first file (index.php) to work without aid. With David's assistance I at least got it so that by clicking on the donate button on that page it opens the proper tab. -
Spry tabbed panels, all content showing on one page, please help?
Hi there,
I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
Here is the 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>DND Perspective</title>
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #2B3856;
.style1 {
color: #FFFFFF;
.style4 {
color: #FFFFFF;
font-size: 36px;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
margin-left: 250px;
.style5 {color: #CCCCCC}
.style11 {
font-size: 18pt;
font-style: italic;
a:link {
color: #FFFF00;
a:visited {
color: #000000;
a:hover {
color: #000033;
-->
</style></head>
<body>
<div align="center">
<p align="left" class="style4">DND </p>
</div>
<p align="left">
<img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" /> </p>
<p align="center">
<p align="center">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" >
<li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
<li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
<li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent style1">
<div align="center">
<p class="style11">Welcome to DND </p>
<p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
<p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
<p>Please visit our services page to discover all photography sessions we have available such as:</p>
<p>Wedding Photography</p>
<p> Engament Photos</p>
<p>Senior Portraits </p>
<p>Anniversary</p>
<p>& More!!!</p>
<p> </p>
</div>
</div>
<div class="TabbedPanelsContent">
<p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
</div>
<div class="TabbedPanelsContent">Under Construction...</div>
<div class="TabbedPanelsContent">Under Construction....</div>
<div class="TabbedPanelsContent style1">
<p>We hear at DND understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &
packages, custom videos, thank you cards and albums.</p>
<hr width="50%" align="left" />
<p><strong>Package 1 - $500.00</strong></p>
<p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p><strong>Package 2 - $575.00</strong></p>
<p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p><strong>Package 3 - $700.00</strong></p>
<p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
<hr width="50%" align="left" />
<p><strong>Prints</strong>: (Fine Art High Quality)**</p>
<p>Individual prices: 8"x10" = $12.99; 10"x13" = $19.99; 2 - 5"x7" = $12.99; 4 - 4"x6" = $11.99</p>
<p>(Custom sizes available - Custom framing available)</p>
<p><strong>Package 1:</strong></p>
<p>3 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $50.00</p>
<p><strong>Package 2:</strong></p>
<p>5 - 8"x10"; 6 - 5"x7"; 6 - 4"x6" = $90.00</p>
<p><strong>Package 3:</strong></p>
<p>8 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $125.00</p>
<p><strong>Package 4:</strong> (Basic Prints)</p>
<p>Any 100 photos printed 4"x6" = $100.00</p>
<hr width="50%" align="left" />
<p><strong>Custom video:</strong>**</p>
<p>Any 100 photos put to royalty-free music = $50.00</p>
<hr width="50%" align="left" />
<p><strong>Custom thank you cards for your guests:</strong>**</p>
<p>300 cards - 4"x6" = $350.00</p>
<p>100 cards - 4"x6" = $150.00</p>
<hr width="50%" align="left" />
<p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
<p>Bride & Groom Albums</p>
<p>Parent Albums</p>
<hr width="50%" align="left" />
<p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
</div>
<div class="TabbedPanelsContent style5">
<p> Contact DND Perspective:</p>
<p>The best way to reach us is via email .</p>
<p>You can alternately reach us anytime at ...!</p>
</div>
<div class="TabbedPanelsContent">
<div align="center">
<p><span class="style1">About Info</span></p>
<p> </p>
</div>
</div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B -
How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
I have 5 of them all containing nested Apdiv within nested ApDivs (a long storie ) that I would like to insert into 5 tabs in the Spry Tabbed Panel.
Please help."Hi Gramp,I realize I have made hard work for myself but I really don't know any better. I also realize now that taking on this project may have been a mistake :-)I taught myself how to use the design side of Dream Weaver. These five ApDivs were created in the content area of the spry tool and it worked fine. (yes a lot of work though)For the first time I looked at the code side. I wanted to try to bring a peace of code from another page for something unrelated and when it didn't work I took it out and without noticing, deleting a line from the Spry tool.Of course like a classic newbe I was working without a backup copy so here I am. Loosing hours of tedious work and on the verve of tears :-)I do have some questions though. My APDiv
What does "apDiv1" stands for and what does "My APDiv" stands for?Is the only thing I have to do is changing this line for my five ApDivs and paste it in the appropriate places in the code? Thanks again,Gilaad
Date: Sat, 16 Jun 2012 20:39:07 -0600
From: [email protected]
To: [email protected]
Subject: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
Re: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
created by Altruistic Gramps in Spry Framework for Ajax - View the full discussion
You have really made hard work for yourself by using APDiv's. I suppose it can be done, but I would not. To answer your question, I have create an example as per#apDiv1
My APDiv
Content 2
Tab 1
Gramps
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4498679#4498679
To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4498679#4498679. In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746. -
Spry tabbed panles default hide
Hello,
Im with some problems with the spry content tab. What I need is to:
as default hide the content of the spry tabbed panels and also hide on mouse out
please advise if you needto check my codes and site
thanksI see that time has passed and you have not gotten a response to your question.
What exactly is to be hidden when the mouse is not hovering; what is to be showing when the mouse IS hovering?
It is possible that the solution will not be to use Spry Tabbed Panels, which would require a lot of adapting.
For a simple solution, if you don't mind the "contents" to be lined up next to each other, float divs next to each other. Set a height that encompasses your title but make the overflow: hidden. Add a css style that makes overflow: visible;
Here is some simple code for that:
<!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>
<style type="text/css">
.change {
float: left;
height: 2.5em;
width: 100px;
overflow: hidden;
.change:hover {
overflow: visible;
</style>
</head>
<body><div class="change"><h3>Title</h3>
<p>Here is a basic element</p></div>
<div class="change"><h3>Title</h3>
<p>Here is a basic element</p></div>
<div class="change"><h3>Title</h3>
<p>Here is a basic element</p></div>
<div class="change"><h3>Title</h3>
<p>Here is a basic element</p></div></body>
</html>
I fiddled around a bit with the tabbed panels, but couldn't find an easy way to make them appear and disappear on hover.
Your other possibility is to do disjoint rollovers using the Show-Hide behavior, but it seems difficult to have the "content" start out invisible.
I hope you have solved the problem by now, or that these suggestions give you some ideas.
Beth -
Spry tabbed panels - Different Hover Class for each tab
Already posted this in the general Dreamweaver section, but just realized there was a specific Spry section. So, my apologies for the repost.
I'm setting up spry tabbed panels, and I'm wanting to use an image for each tab, with the text already on it. I've figured this much out by creating a different class for each in the spry tabbed panel css.
However, I'd also like to have a second hover image for each tab. I'm having trouble figuring out how to set up separate classes for each tab's hover state.
Any help?
Thanks.Just in case you did not notice the announce at the top of this forum's main page, I have copied it here.
Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using the search functionality on forums you can easily find out if your question has been answered before. While you are in search, you can specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Yoru question can not be found in the existing documentation
Spry provides you with allot of documentation this can found on different locations. In the sidebar of this forum you can find a small summary of resources that will help you on your way.
If these options do not apply to your question, please be so kind to also supply the following information in your topic together with a clear description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example: Scroll down till you find the header "help", there you will see a Spry Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details.
by Arnout Kazemier at Oct 23, 2009 2:47 PM
landon_tc wrote:
Actually, I do remember posting that, and have updated it with what worked for me. However, I could not recall posting it in a specific ajax spry forum, so I assumed I just posted in the general forum. Hence the current situation.
Yeah and my name is not Ben Pleysier.
landon_tc wrote:
Any help with the current problem?
Please have a look at this thread http://forums.adobe.com/message/2662019#2662019
I hope this helps.
Ben Pleysier -
Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like
Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like it was all created on one page, plus mouse over doesnt work on them.
This started all of a sudden.
The entire website is a series of spry tabbed panels.
http://pacificlaser.com/const.html
if you click on General construction tab things work ok...
if you click on Machine control tab, mouse over doesnt work and all page content of each tab show through.
ive been looking for the answer for 4 months with no success.
Hope a fellow dreamwever-person can help
Thanks RickYou called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B -
Spry Tab link only works once... why?
Hi all,
I have a spry tabbed area with 4 tabs on my page. Each tab contains data that is dragged from an MSAccess table. A couple of the tabs have repeat regions. This all works fine. One of my tabs has a repeat region where I can click on a button image to change a record status from True to False (or visa versa). The click runs the associated vbscript which executes the SQL update statement no problem. However I noticed that when I changed the data on this tab and reloaded the page using a Response.redirect after the sql update was executed, it would default to the 1st tab and not the one I was viewing that contains the repeat region. A quick search led me to the SpryURLUtils.js file which solved that problem by allowing me to specify which tab to load. I appended the relevant code to give me this:
Response.Redirect("myrecord.asp?" & Request.QueryString & "&tab=1#TabbedPanels1"
As I mentioned, the tab contains a repeat region. If I click on a button to change the status of that record the page reloads fine and displays the correct tab. But this only happens once... each subsequent time I try to change another record my tab contents disappear. The tabs are still visible and if I click on the tab where I've changed the data the tab content is dispalayed, but obvioulsy this isn't right... it should reload and display the correct tab with each call of the code.If I navigate away from this page and then come back to it I can successfully chnage one record and the results are displayed. Change another record and the changes are made, but the tab contents are not displayed again. The interesting thing is that if I reload/refresh the page the problem occurs staright away on the first record change.
So my question is 2-fold... Why is this happening and how do I solve the problem?
Here is the vbscript that updates the record and does the Response.redirect
<%
'Change Notification
If (CStr(Request("ToggleNotify")) = "ToggleNotify") Then
dim strSQL
'check to see if notification is currently true or false
If cstr(Request.Form("NotifyChanges")) = Cstr("True") Then
'change notifiaction to false
strSQL = "UPDATE tblUserAccess SET NotifyChanges=0 WHERE AccessID = " & Request.Form("hiddenAccessID")
else
strSQL = "UPDATE tblUserAccess SET NotifyChanges=-1 WHERE AccessID = " & Request.Form("hiddenAccessID")
end if
Set MM_editCmd = Server.CreateObject ("ADODB.Command")
MM_editCmd.ActiveConnection = MM_VBUsers_STRING
MM_editCmd.CommandText = strSQL
MM_editCmd.Execute
MM_editCmd.ActiveConnection.Close
Response.Redirect("myrecord.asp?" & Request.QueryString & "&tab=1#TabbedPanels1" )
End If
%>
Here is my Repeat region with the associated form
<%
While ((Repeat3__numRows <> 0) AND (NOT rsAccessRights.EOF))
%>
<form name="frmNotifications" method="post" action="">
<tr class="PageText">
<td width="200"><%=(rsAccessRights.Fields.Item("SectionTitle").Value)%>
<input type="hidden" name="hiddenAccessID" id="hiddenField2" value="<%=(rsAccessRights.Fields.Item("AccessID").Value)%>">
</td>
<td width="200">
<%If (CStr((rsAccessRights.Fields.Item("NotifyChanges").Value)) = CStr("True")) Then %>
<input type="image" src="../sitegraphics/accept.png" alt="Submit button">
<%else%>
<input type="image" src="../sitegraphics/cross.png" alt="Submit button">
<%end if%>
<input type="hidden" name="ToggleNotify" value="ToggleNotify">
<input type="hidden" name="NotifyChanges" id="test" value="<%=cstr((rsAccessRights.Fields.Item("NotifyChanges").Value))%>">
</td>
</tr>
</form>
<%
Repeat3__index=Repeat3__index+1
Repeat3__numRows=Repeat3__numRows-1
rsAccessRights.MoveNext()
Wend
%>
And here is the bit at the bottom that specifies the default tab if nothing is passed in the URL
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
//-->
</script>
Sorry for the long post!
This is my first dabble with Spry stuff, so I'm a bit green. If anyone can explain to me why this is happening that would be most apopreciated. If anyone can tell me how to solve the problem I'll send them a big e-kiss!
Not sure how impotant this is but it happens in both Firefox and IE8.
Thanks in advance
DanHi Ben, thanks for taking the time to read my query.
The site in question is an intranet site, so I am unable to give you a link to the page. Would the entire page of code rather than just the odd bits help?
Cheers
Dan -
Linking page to Named Anchor on multiple spry tabbed panels
I am a Dreamweaver (cs5) "beginner" with little HTML knowlege. I am doing a site for an artist friend with several art gallery images. I have created a separate .html page for each image from the gallery (the gallery pages are built within several tabs in a spry tabbed set). When it came time to link my image page back to the particular gallery page, it did not work, only the default panel could be linked. I found Gramps' answer to another persons question that was similar to mine, only that person was using spry collapsible panels. Gramps answer: <a name="myAnchor"></a>, then URL origin page: ourPage.html?col2=open#myAnchor, and it apparently worked. I tried this using "tabbedpanel2" which is probably wrong; at any rate.... nothing seems to work.
For my first time doing this, can anyone put this in the simplest form, using my own page, link names? I have spent several day not getting anywhere.
Spry Panel page is called: store_sheet.html
namedAnchor on this page is called: o-pg2
origin page is called: 009.html
Because I'm not very good in HTML, I usually highlight what I am going to code so that I can find where it is at in the split screen, then I edit. This is how raw my knowledge-base is at this point.
Any help and advise would be greatly appreciated. I'm several days behind because of this glitch.On the first page, the peeling turnips image looks like this -
<p><a href="shop_originals/001.html"><img src="shop_originals/peelingturnips.jpg" width="188" height="254" alt="original"></a></p>
The next image in the row looks like this -
<p><img src="shop_originals/02.jpg" width="188" height="254" alt="original"></p>
So, just select that image and link it to the detail page, e.g.,
<p><a href="shop_originals/002.html"><img src="shop_originals/02.jpg" width="188" height="254" alt="original"></a></p>
The on that detail page, make the continue shopping link like this -
<a href="../store_sheet.html#o-002"><strong>Continue Shopping</strong></a>
Is that what you wanted? -
Spry Tabbed Panels does not work as I want
Sorry, but this is an utter NOOB question.
I tried to use a Gooey ment on my page, but it does not work as intended.
Here it works OK: http://ppbm5.com/DB-PPBM5-2.php
Here it does not work: http://ppbm6.com/Planning.html
I assume it is related to the menu already on this page. Anyway, since this did not work, I tried to replace the Gooey menu with Spry Tabbed panels, but being an utter noob in this area, I have made some mistakes that the experts here can probably help solve easily. What happens:
It looks OK in DW:
Go to Live View and it still looks OK:
but then go to the actual page and it looks like this:
Why do the tabbed panels not display at the top of the page next to the vertical menu, like it does in DW?
Second question: How can I add text to each page/ tabbed panel, like here http://ppbm6.com/Planning.htmlSpry Tabbed Panels 2.0 have a number of support files to make them run.
<!--files for Spry Tabbed panels-->
<script type='text/javascript' src='../Spry-UI-1.7/includes/SpryTabbedPanels2.js'></script>
<script type='text/javascript' src='../Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryFadingPanelsPlugin.js'></script>
<script type='text/javascript' src='../Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryTabbedPanelsKeyNavigationPlugin.js'></script>
<link type='text/css' href='../Spry-UI-1.7/css/TabbedPanels2/SpryTabbedPanels2.css' rel='stylesheet'/>
Below, I have a Spry demo page with 3 widgets on it. If you look at the source code, you'll see how the the various support files are organized.
Function code is near the bottom of the page.
http://alt-web.com/DEMOS/Spry-test.html
Second question: How can I add text to each page/ tabbed panel, like here http://ppbm6.com/Planning.html
Turn off CSS. View > Style Rendering > un-tick Display Styles. You'll see an unstyled HTML page in Design View. But this won't effect styles in Live View or Preview.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/ -
Spry Tabbed Panels - replace text tab with an image, how to?
Hi all, I'm stumped. I've uploaded 2 files to:
http://docs.google.com/leaf?id=0B4zgjxAaUD97MmUzZTk3NjMtMDNkYi00NDJjLWExNzctOWNjMzM0MDlmMj g0&hl=en&authkey=CMWGoeEP
http://docs.google.com/leaf?id=0B4zgjxAaUD97YTQ1MDliNzEtZGVhZS00MmYzLTllZWMtMzJiODQwMjRlMT Bl&hl=en&authkey=CILrxq0G
I'm working in Dreamweaver CS3, 4 tab "Spry Tabbed Panel" with 3 columns (one column is a form and submit btn). The 1st photo is a mockup of what I'm trying to accomplish. In the 2nd photo, Nokia designed a page for its Nokia Developer Summit 2010 (been pulled down since). This is the desired effect. I'm trying to replace the typical text tabs in the tabbed panel with images, or, at the very least, change the color between states ON and OFF (images the same except for bg color - green verses gray), which is probably the better way to go, given page load time.
I need the CSS and HTML code. I'd settle for just the image problem, but if someone can give me guidance on the content boxes too, that would be AWESOME!
REALLY hoping anyone can help (Ben, I'm an Aussie too) - been on this for a month now.
Very grateful Adobe staffs such a great resource tool as this site with a lot of really good, courteous brainiacs.
Thanks,
Louis catG'day Ben,
Upgraded to Dreamweaver CS5, added Tabbed Panels 2 widget to page.
Here's a mockup of what I'm trying to do: http://docs.google.com/leaf?id=0B4zgjxAaUD97MmUzZTk3NjMtMDNkYi00NDJjLWExNzctOWNjMzM0MDlmMj g0&hl=en&authkey=CMWGoeEP
Questions:
1. Want to change Spry TP tabs to images (see link, above), then make them vertical tabs, with morph effect - How?
2. How do I change the default TabbedPanels2 instance name? (not easy to rename)
3. The first section of the code was planted in my index page - shouldn't this be pasted into a CSS file, or just leave it alone?
================================================
FIRST SECTION OF THE CODE: -------------------------------------------------------------------------------
<style type="text/css">
/* BeginOAWidget_Instance_2138522: #TabbedPanels2 */
/* TabbedPanelsTabGroup */
#TabbedPanels2 .TabbedPanelsTabGroup {
top: 1px;
left: 0px;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: transparent;
border-left: solid 0px inherit;
border-bottom: solid 0px inherit;
border-top: solid 0px inherit;
border-right: solid 0px inherit;
padding: 0px 0px 0px 0px;
/* TabbedPanelsTab */
#TabbedPanels2.TabbedPanels .TabbedPanelsTab,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTab {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: #DDD;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
padding: 4px 10px 4px 10px;
#TabbedPanels2.TabbedPanels .TabbedPanelsTab a,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTab a {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
/* TabbedPanelsTabHover */
#TabbedPanels2.TabbedPanels .TabbedPanelsTabHover,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: #EEE;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
padding: 4px 10px 4px 10px;
#TabbedPanels2.TabbedPanels .TabbedPanelsTabHover a,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover a {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
/* TabbedPanelsTabSelected */
#TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: #EEE;
border-left: solid 1px #CCC;
border-bottom: solid 1px #EEE;
border-top: solid 1px #999;
border-right: solid 1px #999;
padding: 4px 10px 4px 10px;
#TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected a,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected a {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
/* TabbedPanelsTabFocused */
#TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: #EEE;
border-left: solid 1px #CCC;
border-bottom: solid 1px #EEE;
border-top: solid 1px #999;
border-right: solid 1px #999;
padding: 4px 10px 4px 10px;
#TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused a,
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused a {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
/* TabbedPanelsContentGroup */
#TabbedPanels2 .TabbedPanelsContentGroup {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: #EEE;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
padding: 0px 0px 0px 0px;
/* TabbedPanelsContentVisible */
#TabbedPanels2 .TabbedPanelsContentVisible {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
background-color: transparent;
border-left: solid 0px #CCC;
border-bottom: solid 0px #CCC;
border-top: solid 0px #999;
border-right: solid 0px #999;
padding: 4px 12px 4px 12px;
#TabbedPanels2.BTabbedPanels .TabbedPanelsTab {
border-bottom: solid 1px #999;
border-top: solid 1px #999;
#TabbedPanels2.BTabbedPanels .TabbedPanelsTabSelected {
border-top: solid 1px #999;
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabGroup {
width: 10em;
height: 20em;
top: 1px;
left: 0px;
#TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #EEE;
/* EndOAWidget_Instance_2138522 */
</style>
========================================================
SECOND SECTION OF THE CODE: ----------------------------------------------------------------------------------------
<div id="TabbedPanels2">
<h2>Tab 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien lacus, porttitor vitae pretium eget, sodales sed libero. Maecenas non urna lacus, ac sollicitudin justo. Ut erat mi, hendrerit ac accumsan ac, congue eu dui. Pellentesque consectetur condimentum elit, et eleifend urna porta id. </p>
<h2>Tab 2</h2>
<p>Nulla facilisi. Vestibulum ipsum elit, tincidunt sed tristique sit amet, faucibus in orci. Nunc sit amet elit lorem. Sed eget arcu ipsum, pharetra ullamcorper lectus. Sed ac diam ac tortor mattis mollis. Etiam mattis felis vel augue tempus in rhoncus ligula elementum. Vestibulum ut iaculis risus. Aliquam erat sem, feugiat vel laoreet in, lobortis non mauris. Vestibulum neque nibh, vehicula eleifend tincidunt sed, bibendum id dolor. </p>
<h2>Tab 3</h2>
<p>Suspendisse potenti. Proin ut erat sit amet turpis egestas tempor. Integer arcu dolor, aliquam ut egestas nec, pharetra ut mauris. Duis urna mi, aliquam id vulputate et, consequat in dolor. Duis congue sem feugiat nulla malesuada scelerisque. Aenean vitae augue nec diam euismod imperdiet. </p>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2138522: #TabbedPanels2
var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
injectionType: "replace",
widgetID: "TabbedPanels2",
autoPlay: true,
defaultTab: 0,
enableKeyboardNavigation: true,
hideHeader: true,
tabsPosition: "top",
event:"click",
stopOnUserAction: true,
displayInterval: 5000,
minDuration: 300,
maxDuration: 500,
stoppedMinDuration: 100,
stoppedMaxDuration: 200,
plugIns:[]
// EndOAWidget_Instance_2138522
</script>
===================================================
Any help would be much appreciated, Ben. Cheers from another Aussie. Louis Cat! -
Spry Tabs: how to overlap tabs when wrapped.
Hi,
Im new with using spry tabs and will be creating a page that
will require multiple tabs. I really would like to know how this
can be easily done. I had no success editing the CSS styles.
here is a similar example of how i want it.
Frys website with
tabs
but other than that, if its possible, i would also like the
active tab to move down and have its contents under the active tab.
Hope my explanation if clear, thanks in advance.Hi,
'cause there was no-one who answered to your question till now, you could bring your thread into the Spry-forum:
http://forums.adobe.com/community/labs/spry?view=discussions.
There you will find the experts for all your questions about Spry applications.
Good luck!
Hans-Günter -
Sorry for the newbie question, but I'm really in a bind right
now. I am using a spry tabbed pannel on my company's website that
I'm in the process of designing, and yesterday it worked perfectly.
At the end of the day yesterday, I did something and I'm not sure
what did it exactly, and now when I test it in the browser, I click
on one tab it shows me the contents of the wrong tab.
To try and paint a picture, I work for a small communications
company/ISP, so I have tabs for "home" "internet" "telus mobility"
"bell expressvu" "products" "about us".
Everything works left of "telus mobility". Once I click on
the telus one, it comes up blank. When I click on "bell expressvu"
the telus page comes up. When I click on "products" it comes up
blank. When I click on "About us" the telus page comes up.
I've tried making a new page and copying and pasting the
contents of the screwed up tab, but that just came up with the same
problems, so I'm thinking the problem is with the contents, and not
necessarily the CSS coding, but then again, I'm a total newbie and
I could be way off base. If anyone has any ideas I'm totally open
to hearing them. If you want to look at the page, I'd be happy to
send you the root folder.
I guess another option for me would be to just write the
whole page out again, which I guess wouldn't be the end of the
world, and might be faster. I was just hoping someone might have
had this problem before and knows what to do.
Thanks so much in advance.
-calebPost a link to the page, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"calskin" <[email protected]> wrote in
message
news:fp4ive$b0i$[email protected]..
> Sorry for the newbie question, but I'm really in a bind
right now. I am
> using
> a spry tabbed pannel on my company's website that I'm in
the process of
> designing, and yesterday it worked perfectly. At the end
of the day
> yesterday,
> I did something and I'm not sure what did it exactly,
and now when I test
> it in
> the browser, I click on one tab it shows me the contents
of the wrong tab.
>
> To try and paint a picture, I work for a small
communications company/ISP,
> so
> I have tabs for "home" "internet" "telus mobility" "bell
expressvu"
> "products"
> "about us".
>
> Everything works left of "telus mobility". Once I click
on the telus one,
> it
> comes up blank. When I click on "bell expressvu" the
telus page comes up.
> When I click on "products" it comes up blank. When I
click on "About us"
> the
> telus page comes up.
>
> I've tried making a new page and copying and pasting the
contents of the
> screwed up tab, but that just came up with the same
problems, so I'm
> thinking
> the problem is with the contents, and not necessarily
the CSS coding, but
> then
> again, I'm a total newbie and I could be way off base.
If anyone has any
> ideas
> I'm totally open to hearing them. If you want to look at
the page, I'd be
> happy to send you the root folder.
>
> I guess another option for me would be to just write the
whole page out
> again,
> which I guess wouldn't be the end of the world, and
might be faster. I
> was
> just hoping someone might have had this problem before
and knows what to
> do.
>
> Thanks so much in advance.
>
> -caleb
>
Maybe you are looking for
-
How can I access my billing method on Itunes????
Hi all. I'm new at this and I've learned more in two days than I thought i could possibly do. When I set up itunes, I followed all instructions to pay using my paypal account. I verified and I was told "you have successfully set up paying via paypal"
-
Exporting from iPhoto 09 to Facebook
Is there a way to export photos to a facebook account without using the moronic Faces feature? iPhoto 08 used an elegant app that would allow photos to be exported to the Facebook account where they could be organized, edited, and tagged prior to pub
-
How to get first premiere remoed?
I tried good will, disputes, and bbb, for an unpaid collection account that is fairly new. I need to get themoff my report, I tried everything, PFD etc... any advice with them or a better contact than what ison their website?
-
SDV03V02 : Need to de-allocate (unconfirm) a scheduled quantity.
Hello, I need to de-allocate (unconfirm) a scheduled quantity. Is there a user-exit, BAPI or function module that I can use to do this? The allocated quantity needs to be reset, so that the quantities can be allocated again according to the checking
-
Create tab seperated list from CF Query
HI All, i have a CF query that pulls all my products from my DB, what i'd like to do is create a tab seperated list from the results of the query, the list also requires column headers. any pointers? thanks zac