Spry Tabs displaying all content in IE8

Hi,
I have been looking at using the spry tabs panel to display content, it works perfectly fine in Safari and Firefox, but in explorer 8 all the panels display one underneath the other?
I have played around with the layout and am probably out of my depth...
If anyone knows a way I can fix this, otherwise I will use a simpler display.
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" />
<link href="CSS/css.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab1">
      <h1>$500 </h1>
     <p> Starter pack.</p>
      </li>
      <li class="TabbedPanelsTab" >
<h1>$900 </h1>
        <p>A bit more special.</p>
      </li>
      <li class="TabbedPanelsTab">
<h1>Custom </h1>
        <p>For something extra.</p>
      </li>
      <li class="TabbedPanelsTab">
        <h1>Design Services</h1>
        <p>content.</p>
      </li>
      </li>
    </ul>
    <div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent1">
      <div class="contentimage"><img src="images/page-design.gif" width="400" height="312" alt="example of designs" longdesc="images/page-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
<div align="center"><a href="web me.html#pageinfo"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent2">
      <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent3">
     <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent4">
      <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
    </div>
</div>
<div id="design">
<div class="topline"></div>
<div id="leftcoloumn">
<h1> Simple affordable website design in Auckland</h1>
     <p>As designers on Auckland's North Shore we set out to offer an affordable easy way to create special spaces etc..</p>
    </div>
<div class="centerline"></div><div id="rightcoloumn">
    <h1>Specialising in creating special spaces. </h1>
   <ol>
      <li>Create a space you'll love.</li>
      <li>Fit your budget.</li>
                         </ol>
    </div>
