Spry Tabbed Panel Content editable region not functioning

I have a web page I created in dreamweaver CS5 with a tabbed panel. When my client opens the page to edit in contibute, the content and tabs do not function properly. Basically, the tabs do not function and the content for all of the tabbed regions is listed down the page on the first tab window. The page works fine when I open in Contibute on my computer, but only if it is through the Contibute Program. If I try to edit through firefox, I get the same issue as my client.
http://menwieldingfire.com.previewdns.com/bbq/bbq-menu.html
also, I get a space between the header image and the horizontal menu that goes white. I end up having to re-upload the page from dreamweaver. Why would the follow code get added to the page when a draft is created in Contribute, when this page is based on a template with editable regions?
< p style="margin-top: 0; margin-bottom: 0;"> </p >
Any ideas?

Check http://blogs.adobe.com/contribute/2010/06/paragraph_spacing_options_in_a.html and also http://blogs.adobe.com/contribute/2010/06/spry_widget_rendering.html it should be helpful to resolve the issue.

Similar Messages

Spry tabbed panel in editable region will not allow editing

Yesterday I was building a spry tabbed panel onto an existing template I created in an editable region, the whole right column is editable. Today, I get a no editing stop sign instead of a cursor in the whole tabbed panel except the tabs. However, my tabs are labeled correctly, but the panels need additional information added to them. Here is the source code:
    <h2>Hewescraft
    </h2>
    <div id="Hewescraft_boats" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Sportsman</li>
        <li class="TabbedPanelsTab" tabindex="0">Pro V</li>
        <li class="TabbedPanelsTab" tabindex="0">Sea Runner</li>
        <li class="TabbedPanelsTab" tabindex="0">Ocean Pro</li>
        <li class="TabbedPanelsTab" tabindex="0">Alaskan</li>
        <li class="TabbedPanelsTab" tabindex="0">Pacific Cruiser</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <h3>Sportsman Series</h3>
          <p><img src="imageswebsite/Hewescraft/sportsmancanvasstop.jpg" width="602" height="276" alt="hewescraft sportsman" /></p>
          <p>Insert Text</p>
          <p>Click <a href="Links/HewesCraft_Sportsman[1].pdf">Here</a> for a Printable Brochure.</p>
          <p><img src="imageswebsite/untitled.jpg" width="612" height="792" alt="hewescraft sportsman features and options" /></p>
        </div>
        <div class="TabbedPanelsContent">
          <h3>Pro V Series</h3>
          <p><img src="imageswebsite/Hewescraft/prov.jpg" width="602" height="276" alt="hewescraft pro v" /></p>
          <p>Insert Text</p>
          <p>Clicke <a href="Links/HewesCraft_ProV.pdf">Here</a> for a Printable Brochure.</p>
          <p><img src="imageswebsite/Hewescraft/provfeaturesandoptions.jpg" width="612" height="792" /></p>
        </div>
        <div class="TabbedPanelsContent">
          <h3>Sea Runner Series</h3>
          <p><img src="imageswebsite/Hewescraft/searunnernomotor.jpg" width="602" height="276" alt="hewescraft searunner" /></p>
          <p>Insert Text</p>
          <p>Click<a href="Links/HewesCraft_SeaRunner.pdf"> Here</a> for a Printable Brochure.</p>
          <p><img src="imageswebsite/Hewescraft/searunnerfeaturesandoptions.jpg" width="612" height="792" alt="hewescraft searunner features and options" /></p>
        </div>
        <div class="TabbedPanelsContent">
          <h3>Ocean Pro Series</h3>
          <p><img src="imageswebsite/Hewescraft/hewesoceanpro.jpg" width="602" height="276" alt="hewescraft ocean pro" /></p>
          <p>Insert Text</p>
          <p>Click <a href="Links/HewesCraft_OceanPro.pdf">Here</a> for a Printable Brochure.</p>
          <p><img src="imageswebsite/Hewescraft/oceanprofeaturesandoptions.jpg" width="612" height="792" alt="hewescraft ocean pro features and options" /></p>
        </div>
        <div class="TabbedPanelsContent">Content 5</div>
        <div class="TabbedPanelsContent">Content 6</div>
      </div>
    </div>
    <p> </p>
    <div id="p"> </div>
    <script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("Hewescraft_boats");
    </script>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("rockys_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("side_menu", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Any ideas?

There is nothing wrong with the code that you have shown.
I do not use templates, in fact I hate them. I use serverside includes which allows me to update any portion of the site without having to re-upload multiple documents.
You will be better off placing your problem on the DW forum http://forums.adobe.com/community/dreamweaver/dreamweaver_general
Gramps

Dividing Spry Tabbed Panels content area into columns?

Hi there.
I am building a website and I want to divide the content area of a Spry Tabbed Panel into 3 columns for text.
How can I do this?
I thought about making divs inside the Panel but it would be too messy.
Please let me know if there is a simple way to do this.
Thanks in advance.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<style>
* {box-sizing: border-box;}
body {width: 960px; margin: auto;}
.TabbedPanelsContentVisible {overflow: auto;}
.col33 {width: 33.3333%; float: left; padding: 15px;}
</style>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
        <div class="col33">
          <h3>Column 1</h3>
        <p>Content 1</p>
        <p>Dicta sunt explicabo. Nisi ut aliquid ex ea commodi consequatur? Neque porro quisquam est, aut odit aut fugit, ut aut reiciendis voluptatibus maiores alias. Iste natus error sit voluptatem dicta sunt explicabo. Sed quia consequuntur magni dolores eos itaque earum rerum hic tenetur a sapiente delectus, cum soluta nobis est eligendi optio. Omnis voluptas assumenda est, nemo enim ipsam voluptatem neque porro quisquam est.</p>
        <p>Eaque ipsa quae ab illo inventore veritatis totam rem aperiam, qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, aut odit aut fugit, ut enim ad minima veniam. Id est laborum et dolorum fuga. Atque corrupti quos dolores et quas molestias qui ratione voluptatem sequi nesciunt. Temporibus autem quibusdam saepe eveniet ut et voluptates repudiandae sint sed quia non numquam eius modi.</p>
      </div>
        <div class="col33">
          <h3>Column 2</h3>
        <p>Content 1</p>
        <p>It is the star to every wand'ring bark, which alters when it alteration finds, love alters not with his brief hours and weeks. Or bends with the remover to remove. That looks on tempests and is never shaken; admit impediments; love is not love let me not to the marriage of true minds.</p>
      </div>
        <div class="col33">
          <h3>Column 3</h3>
        <p>Content 1</p>
        <p>The three cs - customers, competition and change - have created a new world for business while those at the coal face don't have sufficient view of the overall goals. In order to build a shared view of what can be improved, building a dynamic relationship between the main players. Highly motivated participants contributing to a valued-added outcome.</p>
        <p>Whether the organization's core competences are fully in line, given market realities the components and priorities for the change program an important ingredient of business process reengineering. Taking full cognizance of organizational learning parameters and principles, organizations capable of double-loop learning, working through a top-down, bottom-up approach. In order to build a shared view of what can be improved, maximization of shareholder wealth through separation of ownership from management measure the process, not the people. Presentation of the process flow should culminate in idea generation, taking full cognizance of organizational learning parameters and principles, the components and priorities for the change program. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption from binary cause and effect to complex patterns, working through a top-down, bottom-up approach.</p>
      </div>
    </div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Anchor tag inside Spry Tabbed Panel Content

I have successful been able to use code I found listed on
here to open a specific tab in a Spry Tabbed Panel form a link. Now
I am wondering if anyone has found out how to add an anchor tag
code this so that is goes to a specific location inside that Tabbed
Panel Content?

I was looking for an answer on how to open a tab from another tab and found it!
In return I'll give you a hint on how to open a tab from another tab using an anchor
for example,
if you were working on a file named "projects.php"
create an anchor in tab 2
<a name="anchor1" id="anchor1"></a>come next to me
in tab 1 create the link to the anchor in tab 2
<a href="projects.php#anchor1" onclick="TabbedPanels1.showPanel(1); return false;">open tab 2 and go to its anchor 1</a>
In your case you are overlooking the file name and jumping directly to the anchor name.....am I right??
cheers from Lima, Perú

Spry Tabbed panels content loading

Hello,
I have created a tabbed interface, it looks good, however the
content in some tabs it is a little heavy on some internet
connections.
Is there a way to load the content of each tab separately?
What i wanted to do is for each tab content to load only if
the user clicks on the tab, this way the start page will load much
faster. With the current settings all the content on all tabs loads
at the same time. Did not find anything on sprytabbedpanels.css
that could do this.
Can anyone help me?
Thanks in advance.
Joao.

On Thu, 13 Sep 2007 00:57:12 +0000 (UTC), "manzas"
<[email protected]> wrote:
>Hello,
> I have created a tabbed interface, it looks good,
however the content in some
>tabs it is a little heavy on some internet connections.
> Is there a way to load the content of each tab
separately?
> What i wanted to do is for each tab content to load only
if the user clicks
>on the tab, this way the start page will load much
faster. With the current
>settings all the content on all tabs loads at the same
time. Did not find
>anything on sprytabbedpanels.css that could do this.
> Can anyone help me?
> Thanks in advance.
> Joao.
>
>
May we see it?

Spry Tabbed Panels content open verticaly on web site opening?

Hello,
As long as the client does'nt authorised javascript my opening web site page does'nt make sense, we see all the content of the tabs openned vertically.
Is there a way to have an acceptable opening page , maybe without the the tabs working for the one who dont accept javascript?
Thank You in advance

picotine7 wrote:
Hi,
Thank's for the hint.
Unfortunatly when I use the noscript tag at the beginning and at he end of my div, I loose my tabs completely.
Yes and so it should when one uses a JS-enabled browser; but if one turns JS off then you will see the tabs.
A bit of imagination is required to juggle between what you want the different browsers to see. Anything within the NOSCRIPT tags will only be seen by non-JS-browsers.
If you want to remove a particular piece of code from JS-enabled-browsers you could use
<div id="dynamiccontent">
<script type="text/javascript">
    // If JS is enabled, we want to prevent the table from flashing
    // when the page is first loaded.
    Spry.$("dynamiccontent").style.display = "none";
</script>

</div>
I hope this helps.
Ben

Help, Spry Tabbed Panels are causing links not to work

Here is the page: http://www.spalutions.com
Here are the trouble spots:
Menu at very top of page
Home | Contact Us | Site Map
Links within the panels
Email link at the bottom of the content area
Any help would be greatly appreciated!

Fascinating.
The Validator found three important errors you might fix to see if they help resolve the problem:
at about line 107:
<div class="editable"div id="contentWrapper">
at about line 197:
<div class="editable" div id="footer2"></div>
and
id="footer" twice on page
After you fix these, run the Validator again: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.spalutions.com%2Findex.html to find any more important issues.
Then let us know if that helped!
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

Newbie looking for advice on spry tabbed panels for record view/add/edit

I have just got CS 5.5. Although old hand at IT this is fist use of DW. Have been through "The Missing Manual" and I am now trying somethings out.
I have an SQL DB and some "management" tables. I thought that in the admin section I could use the Spry tabbed panel to create a List, Add, Edit and Delete panel.
linking on a row in List will set the value of a variable (unique column) which is used by the Edit and Delete tabs. Add is just the wizard.
I am only trying things out. Is this is a sensible approach or should I look to have a page for each of the 3 functions which are linked from the list of rows. As given in the example in the book?
Regards

Thank you for this. I see that spry is now dead but I have the bit between my teeth for working this out. Partly because it helps me understand the way things are put together. So although Spry is not important. Understanding the system that I will then adapt into other circumstances and other variants is. So please bear with me.
So if anyone out there has some SPRY experience you may be able to tell me what knowledge I am missing here.
So at the moment I have a tabbed panel within a tabbed panel.
Header tabbed panel is called "TPMain"
Sub TB is called "TPAges"
TPAges has 4 tabs "List", "Add", "Edit" and "Delete"
"List" being the default tab.
Link style 1
Playing with forms and links, I have worked out that I can create a repeat region in the list and add a column with 1 hidden value (the id) and a submit button to set the value of the id, but the code to end up showing the Edit panel is not functioning. This is the form code in the table of the List Tab
     <form action="testtab.php?tab=3&panel=3#TPAges" method="post" name="FrmEdit" id="FrmEdit">
                      <input type="hidden" name="EditID" value= <?php echo $row_rsAges['oid']; ?>/>
                        <input type="submit" name="btnEdit" id="btnEdit" value="Edit">
                      </form>
In the edit tab I have the code
     <p><?php echo "*".$_POST['EditID']."*"; ?></p>
The page reloads but on TPMain and on the first tab (people) and not the second tab (Ages)
The value is correctly shown but with teh slash (/) character at the end?
Link style 2
I thought I would try and access it via an href. From googling I came up with this on one of the columns. I know it doesn't set the variable but I wanted to know if I could make it show the panel.
     <a href="javascript:; onclick=TPAges.ShowPanel(3)"><?php echo $row_rsAges['description']; ?></a
No errors just does nothing.
I'm off to hunt for jQuery tab as osgood suggests but would like to crack this out of sheer bloody mindedness.
Regards

Spry Tab Panel is not working properly on remote server

Hello All,
I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
Here is the link
http://www.geftas.com/temaritestpage/about.html
Also I am uploading Css and html code below
Any help would be exteremely appreciated.
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=utf8"/>
<meta http-equiv="content-type" content="cache" />
<meta http-equiv="robots" content="INDEX,FOLLOW" />
<meta http-equiv="keywords" content="Enter Keywords"/>
<meta http-equiv="description" content="Description Here" />
<title>TEMARI&CO. | Business Strategists</title>
<link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
          <div id="header"></div>
<div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html" class="current">ABOUT</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
        <ul>
          <li><a href="#">Business Plan</a></li>
          <li><a href="#">Marketing Plan</a></li>
          <li><a href="#">Incorporation</a></li>
          <li><a href="#">Accounting System</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#">OUR PROCESS</a></li>
      <li><a href="#">CAREERS</a>      </li>
      <li><a href="#">CONTACT</a></li>
    </ul>
</div>
<div class="shadow" id="content">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">values</li>
      <li class="TabbedPanelsTab" tabindex="0">people</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
                <div id="scrolltext">
                    <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
        </div>
      </div>
      <div class="TabbedPanelsContent">
                  <div id="scrolltext">
                    <h1>Heading1</h1>
        <p>Lorem n, </p>
                            <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, , </p>
                           <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit a, </p>
                           <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, </p>
        </div>
      </div>
    </div>
</div>
</div>
<div id="footer">
<div id="legal">
                      <ul>
                          <li>Copyright © 2012 Temari&Co</li>
                    <li>| Privacy Policy |</li>
                    <li>Terms of Use</li>
                </ul>
    </div>
            <div id="socialmedia">
                      <ul>
                          <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                    <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                    <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                    <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
              </ul>
      </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
.TabbedPanels {
          overflow: hidden;
          margin: 0px;
          padding: 0px;
          clear: none;
          width: 100%;
          height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
          margin: 0px;
          padding: 0px;
.TabbedPanelsTab {
          position: relative;
          float: left;
          background-color: #FFF;
          list-style: none;
          -moz-user-select: none;
          -khtml-user-select: none;
          cursor: pointer;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 9pt;
          font-weight: normal;
          color: #666;
          height: 30px;
          width: 116px;
          text-transform: uppercase;
          text-align: center;
          line-height: 30px;
          margin: 0px;
          padding: 0px;
.TabbedPanelsTabHover {
          background-image: url(../../SUPEROLDU/images/menubaractive.png);
          background-repeat: repeat-x;
          color: #FFF;
.TabbedPanelsTabSelected {
          background-image: url(../../SUPEROLDU/images/menubaractive.png);
          background-repeat: repeat-x;
          color: #FFF;
          height: 30px;
          width: 116px;
.TabbedPanelsTab a {
          color: black;
          text-decoration: none;
.TabbedPanelsContentGroup {
          clear: both;
          background-color: #FFF;
          height: 100%;
          width: 824px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 9pt;
          color: #666;
          border-top-width: 1px;
          border-right-width: 1px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-top-style: dotted;
          border-top-color: #CCC;
          border-right-color: #CCC;
          border-bottom-color: #CCC;
          border-left-color: #CCC;
.TabbedPanelsContent {
          height: 100%;
          width: 100%;
          overflow:hidden;
.TabbedPanelsContentVisible {
.VTabbedPanels {
          overflow: hidden;
          zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
          float: left;
          background-color: #EEE;
          position: relative;
.VTabbedPanels .TabbedPanelsTab {
          float: none;
          margin: 0px;
          border-top: none;
          border-left: none;
          border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
          background-color: #EEE;
.VTabbedPanels .TabbedPanelsContentGroup {
          clear: none;
/* Styles for Printing */
@media print {
.TabbedPanels {
          overflow: visible !important;
.TabbedPanelsContentGroup {
          display: block !important;
          overflow: visible !important;
          height: auto !important;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
.TabbedPanelsContent {
          clear:both !important;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
          width: 744px;
.TabbedPanelsTab {
           overflow: visible !important;
           display: block !important;
           clear:both !important;

Hi
Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
The images have not been uploaded at all, the online CSS is the one without a link to the images
Regards
Adaan Pre-Media Services
For more image editing services follow us @
web designing services

Spry Tabbed Panels - not correct in IE but correct in Chrome and MF

Hi,
I'm having problems with an extension I used for a client, so I want to use the Spry tabbed panels form dreamweaver, but they in IE8 it puts all the content under each other in the first tab ??
In Chrome and MF its correct. Do you know about this problem or is it because I did something wrong?
see: www.zorgfilosofie.nl/index2
The other pages where made with an extension but with that script my client can't edit with contribute. That's why I want to implement Dreamweaver Spry Tabbed Panels.
Thanks for answering!
Carla

Hello there from down under J
Het was mooi weer, maar vandaag regent het.
Toch zijn hier in deze kamer veel zonnestralen, want het probleem is opgelost!
I searched the whole evening for alternative but it did’t work with templates.
With the js files the problem is solved.
I don’t understand why the js file was not correct, because I just bought CS5.5
Where do I have to put de file so the problem will not happen again when I make another site?
Thanks a lot!
Best regards and take some sun with you!
Carla
Van: altruistic gramps [email protected]
Verzonden: woensdag 5 oktober 2011 2:16
Aan: Carla Leliveld
Onderwerp: Spry Tabbed Panels - not correct in IE but correct in Chrome and MF
Re: Spry Tabbed Panels - not correct in IE but correct in Chrome and MF
created by altruistic gramps <http://forums.adobe.com/people/altruistic+gramps> in Spry Framework for Ajax - View the full discussion <http://forums.adobe.com/message/3954185#3954185

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

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

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

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 Rick

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

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

Spry Tabbed Panels 2.0 have a number of support files to make them run.

<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: Title Tabs shift left, Content Tabs stay positioned correctly, right.

I inserted a clean Spry Tabbed Panel into a virtually empty HTML page (no content). I have a content div (624 px , float left) and sidebar (336 px, float right). When I insert the tabbed panel widget into the sidebar, the Spry Title Tabs go or float to te left, while the content portion of the Spry Tabbed panel stays correctly positioned within the sidebar on the right. I looked at the Spry CSS notes, and mentions something of by default they float the tabs left to allow for future divs without problems?? This problem only shows in Design View (leading me to think I've done something wrong). When viewed in Live View or Browser it looks fine, perfect! I have tried several float and clear combinations, none ave helped. I also deleted the Spry Tabbed CSS as to reset to default. Any Help or Advice would be greatly appreciated. Thank you

Design View is not an accurate representation. Don't rely on it. Use Live View and Preview in Browsers.
Incidentally, the Spry framework is gone from DW now. Most people have moved away from Spry to jQuery or commercial widgets.
JQuery UI Tabbed Panels
http://jqueryui.com/tabs/
jQuery Easy Tabs
http://os.alfajango.com/easytabs/
Nancy O.

Spry tabbed panels don't edit

Hello,
I have cs5 master collection. I have the spry tabbed panels in one page. My problem:
I cannot edit the content in the spry tabbed panels, the panels open but when I click on the content I cannot have access inside the panels so i cannot change the text,
running vista business
anybody any ideas why?

Hi,
unfortunately, often only helps to install your spry or your DW again. This can happen after installing updates or you had a system crash. I would start with the spry (Do you use the latest spry version > link: http://labs.adobe.com/technologies/spry/home.html?).
Incidentally, all this is done quickly, I had to do this already too, and now everything works like a charm!
Good luck!
Hans-Günter

Spry Tabbed Panel Content editable region not functioning

Similar Messages

Maybe you are looking for