Help! Spry Tabbed Panels

Hi,
I have a problem with my spry tabbed panels. The default tab
is set to be the 1st tab, when I move to 2nd tab and navigate
through the content, as the page refreshes, and before it is fully
loaded it shows the content of the first tab for about 20 seconds
or so....then the page finally goes to the desired content on the
2nd tab....
How can I make it so this does not happen and it looks like a
smooth transition as I navigate through my pages?
Thanks,
Brandan98

I think that's the way Spry is programmed. Have you tried
posting on the
Spry forum? That might elicit more knowledgeable help.
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
Elevating Dreamweaver Widgets to a Higher Level
http://www.projectseven.com/products/tools/elevators
"Brandan98" <[email protected]> wrote in
message
news:fttlqs$b3m$[email protected]..
> Hi,
>
> I have a problem with my spry tabbed panels. The default
tab is set to be
> the
> 1st tab, when I move to 2nd tab and navigate through the
content, as the
> page
> refreshes, and before it is fully loaded it shows the
content of the first
> tab
> for about 20 seconds or so....then the page finally goes
to the desired
> content
> on the 2nd tab....
>
> How can I make it so this does not happen and it looks
like a smooth
> transition as I navigate through my pages?
>
> Thanks,
> Brandan98
>

Similar Messages

Help, Spry Tabbed Panels are causing links not to work

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

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

Help Using Spry tabbed panel as a menu.

Thanks in advance to all who take the time to read and any assistance you can offer.
I'm picking up where someone else started a website. They used Spry tabbed panels as a menu system (CS4). Each Panel is a top-level "menu" and when it opens, sub-menus (hyperlinks) come up vertically under the panel. I REALLY don't want to start over if I don't have to - need the site up and running - but cannot figure out how to make the "HOME" tabbed panel (the first one) actually take users back to the home page. For now, I've created a "submenu" (link) under HOME tabbed panel to help the user navigate back to the home page.
HELP?
http://www.orange.k12.nc.us/ec/beta/default.html

Thank you Gramps - for your prompt and helpful response! Your solution absolutely fixed the problem I asked about.
If I had followed forum advisories and asked the question correctly, the navigation on this website would probably be working perfectly by now. Your solution fixes the home page. Can you look at one more page and advise please??
On the "subpages" of this site, the same tabbed panel "fake menu" exists. I replaced the equivalent line of code in the template for those pages (at line 45) with what you gave me. I'm obviously missing something in the code to send the user back to the HOME page from these pages.
In the sample link below, you will be starting from a "subpage" of the site. Clicking on the "HOME" tab leads you not to the actual home page (default.html in the root directory) but to a default.html page within the subdirectory for the page you are on (which doesn't exist.) Can I add something to that line of code to get them back to the home page?
Again... thank you!!
http://www.orange.k12.nc.us/ec/beta/Students/Student_Resources.html

Spry Tabbed Panels Help

Greetings everyone:
I had an existing Spry tabbed panel with three tabs. I then
added a fourth tab and used the up arrow to move it to the number
one slot. It displays properly as far as the tab goes, but when the
page loads the original number one tab (now number two) is always
open.
How do I make the new number one tab the default for being
open when the page loads?
Thanks in advance for any help.
Glenn

Duh! (Smacks self in the forehead!)
How about in the property inspector - Default Panel.
Duh!
From reading all the purists posts on the board (Murray,
David and the rest of the gang) I immediately started looking for
this in the code and couldn't find it, so I posted the question.
I know, looking in the code is a good thing! :)
Thanks.
Glenn

Need help linking spry tabbed panel from external page

Could use some help. I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck. When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable. This is a key feature I need in a new site being developed.

I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck.
Have you tried http://foundationphp.com/tutorials/spry_url_utils.php ?
When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable.
Depending on what the code looks like, it can do all sorts of things.
Please be reminded that the best way for us to help you is by you supplying a link to your site with a one sentence description of the problem.
Gramps

Spry tabbed panels, all content showing on one page, please help?

