Height of tabbed panels
Is there any way of making the height of a panel equal to it's content? Its ridiculous that the panels set to the height of the panel with the longest content. Any help on this matter at all Thanks in advance
Hi
Please have a look to the following threads
Make the height of a tabbed panel content container adjust to the individual tab's content.
Tab panel - different lenght of text: possible?
Do let me know if you have any question.
Similar Messages
-
Adding a scroll bar to tabbed panel content?
I have set a specific height to tabbed panels and I don't
want them to expand according to content. Instead I want to add a
scroll bar to the tabbed panels. How can i do this?Sure it's possible.
Edit the TabbedPanelsContent class in the CSS file.
Add a specific height to it and then add an overflow:auto;
rule to it.
.TabbedPanelsContent {
padding: 4px;
overflow: auto;
height: 200px;
When styling Spry Widgets, for the most part, just think of
them as HTML. Add a height and a scrollbar just as you would to any
DIV.
Hope this helps,
Don -
Make the height of a tabbed panel content container adjust to the individual tab's content.
I am designing a site and on one page I am using two tabs to seperate two different kinds of content. One tab has more content and as such is longer on the page. But I noticed that MUSE uses which ever tab is the longest as the basis for how long the page is. This is fine while on that tab, but on the other tab it makes the page much longer (bunch of dead space) then it needs to be. Is there a way of getting around this or is this a limitation of muse?
Take a look at the page here and you will see what I mean. Click on cuff cases and scroll down and you will see what I mean.
http://pgl0.businesscatalyst.com/accessories---prince-gun-leather.htmlHi Lukewind,
This has come up in the forum archive. There is not currently a way to create a tabbed panel with adjustable/variable height content containers. This is not actually a bug in Muse, but it is a feature request. Please create an Idea topic for this feature in the Ideas for Features in Adobe Muse forum (http://forums.adobe.com/community/muse/ideas).
Here is the content from the archive request:
Have the depth of tabbed panels adjust to the size of the content.
The boxes in tabbed panels should be adjustable to the content rather than have all the tabs open in the same size as the biggest text box. -
Tabbed panel with adjustable/variable height based on content
Is there anyway that you can create a tabbed panel with adjustable/variable height based on content in each tab?
Abhishek,
Thanks for your reply, however, it is not working with Muse. I added the Javascript to the head section and adjusted iframe and it displays as a small square in the upper left hand corner, unable to view the whole page.
Inserted into head section --
<script type="text/javascript">
function resizeIframe(obj)
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
</script>
inserted as an html object --
<iframe name="MycoSmooth" src="http://www.mycosmooth.com" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Below is the result:
The purpose is to have an independent website run the blogging capabilities, since muse doesn't directly support blogging as of yet.
Since the site is on a different domain, I am running into cross domain issues and it won't get the height of the page. The methods that apparently work use php and I am unsure how that would work in muse, if at all. -
My tabbedpanel is located inside of an apdiv. I have set the height and width to both auto, as well as trying to set both at 500px like the apdiv it is in. Either way the tabbed panels is too long for the ap div. It never stays in the apdiv. Thank you in advance!
Without seeing the actual code, it's hard to say what's going wrong exactly.
Could you post a link to your site?
APDivs (css position:absolute divs) are by far and away the worst thing you can use to layout your website in DW. The vast majority of the time there is no need to deal with all of the inherant problems they bring to the party.
While the problems are not technically "errors" in how the position:absolute is supposed to work, a lot of their functionality is counter to the expected and takes a fair amount of research and understanding to get an APDiv based layout to function the way a designer would like. -
Spry Tab Panel is not working properly on remote server
Hello All,
I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
Here is the link
http://www.geftas.com/temaritestpage/about.html
Also I am uploading Css and html code below
Any help would be exteremely appreciated.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8"/>
<meta http-equiv="content-type" content="cache" />
<meta http-equiv="robots" content="INDEX,FOLLOW" />
<meta http-equiv="keywords" content="Enter Keywords"/>
<meta http-equiv="description" content="Description Here" />
<title>TEMARI&CO. | Business Strategists</title>
<link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html" class="current">ABOUT</a></li>
<li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
<ul>
<li><a href="#">Business Plan</a></li>
<li><a href="#">Marketing Plan</a></li>
<li><a href="#">Incorporation</a></li>
<li><a href="#">Accounting System</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">OUR PROCESS</a></li>
<li><a href="#">CAREERS</a> </li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="shadow" id="content">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">values</li>
<li class="TabbedPanelsTab" tabindex="0">people</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
</div>
</div>
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem n, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, , </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit a, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="legal">
<ul>
<li>Copyright © 2012 Temari&Co</li>
<li>| Privacy Policy |</li>
<li>Terms of Use</li>
</ul>
</div>
<div id="socialmedia">
<ul>
<li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
<li><img src="images/gicongri.png" width="20" height="20" alt="gicon"/></li>
<li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
<li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
</ul>
</div>
</div><!-- end footer-->
</div><!-- end wrapper-->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%;
height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
.TabbedPanelsTab {
position: relative;
float: left;
background-color: #FFF;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #666;
height: 30px;
width: 116px;
text-transform: uppercase;
text-align: center;
line-height: 30px;
margin: 0px;
padding: 0px;
.TabbedPanelsTabHover {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
.TabbedPanelsTabSelected {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
height: 30px;
width: 116px;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
background-color: #FFF;
height: 100%;
width: 824px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
.TabbedPanelsContent {
height: 100%;
width: 100%;
overflow:hidden;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
background-color: #EEE;
position: relative;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
.TabbedPanelsContent {
clear:both !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 744px;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;Hi
Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
The images have not been uploaded at all, the online CSS is the one without a link to the images
Regards
Adaan Pre-Media Services
For more image editing services follow us @
web designing services -
Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry
Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
And click on the "Using Spry.Utils.updateContent()"
The 3rd example shows how to use a fade transition whenever the content changes.
I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
Tabs code;
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab">
<table class="Button" >
<tr>
<td style="padding-right:0px" title ="Home">
<a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
</td>
</tr>
</table>
</li>
etc
etc
etc
and the panel code:
<div class="TabbedPanelsContent" id="Home">
CONTENT
</div>
I hoped i can use the example code from the link into my tabbed panels.
I thought this code:
onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
could be added to the tab code like this:
<a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
But the content doesnt fade...
I know i need to change the header etc.
The following is from the link:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquo Events</title>
<script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
<script src="../../../includes/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function FadeAndUpdateContent(ele, url)
try {
Spry.Effect.DoFade(ele,{ duration: 500, from: 100, to: 0, finish: function() {
Spry.Utils.updateContent(ele, url, function() {
Spry.Effect.DoFade(ele,{ duration: 500, from: 0, to: 100 });
}catch(e){ alert(e); }
-->
</script>
<style type="text/css">
/* IE HACK to prevent bad rendering when fading. */
#event { background-color: white; }
</style>
</head>
So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
Is there a way to keep my tabbed panel (or change as less as possible) and let
A. The fade work
B. The loading work.
The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
And the fading part is just because its nice...It doesnt show in the post but off course i changed this link;
"data/AquoThonFrag.html"
into;
"javascript:TabbedPanels1.showPanel(1);"
I must say i dont know if this even works... -
Is there a way to use css media="print" to print all Spry tabbed panels
By setting up a special style sheet and calling that with media="print" I can control all other content that I want to appear in the printed webpage but since the tabbed panels display="none" or display="block" are controlled by the SpryTabbedPanels.js I haven't found a way to force all panels to be display="block" in the print style sheet.
The requirement is for a seminar timetable where each day is on a separate tab but if you want hard copy then printing all days in one go is best.
Any suggestions would be most welcome.Yeah! I found the answer in another forum topic - See
http://forums.adobe.com/message/636534#636534
Use
<style type="text/css" media="print">
.TabbedPanelsTabGroup {
display: none !important;
.TabbedPanelsContent {
display: block !important;
overflow: visible !important;
height: auto !important;
</style> -
Spry tabbed panels, all content showing on one page, please help?
Hi there,
I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DND Perspective</title>
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #2B3856;
.style1 {
color: #FFFFFF;
.style4 {
color: #FFFFFF;
font-size: 36px;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
margin-left: 250px;
.style5 {color: #CCCCCC}
.style11 {
font-size: 18pt;
font-style: italic;
a:link {
color: #FFFF00;
a:visited {
color: #000000;
a:hover {
color: #000033;
-->
</style></head>
<body>
<div align="center">
<p align="left" class="style4">DND </p>
</div>
<p align="left">
<img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" /> </p>
<p align="center">
<p align="center">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" >
<li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
<li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
<li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent style1">
<div align="center">
<p class="style11">Welcome to DND </p>
<p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
<p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
<p>Please visit our services page to discover all photography sessions we have available such as:</p>
<p>Wedding Photography</p>
<p> Engament Photos</p>
<p>Senior Portraits </p>
<p>Anniversary</p>
<p>& More!!!</p>
<p> </p>
</div>
</div>
<div class="TabbedPanelsContent">
<p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
</div>
<div class="TabbedPanelsContent">Under Construction...</div>
<div class="TabbedPanelsContent">Under Construction....</div>
<div class="TabbedPanelsContent style1">
<p>We hear at DND understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &
packages, custom videos, thank you cards and albums.</p>
<hr width="50%" align="left" />
<p><strong>Package 1 - $500.00</strong></p>
<p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p><strong>Package 2 - $575.00</strong></p>
<p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p><strong>Package 3 - $700.00</strong></p>
<p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
<hr width="50%" align="left" />
<p><strong>Prints</strong>: (Fine Art High Quality)**</p>
<p>Individual prices: 8"x10" = $12.99; 10"x13" = $19.99; 2 - 5"x7" = $12.99; 4 - 4"x6" = $11.99</p>
<p>(Custom sizes available - Custom framing available)</p>
<p><strong>Package 1:</strong></p>
<p>3 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $50.00</p>
<p><strong>Package 2:</strong></p>
<p>5 - 8"x10"; 6 - 5"x7"; 6 - 4"x6" = $90.00</p>
<p><strong>Package 3:</strong></p>
<p>8 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $125.00</p>
<p><strong>Package 4:</strong> (Basic Prints)</p>
<p>Any 100 photos printed 4"x6" = $100.00</p>
<hr width="50%" align="left" />
<p><strong>Custom video:</strong>**</p>
<p>Any 100 photos put to royalty-free music = $50.00</p>
<hr width="50%" align="left" />
<p><strong>Custom thank you cards for your guests:</strong>**</p>
<p>300 cards - 4"x6" = $350.00</p>
<p>100 cards - 4"x6" = $150.00</p>
<hr width="50%" align="left" />
<p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
<p>Bride & Groom Albums</p>
<p>Parent Albums</p>
<hr width="50%" align="left" />
<p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
</div>
<div class="TabbedPanelsContent style5">
<p> Contact DND Perspective:</p>
<p>The best way to reach us is via email .</p>
<p>You can alternately reach us anytime at ...!</p>
</div>
<div class="TabbedPanelsContent">
<div align="center">
<p><span class="style1">About Info</span></p>
<p> </p>
</div>
</div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B -
I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?
I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
By the way new to all this so be gentle please
<div id="main_column">
<div class="section_w500">
<h2>North Bali Listings</h2>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
<li class="TabbedPanelsTab" tabindex="0">Land</li> <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
<li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
<li class="TabbedPanelsTab" tabindex="0">Commercial</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially in and around the Badung and Denpasar areas, has driven investors northward, in our opinion at this time it is an ideal opportunity to acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
<p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area, principally along the coastline , with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling, water sports, fishing, sailing. trekking gives this area the potential to be world-class tourist destination. Research has shown that property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
<br />
The Northern part of Bali is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
<table width="100%">
<tr>
<td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property in this area; be it for investment, development or private use.</div></td>
</tr>
</table>
<p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
<br />
<img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve; are also beginning to attract investors, resulting in prices rising.<br />
The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with "Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
<br />
<img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of established ex pat communities, and better facilities also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
<p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
</div>
<div class="TabbedPanelsContent">
<p> </p>
<table width="100%" border="0">
<tr>
<td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
<span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
<td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
</tr>
<tr>
<td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded "Tourism Status" ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
<p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone & Internet close to hand and readilly available</p></td>
<td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
</tr>
<tr>
<td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
Min Rental Period 25 Years, extendable to to a max of 75 years
(with full "Right Of Use" issued by owner)</span></td>
<td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
<br />
<span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
</tr>
</table>
<p><br />
</p>
<hr width="100%" noshade="noshade" />
<p> </p>
</div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
</div>
</div>
<p> </p>
<p>
<h7 style="color: #C03"></h7>
</p>
<h2></h2><!-- this stays empty to put dotted line under listings block -->
</div>
<div class="cleaner"></div>
</div> <!-- end of main column -->Could you share a link to the page?
Seeing it in context and in our browsers is much easier to debug.
If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms. -
Spry tabbed panels as menu system
Hi,
This is actually for Dreamweaver CS6. What I'm trying to do is use spry tabbed panels as horizontal my menu system. I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected. I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
My current problems are these:
I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
Any help or suggestions would be greatly appreciated!!
Below is my tabbed panels css:
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
color: #FFF;
background-color: #000;
width: 1000px;
height: 25px;
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 4px 21px;
margin: 0px 0px 0px 0px;
background-color: #000;
list-style: none;
border-left: solid 0px #000;
border-bottom: solid 0px #000;
border-top: solid 2px #000;
border-right: solid 0px #000;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 1000;
height: 15px;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
.TabbedPanelsTabHover {
background-color: #D31145;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabSelected {
background-color: #D31145;
border-bottom: 0px solid #D31145;
color: #FFFFFF;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 2px #D31145;
border-bottom: solid 2px #D31145;
border-top: solid 2px #D31145;
border-right: solid 2px #D31145;
background-color: #FFFFFF;
visibility: visible;
width: 50%;
position: inherit;
height: auto;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
THe Javascript for my tabbed panels are below:
// SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
this.defaultTab = 0;
else
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
if (ele == arr[i])
return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
var el = false;
if (key == this.previousPanelKeyCode && i > 0)
el = tabs[i-1];
else if (key == this.nextPanelKeyCode && i < tabs.length-1)
el = tabs[i+1];
if (el)
this.showPanel(el);
el.focus();
break;
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
var child = root.firstChild;
while (!stopTraversal && child)
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
tabIndexEle = node;
return true;
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
tabAnchorEle = node;
return false;
if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;
if (this.focusElement)
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
if (tabs[i])
this.removeClassName(tabs[i], this.tabSelectedClass);
if (panels[i])
this.removeClassName(panels[i], this.panelVisibleClass);
panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
})(); // EndSpryComponentNote - I agree with Nancy
As for your experiment, to prevent the "drop" reduce the spry CSS padding in line 76 selector from 21px to 18px.
.TabbedPanelsTab {
-moz-user-select: none;
background-color: #000000;
border-color: #000000;
border-left: 0 solid #000000;
border-style: solid;
border-width: 2px 0 0;
cursor: pointer;
float: left;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
height: 15px;
list-style: none outside none;
margin: 0;
padding: 4px 18px;
position: relative;
top: 0;
Don't use dummy text without normal length text with breaks -
Tabbed panels repeat region in cms displays 2nd item as a block of content
Hi everyone, hope someone can help:
I have a test page live
http://aegmotorhomes.co.uk/usedtest1.php
Problem is this-
I have added a repeat region on my dreamweaver template
I use Perch CMS as my management for staff to add new items for sale on this page
I have built a tabbed panels to list the item
On my CMS it allows me to press "add another" which then adds the tabbed panels again as a new item and the staff input the details
My problem is the first item works perfect and all tabbs work fine, each item after that doesn't have tabbs and shows all content as one whole block
I think it is to do with the ID and applies the java file only to item one, thats my guess.
I have attached code below for my tabbed panels template, .js file and .css file - can anyone shed any light on this issue"
TEMPLATE
<style type="text/css">
#container1 {
width: 700px;
background-color: #E6E6E6;
border: .1em solid #999;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
height: auto;
margin-bottom: 30px;
#item_description {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
color: #333;
background-color: #FFF;
height: 30px;
border-bottom-width: .1em;
border-bottom-style: dotted;
border-bottom-color: #333;
font-weight: bold;
margin-bottom: 10px;
#price {
margin-top: 5px;
float: right;
width: 150px;
background-color: #EAEAEA;
border: 0.1em solid #CCC;
.BOLDTEXT {
font-weight: bold;
text-align: center;
color: #FFF;
.BOLDTEXT_PRICE {
color: #333;
#engine_spec {
float: left;
width: 190px;
font-family: Arial, Helvetica, sans-serif;
font-size: .75em;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#top_price {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #099;
float: right;
width: 150px;
font-weight: bold;
text-align: right;
#top_price {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #099;
#overview_picture {
height: 150px;
width: 200px;
background-color: #CCC;
float: left;
margin-right: 10px;
margin-top: 5px;
.BOLDTEXT_blackprice {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #099;
#smallprint {
font-family: Arial, Helvetica, sans-serif;
font-size: .5em;
color: #666;
margin-top: 2px;
table tr td {
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
.specwhite {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
#reserve {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #FFF;
background-color: #099;
width: 140px;
float: right;
margin-top: 10px;
padding: 5px;
text-align: center;
border: .1em solid #999;
</style>
<script src="../../../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../../../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<div id="container1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Overview</li>
<li class="TabbedPanelsTab" tabindex="0">Description</li>
<li class="TabbedPanelsTab" tabindex="0">Images</li>
<li class="TabbedPanelsTab" tabindex="0">Specification</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="item_description"><perch:content id="Title1" label="Title" type="text" />
<div id="top_price">£<perch:content id="Title2" label="Top Price" type="text" /></div>
</div>
<div id="overview_picture"><img src="<perch:content id="photo" label="Photo" type="image" />" class="photo" /></div>
<div class="engine_spec" id="engine_spec">
<table width="100%" border="0" cellpadding="5" cellspacing="7">
<tr>
<td width="35%" bgcolor="#EAEAEA">Year of Make</td>
<td width="65%" bgcolor="#999999"><strong class="spec_white"><span class="engine_spec"><span class="specwhite"><perch:content id="Title3" label="Year" type="text" /></span></span></strong></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Current Miles</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title4" label="Mileage" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Engine Size</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title5" label="Engine" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Body Colour</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title6" label="Colour" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Transmission</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title7" label="Transmission" type="text" /></span></td>
</tr>
</table>
</div>
<div id="price">
<table width="150" border="0" cellspacing="9">
<tr>
<td width="50" height="25" bgcolor="#999999" class="BOLDTEXT">WAS</td>
<td width="81" class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title8" label="Old Price" type="text" /></span></td>
</tr>
<tr>
<td height="25" bgcolor="#999999" class="BOLDTEXT">NOW</td>
<td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9" label="New Price" type="text" /></span></td>
</tr>
<tr>
<td height="25" bgcolor="#999999" class="BOLDTEXT">SAVE</td>
<td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9a" label="Save" type="text" /></span></td>
</tr>
</table>
</div>
<div id="reserve">Reserve Motorhome</div>
</div>
<div class="TabbedPanelsContent"><perch:content id="Text" label="Description" type="textarea" editor="ckeditor" html="true" /></div>
<div class="TabbedPanelsContent"><table width="650" cellspacing="5">
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
</table></div>
<div class="TabbedPanelsContent"><perch:content id="Text1" label="Specification" type="textarea" editor="ckeditor" html="true" /></div>
</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
.JS file
(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, "click", 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);
})(); // EndSpryComponent
>CSS file
@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.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
background-color: #DDD;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: sans-serif;
font-size: small;
font-weight: bold;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 4px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #CCC;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
background-color: #FFF;
color: #333;
border-top-color: fff;
border-right-color: fff;
border-bottom-color: fff;
border-left-color: fff;
border-color: fff;
outline-color: fff;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
background-color: #F9F9F1;
height: auto;
margin-bottom: 3px;
border: .1px solid #999;
/* 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;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
color: #333;
padding: 20px;
clear: both;
margin-bottom: 5px;
height: auto;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
overflow: hidden;
zoom: 1;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* 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:none !important;
height: 100%;
#TabbedPanels1 {
height: auto;
padding-top: 5px;
background-color: #EAEAEA;
width: 700px;
I did read this but don't know where to start: http://www.webdevforums.com/showthread.php?27428-Dreamweaver-spry-collapsible-panel-amp-re peating-regions
Can anybody HELP PLEASE PLEASEI think I counted three tabbed panels in the markup, each with an ID of TabbedPanels1
You have only one constructor that makes one instance of the tabeed panels with an ID of TabbedPanels1
There are a couple of things that create the problem.
There can only be one ID with the same name in a document, thus the ID's of the TabbedPanels will need to change from TabbedPanels1 for the second and third instances to TabbedPanels2 and TabbedPanels3 (or similar) respectively.
There needs to be a constructor for each tabbed panels like
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
Gramps -
Spry tabbed panels, opening a tabbed panel, problem with IE
i've have made a site, with tabbed panels,
all the pages are made of a template;
everythings works fine; in Firefox and Opera,
but only in IE when i open a tabbed panel from a menubar, the contents is opened behind my header location;
i've used spry 1.6.1 and spryUtils to open the tabbed panel.
because there no other posibilty to open a tabbed panel from my other page.
i've tested the site on CSS and all, and i've don't get any errors.
this site is only on our intranet, and DVD;
so is not a online site
i' dont have anything modified in the java script.
just changed some minor adjustments to the CSS of the tabbed panels
The page is containing a fixed footer and header, FOR all browsers therefore is the CSS IE hacks also.
and all other functions work normal.
i'm only a beginner at this
CSS
body,html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
body{
color: #000;
background-attachment: fixed;
background-image: url(../afbeeldingen/Sitepictures/HaupteingangPB.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 95%;
#img2 {
height: 2cm;
width: 2cm;
border:0;
#img {
margin-right: 10px;
height: 3cm;
width: 3cm;
border:0;
TD{
font-family: Arial;
font-size: 8pt;
line-height: normal;
vertical-align: top;
text-align: left;
#header-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 5;
#header-container {
height: 120px;
background-repeat: repeat-x;
background-position: left bottom;
#header {
width: 1040px;
margin: 0 auto;
position: relative;
#header-content{
width: 1040px;
position: relative;
background-image: url(../afbeeldingen/Sitepictures/background.jpg);
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#header ul li {
float: left;
margin-right: 2px;
#container {
width: 1040px;
padding-top: 120px;
padding-bottom:50px;
background-color: #FFF;
margin-bottom: 0px;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;
position: relative;
height: auto;
min-height:100%;
#container a:link {
color: #00C;
text-decoration: none;
#container a:visited {
color: #F8495A;
text-decoration: none;
#container a:hover {
color: #00C;
text-decoration: underline;
#container a:active {
color: #00B004;
text-decoration: none;
#kolommaker
width:1040px;
background-color: #CEECAE;
height: 100%;
float: left;
#boven {
width: 1040px;
position: static;
height: 180px;
background-color: #FFF;
#sitecontent {
width: 1040px;
background-color: #FFF;
height: 100%;
#TabbedPanels1 {
width: 1040px;
position: static;
background-color: #FFF;
height: 100%;
float: left;
.links, .rechts, .midden {
height:100%;
display: inline-table;
background-color: #FFF;
.links{
float: left;
width: 330px;
font-size: 12px;
padding-top: 5px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
.rechts{
padding-top: 5px;
float: right;
width: 330px;
text-align: left;
font-size: 12px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
.midden{
padding-top: 5px;
width: 330px;
text-align: left;
font-size: 12px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
#footer-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 5;
#footer-container {
height: 50px;
background-image: url(../images/footer-bg.png);
background-repeat: repeat-x;
background-position: left bottom;
#footer {
width: 1040px;
margin: 0 auto;
position: relative;
background: #FFF;
#contentfooter {
width: 1040px;
margin-top: 0;
margin-right: auto;
position:relative;
margin-bottom: 0;
margin-left: auto;
height:50px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #F00;
text-align: center;
.leftfooter {
float: left;
.rightfooter {
float: left;
#iframe {
height: 600px;
min-height: 600px; }
.result_title a:link {
color: #00C;
text-decoration: none;
.result_title a:visited {
color: #F8495A;
text-decoration: none;
.result_title a:hover {
color: #00C;
text-decoration: underline;
.result_title a:active {
color: #00B004;
text-decoration: none;
.description { font-size: 100%; color: #008000; }
.docs {border:0;}
.pdf {border:0;}
.images {border:0;}
.excell {border:0;}
.exe {border:0;}
.clock {
text-align: center;
background: #FFF;
border: 1px solid #CCC;
height: 20px;
width: 175px;
font-size: 12px;
.clearfix {
content:".";
width:100%;
height: 0;
clear: both;
display: block;
visibility: hidden;
/* Hides from IE-mac \*/
.clearfix {height: 1%;} /* for IE/Mac */
CSS IE hacks
html{
overflow: hidden;
body{
overflow: auto;
#header-wrap, #footer-wrap {
position: absolute;
#header-container, #footer-container,{
margin-right: 16px;
#ie6-container-wrap {
position: absolute;
width: 100%;
height:100%;
overflow:auto;
#TabbedPanels1 {
position: absolute;
.TabbedPanels {
position: absolute;
#boven {
padding-top: 100px;
#container {
padding-top: 60px;
height :100%;
#sitecontent {
height: 100%;
#footer-wrap {
bottom: -1px;
#header img, #footer img
display: block;
Template
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Naamloos document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>
<!--[if lt IE 7 ]>
<link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!--ZOOMSTOP-->
<div id="header-wrap">
<div id="header-container">
<div id="header">
<div id="header-content">
<table width="890" border="0" cellspacing="1">
<tr>
<td width="100" height="50"><a href="../Sites/Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
<td width="680">
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
<ul class="sub">
<li><b>Alg. Procedure</b></li>
<li><a href="#nogo3" class="fly">Car Policy</a>
<ul>
<li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
<li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Gsm Policy</a>
<ul>
<li><a href="#nogo8">Gsm Policy NL</a></li>
<li><a href="#nogo9">Gsm Policy FR</a></li>
</ul>
</li>
<li><b>Diversen</b></li>
<li><a href="../Algemeen/Skills.htm">Skills</a></li>
<li><a href="../Sites/Verlof-Recup.html">Verlof</a></li>
<li><a href="../Sites/Verlof-Recup.html">Recup</a></li>
</ul>
</li>
<li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
<ul class="sub">
<li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
<li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
<li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
<li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
<li><a href="#nogo7" class="fly">Onkostennota</a>
<ul>
<li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
<li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Online Tools</a>
<ul>
<li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
<li><a href="../Sites/login.html">Online map</a></li>
<li><a href="../Sites/Fujitsu.html">Fujitsu Portal</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">FAX Franchisé</a>
<ul>
<li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
<li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
</ul>
</li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
<li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
<li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
</ul>
</li>
<li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
<ul class="sub">
<li><a href="../Sites/Aldi.html">Aldi</a></li>
<li><a href="../Sites/Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
<li><a href="../Sites/Bonita.html">Bonita</a></li>
<li><a href="../Sites/Carrefour.html">Carrefour</a></li>
<li><a href="../Sites/C&A.html">C & A</a></li>
<li><a href="../Sites/Decathlon.html">Decathlon</a></li>
<li><a href="../Sites/Delhaize.html">Delhaize</a></li>
<li><a href="../Sites/Ici Paris XL.html">Ici Paris</a></li>
<li><a href="../Sites/Ikea.html">Ikea</a></li>
<li><a href="../Sites/Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
<li><a href="../Sites/Kruidvat.html">Kruidvat</a></li>
<li><a href="../Sites/Lidl.html">Lidl</a></li>
<li><a href="../Sites/Living Tomorrow.html">Living Tomorrow</a></li>
<li><a href="../Sites/Mediamarkt.html">Mediamarkt</a></li>
<li><a href="../Sites/Scapino.html">Scapino</a></li>
<li><a href="../Sites/Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
<li><a href="../Sites/Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
</ul>
</li>
<li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
<ul class="sub">
<li><a href="../Sites/third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
<li><a href="../Sites/third party.html?tab=4#tabbedpanels1">HP</a></li>
<li><a href="../Sites/third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
<li><a href="../Sites/third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
<li><a href="../Sites/third party.html?tab=1#tabbedpanels1">Scanners</a></li>
<li><a href="../Sites/third party.html?tab=0#tabbedpanels1">Scales</a></li>
</ul>
</li>
<li class="top"><a href="../Sites/Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
<li class="top"><a href="../Sites/Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
</td>
</tr>
</table>
<table width="1038" border="0" cellspacing="1">
<tr>
<td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
<td> </td>
<td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--ZOOMRESTART-->
<div id="ie6-container-wrap" >
<div id="container">
<!-- TemplateBeginEditable name="EditRegion1" -->
<div id="boven">test<br />
<br />
</div>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Algemeen</li>
<li class="TabbedPanelsTab" tabindex="0">Tools</li>
<li class="TabbedPanelsTab" tabindex="0">Pc's</li>
<li class="TabbedPanelsTab" tabindex="0">Kassa's</li>
<li class="TabbedPanelsTab" tabindex="0">Selfscanning</li>
<li class="TabbedPanelsTab" tabindex="0">Self Check Outs</li>
<li class="TabbedPanelsTab" tabindex="0">EN andere</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven
<p>Hier wordt de inhoud voor id midden weergegeven</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
</div>
<div class="clearfix:after"> </div>
</div>
<!-- TemplateEndEditable -->
</div>
<div class="clearfix:after"> </div>
</div>
<!--ZOOMSTOP-->
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">
<div id="contentfooter"><div class="leftfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
<div class="rightfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
//-->
</script>
</body>
</html>
PAGE where i open the tabbed panels
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Naamloos-2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Third Party</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>
<!--[if lt IE 7 ]>
<link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!--ZOOMSTOP-->
<div id="header-wrap">
<div id="header-container">
<div id="header">
<div id="header-content">
<table width="890" border="0" cellspacing="1">
<tr>
<td width="100" height="50"><a href="Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
<td width="680">
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
<ul class="sub">
<li><b>Alg. Procedure</b></li>
<li><a href="#nogo3" class="fly">Car Policy</a>
<ul>
<li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
<li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Gsm Policy</a>
<ul>
<li><a href="#nogo8">Gsm Policy NL</a></li>
<li><a href="#nogo9">Gsm Policy FR</a></li>
</ul>
</li>
<li><b>Diversen</b></li>
<li><a href="../Algemeen/Skills.htm">Skills</a></li>
<li><a href="Verlof-Recup.html">Verlof</a></li>
<li><a href="Verlof-Recup.html">Recup</a></li>
</ul>
</li>
<li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
<ul class="sub">
<li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
<li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
<li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
<li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
<li><a href="#nogo7" class="fly">Onkostennota</a>
<ul>
<li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
<li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Online Tools</a>
<ul>
<li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
<li><a href="login.html">Online map</a></li>
<li><a href="Fujitsu.html">Fujitsu Portal</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">FAX Franchisé</a>
<ul>
<li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
<li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
</ul>
</li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
<li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
<li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
</ul>
</li>
<li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
<ul class="sub">
<li><a href="Aldi.html">Aldi</a></li>
<li><a href="Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
<li><a href="Bonita.html">Bonita</a></li>
<li><a href="Carrefour.html">Carrefour</a></li>
<li><a href="C&A.html">C & A</a></li>
<li><a href="Decathlon.html">Decathlon</a></li>
<li><a href="Delhaize.html">Delhaize</a></li>
<li><a href="Ici Paris XL.html">Ici Paris</a></li>
<li><a href="Ikea.html">Ikea</a></li>
<li><a href="Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
<li><a href="Kruidvat.html">Kruidvat</a></li>
<li><a href="Lidl.html">Lidl</a></li>
<li><a href="Living Tomorrow.html">Living Tomorrow</a></li>
<li><a href="Mediamarkt.html">Mediamarkt</a></li>
<li><a href="Scapino.html">Scapino</a></li>
<li><a href="Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
<li><a href="Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
</ul>
</li>
<li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
<ul class="sub">
<li><a href="third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
<li><a href="third party.html?tab=4#tabbedpanels1">HP</a></li>
<li><a href="third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
<li><a href="third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
<li><a href="third party.html?tab=1#tabbedpanels1">Scanners</a></li>
<li><a href="third party.html?tab=0#tabbedpanels1">Scales</a></li>
</ul>
</li>
<li class="top"><a href="Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
<li class="top"><a href="Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
</td>
</tr>
</table>
<table width="1038" border="0" cellspacing="1">
<tr>
<td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
<td> </td>
<td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--ZOOMRESTART-->
<div id="ie6-container-wrap" >
<div id="container">
<!-- InstanceBeginEditable name="EditRegion1" -->
<div id="boven"><img src="../afbeeldingen/Sitepictures/Datalogic_logo.jpg" alt="Datalogic" name="img2" width="100" height="100" id="img2" /> <img src="../afbeeldingen/Sitepictures/PSC-Logo4C.jpg" alt="PSC" name="img2" width="450" height="160" id="img2" /> <img src="../afbeeldingen/Sitepictures/NCRlogo.jpg" alt="NCR" name="img2" width="116" height="116" id="img2" /> <img src="../afbeeldingen/Sitepictures/symbol-logo.jpg" alt="Symbol" name="img2" width="200" height="150" id="img2" /></div>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">kassascanners</li>
<li class="TabbedPanelsTab" tabindex="0">Handscanners</li>
<li class="TabbedPanelsTab" tabindex="0">Scales</li>
<li class="TabbedPanelsTab" tabindex="0">Kassaprinters</li>
<li class="TabbedPanelsTab" tabindex="0">HP</li>
<li class="TabbedPanelsTab" tabindex="0">Fujitsu-Siemens</li>
<li class="TabbedPanelsTab" tabindex="0">Datalogic</li>
<li class="TabbedPanelsTab" tabindex="0">Vensafe</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
</div>
<div class="clearfix:after"> </div>
</div>
<!-- InstanceEndEditable -->
</div>
<div class="clearfix:after"> </div>
</div>
<!--ZOOMSTOP-->
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">
<div id="contentfooter"><div class="leftfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
<div class="rightfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
//-->
</script>
</body>
<!-- InstanceEnd --></html>
TABBED PANELS CSS
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
width: 1040px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
position: static;
float: left;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
position: static;
top: 1px;
float: left;
font: bold 0.7em sans-serif;
background-color: #FF0033;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 5px;
padding-bottom: 4px;
padding-left: 5px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #75A7D0;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
border-bottom: 2px solid #EEE;
color: #FFF;
background-color: #000;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
float: left;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 4px;
height: 100%;
width: 1032px;
float: left;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
background-color: #FFF;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #CCC;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;added also the css for the menubar
pro_dropdown_3.css
.preload1 {
background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
.preload2 {
background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
#nav {
padding:0;
margin:0;
list-style:none;
height:38px;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
background-repeat: repeat-x;
#nav li.top {
display:block;
float:left;
width: auto;
#nav li a.top_link {
display:block;
float:left;
height:35px;
line-height:33px;
color:#ccc;
text-decoration:none;
font-size:11px;
font-weight:bold;
cursor:pointer;
background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
width: 85px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 2px;
#nav li a.top_link span {
float:left;
display:block;
height:35px;
background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
background-repeat: no-repeat;
background-position: right top;
width: 70px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
#nav li a.top_link span.down {
float:left;
display:block;
padding:0 10px 0 12px;
height:35px;
background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
background-repeat: no-repeat;
background-position: right top;
#nav li:hover a.top_link {
color:#fff;
background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
background-repeat: no-repeat;
#nav li:hover a.top_link span {
background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
background-repeat: no-repeat;
background-position: right top;
#nav li:hover a.top_link span.down {
padding-bottom:3px;
background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
background-repeat: no-repeat;
background-position: right top;
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
background-color: #50b5d0;
background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
background-repeat: no-repeat;
background-position: 80px 6px;
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
color:#fff;
background-color: #3f96a9;
background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
background-repeat: no-repeat;
background-position: 80px 6px;
#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
color:#fff;
border-color:#fff;
background-color: #3f96a9;
background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
background-repeat: no-repeat;
background-position: 80px 6px;
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
color:#000;
border-color:#50b5d0;
background-color: #50b5d0;
background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
background-repeat: no-repeat;
background-position: 80px 6px; -
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">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #090909;
background-image: url(k2-mountain-1280x800-1.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
.twoColFixLtHdr #container {
width: 1200px;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
.twoColFixLtHdr #header {
padding: 0;
margin-top: 10px;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #8CC543;
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 230px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0;
background-color: #25A8E0;
margin-top: 40px;
height: 400px;
.twoColFixLtHdr #mainContent {
margin-right: 0;
margin-bottom: 0px;
margin-left: 248px;
border: 1px solid #8CC543;
margin-top: 40px;
text-align: center;
background-position: center center;
color: #8CC543;
font-family: "Century Gothic";
font-size: medium;
text-transform: none;
height: 400px;
background-image: url(k2-faded.jpg);
.twoColFixLtHdr #footer {
padding: 0;
text-align: left;
font-family: "Century Gothic";
text-transform: uppercase;
color: #25A8E0;
letter-spacing: 5px;
font-size: small;
word-spacing: normal;
display: block;
margin-left: 0px;
margin-top: 10px;
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #25A8E0;
text-decoration: none;
a:hover {
color: #8CC543;
text-decoration: none;
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
//-->
</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {font-size: xx-small; color: #EEEEEE; }
a:visited {
text-decoration: none;
color: #25A8E0;
a:active {
text-decoration: none;
.style3 {
color: #FFFFFF;
font-weight: bold;
.style4 {color: #FFFFFF}
-->
</style>
<style type="text/css">
<!--
.style5 {font-size: x-large}
h1 {
font-size: medium;
color: #25A8E0;
.style6 {color: #444444}
.style8 {color: #444444; font-weight: bold; }
-->
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('HS-MENTOR-OVER.png')">
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="web-banner.png" width="514" height="127" /></a>
<!-- end #header --></h1>
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="volunteer.html">VOLUNTEER</a> </li>
<li><a href="parentcollege.enroll.html">PARENT COLLEGE: ENROLL</a></li>
<li><a href="https://leapfrog-usa.com/AOE/Parent-Resources/Enrollment-Form.aspx">AFTER SCHOOL: ENROLL</a> </li>
</ul>
</div>
<div id="sidebar1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="mission.html">mission/overview</a></li>
<li><a href="ourteam.html">OUR team</a></li>
</ul>
</li>
<li><a href="problem.html">THE PROBLEM</a></li>
<li><a href="#" class="MenuBarItemSubmenu">THE SOLUTION</a>
<ul>
<li><a href="solution.overview.html">overview</a></li>
<li><a href="solution.structure.html">structure</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">PROGRAMS</a>
<ul>
<li><a href="parentcollege.html">parent college</a></li>
<li><a href="mentor.html">MENTOR program</a></li>
<li><a href="farming.html">urban farming</a></li>
<li><a href="afterschool.html">CHARTER AFTER SCHOOL</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">LOCATIONS</a>
<ul>
<li><a href="location.fulton.html">fulton county ga</a></li>
<li><a href="location.haiti.html">haiti</a></li>
<li><a href="location.tribe.html">native american tribe</a></li>
</ul>
</li>
<li><a href="news.html">NEWS|RESOURCES</a></li>
<li><a href="contact.html">CONTACT US</a></li>
<li><a href="#">DONATE</a></li>
</ul>
</div>
<div class="style3" id="mainContent">
<div align="left" class="style4">
<p class="style5">MENTOR PROGRAM</p>
<div id="TabbedPanels2" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
<li class="TabbedPanelsTab" tabindex="0">PROGRAM DIRECTOR</li>
<li class="TabbedPanelsTab" tabindex="0">L2G CERTIFICATION</li>
<li class="TabbedPanelsTab" tabindex="0">PHOTO GALLERY</li>
<li class="TabbedPanelsTab" tabindex="0">HIGH SCHOOL ACADEMIC MENTOR</li>
<li class="TabbedPanelsTab" tabindex="0">COMMUNITY-LEADER MENTOR</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<blockquote>
<p><em>“Those who have the ability, have the responsibility”</em></p>
<p><u>Avenue of attention:</u> <strong> MENTOR PROGRAM</strong> <br />
Unites local society, by focusing the <u>attention</u> of the community’s talent, on children (ages 7 – 12) who are in need of positive role models. </p>
<p>Two levels of involvement: </p>
<ol>
<li>High School Academic Mentors</li>
<li>Community-Leader Mentors</li>
</ol>
<p><u>Program title:</u> <strong>Talent 2 Kids</strong> </p>
<p><u>Why Program Important</u><strong>:</strong> </p>
<ol>
<ul>
<li><strong>Motivates</strong> children by providing successful, caring role models into their lives, and in accordance, exposing them to realistic paths towards financial success. </li>
<li>High school juniors and seniors on the honor roll are eligible to tutor elementary school children, utilizing their skills in helping with homework and comprehension.</li>
<li>Community business leaders will act as “big brother/big sisters,” mentoring and monitoring a child’s well being and academic progress. Also, sharing career information and the associated path to success, along with teaching real-life problem solving skills.</li>
</ul>
</blockquote>
</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
<div class="TabbedPanelsContent">Content 5</div>
<div class="TabbedPanelsContent">Content 6</div>
</div>
</div>
<p> </p>
</div>
<p> </p>
<p> </p>
</div>
<div id="footer">
<table width="1200" border="0">
<tr>
<td><div align="left"><a href="parentcollege.html">parent college</a></div></td>
<td><div align="center"><a href="mentor.html">MENTOR program</a></div></td>
<td><div align="center"><a href="farming.html">urban farming</a></div></td>
<td><div align="right"><a href="afterschool.html">charter after school</a></div></td>
</tr>
</table>
<p align="center" class="style2">A NON-PROFIT ORGANIZATION, EMPOWERING COMMUNITIES TO MOTIVATE THEIR CHILDREN, CREATING LASTING CHANGE</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels2");
//-->
</script>
</body>
</html>
Maybe you are looking for
-
IPhone is not recognized in iTunes
Normally, I would put an issue like this in the iTunes issue, however, it's not my iTunes OR my computer. It's my iphone. I say this because I connected an iPod and iTunes recognized it. When I have my iPhone plugged into a USB (I have tried differen
-
Itunes is refusing to open. What should i do?
I have tried rebooting the system and opening itunes from the file finder. nothing. the itunes icon just bounces onces and refuss to open. what can i do to resolve this please?
-
XNJB problems with Macbook & Zen Vision:
Hello all... I'm contemplating purchasing a Macbook. I only got my Zen a few weeks ago, but off of Ebay, so it's unreturnable (plus I love it). So my question is, how many of you have had major problems using XNJB to support your music? Can you uploa
-
No company code data available in XD01
Hi All, I'm facing a issue in XD01 transaction code. In my current client process of creation of customer is first Master data team is responsible for creation of General data segment of the customer once general segment is created it comes to SD us
-
Hi, I am looking a secure solution for around 25 users - to remote access into our datacentre. Obvioudly a secure tunnel is needed (SSL/Ipsec), BUT ALSO, i want a solution to provide 'posture assesment' of sorts. Now, NAC is very expensive for this s