Spry Tabbed panels content loading

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

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

Similar Messages

Dividing Spry Tabbed Panels content area into columns?

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

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

Anchor tag inside Spry Tabbed Panel Content

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

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

Spry Tabbed Panel Content editable region not functioning

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

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

Spry Tabbed Panels content open verticaly on web site opening?

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

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

</div>
I hope this helps.
Ben

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

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

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

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

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

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

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

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

Spry Tabbed Panels: Title Tabs shift left, Content Tabs stay positioned correctly, right.

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

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

Using fade/appear transition in spry tabbed panels

I've implemented the fade/appear transition into a spry
tabbed panel set up. The effect works in that when one clicks on a
tab, the content in that panel will "appear" in using a opacity
transition.
The problem I am encountering is a pre-load of the content..
almost a flicker at 100% opacity... and then the transition from 0%
to 100% resumes. This flicker effect or visible pre-load of the
content really takes away from the effect of the transition.
Does anyone know how to solve this or correct my set up?
I'm using the following...
<li class="TabbedPanelsTab"
onclick="MM_effectAppearFade('fade-guestrooms', 1000, 0, 100,
false)" tabindex="0" onfocus="this.blur()">GUEST
ROOMS</li>

Yes this was a tough one to pull off in Spry. I have worked up a solution that fades between the panels. Please have a look at the following post:
http://blog.infrontweb.com/ajax/spry/spry-tabbed-panel-fade-transition/
Good Luck

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>

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 cat

G'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!

Datasets in Spry Tabbed Panels

Hey guys,
I have a spry tabbed panel in which the contents are iframes that load a spry xml dataset. The problem I am encountering is that while the "default tab" spry loads...when toggling the other tab I get the errors
Failed to retrieve data set (pagingInfoDs) for spry:repeat
FF Firebug shows me
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMScreen.width]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://192.168.0.1:93/vadmin/includes/cms.js :: BrowserInfo :: line 51" data: no]among other things...
Now I'm developing on localhost so I'm not able to show an example...the thing is if I were to change the default tab (from 0 to 1) the default tab now will work whislt the other would trigger the error. This means that some thing with the tab NOT being "open" or "shown" is affecting the dataset. I find this wierd as the datasets are loading within iframes...
Any idea as to what can be causing this reaction in the tabs?

well the code to the spry tabbed panel
<div class="contentList">
<div class="TabbedPanels" id="TabbedPanels_links">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" title="View Webpages">View Webpages</li>
      <li class="TabbedPanelsTab" title="View Non-HTML Docs">View Non-HTML Docs</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
        <iframe src="../../../../?task=menus&a=browse&menu_id=true" width="100%" height="500" ></iframe>
      </div>
      <div class="TabbedPanelsContent"> <iframe src="../../../../?task=docs&a=browse&doc_id=true" width="100%" height="500" ></iframe></div>
    </div>
</div>
</div>
</fieldset>
<script type="text/javascript">var TabbedPanels_links = new Spry.Widget.TabbedPanels("TabbedPanels_links", { defaultTab: 2 });</script>
If I were to switch iframe sources the one thats in the "default" tab will list while the the tab that isn't will error
This was the first error
uncaught exception:
[Exception... "Component returned failure code: 0x80004005
(NS_ERROR_FAILURE) [nsIDOMScreen.width]" nsresult: "0x80004005
(NS_ERROR_FAILURE)" location: "JS frame ::
http://orin.mshome.net:93/vadmin/includes/cms.js :: BrowserInfo :: line
51" data: no]
After that its more that the dataset wasn't a property

Set Default Spry Tabbed Panel As Close Until Mouse Over

Dear All,
Is there a way to set the default spry tabbed panel to be closed when the page load untilI mouse over it??
here is the link to my page http://www.senhuiauto.com/model_code_link.html. As you can see, it roll down by default.
How to fix??
Below is my SpryTabbedPanel.js
var Spry;
if (!Spry) 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.bindings = [];
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
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.onTabClick = function(e, tab)
this.showPanel(tab);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.ENTER_KEY = 13;
Spry.Widget.TabbedPanels.SPACE_KEY = 32;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))
return true;
this.showPanel(tab);
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
return false;
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) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { 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);

You may be better off asking this question over at the forum dedicated to the Spry Widgets:
Spry forum.

Spry Tabbed Panel 2.0 Problem

I have used the Spry Tabbed Panel 2.0 in DWCS5 and 6 html pages before without a problem. However, last week I tried to add a panel to an html page and while it works lovally in live view locally, I get errors that appear to be a path problem, but I cannot figure out the problem. You can view a plain html page with nothing but the Tabbed Panels 2.0 created with DWCS6 and see the errors at http://www.scotchplainsnj.gov/tabs.html
When the page loads it gives errors for each of the .js modules as it tries to load them. I have replicated this problem in CS5 and 6 in Windows 7. I also saw a comment in another forum where someone else was also experiencing the same problem and error sessages.
SpryPanelSet.js requires SpryWidjet.js
The prograns are in the default directories with no changes.
Any help would be appreciated.
Morris

1)
I can't really answer that, so what I would suggest is posting that answer in the correct forums: http://forums.adobe.com/community/labs/widgetbrowser you might get more luck there with finding an answer to your question
I do share the same feelings about this issue, I think allot of users would still love to be able to configure the widgets through DW. But the issue is that the widget browser is based on the Open Ajax Metadata specification which does not include such functionality in to its specification.
Aleast, there is no way for developers to "tell" Dreamwaver which markup they should add to create a new panel or instance. While it would nice to have i doubt its techically possible at this point. But those are just my 2 cents =
2)
The tabbed panel supports of allot different markup. But they can only ship one markup with the Widget Browser. As you will see in the SpryTabbedPanels documentation you can specify the tabs and content panels manually by adding the CSS selector for those in to the constructor of the widget: http://labs.adobe.com/technologies/spry/ui/samples/tabbedpanels2/SpryTabbedPanels2_sample1 .html
3)
There is no way to specify "default" settings for all widgets. As the developer of the widget decides the markup that ships with the widget. As for DW, you can specify the default document type through the preferences panel > new document > Default Document Type ?
While the responses of on these user to user forums by the Adobe product team members might seem minimal this does not mean they do not monitor the discussions that occure here. So it's always wise to speak you mind and let the community and product team know how you feel.
~ Arnout

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
>

Spry Tabbed panels content loading

Similar Messages

Maybe you are looking for