Programming Help

Web Development



What's Here?

  • Members: 117,523
  • Replies: 431,717
  • Topics: 66,646
  • Snippets: 2,394
  • Tutorials: 631
  • Total Online: 2,032
  • Members: 71
  • Guests: 1,961

Who's Online?

Welcome to Dream.In.Code
Getting Help is Easy!

Join 117,523 Programmers for FREE! Ask your question and get quick answers from experts. There are 2,032 online right now! We've got more than 500 tutorials and 2,000 snippets. Join and find out why Dream.In.Code is the #1 programming help community on the internet! Registration is fast and FREE... Join Now!



Tabbed stacking panels

 
 Reply to this topicStart new topic

Tabbed stacking panels
net nerd865
post 1 Jul, 2008 - 11:53 AM
Post #1


New D.I.C Head

*
Joined: 16 Jun, 2008
Posts: 43



Thanked 2 times
My Contributions
I'm trying to make a site in one page using a horizontal menu and div panels. I've never done javascript but I've looked over a few tutorials. Basically here's what I've come up with.

CODE

// JavaScript Document

// Global vars to hold the object in the panel
var myTabs = new Array(7);
var myPanels = new Array(7);
var currentMenuIndex = 0;

// Gets the objects
function bodyOnLoad() {
    myTabs[0] = getItemObj('homenav');
    myTabs[1] = getItemObj('actnav');
    myTabs[2] = getItemObj('photonav');
    myTabs[3] = getItemObj('histnav');
    myTabs[4] = getItemObj('contactnav');
    myTabs[5] = getItemObj('conductnav');
    myTabs[6] = getItemObj('linknav');
    
    myPanels[0] = getItemObj('panel1');
    myPanels[1] = getItemObj('panel2');
    myPanels[2] = getItemObj('panel3');
    myPanels[3] = getItemObj('panel4');
    myPanels[4] = getItemObj('panel5');
    myPanels[5] = getItemObj('panel6');
    myPanels[6] = getItemObj('panel7');
    
    for (int i = 0; i < 7; ++i) {
        hideObject(myPanels[i]);
    }
    showPanel(currentMenuIndex);
}

// Will get the object's ID
function getItemObj (itemId) {
    obj = document.getElementById(itemId);
    
    if (obj == null)
        alert('Error: id=' + itemId + ' does not exist.');
        
    return obj;
}

// Show the Panel of the clicked tab, highlight the tab (using CSS with the class), unhighlight the old tab (with CSS)
function showPanel (panelIndex) {
    for (int i = 0; i < 7; ++i) {
        if (i == panelIndex) {
            showObject(myPanels[i]);
            myTabs[i].className = 'tabMenuActive';
        } else {
            showObject(myPanels[i]);
            myTabs[i].classname = 'tabMenu';
        }
    }
    hideObject(myPanels[currentMenuIndex]);
    currentMenuIndex = panelIndex;
    return true;
}

// Hide the old panel
function hideObject (target) {
    target.style.visible = hidden;    
}

// Show the new panel
function showObject (target) {
    target.style.visible = show;    
}


I get errors saying that there is a semicolon ';' and that the bodyOnLoad function is not defined. Any thoughts about how to get this working?
User is offlineProfile CardPM

Go to the top of the page


Martyr2
post 1 Jul, 2008 - 12:15 PM
Post #2


Programming Theoretician

Group Icon
Joined: 18 Apr, 2007
Posts: 4,604



Thanked 116 times

Expert In: C/C++, Java, VB, VB.NET, C#, PHP, Web Development, HTML & CSS, Javascript

My Contributions
First unless you are dealing with layers the toggling for visibility is "hidden" and "visible". If it is layers as defined with layer tags, ignore this comment.

Second, we will need to see the rest of the page to know where you have defined this javascript and how you are calling the functions. Keep in mind that javascript is case sensitive so make sure now only you spell the functions correctly but that you have the correct capitalization.

Also make sure that you put this javascript in the head of the page so that it will be loaded first and that all elements of the page that may use this javascript will be loaded as well.