Hi there,
I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DND Perspective</title>
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style></head>
<body>
<div align="center">
<p align="left" class="style4">DND </p>
</div>
<p align="left">
<img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" /> </p>
<p align="center">
<p align="center">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" >
    <li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
    <li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
    <li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent style1">
      <div align="center">
        <p class="style11">Welcome to DND </p>
        <p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
        <p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
        <p>Please visit our services page to discover all photography sessions we have available such as:</p>
        <p>Wedding Photography</p>
        <p> Engament Photos</p>
        <p>Senior Portraits </p>
        <p>Anniversary</p>
        <p>& More!!!</p>
        <p> </p>
      </div>
    </div>
    <div class="TabbedPanelsContent">
      <p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
    </div>
    <div class="TabbedPanelsContent">Under Construction...</div>
    <div class="TabbedPanelsContent">Under Construction....</div>
    <div class="TabbedPanelsContent style1">
<p>We hear at DND understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &
packages, custom videos, thank you cards and albums.</p>
           <hr width="50%" align="left" />
      <p><strong>Package 1 - $500.00</strong></p>
      <p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p><strong>Package 2 - $575.00</strong></p>
      <p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p><strong>Package 3 - $700.00</strong></p>
      <p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
           <hr width="50%" align="left" />
      <p><strong>Prints</strong>: (Fine Art High Quality)**</p>
      <p>Individual prices: 8"x10" = $12.99; 10"x13" = $19.99; 2 - 5"x7" = $12.99; 4 - 4"x6" = $11.99</p>
      <p>(Custom sizes available - Custom framing available)</p>
      <p><strong>Package 1:</strong></p>
      <p>3 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $50.00</p>
      <p><strong>Package 2:</strong></p>
      <p>5 - 8"x10"; 6 - 5"x7"; 6 - 4"x6" = $90.00</p>
      <p><strong>Package 3:</strong></p>
      <p>8 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $125.00</p>
      <p><strong>Package 4:</strong> (Basic Prints)</p>
      <p>Any 100 photos printed 4"x6" = $100.00</p>
           <hr width="50%" align="left" />
      <p><strong>Custom video:</strong>**</p>
      <p>Any 100 photos put to royalty-free music = $50.00</p>
          <hr width="50%" align="left" />
      <p><strong>Custom thank you cards for your guests:</strong>**</p>
      <p>300 cards - 4"x6" = $350.00</p>
      <p>100 cards - 4"x6" = $150.00</p>
     <hr width="50%" align="left" />
      <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
      <p>Bride & Groom Albums</p>
      <p>Parent Albums</p>
           <hr width="50%" align="left" />
      <p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
    </div>
    <div class="TabbedPanelsContent style5">
      <p> Contact DND Perspective:</p>
      <p>The best way to reach us is via email .</p>
      <p>You can alternately reach us anytime at ...!</p>
    </div>
    <div class="TabbedPanelsContent">
      <div align="center">
        <p><span class="style1">About Info</span></p>
        <p> </p>
      </div>
    </div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">

</script>
</body>
</html>

You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B

HELP WITH SPRY TABBED PANEL -

On one page I created a spry-tabbed panel with a distinctive look.
On another page, same website, I created another spry tabbed panel with its own distinctive look, its own color scheme.
On doing the second page I discovered I was also inadvertantly changing the color, boarders etc to the spry tabbed panel on my first page.
Don't want to do that.
How do I create a spry panel on 2 different pages within the same web site and let each have its own independent spry set of attributes
Howard Blume
[email protected]
max os x system10.6.6
dreamweaver 5

Hi Ken:
When I insert a new spry panel it appears with all the css from the other page.
When I began to make changes the other page reflexs those changes.
Don't know how to get a separate SpryCss sheet. Do you?

Spry Tab Panel is not working properly on remote server

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

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

How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?

I have 5 of them all containing nested Apdiv within nested ApDivs (a long storie ) that I would like to insert into 5 tabs in the Spry Tabbed Panel.
Please help.

