Tabbed Panels: Two content areas?

Hi, I want to set up my Tabbed Panels so that when a certain tab is clicked, the content displayss in one content area/div and an image shows in another content area/div. Is that possible? If it is, will it change the CSS? On most pages, I want to use the same CSS style for tabbed panels, but only one content area.
Thanks very much,
Mike

You could do 2 things.
1) include the "area" inside the tabbed panels content, and use position:absolute; to position it everywhere that you want on your page
2) create onclick function on each tabbedpanel tab that will display the content for you.

Similar Messages

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

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

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

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

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

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

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

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

Tabbed Widget Hiding "Content Area" in Normal State ...

Q1. Is it possible to hide the complete content area of the tabbed widget in normal state? ...
Q2. ... and than going back automatically from active state to normal state (same behavoir as Q1) if any other link/widget on the site was activated?
Here´s an image of the idea i have, every tab comtains a picture gallery... should be a cool sliding user experience.
thank you so much for your help!

Have you tried customizing one of the Compositions Widget (Blank/Featured News/Presentation) to simulate a tabbed panel. Since a Compositions Widget allows you the option to hide the target containers on rollout or click.
Try playing with the Compositions if that helps. Would be interested to know any specific feature that you are using Tabbed Panel over Compositions Widget for your above requirement.
Cheers,
Vikas

Tabbed Panel table content flowing over and past container content.

How can I "contain" the tabbed panel content, which happens to be a table, inside the main content area and "push" the rest of the container (just the footer) down the web page. It's like the tabbed menu table section "floats" above, over and past the container section which then pushes the footer information over to the side of the container. This is my first time to use the tabbed panel and I thought it was goin to be so easy....obviously I'm doing something wrong. Thanks in advance for your advice!

Normally, tabbed panel content (the panel itself) will expand and contract to accommodate your content. If you have set a fixed height on the panel group, or constrained the height of the panel in any way, it will do as you ask, and not expand or contract any more.
If you want to accommodate contents that are variable in length, remove any height restrictions. If you still need to restrain the height, leave it in and add overflow: auto; to bring up a scroll bar when the content is too long and you don't want to pop out of the box.
If you add the height and the overflow attributes to the .TabbedPanelsContentGroup selector, your tabs will remain stationary and your panel contents will scroll.
Beth

!!!!!!! IMPORTANT !!!!!!!!!!!! Can't reach the tabs of edit content area

I have a big problem.
When I try to edit a content area, i come to the following tab : MAIN
But when I click on any other tab i get :
The page cannot be found
The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
Please try the following:
If you typed the page address in the Address bar, make sure that it is spelled correctly.
Open the portal.irc.be home page, and then look for links to the information you want.
Click the Back button to try another link.
Click Search to look for information on the Internet.
HTTP 404 - File not found
Internet Explorer
Can anyone help me please.
THX in advance.
P.S I have several databases running on 1 machine.
I only get this message in one database.

Hi,
You must switch to the "master pages" tab first, then mark the content area to be able to move it.
You cannot move the content area in the design view, since it is part of the master page.
Regards

Navigation Panel and content Area can not any more be displayed

Hello Gurus,
we have a very big prolem with our Portal in the Development.
A new colleague has probably changed some settings in the portal. Now by logging into the portal, i can only see the header Area (Masterhead, Tolls, Top-Level Navigation, Page title Bar). By clicking on the role like system Administrator, nothing is showing.
The Navigation Panel and the content area are gone. How can i restore them back?
Any Workaround?
Thanks in advance
Cheers

Hi Anja, Puneet,
thank you very much to have replied.
through the SAP Note and you path, i can access the portal again. I am not using the standard framework.
We have a customized Destop Page, Framework and after a check they still exist. Could you once advice where could be the error. Or where someone chnage the settings?
many thanks in advance.
Cheers

Scroll panel - two contents hooked to one scroll bar?

I've got two boes of content (one running text and one a series of images grouped in a vertical fashion). I want these to move simultaneously but one is much longer than the other - and I want them to finish at the same time, the photos correlating to the text. Using two separate scroll bars is out of the question. I tried to trick it and just copy the same scroll bar on top of the first, hoping that by dragging one you'd drag both, but it only takes the top layer. Any ideas?

I can only think of two solutions:
1) Refactor your design so that the two boxes some how become one element. Then the scroll element will work as designed. You have to think how each element in one box maps it's position to the other box.
2) If you can't refactor the design, then you will need to create an algorthim that will map position in one box to a postiion in the other. Then you will need to write a custom bit of ActionScript in Flash Builder to wire this all up.
Chris

Placing an image in a tabbed panel content area, it shows up on all three panels

This is crazy. It should be so simple. But sometimes this happens to me. Like today.
I have many pages that use a simple tabbed panel feature with three tabs.
Each content area has a text frame and an image frame.
Sometimes when I try to place an image into the content area of the first tab, the image shows up on all three content areas. I have tried and tried placing the image, making very sure I am in the "content area" on not just on the page. But nevertheless, the image seems to be "stuck" on the page, in front of the accordian feature, and therefore showing on all three tabs.
How am I not targeting the placement of those images correctly? There just aren't that many options for me to screw up, it's a simple tabbed panel, that's all!
Help please.
Barbara

Are you using the latest version of Muse/Air?
The borders of the Content Area of a tab gets highlighted as soon as you drag over an element over it so it is very unlikely that something like this could happen. However, I believe it could be due to messed up Layers configuration as the only way I could reproduce this problem is through moving the image into a layer above a layer that contains the Tabbed panel or in case of just one layer, you might have the image at the very top.
Thanks,
Vinayak

