Spry Tab Backgrounds
I am trying to adjust my spry tabbed pannel so that each tab has a different background image, is this possible?
Thanks in advance
Try
<li class="TabbedPanelsTab" tabindex="0"><img src="png/chat.png"></li>
<li class="TabbedPanelsTab" tabindex="0"><img src="png/ipod.png"></li>
which in my case gives me
Gramps
Similar Messages
-
Spry tab menu background image is not displaying 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><!-- end footer-->
</div><!-- end wrapper-->
<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;Assuming these are the images you're trying to display:
.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;
You have 2 root paths in your URL code. I think this is how your file structure looks like on your local computer. However, on a remote server, ../ by itself means you're pointing to the root folder of your website. Your URL linkage should be corrected based on the relativity and your background will work without a problem. -
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><!-- end footer-->
</div><!-- end wrapper-->
<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, 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 -
Spry tabbed panels as menu system
Hi,
This is actually for Dreamweaver CS6. What I'm trying to do is use spry tabbed panels as horizontal my menu system. I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected. I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
My current problems are these:
I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
Any help or suggestions would be greatly appreciated!!
Below is my tabbed panels css:
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
color: #FFF;
background-color: #000;
width: 1000px;
height: 25px;
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 4px 21px;
margin: 0px 0px 0px 0px;
background-color: #000;
list-style: none;
border-left: solid 0px #000;
border-bottom: solid 0px #000;
border-top: solid 2px #000;
border-right: solid 0px #000;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 1000;
height: 15px;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
.TabbedPanelsTabHover {
background-color: #D31145;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabSelected {
background-color: #D31145;
border-bottom: 0px solid #D31145;
color: #FFFFFF;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 2px #D31145;
border-bottom: solid 2px #D31145;
border-top: solid 2px #D31145;
border-right: solid 2px #D31145;
background-color: #FFFFFF;
visibility: visible;
width: 50%;
position: inherit;
height: auto;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.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;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
THe Javascript for my tabbed panels are below:
// SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
this.defaultTab = 0;
else
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
if (ele == arr[i])
return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
var el = false;
if (key == this.previousPanelKeyCode && i > 0)
el = tabs[i-1];
else if (key == this.nextPanelKeyCode && i < tabs.length-1)
el = tabs[i+1];
if (el)
this.showPanel(el);
el.focus();
break;
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
var child = root.firstChild;
while (!stopTraversal && child)
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
tabIndexEle = node;
return true;
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
tabAnchorEle = node;
return false;
if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;
if (this.focusElement)
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
if (tabs[i])
this.removeClassName(tabs[i], this.tabSelectedClass);
if (panels[i])
this.removeClassName(panels[i], this.panelVisibleClass);
panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
})(); // EndSpryComponentNote - I agree with Nancy
As for your experiment, to prevent the "drop" reduce the spry CSS padding in line 76 selector from 21px to 18px.
.TabbedPanelsTab {
-moz-user-select: none;
background-color: #000000;
border-color: #000000;
border-left: 0 solid #000000;
border-style: solid;
border-width: 2px 0 0;
cursor: pointer;
float: left;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
height: 15px;
list-style: none outside none;
margin: 0;
padding: 4px 18px;
position: relative;
top: 0;
Don't use dummy text without normal length text with breaks -
Is it possible to change the selectedTab text color in SPRY Tabs?
Was working with SPRY tabs and the client would like the font color to change to white on roll over and select.
Is this possible through simply adding a single line of code to the css file of the SPRY file under
.TabbedPanelsTabSelected {
height: 46px;
width: 168px;
background-color: #a7b9c3;
color: #f7f7f7;
as you can see I already attempted to change the color and wasn't able to achieve the results on
http://ebnerproductions.com/index22.html
If it is possible, awesome, if not, I will replace with rollover images to get the desired result.
Adam Ebner
Thank you again to everyone in the forum as you have all helped me big time in the last couple of days!!!!!I've gone through the coding now for a couple of days and still cannot get the font color to change on select.
I tried to inserted the recommended
<style>
.TabbedPanelsTabSelected,
.TabbedPanelsTabHover {
color: #FFF;
</style>
coding that was offered earlier, and it did nothing....
here is the CSS for my tabbed panels... PLEASE LET ME KNOW WHAT I HAVE DONE WRONG, OR FORGOT!!!!
site is ... http://ebnerproductions.com/index22.html
Here is the Spry css ....
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - 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.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 810px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
position: absolute;
left: auto;
top: auto;
color: #666;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
width: 840px;
color: #666;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 0px;
margin: 0px;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
height: 41px;
width: 158px;
outline:none;
text-align: center;
font-family: Archer-Medium-Pro.otf;
font-size: 1.4em;
font-weight: normal;
color: #666;
font-style: normal;
padding-top: 8px;
-moz-border-top-right-radius: 8px;
-moz-border-top-left-radius: 8px;/* for older versions of Firefox) */
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;/* for older versions of Safari and Chrome */
border-top-right-radius: 8px;
border-top-left-radius: 8px;/* Newer browsers */
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #EEE;
color: #FFF;
width: 158px;
outline:none;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
height: 41px;
width: 158px;
background-color: #a7b9c3;
font: Archer-Pro-Medium;
color: #FFF;
outline:none;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
color: #666;
text-decoration: none;
outline:none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
background-color: ;
outline:none;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 0px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.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;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
Thank everyone again for all the help! -
Images in Spry Tabbed Panels Tabs
I am completely new to the Spry options in Dreamweaver and
need help customizing the Tabs in the Spry Tabbed Panel.
I would like to substitute the text in each tab for a
different image in each tab, and have each image change by using
behaviors, depending on the user actions (hover, select, etc.).
If you can provide samples of this, it will truly be
appreciated. ThanksFirst add an ID to the tab as follows or similar
<h2 id="second">Tab 2</h2>
Then add a style rule to add a background image as follows or similar
.TabbedPanelsTab#second {
background:url(myImage.gif);
Gramps -
Spry tabbed panels java script error screwing up whole page when I reopen document in dreamweaver
I need help!
I am creating a site in dreamweaver and I am using spry tabbed panels for my content on every page. I've created 4 pages. When I go to reopen the pages after quitting dreamweaver 2 open and work just fine. However, for the other two I receive a window that says,
this document contains javascript code for a widget that no longer exists. If you don't remove the code, the browser may display javascript errors when loading the page. Would you like dreamweaver to find all instances of this code for you.
I've selected both yes and no options and either way my entire page becomes all jumbled. I've tried deleting the script in code view and it doesn't help?<!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>LEAP 2 GROW</title>
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #090909;
background-image: url(k2-mountain-1280x800-1.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
.twoColFixLtHdr #container {
width: 1200px;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
.twoColFixLtHdr #header {
padding: 0;
margin-top: 10px;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #8CC543;
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 230px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0;
background-color: #25A8E0;
margin-top: 40px;
height: 400px;
.twoColFixLtHdr #mainContent {
margin-right: 0;
margin-bottom: 0px;
margin-left: 248px;
border: 1px solid #8CC543;
margin-top: 40px;
text-align: center;
background-position: center center;
color: #8CC543;
font-family: "Century Gothic";
font-size: medium;
text-transform: none;
height: 400px;
background-image: url(k2-faded.jpg);
.twoColFixLtHdr #footer {
padding: 0;
text-align: left;
font-family: "Century Gothic";
text-transform: uppercase;
color: #25A8E0;
letter-spacing: 5px;
font-size: small;
word-spacing: normal;
display: block;
margin-left: 0px;
margin-top: 10px;
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #25A8E0;
text-decoration: none;
a:hover {
color: #8CC543;
text-decoration: none;
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
//-->
</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {font-size: xx-small; color: #EEEEEE; }
a:visited {
text-decoration: none;
color: #25A8E0;
a:active {
text-decoration: none;
.style3 {
color: #FFFFFF;
font-weight: bold;
.style4 {color: #FFFFFF}
-->
</style>
<style type="text/css">
<!--
.style5 {font-size: x-large}
h1 {
font-size: medium;
color: #25A8E0;
.style6 {color: #444444}
.style8 {color: #444444; font-weight: bold; }
-->
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('HS-MENTOR-OVER.png')">
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="web-banner.png" width="514" height="127" /></a>
<!-- end #header --></h1>
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="volunteer.html">VOLUNTEER</a> </li>
<li><a href="parentcollege.enroll.html">PARENT COLLEGE: ENROLL</a></li>
<li><a href="https://leapfrog-usa.com/AOE/Parent-Resources/Enrollment-Form.aspx">AFTER SCHOOL: ENROLL</a> </li>
</ul>
</div>
<div id="sidebar1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="mission.html">mission/overview</a></li>
<li><a href="ourteam.html">OUR team</a></li>
</ul>
</li>
<li><a href="problem.html">THE PROBLEM</a></li>
<li><a href="#" class="MenuBarItemSubmenu">THE SOLUTION</a>
<ul>
<li><a href="solution.overview.html">overview</a></li>
<li><a href="solution.structure.html">structure</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">PROGRAMS</a>
<ul>
<li><a href="parentcollege.html">parent college</a></li>
<li><a href="mentor.html">MENTOR program</a></li>
<li><a href="farming.html">urban farming</a></li>
<li><a href="afterschool.html">CHARTER AFTER SCHOOL</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">LOCATIONS</a>
<ul>
<li><a href="location.fulton.html">fulton county ga</a></li>
<li><a href="location.haiti.html">haiti</a></li>
<li><a href="location.tribe.html">native american tribe</a></li>
</ul>
</li>
<li><a href="news.html">NEWS|RESOURCES</a></li>
<li><a href="contact.html">CONTACT US</a></li>
<li><a href="#">DONATE</a></li>
</ul>
</div>
<div class="style3" id="mainContent">
<div align="left" class="style4">
<p class="style5">MENTOR PROGRAM</p>
<div id="TabbedPanels2" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
<li class="TabbedPanelsTab" tabindex="0">PROGRAM DIRECTOR</li>
<li class="TabbedPanelsTab" tabindex="0">L2G CERTIFICATION</li>
<li class="TabbedPanelsTab" tabindex="0">PHOTO GALLERY</li>
<li class="TabbedPanelsTab" tabindex="0">HIGH SCHOOL ACADEMIC MENTOR</li>
<li class="TabbedPanelsTab" tabindex="0">COMMUNITY-LEADER MENTOR</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<blockquote>
<p><em>“Those who have the ability, have the responsibility”</em></p>
<p><u>Avenue of attention:</u> <strong> MENTOR PROGRAM</strong> <br />
Unites local society, by focusing the <u>attention</u> of the community’s talent, on children (ages 7 – 12) who are in need of positive role models. </p>
<p>Two levels of involvement: </p>
<ol>
<li>High School Academic Mentors</li>
<li>Community-Leader Mentors</li>
</ol>
<p><u>Program title:</u> <strong>Talent 2 Kids</strong> </p>
<p><u>Why Program Important</u><strong>:</strong> </p>
<ol>
<ul>
<li><strong>Motivates</strong> children by providing successful, caring role models into their lives, and in accordance, exposing them to realistic paths towards financial success. </li>
<li>High school juniors and seniors on the honor roll are eligible to tutor elementary school children, utilizing their skills in helping with homework and comprehension.</li>
<li>Community business leaders will act as “big brother/big sisters,” mentoring and monitoring a child’s well being and academic progress. Also, sharing career information and the associated path to success, along with teaching real-life problem solving skills.</li>
</ul>
</blockquote>
</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
<div class="TabbedPanelsContent">Content 5</div>
<div class="TabbedPanelsContent">Content 6</div>
</div>
</div>
<p> </p>
</div>
<p> </p>
<p> </p>
</div>
<div id="footer">
<table width="1200" border="0">
<tr>
<td><div align="left"><a href="parentcollege.html">parent college</a></div></td>
<td><div align="center"><a href="mentor.html">MENTOR program</a></div></td>
<td><div align="center"><a href="farming.html">urban farming</a></div></td>
<td><div align="right"><a href="afterschool.html">charter after school</a></div></td>
</tr>
</table>
<p align="center" class="style2">A NON-PROFIT ORGANIZATION, EMPOWERING COMMUNITIES TO MOTIVATE THEIR CHILDREN, CREATING LASTING CHANGE</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels2");
//-->
</script>
</body>
</html> -
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! -
Hi,
I know this has been asked previously and I have gone thorugh the posts day after day trying to figure them but am having no luck at all.
Would appreciate someone in the know looking at my code and pointing me in the right direction..
I have an admin section to my site which contains 8 Spry tabs, each one containing a form that I can sue to update my database. I am trying to get the "Submit" button to return me to the tab I was working on but so far either get returnd to the default page or the tabs themselves stop working.. Each seperate tab will have it's own form and so far cannot get even one to work . Can someone advise please.. code below for my admin page. The code I have inserted relating to the Spry tabs I have placed in bold here ..
Any help will be greatly appreciated..
Regards,
gyesdahl
***************** CODE*************
<?php require_once('../Connections/la.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
return $theValue;
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form2")) {
$insertSQL = sprintf("INSERT INTO days (name) VALUES (%s)",
GetSQLValueString($_POST['day'], "text"));
//////////// MY INSERT //////////////////////
$tabToShow = 7; // 2 = 3rd tab
mysql_select_db($database_la, $la);
$Result1 = mysql_query($insertSQL, $la) or die(mysql_error());
$insertGoTo = "admin.php";
if (isset($_SERVER['QUERY_STRING'])) {
$insertGoTo .= (strpos($insertGoTo, '?')) ? "" : "";
$insertGoTo .= $_SERVER['QUERY_STRING'];
header(sprintf("Location: %s", $insertGoTo));
mysql_select_db($database_la, $la);
$query_days = "SELECT days.name FROM days";
$days = mysql_query($query_days, $la) or die(mysql_error());
$row_days = mysql_fetch_assoc($days);
$totalRows_days = mysql_num_rows($days);
?><!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"><!-- InstanceBegin template="/Templates/sub.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Grabs the values of the URL parameters for the current URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
@import url("../la.css");
body {
background-color: #000033;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #CC6666;
.style1 {font-size: 12px}
.links {color: #CCCC66}
-->
</style>
<link href="backup/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="65%" height="430" border="3" align="center" bordercolor="#666666" bgcolor="#FFFFFF">
<tr>
<td valign="top"><table width="100%" height="134" border="0" align="center" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<tr>
<td width="523" height="72" align="center" valign="top"><div align="left"><img src="../Images/logo.jpg" width="259" height="72" /></div></td>
<td width="1" height="72"> </td>
<td width="200
" height="72" border="2" bordercolor="#000033"><div align="center"><img src="images/la<?php echo rand(1,10); ?>.jpg" width="159" height="72" /></div></td>
</tr>
<tr align="center" valign="top">
<td height="23" colspan="3" bgcolor="#993300"><div align="center" class="links"><a href="../index.php">Home</a> | About Us | Contact Us | Tours | Air Charter | Managed Properties
<div align="right" style="font-size: 8pt;">
<div align="center"><b><?php echo date("l d M Y"); ?></b></div>
</div>
</div></td>
</tr>
<tr align="center" valign="top">
<th height="17" colspan="3" background="backup/images/sub_feature.jpg"> </th>
</tr>
</table>
<hr align="center" width="100%" size="2" class="brown" />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="610" valign="top"><!-- InstanceBeginEditable name="Sub_main" -->
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">View Tours</li>
<li class="TabbedPanelsTab" tabindex="0">Create Tour</li>
<li class="TabbedPanelsTab" tabindex="0">Delete Tour</li>
<li class="TabbedPanelsTab" tabindex="0">Add Country</li>
<li class="TabbedPanelsTab" tabindex="0">Inclusions</li>
<li class="TabbedPanelsTab" tabindex="0">Exclusions</li>
<li class="TabbedPanelsTab" tabindex="0">Currency</li>
<li class="TabbedPanelsTab" tabindex="0">Days</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" style="display: none">Content 1</div>
<div class="TabbedPanelsContent" style="display: block">Content 2</div>
<div class="TabbedPanelsContent" style="display: none">Content 3</div>
<div class="TabbedPanelsContent" style="display: none">Content 4</div>
<div class="TabbedPanelsContent" style="display: none">Content 5</div>
<div class="TabbedPanelsContent" style="display: none">Content 6</div>
<div class="TabbedPanelsContent" style="display: none">Content 7</div>
<div class="TabbedPanelsContent" style="display: none">
<form action="admin.php" method="post" name="form2" id="form2">
<table align="center">
<tr valign="baseline">
<td nowrap="nowrap" align="right">Day:</td>
<td><p>
<input type="text" name="day" value="" size="32" />
</p>
<p>
<input type="submit" name="button" id="button" value="Submit" />
</p></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right"> </td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form2" />
</form>
<p> </p>
ontent 8</div>
</div>
</div>
<div align="center"></div>
<script type="text/javascript">
HAVE TRIED BOTH OF THE BELOW CODES WITH NO RESULTS. EITHERE RETURNS TO DEFAULT (0) TAB OR THE TABS STOP WORKING
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab:<?php echo($tabToShow);?> });
//-->
</script>
<script type="text/javascript">
<!--
//var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.panel ? params.panel :7 )});
//-->
</script>
<!-- InstanceEndEditable --></td>
</tr>
</table>
<p> </p></td>
</tr>
<tr>
<td valign="top"><div align="center" class="style1">Copyright © 2009 Leisure Africa - All Rights Reserved</div></td>
</tr>
</table>
<p> </p>
</body>
<!-- InstanceEnd --></html>
<?php
mysql_free_result($days);
?>Hi David,
Many thanks for replying to my post and the time taken. I have tried your advice but my tabs are not working. Seems like everything I try ends up in this state Have checked the submit format as POST
I added the code and when the page loads the tabs are non-active.. code below with added parts in bold
***** code*****
<?php require_once('../Connections/la.php'); ?>
<?php
if (isset($_POST['tab']) && !empty($_POST['tab'])) {
$tabToShow = $_POST['tab'];
} else {
$tabToShow = 0;
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
return $theValue;
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form2")) {
$insertSQL = sprintf("INSERT INTO days (name) VALUES (%s)",
GetSQLValueString($_POST['day'], "text"));
//////////// MY INSERT //////////////////////
$tabToShow = 7; // 2 = 3rd tab
mysql_select_db($database_la, $la);
$Result1 = mysql_query($insertSQL, $la) or die(mysql_error());
$insertGoTo = "admin.php";
if (isset($_SERVER['QUERY_STRING'])) {
$insertGoTo .= (strpos($insertGoTo, '?')) ? "" : "";
$insertGoTo .= $_SERVER['QUERY_STRING'];
header(sprintf("Location: %s", $insertGoTo));
mysql_select_db($database_la, $la);
$query_days = "SELECT days.name FROM days";
$days = mysql_query($query_days, $la) or die(mysql_error());
$row_days = mysql_fetch_assoc($days);
$totalRows_days = mysql_num_rows($days);
?><!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"><!-- InstanceBegin template="/Templates/sub.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Grabs the values of the URL parameters for the current URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
@import url("../la.css");
body {
background-color: #000033;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #CC6666;
.style1 {font-size: 12px}
.links {color: #CCCC66}
-->
</style>
<link href="backup/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="65%" height="430" border="3" align="center" bordercolor="#666666" bgcolor="#FFFFFF">
<tr>
<td valign="top"><table width="100%" height="134" border="0" align="center" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<tr>
<td width="523" height="72" align="center" valign="top"><div align="left"><img src="../Images/logo.jpg" width="259" height="72" /></div></td>
<td width="1" height="72"> </td>
<td width="200
" height="72" border="2" bordercolor="#000033"><div align="center"><img src="images/la<?php echo rand(1,10); ?>.jpg" width="159" height="72" /></div></td>
</tr>
<tr align="center" valign="top">
<td height="23" colspan="3" bgcolor="#993300"><div align="center" class="links"><a href="../index.php">Home</a> | About Us | Contact Us | Tours | Air Charter | Managed Properties
<div align="right" style="font-size: 8pt;">
<div align="center"><b><?php echo date("l d M Y"); ?></b></div>
</div>
</div></td>
</tr>
<tr align="center" valign="top">
<th height="17" colspan="3" background="backup/images/sub_feature.jpg"> </th>
</tr>
</table>
<hr align="center" width="100%" size="2" class="brown" />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="610" valign="top"><!-- InstanceBeginEditable name="Sub_main" -->
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">View Tours</li>
<li class="TabbedPanelsTab" tabindex="0">Create Tour</li>
<li class="TabbedPanelsTab" tabindex="0">Delete Tour</li>
<li class="TabbedPanelsTab" tabindex="0">Add Country</li>
<li class="TabbedPanelsTab" tabindex="0">Inclusions</li>
<li class="TabbedPanelsTab" tabindex="0">Exclusions</li>
<li class="TabbedPanelsTab" tabindex="0">Currency</li>
<li class="TabbedPanelsTab" tabindex="0">Days</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" style="display: none">Content 1</div>
<div class="TabbedPanelsContent" style="display: block">Content 2</div>
<div class="TabbedPanelsContent" style="display: none">Content 3</div>
<div class="TabbedPanelsContent" style="display: none">Content 4</div>
<div class="TabbedPanelsContent" style="display: none">Content 5</div>
<div class="TabbedPanelsContent" style="display: none">Content 6</div>
<div class="TabbedPanelsContent" style="display: none">Content 7</div>
<div class="TabbedPanelsContent" style="display: none">
<form action="admin.php" method="post" name="form2" id="form2">
<input name="tab" type="hidden" value="7" /> <table align="center">
<tr valign="baseline">
<td nowrap="nowrap" align="right">Day:</td>
<td><p>
<input type="text" name="day" value="" size="32" />
</p>
<p>
<input type="submit" name="button" id="button" value="Submit" />
</p></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right"> </td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form2" />
</form>
<p> </p>
ontent 8</div>
</div>
</div>
<div align="center"></div>
<script type="text/javascript">
<!--
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab:<?php echo $tabToShow;?> });
//-->
</script>
<!-- InstanceEndEditable --></td>
</tr>
</table>
<p> </p></td>
</tr>
<tr>
<td valign="top"><div align="center" class="style1">Copyright © 2009 Leisure Africa - All Rights Reserved</div></td>
</tr>
</table>
<p> </p>
</body>
<!-- InstanceEnd --></html>
<?php
mysql_free_result($days);
?> -
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>
<!-- /* TabbedPanelsTabGroup */ #TabbedPanels2 .TabbedPanelsTabGroup { top: 1px; left: 0px; font-family: inherit; font-weight: inherit; font-size: inherit; color: #000000; background-color: transparent; border-left: solid 0px #000000; border-bottom: solid 0px #000000; border-top: solid 0px #000000; border-right: solid 0px #000000; padding: 0px 0px 0px 0px; } /* TabbedPanelsTab */ #TabbedPanels2.TabbedPanels .TabbedPanelsTab, #TabbedPanels2.VTabbedPanels .TabbedPanelsTab { font-family: inherit; font-weight: normal; font-size: 10px; color: #ffffff; background-color: #009900; border-left: solid 1px #cccccc; border-bottom: solid 1px #999999; border-top: solid 1px #999999; border-right: solid 1px #999999; padding: 4px 10px 4px 10px; } #TabbedPanels2.TabbedPanels .TabbedPanelsTab a, #TabbedPanels2.VTabbedPanels .TabbedPanelsTab a { font-family: inherit; font-weight: normal; font-size: 10px; color: #ffffff; } /* TabbedPanelsTabHover */ #TabbedPanels2.TabbedPanels .TabbedPanelsTabHover, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover { font-family: inherit; font-weight: inherit; font-size: inherit; color: #ffffff; background-color: #33cc00; border-left: solid 1px #cccccc; border-bottom: solid 1px #999999; border-top: solid 1px #999999; border-right: solid 1px #999999; padding: 4px 10px 4px 10px; } #TabbedPanels2.TabbedPanels .TabbedPanelsTabHover a, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover a { font-family: inherit; font-weight: inherit; font-size: inherit; color: #ffffff; } /* TabbedPanelsTabSelected */ #TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected { font-family: inherit; font-weight: inherit; font-size: 12px; color: #ffffff; background-color: #339933; border-left: solid 1px #cccccc; border-bottom: solid 1px #eeeeee; border-top: solid 1px #999999; border-right: solid 1px #999999; padding: 4px 10px 4px 10px; } #TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected a, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected a { font-family: inherit; font-weight: inherit; font-size: 12px; color: #ffffff; } /* TabbedPanelsTabFocused */ #TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused { font-family: inherit; font-weight: inherit; font-size: inherit; color: #ffffff; background-color: #00ff00; border-left: solid 1px #cccccc; border-bottom: solid 1px #eeeeee; border-top: solid 1px #999999; border-right: solid 1px #999999; padding: 4px 10px 4px 10px; } #TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused a, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused a { font-family: inherit; font-weight: inherit; font-size: inherit; color: #ffffff; } /* TabbedPanelsContentGroup */ #TabbedPanels2 .TabbedPanelsContentGroup { font-family: inherit; font-weight: inherit; font-size: inherit; color: #000000; background-color: #eeeeee; border-left: solid 1px #cccccc; border-bottom: solid 1px #cccccc; border-top: solid 1px #999999; border-right: solid 1px #999999; padding: 0px 0px 0px 0px; } /* TabbedPanelsContentVisible */ #TabbedPanels2 .TabbedPanelsContentVisible { font-family: inherit; font-weight: inherit; font-size: inherit; color: #000000; background-color: transparent; border-left: solid 0px #cccccc; border-bottom: solid 0px #cccccc; border-top: solid 0px #999999; border-right: solid 0px #999999; padding: 4px 12px 4px 12px; } #TabbedPanels2.BTabbedPanels .TabbedPanelsTab { border-bottom: solid 1px #999999; border-top: solid 1px #999999; } #TabbedPanels2.BTabbedPanels .TabbedPanelsTabSelected { border-top: solid 1px #999999; } #TabbedPanels2.VTabbedPanels .TabbedPanelsTabGroup { width: 10em; height: 20em; top: 1px; left: 0px; } #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected { background-color: #339933; border-bottom: solid 1px #eeeeee; } -->
<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 -
Thanks in advance to anyone who can help. I'm having a problem with my spry tabbed panel. It works but the actual CSS isn't working on the spry. The panel goes down onto the content.
Here is a screen cap: http://img32.imageshack.us/img32/2598/53451133.jpg
Coding:
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - 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.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #CCC;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 4px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: absolute;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;Hi Ben,
I creat a new page ( a simple page...):
http://dev.achab.it/test/test.htm
Our web-graphics are insert into
<script type="text/javascript" src="../common/js_func/parameters.js"></script>
the SpryTabbedPanels.js scripts.
On the new simple, you can click to 4 Tabs on the left.
If you want to see the 5 or 6 content tab you can click the label into the 3 or 5 content tab.
When you click on the label "here" on the 3° Tab (for example), you can see the content change and the "Tab 3" is not selected.
I'd like to change the content and leave the "Tab 3" selected.
I hope in your help :-)
thank in advance
regards
Stefano -
Spry Tabbed Panel obj Qs style
Spry Tabbed Panel obj
TAB NAMES how rather left-aligned(default) get centered?
may have an image in a tab name?
How tabs from left aligned extent to get all space(width) , all get bigger in width and aligned(the tabs) so tabbed area starts with: start of first tab and end with end of last tab?Change this rule:
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 100px;
text-align: center;
You will notice that I also added a width. Spry Tabbed Panel Tabs normally depend on the width of the text for their own dimension, so you need to add a width for the text to center in.
2. Of course you can have an image. You are essentially working with a list structure; anything you can have in a list you can have on a tab.
3. Give each tab li an id and "work out" percentage widths. Then, add selectors that assign those widths to each id'd list item. Caveats: you might want to do away with left and right padding in tabs if you are using percentages, because they will throw you off your count.
If you are using a static width, you could use pixel widths, but I think percentages are a little cleaner. Here's what your code might look like:
<li id="aboutustab" class="TabbedPanelsTab" tabindex="0">About Us</li>
<li id="qualitycontroltab" class="Tabbed PanelsTab" tabindex="0">Quality Control Department</li>
And corresponding CSS might look like this (if these were the only tabs!):
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 100px;
text-align: center;
#aboutustab.TabbedPanelsTab {
width: 30%;
#qualitycontroltab.TabbedPanelsTab {
width: 69%;
/*Note: be sure to put these BELOW the original .TabbedPanelsTab selector. ALSO NOTE that these are id and class on the SAME list item, so do not put a space between #aboutustab and .TabbedPanelsTab */
I guesstimated the widths of the text for the tabs by throwing a grid over my page and adjusting the grid to show only ten grid-squares over the entire width of the panels. If you put all your tabs and tab labels in, you can then "read" an approximate width.
Then I summed the 'lengths' of the tab labels (in this case, I got aboutustab=1, qualitycontroltab=2.3, total=3.3) and divided each width by the total (small divided by large) to get the percentage for each width.
Be sure you don't add to more than 100%, or it will break.
Okay, if you simply want your tabs to meet the ends of your TabbedPanels, and don't care particularly about the width of each tab, give the width in the principal style rule (.TabbedPanelsTab) a simple percentage of the width of the Panels. If you have 5 tabs, each will be 20% wide (adjust for borders, etc.).
Beth -
Hi,
I've paced a Spry tabbed panel into a page below 3 thumbnails of images, you click on the tab and a larger image drops down, that works just fine but I can't figure out how to have the contents of all tabs to be empty on load so no large images in the content area are visible, is this possible?
Thanks in advance
PeteSorry Ben, don't have this page uploaded yet but I've included the code from the HTML page.
Thanks Pete
<!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=iso-8859-1" />
<title>Web design professional web site design & development Auckland Tauranga Wellington Filemaker Pro relational databases by Trident Solutions</title>
<meta name="Description" content="Trident Solutions build professional websites and develop relational databases for clients in New Zealand and Australia." />
<meta name="Keywords" content="Web site design, New Zealand Australia, Filemaker Pro databases design company," />
<meta name="Copyright" content="Copyright Trident Solutions 2010. All rights reserved" />
<meta name="Publisher" content="web design" />
<meta name="Distribution" content="Global" />
<meta name="Revisit" content="10 days" />
<meta name="Language" content="English" />
<meta name="Rating" content="General" />
<link href="css_files/styles.css" rel="stylesheet" type="text/css" />
<link href="css_files/body_class.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position:absolute;
width:200px;
height:21px;
z-index:27;
left: 689px;
top: 616px;
background-color: #FF0000;
#apDiv3 {
position:absolute;
width:77px;
height:30px;
z-index:1;
#apDiv4 {
position:absolute;
width:83px;
height:26px;
z-index:1;
top: 181px;
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:27;
left: 68px;
top: 265px;
body {
background-color: #FFF;
</style>
<script src="SpryAssets/SpryCollapsiblePanel2.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="services">
<div id="centered">
<div id="container">
<div id="buttons">
<a class="home" href="index.html">Home</a>
<a class="services" href="services.html">services</a>
<a class="clients_examples" href="client_examples.html">client examples </a>
<a class="filemaker_pro_database" href="filemaker_pro_database.html">databases</a>
<a class="company_info" href="company_info.html">company info </a>
<a class="contact_us_feedback_form" href="contact_us_feedback_form.html">contact us feedback form</a>
<a class="photo_gallery" href="photo_gallery.html" target="_blank">photo gallery</a> </div>
<div id="header_text">
<h1>Web design & development<br />
Filemaker Pro relational databases</h1>
<h1>Digital photography</h1>
</div>
<div id="masthead"></div>
<div id="apDiv2"></div>
<div id="rh_title_heading"></div>
<div id="services_table">
<div id="web_title2">
<h2>Services provided by Trident
</h2>
<div id="dotted_line_top"></div>
</div>
<p> </p>
<p><img src="images/http_icon.jpg" alt="web icon" width="124" height="94" class="img" /><img src="images/database_icon.jpg" alt="filemaker icon" width="124" height="94" class="img" /><img src="images/digital_camera.jpg" alt="photos" width="124" height="94" class="img" />
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="services_image3">
<p><img src="images/sydney_cove_tn.jpg" alt="" width="181" height="121" class="img" /><img src="images/mount_tn.jpg" width="181" height="121" class="img" /><img src="images/bridge_tn.jpg" width="181" height="121" class="img" /></p>
<p> </p>
</p>
<p><br />
</p>
</div>
<p> </p>
<div id="image_3_large">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent1">Content 1</div>
<div class="TabbedPanelsContent2">Content 2</div>
<div class="TabbedPanelsContent3">Content 3</div>
</div>
</div>
<p> </p>
</div>
<p> </p>
</div>
<div id="rh_text_box_css">
<h3>CSS </h3>
<p class="main_text"><strong>CSS</strong> stands for <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets<br />
Styles define how to display HTML elements<br />
Styles were added to HTML 4.0 to solve a problem<strong><br />
</strong>External Style Sheets can save a lot of work<br />
External Style Sheets are stored in <strong>CSS files</strong></p>
<div id="read2"><a href="http://www.w3schools.com/css/css_intro.asp" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
<p class="main_text"> </p>
</div>
<div id="index_lh_top_box"></div>
</div>
<div id="back_shadow">Content for id "back_shadow" Goes Here</div>
<p> </p>
<div id="rh_text_box_flash"><span class="main_text_rh_box">
<h3 class="home" id="sprytrigger1"><strong>Flash Animation</strong></h3>
</span><span class="main_text"><span id="sprytrigger2">Web sites come</span> to life with the power of Flash <br />
animation, display interactive photo
</span><span class="main_text"> how to albums, <br />
diagrams with movement and tutorials can all<br />
be done in Flash</span><span class="main_text">
<p class="main_text"> </p>
</span>
<div id="read1"><a href="http://www.adobe.com/products/flash/whatisflash/" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
</div>
<div id="rh_text_box_seo">
<h3>Search Engine optimisation (SEO) </h3>
<p class="main_text">As an Internet marketing strategy, SEO <br />
considers how search engines work and what <br />
people search for. Optimising a web site primarily <br />
involves editing its content and HTML and <br />
associated coding to both increase <br />
the site's ranking with search engines. </p>
<div id="read3"><a href="http://en.wikipedia.org/wiki/Search_engine_optimization" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
</div>
<div id="rh_text_xhtml">
<div id="read4"><a href="http://www.w3schools.com/xhtml/xhtml_intro.asp" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
<h3><span class="main_text_rh_box">XHTML</span> What Is XHTML?</h3>
<span class="main_text">XHTML stands for EXtensible HyperText Markup<br />
Language<br />
XHTML is almost identical to HTML 4.01<br />
XHTML is a stricter and cleaner version of HTML<br />
XHTML is HTML defined as an XML application<br />
XHTML is a W3C Recommendation</span>
<p> </p>
</div>
<div id="footer_text">Copyright 2010. Trident Solutions. Comments regarding this site, <span class="class1"><a href="mailto:[email protected]">please contact the web master.</a></span></div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html> -
Spry Tabbed Panels - 2 lines of tabs
I have a "Spry Tabbed Panels" widget on one of my site's
pages and it works great. Except there are now more tabs than will
fit side-by-side, so the last one gets moved to a new line, below
the first 4. That's not that big a deal, except there's now a large
blank space underneath and to the right of the top-row tabs.
Is there any way to edit the CSS or page's codes (like adding
an extra DIV surrounding the widget) so the now empty space gets a
background color matching inactive tabs?
To replicate this: create a fixed-width tabbed panels widget
and simply add more tabs than there will fit in the widget's width.
Any help on this matter would be appreciated.
Edit: I've made a slight change to the CSS file so the tabs
now have a fixed width, filling up 1/3rd of the widget's width
each. I'd like to have the empty space look better, but this'll do
for now.First add an ID to the tab as follows or similar
<h2 id="second">Tab 2</h2>
Then add a style rule to add a background image as follows or similar
.TabbedPanelsTab#second {
background:url(myImage.gif);
Gramps
Maybe you are looking for
-
How I fixed Finder Crash, dmg's not opening and 2 apps not working?
I have to say a big thank you to this forum because I was having some big problems and was told to do a fresh install which I did but then when I migrated my main account over the problem kept happening. My Quicktime and itunes would not work and fin
-
Webmail in Safari don't work after updating to iOS6.
Webmail in Safari don't work after updating to iOS6. Logging on to office webmail account are redirected. Webmail works with Google Chrome, but it doesn't sove the issue with Safari. Any suggestions on how to configure Safari?
-
Unix command output to a TextArea
Hi, I would like to use the contents of the variable >>line<< to be displayed in a JTextArea in another class within the same package. Code: public class HostAction implements ActionListener { static String line; public void actionPerformed(ActionEve
-
Do i have to use power adapter to charge laptop?
We have an 11-inch MacBook Air (mid-2012) which came at the time with a power cord permanently (apparently) attached to a heavy (annoying) power adapter, which then becomes the 5 pin plug to charge the laptop. Is there a way to charge this without
-
Disable SSL 2.0 on Windows 2008 R2
Hi. Can anyone give me a step by step on how to disable SSL 2.0 on IIS 7.5 please? I cannot find an article for it and those refering to IIS 7.0 do not seem to work. Regards, Morris Best Regards, Morris Fury AFRIDATA.net