So if you can show us the html page that is using this javascript, then we may be able to assist further. smile.gif
User is offlineProfile CardPM

Go to the top of the page

net nerd865
post 1 Jul, 2008 - 12:35 PM
Post #3


New D.I.C Head

*
Joined: 16 Jun, 2008
Posts: 43



Thanked 2 times
My Contributions
ok heres the html. some of it may have changed a little bit. but i'm pretty sure this is it. do function calls need to be enclosed in " "?
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>Troop 1165 - Halifax PA</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body onload=bodyOnLoad()>
    <div id="container">
        <div id="header">
            <div class="top-right"></div>
            <div class="top-left"></div>
            <div class="headcont">
                <div>
                    <h1>Troop 1165 - Halifax PA</h1>
                    <img src="img/bsalogo.gif" alt="BSA Logo" />
                </div>
            </div>
               <div class="bottom-right"></div>
            <div class="bottom-left"></div>
        </div> <!-- HEADER -->
    </div> <!-- CONTAINER -->
    <div id="navbar">        
        <ul class="buttons">
            <li><a href="#" onClick=bodyOnLoad() id="homenav">Home</a></li>
            <li><a href="#" onClick=bodyOnLoad() id="actnav">Activities</a></li>
            <li><a href="#" onClick=bodyOnLoad() id="photonav">Photos</a></li>
            <li><a href="#" onClick=bodyOnLoad() id="histnav">History</a></li>
            <li><a href="#" onClick=bodyOnLoad() id="contactnav">Contacts</a></li>
            <li><a href="#" onClick=bodyOnLoad() id="conductnav">Conduct</a></li>  
            <li><a href="#" onClick=bodyOnLoad() id="linknav">Links</a></li>                                  
        </ul>
        <div class="bar"></div>
    </div>
<!-- NAVBAR -->
    <div id="containerbottom">
        <div id="main">
            <div class="contholder">
                <div class="sidebar1">
                           <h3>Scout Law</h3>
                        <p></p>
                        <h3>Scout Oath</h3>
                        <p></p>
                        <h3>Scout Motto</h3>
                        <p></p>
                        <h3>Scout Slogan</h3>
                        <p></p>
                </div>
                <div class="content">
                    <div id="panel1">
                        <h2> Item One Heading </h2>
                            <p>Summary of item 1. Say some things.</p>
                            <p class="more"><a href="#">Read More</a></p>
                        <hr />
                        <h2> Item Two Heading </h2>
                            <p>Summary of item 2. Say some things.</p>
                            <p class="more"><a href="#">Read More</a></p>
                    </div>
                    <div id="panel2">Activities</div>
                    <div id="panel3">Photos</div>
                    <div id="panel4">History</div>
                    <div id="panel5">Contacts</div>
                    <div id="panel6">Conduct</div>
                    <div id="panel7">Links</div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom-right"></div>
                <div class="bottom-left"></div>
            </div>
        </div> <!-- MAIN -->
    </div> <!-- CONTAINER -->
</body>
</html>
User is offlineProfile CardPM

Go to the top of the page

level1
post 3 Jul, 2008 - 11:16 AM
Post #4


New D.I.C Head

*
Joined: 12 Jun, 2008
Posts: 34



Thanked 5 times
My Contributions
You have two main problems - fix these and they should help you get on your way. In your for loops you are using int i = 0; instead use
CODE
for(var i=0; i<7; i++) {
then in your last two functions you use the wrong style name and try to set it to varialbes that don't exist. Change them to the right style names and to strings like this:
CODE
// Hide the old panel
function hideObject (target) {
    target.style.visibility ='hidden';    
}

// Show the new panel
function showObject (target) {
    target.style.visibility = 'visible';    
}


that should fix your errors. You have no style sheet here so I can't really see what you are going for, but I think this will give you a good path to follow.
User is offlineProfile CardPM

Go to the top of the page

Fast ReplyReply to this topicStart new topic
Time is now: 10/7/08 03:23PM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month