Skinned Panel Content Area Problem

I have instances of the Panel component that was skinned
using the Flex Skin Component Kit for Flash. The problem is that
the content areas of these panels occupy the entire panel area. An
unskinned panel has a content area that is within the panel's edges
and header. For my skinned panels, the content area extends to all
four edges of the panel (top, bottom, left, right). Any components
placed inside the panel goes beyond the usual white content area
and overlaps the header. How can I fix this content area size
problem? Please help. Thanks.

Can you use content area coordinates, or some manipulation of
the global, local, and content coordinates?

How can I add a shadow to a tabbed panel?

Trying to put a shadow on the active state of a tabbed panel so the tab and the content areas share one continuous shadow. Want the active panel to look like it's sitting above the other, inactive panels - the way a stack of file folders would look: shadows on all the tabs, but the folder on the top of the stack would have a shadow around the tab and the rest of the folder.
I can get the shadows to work on the tabs - where the active tab has a larger shadow than the normal (inactive) tabs and they look like they're sitting behind it - but when I try to add a shadow to the content panel it makes the panel appear to sit above the tab that goes with it. I tried arranging the tab on top ("Bring to front") but it still sits behind the content panel. Also tried pulling all the tabs to the front, but the content panel still sits in front and any shadow on the active panel is still over the active tab.
I know I can get an effect that's kinda-sorta what I'm going for with flat color (lighter for active, etc.) but would love to add some truer-looking depth to the active tabbed panel.
Any suggestions?

you can control the dropshadow's angle property dynamically. and, yes the dropshadowfilter has an alpha and strength properties you can use.
use the help files to see all the properties you can use.

Tabbed panel action resizing rectangle below

I have a tabbed panel on one layer, and a rectangle on a separate layer below. The content area of the tabbed panel varies in height. As I tab through the tabbed panel the rectangle is changing height as well. There is no fill on any parts of the tabbed panel.

Gramps, you are always coming to my rescue.
Okay, I loaded the page under a different name http://abilityaxis.com/test.html. Viewing the source code doesn't show the yellow.
For demonstration purposes I copied a small amount of the text and changed the colour of what is yellow in Dreamweaver to this pinkish colour (I tried yellow but you couldn't read it)
        <form id="registrationForm" name="registrationForm1" method="post" action="">
          <fieldset>
              <legend>Contact Information</legend>
              <span id="sprytextfield1">
                <label>Name <span class="inforequired">*</span><br />
                  <input type="text" name="name" id="name" />
                  <br />
               </label>
                <span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield2">
                 <label for="businessname">(Business or Organization) Name<br />
                </label>
                <input type="text" name="businessname" id="businessname" />
It basically goes all the way through the form.
Any advice?
thanks,
deb

Spry tab panels

Hello,
I have 2 questions I am hoping someone can help me with.
1. is there a way to center the spry tabbed panels, currently
they are float left and when I remove the float left they still
remain float left.
2. how do I add a colored background rectangle behind the
tabs so they appear to span the length of my div tag/content area?
Thank you!
amber

I have figured out the background rectangle but still
perplexed about the centering issues....
any help is greatly appreciated.
thank you!

Spry - Changing focus on each tabbed panel

Hello,
I am not sure if this is the correct place to post this.
I have been asked to modify this page, http://webpac.lvlspa.org/screens/moco_mainmenu.html , and I was wondering how I could have the focus be on the input box when a patron clicks on each tabbed panel?
Thanks for your time,
   Matt

Automatically setting the focus in a form field is normally a trivial operation. However, it's not so simple with tabbed panels because the tabs and their content are all on the same web page.
I decided to give this a try, and think that I have come up with a solution. The code is specific to your setup, which uses "targetEncore" and "searcharg" as the name of the input fields you want to have focus when a tab is clicked. Add the following script block at the bottom of the page, just before the closing </body> tag:
<script>
if (document.getElementsByClassName) {
    function findField(node) {
        var node = node || document.getElementsByClassName('TabbedPanelsContentVisible')[0];
        if (node.hasChildNodes()) {
            var child = node.firstChild;
            while (child) {
                if (child.nodeType === 1 && child.nodeName == 'INPUT') {
                    if (child.name == 'targetEncore' || child.name == "searcharg") {
                        child.focus();
                        break;
                } else {
                    findField(child);
                child = child.nextSibling;
    findField();
    var tabs = document.getElementsByClassName('TabbedPanelsTab');
    for (var i = 0; i < tabs.length; i++) {
       tabs[i].addEventListener('click', (function (num) {
            return function() {
                findField();
        })(i), false);
</script>
This script works in all modern browsers, included Internet Explorer 9. However, it does not work in IE 8 or earlier. Getting it to do so would involve a lot more scripting, so is probably not worthwhile.
Message was edited by: David_Powers to wrap script in conditional statement that tests support for document.getElementsByClassName.

Help with Tabbed panels please

Hello,
Can someone please tell me how I can change the color of the background of the tabs in tabbed panels. They are a grey and I can go into each tab and set a new color and when that tab is chose, the new color shows, but when I click on the next panel tab, the prvious one background goes back to grey. How do I get that whole grey background color changed?
Did I confuse everyone because I think I confused myself lol
Thanks if you can help!
Kathleen

THank you very much!!

Tabbed Panels: Two content areas?

Similar Messages

Maybe you are looking for