</div>
<div id="footer">
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
@charset "UTF-8";
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
#container #TabbedPanels1 .TabbedPanelsTabGroup .TabbedPanelsTab1 h1 {
font-size: 18px;
color: #52542D;
#container #TabbedPanels1 .TabbedPanelsTabGroup .TabbedPanelsTab h1 {
font-size: 18px;
color: #52542D;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
margin-left: 30px;
.TabbedPanelsTab {
position: relative;
top: 435px;
float: left;
width: 203px;
padding: 12px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCC;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666633;
border-bottom-color: #666633;
border-left-color: #CCC;
overflow: visible;
.TabbedPanelsTab1 {
position: relative;
top: 435px;
float: left;
width: 203px;
padding: 12px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCC;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666633;
border-bottom-color: #666633;
border-left-color: #666633;
overflow: visible;
.TabbedPanelsTabHover {
background-color: #FFF;
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #666633;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
position: relative;
bottom: 90px;
clear: both;
min-height: 430px;
height: auto;
margin-right:27px;
margin-left: 30px;
background-image: url(../images/content-box.gif);
background-repeat:no-repeat;
.TabbedPanelsContent {
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
#container #content {
width: 395px;
float: right;
margin-top: 35px;
padding-right: 20px;
#container #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent1.TabbedPanelsContentVisible #content .image {
margin-top: 27px;
#container .contentheaders {
margin-right: 8px;
#container .contentimage {
float: left;
margin-top: 35px;
padding-left: 40px;

You are probably getting a javascript error in IE8 preventing the tabs displaying properly. Use the developer tools unde F12 to find the problem line in your code. Sometimes it is just a cariable name you have used that IE does not like....

Similar Messages

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

How can I display all content (graphics)

On Skynet (United airlines employee website), when I try to look at the "seat selection" window, it displayes only numbers, it does not display a graphic of the cabin (seats). How can I display all content?

You can see that it is a font issue by the appearance of the little boxes with the hex code of the characters that Firefox displays when there is no font that covers this Unicode range. You might see a different character in case you would have a font that maps this font.

Tabbed Panels displaying all content in first panel

I'm trying to add a tabbed panels widget to my site but when it displays in browsers, the content from all of the tabs displays as a list in the first tab, and clicking the rest of the tabs does nothing. I just put the out-of-the-box widget onto my site and that won't work either. W3 validating only came up with one error, being: (Line 104, Column 42: there is no attribute "tabindex" <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>)
The page I thew the widget on to test it is http://www.herbsmithrx.com/test.asp
What am I missing?

You are missing the javascript constructor script, which should have been inserted on your page below your widget when you inserted the tabbed panels:
Somehow, the script is appearing above your widget in your page. Place this code BELOW your tabbed panels widget on your page:
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
That should fix it right up.
Beth

Does not display all content after first loading of page

Hello all,
I am having quite strange problem which is hard for me to figure out.
I have 8 buttons on my web site. Each button will display different content. My page is: www.itconnect.co.nz
When you go to my page first time, by default "Design & Software" button will be active. Here when you look on first photo you can see that the bottom part is missing - logos.
However when i click again on "Design & Software" button the missing content will appear.
What could be the problem ?
Thank you to everyone who would like to help.

I am little confused as i don't use flash - only for the Captcha.
The way i did is:
<div class="sp">
    <div class="tabs">
                <span class="repairs">Repairs</span><span class="design">Design & Software</span>
               <span class="security">Security</span><span class="networking">Home Networking</span>
                <span class="communication">Communications</span><span class="cloud">Cloud Solutions</span>
                <span class="maintenance">Maintenance</span><span class="remote">Remote Support</span>
      </div>
      <div class="panel_container">
                <div class="panels">
                                <div class="panel repairs">
                                                <div class="panel_content">
                                                                HERE GOEST THE CONTENT
                                                 </div>
                                </div>
<div class="panel design">
                                <div class="panel_content">
                                                                HERE GOES THE CONTENT
                                                </div>
                                </div>
                                AND SO ON FOR THE OTHER PANELS
                    </div>
</div>
</div>
For my CSS I have:
.sp {
                width: 960px;
                position: absolute;
                margin-top: 0px;
                margin-right: 0px;
                margin-bottom: 10px;
                margin-left: 0px;
.sp .tabs {
                width: 41%;
                float: left;
                height: 450px;
                display: table-column;
.sp .panel_container {
                width: 58%;
                float: right;
                overflow: hidden;
                position: relative;
And for the animation I use JavaScript.
Thanks in advance

How to update spry tab on all pages?

Hi, Hope someone can help me. I created a template and have
been building new pages. I didn't make the spry tab an editable
region. Since I'm adding more and more pages I'm adding tabs as
drop downs from the spry tab. However the pages I already made
don't show the new spry tab, so if you navigate to an older page
from the homepage the spry menu is not updated with the new pages.
( I changed Psychologist to Store on the main bar for instance. All
the pages I previously made still show "psychologist". It's in an
uneditable region so I can't change it from the page itself. Is
there a way to update all the pages as I add more and more drop
downs to the spry tab?

I tried to use Start body and End Body, I received the following error msg:
at oracle.apps.xdo.template.fo.FOHandler.startElement(FOHandler.java:190)
     at oracle.xml.parser.v2.XMLContentHandler.startElement(XMLContentHandler.java:167)
     at oracle.xml.parser.v2.NonValidatingParser.parseElement(NonValidatingParser.java:1182)
     at oracle.xml.parser.v2.NonValidatingParser.parseRootElement(NonValidatingParser.java:301)
     at oracle.xml.parser.v2.NonValidatingParser.parseDocument(NonValidatingParser.java:268)
     at oracle.xml.parser.v2.XMLParser.parse(XMLParser.java:149)
     at oracle.apps.xdo.template.fo.FOProcessingEngine.process(FOProcessingEngine.java:279)
     at oracle.apps.xdo.template.FOProcessor.generate(FOProcessor.java:1022)
     at RTF2PDF.runRTFto(RTF2PDF.java:626)
     at RTF2PDF.runXDO(RTF2PDF.java:460)
     at RTF2PDF.main(RTF2PDF.java:251)
-Helena

Putting Spry Tabs below the content

I need to put the navigation tabs below the content and have
tried to cut-n-paste the <ul></ul> tags that hold the
navigation but I just mess up the structure.
How can I do this?
Thanks ahead of time.
C

SecretSanta wrote:
> I need to put the navigation tabs below the content and
have tried to
> cut-n-paste the tags that hold the navigation but I just
mess
> up the structure.
>
> How can I do this?
FYI: Spry questions are probably best asked in the Spry
forums:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
The Spry tabbed panels are set up for top tabs or vertical
left tabs (although you have to change classes in code view to get
a vertical view of the tabs). So you'd have to go in and rearrange
the HTML code, change a little CSS and a couple of lines of
JavaScript for the tabbed panels in order to accomplish what you're
trying to do.
Please note that you'll not see this visually within
Dreamweaver properly as these changes will change the code base and
Dreamweaver won't recognize what to do with the changes, however, a
browser should show you what you want.
Ok, first add a tabbed panel to your document and save the
page to get the Spry assets into place. Next go into code view and
move the UL that has the tabs below the DIV that has the content
panels.
Next we'll make the changes to the CSS and JavaScript within
this page rather than modifying the Spry files. This will allow you
to override the Spry defaults without messing up the base files in
case you need the "regular" functionality later.
So add a STYLE block to your page and open the
SpryTabbedPanels.css file. Copy the .TabbedPanelsTab selector
(lines 67-83) into your new style block. Then copy
.TabbedPanelsTabSelected selector (lins 105-108) into the style
block.
In .TabbedPanelsTab change top:1px to top: -1px. Then in
.TabbedPanelsTabSelected change border-bottom to border-top. These
changes will allow the bottom tab to overlap the bottom of the
content making it look seamless for the "selected" tab.
You'll have this when you're done:
<style type="text/css">

</style>
Next create a SCRIPT block then copy the
Spry.Widget.TabbedPanels.prototype.getTabGroup function (lines
124-133) and
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup (lines
144-153) into your script block. Next change the
Spry.Widget.TabbedPanels.prototype.getTabGroup function return to
return children[1] in its 7th line, and change
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup to return
children[0] in its 7th lines as well. You'll have something like
this in your page:
<script type="text/javascript">

</script>
Basically what this JavaScript change does is to move from
the tabs being the first element within the div that wraps the tabs
and panels, that is children[0] to its new position of the second
element children[1]. Same thing with the content panels, except in
the opposite direction, moving from second child element to first
child element (JavaScript uses a start position of 0 for the first
element).
Should be good to go from there. If not, please post in the
Spry forums.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry tabbed panal-controlling content of another textbox on the page

Hi, I am trying to teach myself a bit of web design by making a simple site for my partners beauty salon.
http://www.enchantedbodies.co.uk/services.html
I have religiously avoided using anything other than html5/php/css3 as i have no clue how JS/ajax etc work...
That is untill i used the spy tabbed panal to insert some tables laying out what services she offers.
Now what she wants is that when you click on each tab as well as changing panal to give her price list etc that it will change the content of a text box in the sidebar on the left (currently just a picture) with a bit of blub about each treatment (eg waxing or eyelash tinting).
Is this possible?
My only other option is that it will have to be actually in each panal under the table (as i don't want the table jumping around from tab to tab) but i think it will be much cleaner off to the side.
Please let me know if i need to post more info to allow you to help.
Many thanks
Jim

JimOnWax wrote:
Ok.
Rethinking! Tried the site on Iexplore9 and it automatically blocked the spry scripts so considering it will probably be the same on ie 8.5 on mobile i think i will rework this not using spry. That way I don't need to work this out.
If anyone can try this site on a IE8.5 mobile and let me know if if the tabs in services work I would be very grateful.
http://www.enchantedbodies.co.uk/index.html
All the best
Jim
The blocking of the scripts occurs only when viewing the site on a local server. Once it is on a remote server IE does not block the scripts.
Now the suspense, yes Spry or no Spry?
As far as placing different content in the sidebar, have a look at the following example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<style>
#sidebar {
    width: 200px;
    float: left;
#TabbedPanels1 {
    width: 300px;
    float: left;
.sidebar {
    left: 0;
    position: absolute;
</style>
</head>
<body>
<div id="sidebar">
This is the menu
</div>
<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">
        Content 1
        <div class="sidebar">
          This is the sidebar content 1
      </div>
    </div>
    <div class="TabbedPanelsContent">
        Content 2
        <div class="sidebar">
          This is the sidebar content 2
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Gramps

Why is Spry Tabs dropping below content out of view and back during page load.

Hello everyone, I'm having some
Spry Trouble. This is happening only in IE 7.
When the page loads, you'll notice that the tabs will
collapse before coming back to it's designated position.
This ruins the visual appeal. Again I don't know why this
happens but the tabs at the bottom of the content will quickly drop
below out of view and then jump back under the content.
Here is the URL
http://www.patrickjudson.com/weddingIndex2.php
Any ideas why this is happening?
Thanks everyone - Patrick

quote:
Originally posted by:
Newsgroup User
Webethics wrote:
> Hello everyone, I'm having some
Spry Trouble. This is happening only in
> IE 7.
> When the page loads, you'll notice that the tabs will
collapse before coming
> back to it's designated position.
> This ruins the visual appeal. Again I don't know why
this happens but the tabs
> at the bottom of the content will quickly drop below out
of view and then jump
> back under the content.
>
> Here is the URL
http://www.patrickjudson.com/weddingIndex2.php
I don't see the collapse issue on my end. About the only
visual thing going on is that the background image of the tabs
appears later than the text, but not sure that's an issue that's
particular to the Spry code on the page.
Perhaps it's related, or perhaps not, but in my IE7, I get an
error on the page. It states:
Line: 48
Char: 3
Error: Object required
Code: 0
URL:
http://www.patrickjudson.com/weddingIndex2.php
I only see HTML code at line 48 both in the source code, and
even if I pull the generated content view source from Firefox. I
checked line 48 of both of your attached JS files and neither
seemed to be an obvious issue. I even saved a local copy of the
page, and didn't get an error at all. The line of code in the HTML
does seem to be the end of the div that contains your music player,
maybe it's causing an issue in IE, not sure.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert
So why is there an error in IE7 saying object required.
What does this mean, and what are the side effects?
Any idea?
Patrick

Accordian panels not displaying all content

I'm using the accordion panel spry. But, the panels are a
fixed height and don't change depending on the amount of content
that is inside of them. How do I change that? I don't want a scroll
bar for overflow like the default. I just want the panels to open
to show all of the content.
This is my page:
http://creative.generalgrowth.com/jeremy/b2btest/clients.html

".V1" <[email protected]> wrote in message
news:gnhlic$8k0$[email protected]..
>
quote:
Originally posted by:
MisterEggMan
> >> var Accordion1 = new
Spry.Widget.Accordion("Accordion1",
> {useFixedPanelHeights: false});
>
> Where in the code does this go?
>
> Check the source code of your page, search for your own
Accordion
> constructor
> and add the option.. Its probably under your accordion
or at the bottom of
> your
> page.
> @AL
> its not bad design decision, the outline is actually an
accessibility
> features
> of browsers its there for a reason..
You're absolutely wrong. I can't even discuss this without
getting
indigestion. If you really believe that putting focus on the
whole bleedin
widget is accessible in the context of web UI conventions,
then there is
nothing more I can say to you except to reiterate that you
are very wrong.
Spry does not work as expected with a keyboard. I submit that
the only
people who would know how to use a spry widget with a
keyboard are you, the
couple of guys who developed Spry, and anyone who has read
through the Spry
documentation, as well as a few people around here who like
to fire me up
for entertainment.
> And there is nothing wrong with Spry Accordions so its
utterly useless
> that
> you even recommend an other script.
Moo is a superior script with much more refined behaviors and
works as
expected with a keyboard.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System

How to Display Repeat List In Spry Tab Content

Hello,
I am new to Spry. I thought I could just create an XML
dataset, Insert a Spry Tabbed Panel, and then insert a Spry repeat
list inside the Tabbed Content area of the Tabbed Panel. It is not
working at all for me. Is this doable at all? If so, how?
Thanks!

hi,
i have created an example in http://apex.oracle.com/pls/apex/f?p=44310:1:3623155419174978:::::
username/password: demo/demo
check, it may help you:)
*please mark the thread answered if it done:)
regards
Little Foot

Make all Tabs on Spry Accordion display 'closed'

I used Dreamweaver CS5 to add a Spry Accordian widget to my page. I would like all tabs to display 'closed' when the page is first opened. I am new to web work, and don't know where or how to change the code to do this. Help?!

Okay. I found it.
At the bottom of the code for my page I found:
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Product_Line");
</script>
I changed it to:
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Product_Line", { useFixedPanelHeights: false, *defaultPanel: -1* });
</script>
When I saved that change and then previewed it, instead of all the Tabs starting out CLOSED - ALL the Tabs displayed OPEN!!
What did I do wrong?

Spry Tabbed Panels2 IE8 Issue

I have a problem where I have Spry Tabbed Panels 2 implemented in a Magento CMS page. In Opera, Firefox, Safari it works exactly as I want. In IE (I have IE8, but I've been told the problem also shows up in IE7) the content displays for the first tab only. The 2nd and 3rd tabs do not show the content. The web page is at http://www.gulfcoastvirtualmall.com. Here is the html for the tabbed panel:
<script src="/js/spry/SpryDOMUtils.js" type="text/javascript"></script>
<script src="/js/spry/SpryDOMEffects.js" type="text/javascript"></script>
<script src="/js/spry/SpryWidget.js" type="text/javascript"></script>
<script src="/js/spry/SpryPanelSet.js" type="text/javascript"></script>
<script src="/js/spry/SpryPanelSelector.js" type="text/javascript"></script>
<script src="/js/spry/SpryFadingPanels.js" type="text/javascript"></script>
<script src="/js/spry/SpryTabbedPanels2.js" type="text/javascript"></script>
<script src="/js/spry/plugins/TabbedPanels2/SpryFadingPanelsPlugin.js" type="text/javascript"></script>
<script src="/js/spry/plugins/TabbedPanels2/SpryTabbedPanelsKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="/js/mapper/mapper.js" type="text/javascript"></script>

<h1 style="text-align: center;"><span style="text-decoration: underline; color: #ff6600;"><strong>Mall Stores</strong></span></h1>
<div id="TabbedPanels2">
<h2>GROUND FLOOR</h2>
<p><img class="mapper" style="border-style: none; display: block;" usemap="#gulf-coast-virtual-mall-map" src="/media/gulf-coast-virtual-mall-map.png" alt="Gulf Coast Virtual Mall Ground Floor" />
<map id="gulf-coast-virtual-mall-map" name="gulf-coast-virtual-mall-map">
<area class="noborder icolorff9900" title="Inspired Silk - Silk florist that produces custom arrangements and has a floral warehouse containing a huge selection of floral supplies." shape="rect" coords="11,151,160,206" href="http://store.inspiredsilk.com" alt="Inspired Silk" />
<area class="noborder icolorff9900" title="The Main Event has very high quality leather belts, buckles and motorcycle leathers including jackets, vests and chaps." shape="poly" coords="275,17,369,17,369,151,343,151,297,104,280,105,276,100" href="http://www.themaineventofflorida.com" alt="The Main Event has very high quality leather belts, buckles and motorcycle leathers including jackets, vests and chaps." />
<area class="noborder icolor00ff00" title="The Atrium is integrated within the Mall and is our Social Network which is open to the public." shape="poly" coords="229,136,242,121,255,120,266,129,276,121,286,121,302,134,303,147,294,157,304,168,3 03,180,291,195,274,195,267,186,260,192,245,194,230,181,229,169,239,158,229,147" href="http://social.gulfcoastvirtualmall.com" alt="The Atrium" />
<area class="noborder icolorff9900" title="VzPrints has very high quality prints of sports, famous people, actors and actresses, movies and much more." shape="poly" coords="390,203,402,203,417,217,470,218,470,233,452,234,452,245,447,250,450,256,462,259,4 48,269,389,269" href="http://www.vzprints.com" alt="VzPrints" />
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="8,14,8,91,159,93,160,83,147,81,148,51,127,31,103,30,103,38,88,38,88,14" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store Here" />
<area shape="default" />
</map>
</p>
<h2>FLOOR 2</h2>
<p><img class="mapper" style="border-style: none; display: block;" usemap="#gulf-coast-virtual-mall-map-floor2" src="/media/gulf-coast-virtual-mall-map-floor2.png" alt="" />
<map id="gulf-coast-virtual-mall-map-floor2" name="gulf-coast-virtual-mall-map-floor2">
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="13,208,12,208,159,208,160,238,158,239,157,250,11,251" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store here" />
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="370,21,369,151,418,151,417,123,419,123,420,114,484,114,484,68,452,68,451,31,460,3 1,461,18" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store here" />
<area class="noborder icolor00ff00" title="The Atrium is integrated within the Mall and is our Social Network which is open to the public." shape="poly" coords="229,135,229,148,239,158,230,168,230,180,242,194,255,195,267,186,275,194,289,195,3 04,181,305,168,293,157,304,148,304,135,289,120,277,120,267,130,256,121,244,121" href="http://social.gulfcoastvirtualmall.com" alt="The Atrium" />
<area shape="default" />
</map>
</p>
<h2>FLOOR 3</h2>
<p><img class="mapper" style="border-style: none; display: block;" usemap="#gulf-coast-virtual-mall-map-floor3" src="/media/gulf-coast-virtual-mall-map-floor3.png" alt="" />
<map id="gulf-coast-virtual-mall-map-floor3" name="gulf-coast-virtual-mall-map-floor3">
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="12,252,12,294,153,295,153,252,156,252" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store here" />
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="306,244,306,229,315,219,316,202,387,203,388,267,386,269,386,296,341,295,342,262,3 45,262,346,255,319,255" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store Here" />
<area class="noborder icolor00ff00" title="The Atrium is integrated within the Mall and is our Social Network which is open to the public." shape="poly" coords="230,135,244,121,255,121,265,130,278,121,289,121,304,136,303,145,295,155,294,158,3 04,167,303,180,291,195,275,195,267,186,258,194,243,194,230,182,229,168,238,158,230,146" href="http://social.gulfcoastvirtualmall.com" alt="The Atrium" />
<area shape="default" />
</map>
</p>
</div>
<script type="text/javascript">// <![CDATA[
var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
            injectionType: "inside",
            widgetID: "TabbedPanels2",
            autoPlay: false,
            defaultTab: 0,
            enableKeyboardNavigation: true,
            hideHeader: true,
            tabsPosition: "bottom",
            event:"click",
            stopOnUserAction: true,
            displayInterval: 5000,
            minDuration: 300,
            maxDuration: 500,
            stoppedMinDuration: 100,
            stoppedMaxDuration: 200,
            plugIns:[]
// ]]></script>
<p> </p>
<p> </p>
<h1 style="color: #ff9900; text-decoration: underline; text-align: center;">A New Approach to Online Selling</h1>
<table style="width: 594px; height: 290px;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="middle">
<p style="text-align: center;"><a href="http://www.magento-mall.com/" target="_blank"> </a><a href="http://www.magento-mall.com/" target="_blank"><img title="Front End Demo" src="http://www.gulfcoastvirtualmall.com/index.php/admin/cms_wysiwyg/directive/key/ab5bb11d2d7f 999ec514519137cd6011/___directive/e3ttZWRpYSB1cmw9Ii9mcm9udGVuZGRlbW8uanBnIn19/" alt="Front End Demo" /></a></p>
</td>
<td> </td>
<td align="center" valign="middle">
<p style="text-align: center;"><a href="http://demo-admin.magentocommerce.com/index.php/admin/" target="_blank"> </a><a href="http://demo-admin.magentocommerce.com/index.php/admin/" target="_blank"> <img title="Admin Panel Demo" src="http://www.gulfcoastvirtualmall.com/index.php/admin/cms_wysiwyg/directive/key/ab5bb11d2d7f 999ec514519137cd6011/___directive/e3ttZWRpYSB1cmw9Ii9hZG1pbmRlbW8uanBnIn19/" alt="Admin Panel Demo" /></a></p>
</td>
</tr>
<tr style="text-align: center;">
<td>
<h3 style="text-align: center;"><span style="color: #ff9900;">Front End Demo</span></h3>
</td>
<td> </td>
<td>
<h3><span style="color: #ff9900;">Admin Panel Demo</span></h3>
</td>
</tr>
</tbody>
</table>
<p><span style="color: #ffffff;">So many of the choices out there that “claim” they have more features for your money fall short once you’ve signed up. What is actually being offered to you is a plain “vanilla” web site that looks just like many of the others you’ve seen. When you start working to get your store up and running you depend on reading documents from the hosting company’s web site. If you have to call for help you wait on hold and when you finally get someone on the phone they can’t answer your questions. You finally get your web site set up, your products loaded, but no one buys anything. You can’t tell if people are really even able to find your store. After spending hundreds of dollars you’re frustrated and angry. You should be. Now wouldn’t it be great to have a site that was all set up for you, ready for your products to be entered? And of course since you’ve decided to market your products online, it would be great if this site had a way to put your products in front of people looking for them. And last but certainly not least, it would be really nice to be able to pick up the phone and have a real person answer that is knowledgeable and really cares about helping you. It isn’t a dream any more, it has become reality.</span></p>
<p> </p>
<h3 style="text-align: center;"><span style="color: #ff9900;">An Overview of Our Solution Compared to Other Hosting Solutions</span></h3>
<h4> </h4>
<h4 style="text-align: center;"><img src="/media/upload/image/Features1.png" border="0" alt="" hspace="0" width="350" height="211" align="middle" /></h4>
<h4 style="text-align: center;"><img src="/media/upload/image/Features2.png" border="0" alt="" hspace="0" width="350" height="233" align="middle" /> <img src="/media/upload/image/Features3.png" border="0" alt="" hspace="0" width="350" height="243" align="middle" /></h4>
<h4> </h4>
<h3><span style="color: #ff9900;">Enterprise Class e-Commerce</span></h3>
<p><span style="color: #ffffff;">The software running the Mall site and all of the stores is new written by a commercial software company that specializes in e-commerce. Although the software is new it is extremely stable and has features other e-commerce software can’t match.</span></p>
<h4> </h4>
<h3><span style="color: #ff9900;">Feature Rich</span></h3>
<p><span style="color: #ffffff;">Getting past the shopping cart which is the one common thread among all e-commerce software there are many store owner and customer centric features. To start, you need to get your products in front of people that are looking for them. The system uploads your products to Google Merchant Center (formerly Froogle). If you change a price, an item goes out of stock the system automatically updates Google. The software has the ability to use almost any payment gateway. We chose PayPal as our initial offering since almost everyone is familiar with it. The shipping portion of the software allows a customer, in real time to find out (through an interface to the major shipping companies) what it costs for all of the shipping options available. Automated email communication with your customers which is triggered by you processing your orders. Unlike other e-commerce offerings, we do not limit how many products you can market or how many photos you use. The software allows you to create “configurable” products (multiple colors and sizes), bundled products (like custom built computers) where the customer can choose which options or sizes and colors they want. The system takes care of price differences as well with these types of product. And finally, although your online store is a business and businesses require time and energy to be successful the system emails you when you receive an order. You don’t have to stare at the screen waiting for orders. By now you’re probably thinking this is going to cost a fortune. Well, it doesn’t. We charge a $75.00 one time setup fee which also gives you 2 dedicated hours of training when you start. Each month you’ll be billed $50.00 and 3% (cumulative) of your transactions. The only other cost would be for templates to change the look and feel of your store. If you need an e-commerce site you owe it to yourself to talk it over with us.</span></p>
<h4> </h4>
<h3><span style="color: #ff9900;">Why A Virtual Mall?</span></h3>
<p><span style="color: #ffffff;">As with any other venture in life, strength comes in numbers or groups. People want “one stop shopping”, search engines love links and content rich sites. Grouping online stores creates an environment where customers will jump from store to store. Your products will be seen by more people. We also give you a site where you can see not just how many people, but where they are, where they came from, what search terms they used and how long they stayed along with much more information critical to make your business a success. The concept is simple, we do all the configuration and support you. You focus on your business. The link provided below is the front end of the mall. Go have a look, go through the stores. When you’re ready to move forward with a store or want more information, call or email us. The systems running the mall are owned by the company and are located on the company’s property. We have up to 15MB of network bandwidth which is scalable to 30MB (that’s quite a bit). As the mall grows we will monitor and add additional systems and network bandwidth to maintain the same level of service you enjoy today.</span></p>
I've tried everything I can think of to get this woking 100% and am getting a bit frustrated with it. Any help would be really appreciated!!!!
Thanks in advance!

Hi,
It is hard to guess where you have gone wrong with you modified CSS without actually seeing the code.
Have a look here for more background info.
I hope this helps.
Ben

Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry

Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
And click on the "Using Spry.Utils.updateContent()"
The 3rd example shows how to use a fade transition whenever the content changes.
I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
Tabs code;
<ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab">
               <table class="Button" >
                    <tr>
                    <td style="padding-right:0px" title ="Home">
                    <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
                    </td>
                    </tr>
               </table>
          </li>
etc
etc
etc
and the panel code:
<div class="TabbedPanelsContent" id="Home">
     CONTENT
</div>
I hoped i can use the example code from the link into my tabbed panels.
I thought this code:
onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
could be added to the tab code like this:
<a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
But the content doesnt fade...
I know i need to change the header etc.
The following is from the link:
<!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>Aquo Events</title>
<script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
<script src="../../../includes/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<style type="text/css">
/* IE HACK to prevent bad rendering when fading. */
#event { background-color: white; }
</style>
</head>
So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
Is there a way to keep my tabbed panel (or change as less as possible) and let
A. The fade work
B. The loading work.
The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
And the fading part is just because its nice...

It doesnt show in the post but off course i changed this link;
"data/AquoThonFrag.html"
into;
"javascript:TabbedPanels1.showPanel(1);"
I must say i dont know if this even works...

Spry Tabs displaying all content in IE8

Similar Messages

Maybe you are looking for