Vertical Tab Navigation Titles

I am attempting to add text to an existing vertical
navigation tab. The additional text will cause the tab to expand
considerably. I have located the source code but attempts to add
the needed text have not worked. Any ideas?

lv2crochet wrote:
> I am attempting to add text to an existing vertical
navigation tab. The
> additional text will cause the tab to expand
considerably. I have located the
> source code but attempts to add the needed text have not
worked. Any ideas?
>
Not without a URL, are you in a locked template region?
Cheers jojo
Adobe Community Expert for Dreamweaver 8
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm

Similar Messages

Tab navigator vertical gap

Hi all
I am using tab navigator control, in that i have used skins for the tabs..further i have given 4px border to the tab navigator control now the problem i am facing is that ,the tabs touches the original border of the navigator.As now the border thickness is 4 px.so the tabs should touch the 4px border thickess not the default border of 1 px thickness..due to this my tab skin touchess the default border not the new 4 px border..and because of which they are not completely visible.how can i solve this issue..is there any vertical gap property or something else..via which i can achieve this
please check the attach image which will clear you the picture

Try making adjustments in CSS using the Flex style explorer. http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
Then apply that style to your tab nav.

Applet TAB navigation not working with 1.4.1_01

I recently upgraded to Java version 1.4.1_01. Now, when I load my applets, the TAB key cannot be used for navigation until I open the Java console and then close it again. To ensure that my the threads in my specific Applet are not the problem, I came up with the following test applet:
import java.awt.BorderLayout;
import javax.swing.BoxLayout;
import javax.swing.JApplet;
import javax.swing.JPanel;
import javax.swing.JTextField;
public class TestApplet extends JApplet {
    public void init() {
        super.init();
    public void start() {
        JPanel myPanel = new JPanel();
        myPanel.setLayout(new BoxLayout(myPanel, BoxLayout.Y_AXIS));
        JTextField textField1 = new JTextField("Text Field 1");
        myPanel.add(textField1);
        JTextField textField2 = new JTextField("Text Field 2");
        myPanel.add(textField2);
        JTextField textField3 = new JTextField("Text Field 3");
        myPanel.add(textField3);
        getContentPane().add(BorderLayout.CENTER, myPanel);
    public void stop() {
        super.stop();
}To ensure that my build environment/options are not the problem, I compiled this applet as follows:
javac TestApplet.java
I then came up with the following HTML file for the applet:
<HTML>
<HEAD>
<TITLE>Test Applet</TITLE>
</HEAD>
<BODY MARGINWIDTH="0" MARGINHEIGHT="0" BGCOLOR="white">
<APPLET
CODE=TestApplet.class
WIDTH=635
HEIGHT=500
ALIGN=left
VSPACE=10
HSPACE=10
>
</APPLET>
</BODY>
</HTML>When I access this test applet, again I am not able to navigate among the text fields with the TAB key. However, if I open the Java console, close it right back up, and refresh my applet, the TAB navigation works. I've tried simply refreshing my applet (as well as a hundred other things) and have had no success.
Any help would be GREATLY appreciated.
Thanks in advance

Looks like this is related to Bug #4707289. To fix this,
I added the following lines to the above applet:
textField1.setFocusable(true);
textField2.setFocusable(true);
textField3.setFocusable(true);

Adding a same component in each tab of super tab navigator creates problem

When a UI component is created once and added to each tab using super tab navigator in AS 3.0, the component is adding only to the last index of the tab. The component is missing in the previous tab.
I have given the code below. Please help me why this is happening and the solution for this.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
        xmlns:mx="http://www.adobe.com/2006/mxml"
        creationComplete="createSuperTabNav()">
        <mx:Script>
                <![CDATA[
                    import mx.core.UIComponent;
                        import com.tab.navigator.components.SuperTabBar;
                        import com.tab.navigator.components.SuperTabReorderEvent;
                        import com.tab.navigator.components.SuperTab;
                        import com.tab.navigator.components.SuperTabNavigator;
                        import com.tab.navigator.components.ButtonScrollingCanvas;
                        import mx.controls.Label;
                        import mx.controls.Button;
                        import mx.controls.Spacer;
                        import mx.containers.VBox;
                        import mx.containers.HBox;
                        import mx.containers.Canvas;
                        import mx.containers.Panel;
                        import mx.core.ScrollPolicy;
                        import mx.core.UIComponent;
                        import flash.events.MouseEvent;
                        public var _tabs : SuperTabNavigator;
                        public var _addBtn : Button;
                        public var _vbox:VBox;
                        public var pageCount:uint;
                        public var tabID:String;
                        private var _comp:UIComponent;
                        public function createSuperTabNav():void
                            _vbox = new VBox();
                            _vbox.percentWidth = 75;
                            _vbox.percentHeight = 75;
                            _vbox.setStyle("horizontalAlign","center");
                            _vbox.setStyle("verticalGap", 20);
                            createTabs();
                            createAddButton();
                            addChild(_vbox);
                        public function createTabs():void
                            _tabs = new SuperTabNavigator();
                            //initTabs();
                            addObjectTab();
                            // Set Properties
                            _tabs.id = "nav";
                            _tabs.percentHeight = 75;
                            _tabs.percentWidth = 50;
                            _vbox.addChild(_tabs);
                        public function addTab(lbl:String, navigator:SuperTabNavigator, component:UIComponent, getId:String) : Canvas
                            // Create canvas to put into tab
                            var child:Canvas = new Canvas();
                            child.percentHeight = 100;
                            child.percentWidth = 100;
                            child.id = getId;
                            child.label = lbl;
                            child.setStyle("closable", true);
                            child.addChild(component);
                            child.setStyle("backgroundColor",0xF8F8F8);
                            navigator.addChild(child);
                             //trace(_tabs.selectedChild.getChildren().toString());
                            _tabs.reorderTabList();
                            return child;
                        public function createAddButton():void
                            _addBtn = new Button()
                            _addBtn.label = "Add Tab";
                            _addBtn.id = "addTabBtn";
                            _addBtn.width = 75;
                            _addBtn.height = 20;
                            _addBtn.addEventListener(MouseEvent.CLICK, handleButtonClick,false,0, true);
                            _vbox.addChild(_addBtn);
                        public function handleButtonClick(evt:MouseEvent):void
                            //addTab('tab '+Number(_tabs.numChildren + 1), _tabs);
                            addObjectTab();
                            _tabs.selectedIndex = _tabs.numChildren - 1;
                        public function addObjectTab():void
                            var frameCanvas:Canvas = new Canvas();
                            frameCanvas.horizontalScrollPolicy = ScrollPolicy.OFF;
                            frameCanvas.verticalScrollPolicy = ScrollPolicy.OFF;
                            frameCanvas.percentHeight = 100;
                            frameCanvas.percentWidth = 100;
                            if ( _comp == null )
                                _comp = addComponent();
                            frameCanvas.addChild(_comp);
                            // Create container to implement horizontal padding
                            var horizontalPadder:HBox = new HBox();
                            horizontalPadder.setStyle("backgroundAlpha", 0);
                            horizontalPadder.horizontalScrollPolicy = ScrollPolicy.OFF;
                            horizontalPadder.verticalScrollPolicy = ScrollPolicy.OFF
                            horizontalPadder.addChild(new Spacer());
                            horizontalPadder.addChild(frameCanvas);
                            horizontalPadder.addChild(new Spacer());
                            // Create container to implement vertical padding
                            var verticalPadder:VBox = new VBox();
                            verticalPadder.setStyle("backgroundAlpha", 0);
                            verticalPadder.horizontalScrollPolicy = ScrollPolicy.OFF;
                            verticalPadder.verticalScrollPolicy = ScrollPolicy.OFF
                            verticalPadder.addChild(new Spacer());
                            verticalPadder.addChild(horizontalPadder);
                            verticalPadder.addChild(new Spacer());
                            // Position padder
                            verticalPadder.setStyle("horizontalAlign", "Left");
                            verticalPadder.x = 0
                            verticalPadder.y = 0;
                            tabID = "page"+ _tabs.getNumberOfTabs()+1;
                            var canvas:Canvas = addTab("Page "+(_tabs.getNumberOfTabs()+1), _tabs ,verticalPadder, tabID);
                            canvas.setStyle("backgroundColor", "#009900");
                        public function addComponent():UIComponent
                            var pageCount:uint = _tabs.getNumberOfTabs()+1;
                            var page:Canvas = new Canvas;
                             page.width = 250;
                             page.height = 250;
                             page.setStyle("backgroundColor", "#FFFFFF");
                            var _pageBtn:Button = new Button();
                            _pageBtn.label = "Button "+(pageCount);
                            _pageBtn.id = "addTabBtn "+(pageCount);
                            _pageBtn.width =100;
                            _pageBtn.height = 20;
                            page.addChild(_pageBtn);
                            return page;
                ]]>
        </mx:Script>
</mx:Application>

Adding an instance moves it, it does not copy it.

Tab Navigator

I have problem in giving roll over color for a Tab
Navigator.I have tried with setting styles such as fillcolors,roll
over color but not achieved yet. Any suggestions will be accepted.
Thanks in advance.

Hello.
That might be skins. upSkin, downSkin, overSkin ...
More information is here.
http://livedocs.adobe.com/flex/201/langref/mx/containers/TabNavigator.html
Also I made a sample of Vertical TabNavigator.
This sample use TabBar. But skins are same as TabNavigator.
http://shigeru-nakagaki.com/index.cfm/2007/8/21/20070821-Vertical-TabNavigator-sample
Shigeru

Spry Tab Navigation not working in IE

I have created a couple of test pages to highlight what happens and the issue I have.
ONE: http://www.netballzone.com.au/aeasphase1handover/testCentresml.html   - navigation to specific tabs doesn't work in IE7 or 8 and all tabs content is displayed in one page and no tab navigation options available.
TWO: http://www.netballzone.com.au/aeasphase1handover/testCentresml2.html - no way to navigate to get to specific tabs that works in IE7 or 8.
In Webkit and Firefox all is well and the two examples show the same thing.
The main requirements I have is to be able to navigate to specific tabs from outside of the page. I have looked at various related topics but cannot see a solution that works for me and Option ONE seems to be the closest I can find.
As soon as I included the error I get in ONE above.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6.5; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET4.0C; .NET CLR 3.0.30729)
Timestamp: Tue, 12 Oct 2010 01:33:34 UTC
Message: 'Spry.Widget.TabbedPanels' is null or not an object
Line: 121
Char: 1
Code: 0
URI: http://www.netballzone.com.au/aeasphase1handover/testCentresml.html
From the page outside via a hyperlink I used <a href="testCentresML.html?tab=1#TestCentresTabs">
Thanks in anticipation and regards,
Mike

If you want to choose Brunei, the URL should look like
<a href="testCentresML.html?test=0&country=1">
and the code for the page
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script> var params = Spry.Utils.getLocationParamsAsObject(); </script>
</head>
<body>
<h1>Test Centres</h1>
<div id="TestCentresTabs" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">First Tab</li>
    <li class="TabbedPanelsTab" tabindex="0">Second Tab</li>
    <li class="TabbedPanelsTab" tabindex="0">Third Tab</li>
    <li class="TabbedPanelsTab" tabindex="0">Test Availability</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
        <h2>Countries</h2>
        <div id="CountryTabs" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">AUSTRALIA</li>
            <li class="TabbedPanelsTab" tabindex="0">BRUNEI</li>
            <li class="TabbedPanelsTab" tabindex="0">CAMBODIA</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">Content AUSTRALIA</div>
            <div class="TabbedPanelsContent">Content BRUNEI</div>
            <div class="TabbedPanelsContent">Content CAMBODIA</div>
          </div>
        </div>
    </div>
    <div class="TabbedPanelsContent"><h2>2nd Tab</h2></div>
    <div class="TabbedPanelsContent">
        <h2>3rd Tab</h2>
      <p> 333333 </p>
    </div>
    <div class="TabbedPanelsContent">
      <h2>4th Tab</h2>
      <p> 44444 </p>
    </div>
</div>
</div>
<script>
var TestCentresTabs = new Spry.Widget.TabbedPanels("TestCentresTabs", {defaultTab: params.test ? params.test : 0});
var CountryTabs = new Spry.Widget.TabbedPanels("CountryTabs", {defaultTab: params.country ? params.country : 0});
</script>
</body>
</html>

Horizontal Tabbed Panel Inside Vertical Tabbed Panel

Hello!
I am new to web coding and in dreamweaver I would like to place a horizontal spry tabbed panel as the content of a vertical spry tabbed panel. I guess you could call it a nesting a tabbed panel. However, when I place the horizontal panel in the content area, it takes the form of a vertical panel. Any thoughts?
Here is a live page of the issue: http://andrewpapp.com/baseballprofile.html
and here is the code:
http://www.andrewpapp.com/html.txt

Hi Newbie,
I say this through gritted teeth because I think you have done far better than just a newbie, even to the extent that you have given correct advice to Jennigje Galama.
To get to your problem, have a look at the following example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<style>
.HTabbedPanels .TabbedPanels {
     margin: 0px;
     padding: 0px;
     float: left;
     clear: none;
     width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.HTabbedPanels .TabbedPanelsTabGroup {
     margin: 0px;
     padding: 0px;
.HTabbedPanels .TabbedPanelsTab {
     position: relative;
     top: 1px;
     float: left;
     padding: 4px 10px;
     margin: 0px 1px 0px 0px;
     font: bold 0.7em sans-serif;
     background-color: #DDD;
     list-style: none;
     border-left: solid 1px #CCC;
     border-bottom: solid 1px #999;
     border-top: solid 1px #999;
     border-right: solid 1px #999;
     -moz-user-select: none;
     -khtml-user-select: none;
     cursor: pointer;
.HTabbedPanels .TabbedPanelsTabHover {
     background-color: #CCC;
.HTabbedPanels .TabbedPanelsTabSelected {
     background-color: #EEE;
     border-bottom: 1px solid #EEE;
.HTabbedPanels .TabbedPanelsTab a {
     color: black;
     text-decoration: none;
.HTabbedPanels .TabbedPanelsContentGroup {
     clear: both;
     border-left: solid 1px #CCC;
     border-bottom: solid 1px #CCC;
     border-top: solid 1px #999;
     border-right: solid 1px #999;
     background-color: #EEE;
.HTabbedPanels .TabbedPanelsContent {
     padding: 4px;
.HTabbedPanels .TabbedPanelsContentVisible {
</style>
</head>
<body>
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
         <div id="TabbedPanels2" class="HTabbedPanels">
           <ul class="TabbedPanelsTabGroup">
             <li class="TabbedPanelsTab" tabindex="0">Tab 1.1</li>
             <li class="TabbedPanelsTab" tabindex="0">Tab 1.2</li>
         </ul>
           <div class="TabbedPanelsContentGroup">
             <div class="TabbedPanelsContent">Content 1.1</div>
             <div class="TabbedPanelsContent">Content 1.2</div>
         </div>
       </div>
    </div>
    <div class="TabbedPanelsContent">
         <div id="TabbedPanels3" class="HTabbedPanels">
           <ul class="TabbedPanelsTabGroup">
             <li class="TabbedPanelsTab" tabindex="0">Tab 2.1</li>
             <li class="TabbedPanelsTab" tabindex="0">Tab 2.2</li>
         </ul>
           <div class="TabbedPanelsContentGroup">
             <div class="TabbedPanelsContent">Content 2.1</div>
             <div class="TabbedPanelsContent">Content 2.2</div>
         </div>
       </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
</script>
</body>
</html>
What the vertical tabs does, is override the style rules of the normal (horizontal) tabs. Thats OK, but if we then want horizontal tags, we must resurrect the orginal style rules. We must also make sure that we choose the selectors carefully unless we want to rewrite the JavaScript file.
I think the above approach is probably the best,
Keep up the good work.
Gramps

How can i find the label of all the tabs of a tab navigator??

I have a tab navigator which has three fixed tabs and dynamically i am creating few tabs. Before creating a tab i wanted to know which all tabs are currently open, basically the name of all the tabs which are open.
Please let me know how can i achieve this.
Thanks

extended from the TabNavigator example in the API docs
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       minWidth="955" minHeight="600"
                       creationComplete="init()">
    <fx:Script>
        <![CDATA[
            private function init():void
                for (var i:int = 0; i < tn.numElements; i++)
                    var btn:Button = tn.getTabAt(i);
                    trace(btn.label);
        ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <s:Panel title="TabNavigator Container Example"
             width="75%" height="75%"
             horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="10" right="10" top="10" bottom="10">
            <s:Label width="100%" color="blue"
                     text="Select the tabs to change the panel."/>
            <mx:TabNavigator id="tn" width="100%" height="100%">
                
                <mx:VBox label="Panel 1">
                    <mx:Label text="TabNavigator container panel 1"/>
                </mx:VBox>
                <mx:VBox label="Panel 2">
                    <mx:Label text="TabNavigator container panel 2"/>
                </mx:VBox>
                <mx:VBox label="Panel 3">
                    <mx:Label text="TabNavigator container panel 3"/>
                </mx:VBox>
            </mx:TabNavigator>
            <s:Label width="100%" color="blue"
                     text="Programmatically select the panel using a Button control."/>
            <s:HGroup>
                <mx:Button label="Select Tab 1" click="tn.selectedIndex=0"/>
                <mx:Button label="Select Tab 2" click="tn.selectedIndex=1"/>
                <mx:Button label="Select Tab 3" click="tn.selectedIndex=2"/>
            </s:HGroup>
        </s:VGroup>
    </s:Panel>
</s:WindowedApplication>

Why data are not getting poulated in dynamically added tab in a tab navigator???

Hi All,
I am facing a very strange problem and need you expert opinion on this. Ok so the problem goes like this:
In my application i have a tab navigator where i have 2 fixed tabs say tab A and tab B. In tab B I have a data grid where All the user name are getting populated. Once the user clicks on any datagrid row i am dynamically adding a new tab based on username , so if in my datagrid u1,u2 and u3 are getting displayed then once you clik on u1 a new tab called u1 is getting displayed. Code for this goes like this:
var vbox1: VBox= new VBox();
box1.label=mydatagrid.selectedItem.uName;
var sde:* = new searchDetails();
vbox1.addChild(sde);
myTabnavigator.addChild(vBox1);
Application.application.searchdetails.displayall();
I have created a component called searchDetails where i have designed the page wit various fields for this tab.This also has a method called displayall() which is populating the data in all fields using php an my sql where i have designed the page wit various fields for this tab.
New tab is getting displayed perfectly. My problem is once the tab is getting displayed fields are not getting populated with data.
Please let me know what wrong i am doing. I am really struggling

Hmm.. you have to assign text to the labelfields on creation complete not before that, the fllow will be like this
var vbox1: VBox= new VBox();
var sde:* = new searchDetails();
vbox1.addEventListener(creationcompleteevent,function);
vbox1.addChild(sde);
myTabnavigator.addChild(vBox1);
function(e:event):void{
box1.label = "text";

I can no longer access vertical tabs

I love vertical tabs as I frequently navigate between 30 - 50 tabs. This is impossible with horizontal tabs. Please can you let me know why vertical tabs is no longer accessible. The Tree Style tabs doesn't work with Firefox 5. I can see no advantage to Firefox 5
Firefox is my working space. It is really discouraging to lose a facility without any explanation or replacement.
PLEASE bring back vertical tab

I keep some pictures in the picture files and they show up. The photos that I used to keep in iPhoto (which disappeared on upgrade) are not accessible in word. If you click on photo the file location (in Word) looks for iPhoto and comes up blank. If you try to enter the file location for "Photos" which is pictures/photolibrary this is greyed out and not accessible. The only way I have been able to do it is export the photos to a folder and choose the file. This is a pain.

Tab navigation does not show at all in FP 10 it shows in FP9

Hi,
I have module that is loaded at runtime,
it has simple tab navigation with 3 children,
in FlashPlaer 9 Debug, tab navigation shows fine, even
thought for some reason it looks like linkbar :)
also numericStepper looks like inputBox and ComboBox has no
arrow, (they all look fine in FB 3.2)
in Flash player 10 tab navigation does not show at all, is
there any obvious thing that I am missing ?
I am guessing something terribly wrong with flex styles, but
I am not overriding any styles,
my environment :
vindows Vista 64 bit (although I use jvm 32)
project is build with latest flex sdk :flex_sdk_3.3.0.4589
P.S: I cant attach image here, so I will record video
tomorrow, if that will help.
thanks in advance
Levan

bump :)
anybody , please please :)

How to open the popup with in Tab navigator working area.

Hi,
I using the customized panel to open it as popup by using popup manager in the Tab navigator . The popup should be able to move with in the tab navigator's content area. Not outside of the tab navigator's content area. How to do this? .What is the difference between opening the popup by using popup manager and add children(); which one is best?
Regards,
Thiru

It depends on your purpose. A popup displays information to the user, and it might be modal if the user should repsond to the popup before continuing, but why constrain it's movement to the space occupied by the TabNavigator.
You could, in theory, check the x and y properties of the popup position, and then compare those with the x and y of the TabNavigator view area, though you might have to do some conversion between global and local coordinates.
You might want to consider your design. Is a popup necessary? Perhaps not. If so, maybe do not consider constraining its movement as you have indicated.
If this post answers your question or helps, please mark it as such.

Inserting tabbed navigation code makes my web page not display in design view..

Hi everyone..
I am on Dreamweaver 8 for MAC, and was working on a couple of web pages..these pages included divs and tables. But when I tried inserting a tabbed navigation I found at:
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
In a nutshell, it asked me for step 1 to:
Step 1: Insert the below CSS and script into the HEAD section of your page:
<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.js">
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
</script>
The next step was this:
Step 2: Finally, simply add the below HTML to where you wish the Tab Content to appear on the page:
<h3>Demo #1- Basic implementation</h3>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p>
<hr />
Well, I did all the steps required, but when I put this inside a div I had inside a table, all of a sudden I couldnt see anything in my design view, only two tables that arent even the same size..When I take out all this code, I get back my regular page..Can I see this tabbed navigation in my design view? Unfortunately, I dont have the spry widgets since I am on Dreamweaver 8..If I preview it in both Safari and Firefox (on Mac Firefox/3.0.8) (Safari 3.2.1) I can see everything fine, including the tabbed navigation..But designing in code isnt really helpful because I want to see what it looks like in design view, in case we change things-its just easier for me to work on..So I assume there is something in this code that is making my design view show nothing..
Update:I tried taking out the code again, but this time, I couldnt see anything again, even without this code..
I know that I can go to validation website, and I got a lot of errors-but all the pages I have that are in the same style have those same errors too—and they display fine..its only when I insert this specific piece of code that everything goes haywire..Is it even possible to view tabbed navigations (like the one in the above link) inside of Dreamweaver Design View?
Any help would be appreciated..

DW8 doesn't render any dynamic content, so I'd say it's a no go. You'll just have to live with that limitation or upgrade to CS4...
Mylenium

Need to Remove the tabs group Title from browser window title

When I use a saved tab group, which means I named that tab group in FF 5,''' the name of the tab group appears at the top of the browser along with the title of the web page I am viewing'''. Not good, I need to remove that tab group title from the browser window title, so I am only seeing the title of the webpage, and nothing from the tab group. How do I do that?
thanks
JSC

You can add the site to the Pop-up Blocker Exceptions list in Options > Content > Block Pop-up Windows > Exceptions
*See --> [https://support.mozilla.com/en-US/kb/Pop-up%20blocker#w_pop-up-blocker-settings Pop-up blocker-Pop-up blocker settings]
'''If this reply solves your problem, please click "Solved It" next to this reply when <u>signed-in</u> to the forum.'''
Not related to your question, but...
You need to update some plug-ins:
*Plug-in check: https://www-trunk.stage.mozilla.com/en-US/plugincheck/
*Adobe PDF Plug-In For Firefox and Netscape: [https://support.mozilla.com/en-US/kb/Using%20the%20Adobe%20Reader%20plugin%20with%20Firefox#w_installing-and-updating-adobe-reader Installing/Updating Adobe Reader in Firefox]
*Shockwave Flash (Adobe Flash or Flash): [https://support.mozilla.com/en-US/kb/Managing%20the%20Flash%20plugin#w_updating-flash Updating Flash in Firefox]
*Next Generation Java Plug-in for Mozilla browsers: [https://support.mozilla.com/en-US/kb/Using%20the%20Java%20plugin%20with%20Firefox#w_installing-or-updating-java Installing or Updating Java in Firefox]

Vertical tabbed panel with background image

Hi all,
I have a working vertical tabbed panel. For the text that's shown, there's a background image assigned to the associated DIV.
However...
The background image that's shown is clipped to the bottom of the text.
In other words, if I have 3 lines of text, the bottom of the background image only goes as far down as the bottom line of text. In order to show the entire image, I have to put in a lot of </ br> tags for "empty" text, not a very good approach.
More of the backgound will show if I increase the text text size via the browser.
To try to describe this more accurately,
Let's say I have a background image that's 600 px in height, but the lines of text only measure to 400px. That means that the bottom 200 px of the image doesn't show, unless I add more lines of text.
Hoping someone has an answer!
Thanks,
Jerry

Gramps,
Again, thanks for your time. While we're now full time commercial photographers (http://www.jerryandlois.com), I was a software engineer for some 20+ years in an earlier life, all on the application side of things. Not really any appreciable time with website stuff.
There are a few more tech/how-to questions I have that are specific to CSS, in terms of polishing up the small site I'm working on. However these are not SPRY related, unless SPRY can solve this for me.
In particular, suppose I have a large block with a background image and a body of text. I want to ensure the text wraps around the image, rather than being a complete overlay where the text can collide with the main body of the photo.
Example:
http://jerryandloisstudios.com/about.html
The issue is that the text is resizable, by design of course. Is there any way to manage these two elements (text and image) so they get along the right way? We want the text to overlay some of the image, but only on the periphery, if that makes sense. So far, the only solution I've seen is to keep the text formatted roughly in a column so that if its size increases all will still be OK. But... artistically that just doesn't look right.
If you're up for it, I'd certainly welcome a private email thread, unless others can also benefit from the rather newbie questions I'm raising: [email protected]
Again, thank you for your help!!!
Jerry

Vertical Tab Navigation Titles

Similar Messages

Maybe you are looking for