"Hi Gramp,I realize I have made hard work for myself but I really don't know any better. I also realize now that taking on this project may have been a mistake :-)I taught myself how to use the design side of Dream Weaver. These five ApDivs were created in the content area of the spry tool and it worked fine. (yes a lot of work though)For the first time I looked at the code side. I wanted to try to bring a peace of code from another page for something unrelated and when it didn't work I took it out and without noticing, deleting a line from the Spry tool.Of course like a classic newbe I was working without a backup copy so here I am. Loosing hours of tedious work and on the verve of tears :-)I do have some questions though. My APDiv
What does "apDiv1" stands for and what does "My APDiv" stands for?Is the only thing I have to do is changing this line for my five ApDivs and paste it in the appropriate places in the code? Thanks again,Gilaad
Date: Sat, 16 Jun 2012 20:39:07 -0600
From: [email protected]
To: [email protected]
Subject: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
    Re: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
    created by Altruistic Gramps in Spry Framework for Ajax - View the full discussion
You have really made hard work for yourself by using APDiv's. I suppose it can be done, but I would not. To answer your question, I have create an example as per#apDiv1
My APDiv
Content 2
Tab 1
Gramps
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4498679#4498679
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4498679#4498679. In the Actions box on the right, click the Stop Email Notifications link.
     Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

Spry tabbed 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);
})(); // EndSpryComponent

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

Spry tabbed panels - Different Hover Class for each tab

Already posted this in the general Dreamweaver section, but just realized there was a specific Spry section. So, my apologies for the repost.
I'm setting up spry tabbed panels, and I'm wanting to use an image for each tab, with the text already on it. I've figured this much out by creating a different class for each in the spry tabbed panel css.
However, I'd also like to have a second hover image for each tab. I'm having trouble figuring out how to set up separate classes for each tab's hover state.
Any help?
Thanks.

Just in case you did not notice the announce at the top of this forum's main page, I have copied it here.
Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using the search functionality on forums you can easily find out if your question has been answered before. While you are in search, you can specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Yoru question can not be found in the existing documentation
Spry provides you with allot of documentation this can found on different locations. In the sidebar of this forum you can find a small summary of resources that will help you on your way.
If these options do not apply to your question, please be so kind to also supply the following information in your topic together with a clear description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example: Scroll down till you find the header "help", there you will see a Spry Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details.
by Arnout Kazemier at Oct 23, 2009 2:47 PM
landon_tc wrote:
Actually, I do remember posting that, and have updated it with what worked for me. However, I could not recall posting it in a specific ajax spry forum, so I assumed I just posted in the general forum. Hence the current situation.
Yeah and my name is not Ben Pleysier.
landon_tc wrote:
Any help with the current problem?
Please have a look at this thread http://forums.adobe.com/message/2662019#2662019
I hope this helps.
Ben Pleysier

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like it was all created on one page, plus mouse over doesnt work on them.
This started all of a sudden.
The entire website is a series of spry tabbed panels.
http://pacificlaser.com/const.html
if you click on General construction tab things work ok...
if you click on Machine control tab, mouse over doesnt work and all page content of each tab show through.
ive been looking for the answer for 4 months with no success.
Hope a fellow dreamwever-person can help
Thanks Rick

You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B

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

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

Multiple Spry tabbed panels?

Is it possible to have more than one set of Spry Tabbed
Panels .css rules, i.e., with different rules within the same web
site?
I'd like to have tabbed panels with differing heights or
widths, but if the dimensions (and, obviously, other rules) are
changed for one panel, it changes them for all panels within the
web site.

I would like to digg up this old post if possible and really looking for an answer asap!
Unfotunately the answer given here was pretty poor and didntreally help, hence the reason the user I believe went else where and got a simpler and more in depth answer in a non techie jargon from asktheecpers.com.
Anyway, my problem is slightly different but must be possible!!
I have one tabbed panel, but I have a fairly complex slanted tabs menu, I have done well so far to get it to work, however the final step I need to apply a slighly diffent hover class to on eof the tab items (the first one in the list has a flat left edge and not a slanted.)
The selcted and initial states are fine as I have applied a different class and therefore can apply a different image, however the hover class is applied dynamic throughthe JS (not my area of expertise!!) and so I need to create a 2nd hover class to apply to different list items within the same tabbbed group??
Please, please help!!
Regards,
Ryan.
Problem can be seen here, its the first tab that is the problem, its hover needs to be a different image (blue with straight left edge)
http://doosan.corporateprm.com/
Thanks

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

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

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

</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<style type="text/css">

</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>
    </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>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Help! Spry Tabbed Panels

Similar Messages

Maybe you are looking for