tags:

views:

55

answers:

1
+2  Q: 

Roll up/down in javascript

Hi guys, please help me with this roll up/down side bar menu.

I have made a video clip to demonstrate.

http://www.youtube.com/watch?v=Eegqh1w3eJQ

Here is html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mode 1</title>
<link href="Style_sheet.css" rel="stylesheet" type="text/css" />
<script src="Display text.js" type="text/javascript"></script>
</head>

<body>
<div class="Body">
<div class="header">
<h1 id="head">Manage Components</h1>
<h3 id="select-system">Select System</h3>
</div>
<div class="side-nav">

<a href="#" onclick="show('n1')" id="english">57.102 Introductory Spanish</a><br />
<div id="n1" style="display:none">
<a href="#" onclick="show('n2')" id="green">Section 1:Introduction to Spanish Culture</a><br />
<div id="n2" style="display:none">
<a href="#" id="dark_red">Topic 1:Getting started</a><br />
<a href="#" id="dark_red">Topic 2:Introduction to Grammar</a><br /><br /><br />

</div>

<a href="#" onclick="show('n3')" id="green">Section 2:Getting started with reading and  writing</a><br />
<div id="n3" style="display:none">
<a href="#" onclick="show('nn3')" id="dark_red">Topic 1:Reading Spanish</a><br />
<div id="nn3" style="display:none">
<a href="mode 1.html" onclick="show('nn4')" id="light_blue">Mode 1:Spanish Components</a>
<div id="nn4" style="display:none">
<a href="reading_spanish.html" id="red">Spanish Reading</a>
</div>
</div><br />
<a href="#" id="dark_red">Topic 2:Writing in Spanish</a><br />
</div>
</div><br />

<a href="#" onclick="show('m1')" id="english">Topic SuperMode</a><br />
<div id="m1" style="display:none">
<a href="#" id="green">Study Guide</a><br />
<a href="#" onclick="show('m2')" id="green">Key Words</a><br />
<div id="m2" style="display:none">
<a href="#" id="dark_red">Pragmatics</a><br />
<a href="#" id="dark_red">Manana</a><br />
<a href="#" id="dark_red">Tiempo</a><br />
<a href="#" id="dark_red">Cara</a><br />
<a href="#" id="dark_red">Triste</a><br />
</div>
<a href="#" id="green">Learning Support</a><br />
<a href="#" id="green">Help</a><br />
<a href="#" id="green">Chat</a><br />
<a href="#" id="green">Email</a><br />
<a href="#" id="green">Notes</a><br />
</div><br />

<a href="#" onclick="show('p1')" id="english">Pre-defined modes</a><br />
<div id="p1" style="display:none">
<a href="#" id="green">Culture aspects</a><br />
<a href="#" id="green">Reading practice</a><br />
<a href="#" id="green">Writing practice</a><br />
<a href="#" id="green">Listening and speaking</a><br />
</div>

</div>


<div id="slection">
57.102 Introductory Spanish > Section 1 > Topic 1 > Mode 1
</div>

<div id="content">
<p id="list-component">List of Available Components </p>
<!--<div id="check-box">
<input type="checkbox" value="checkbox1" />
<label id="label">Reading</label>
<label id="label2">15-10-2010</label>
<label id="label">10:52</label>
<label id="label2">Kemp</label><br />

<input type="checkbox" value="checkbox2" />
<label id="label">Listening</label>
<label id="label2">14-10-2010</label>
<label id="label">8:02</label>
<label id="label2">Kemp</label><br />

<input type="checkbox" value="checkbox3" />
<label id="label">Writing</label>
<label id="label2">10-10-2010</label>
<label id="label">7:35</label>
<label id="label2">Kemp</label><br />

<input type="checkbox" value="checkbox4" />
<label id="label">Grammar</label>
<label id="label2">01-10-2010</label>
<label id="label">4:20</label>
<label id="label2">Kemp</label><br />
</div>-->


<table id="tabl">
<tr>
<td><input type="checkbox" value="checkbox1" /></td>
<td>Reading</td>
<td>15-10-2010</td>
<td>10:52</td>
<td>Kemp</td>
</tr>

<tr>
<td><input type="checkbox" value="checkbox2" /></td>
<td>Listening</td>
<td>14-10-2010</td>
<td>08:02</td>
<td>Kemp</td>
</tr>

<tr>
<td><input type="checkbox" value="checkbox3" /></td>
<td>Writing</td>
<td>10-10-2010</td>
<td>07:35</td>
<td>Kemp</td>
</tr>

<tr>
<td><input type="checkbox" value="checkbox4" /></td>
<td>Grammar</td>
<td>01-10-2010</td>
<td>04:20</td>
<td>Kemp</td>
</tr>
</table><br />

<input type="button" name="edit_button" id="save_but" value="Edit" />
<input type="button" name="delete_button" id="cancel_but" value="Delete" />
<input type="button" name="Student Preview" id="cancel_but" value="preview" onclick="window.location.href='student_preview.html'" />
<input type="button" name="back" id="preview-but" value="Back" />


</div>


</div>

</body>
</html>

Here is javascript

function show(id)
{
    object=document.getElementById(id);
    if(object.style.display=="none")
    {
        object.style.display="";
        }
        else
        {
        object.style.display="none";
        }
    }

Here is CSS

@charset "utf-8";
/* CSS Document */
html,body{
    padding:0;
    margin:0;
    background-color:#E8E8E8;
}
.Body{
    background-color:#FFF;
    width:1050px;
    height:900px;
    margin:auto;
    padding:0;
    position:relative;
}
.header{
    background-color:#FFF;
    width:1048px;
    height:140px;
    float:right;
    border:1px #F00 dotted;
    position:relative;
}
.header #head{
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:46px;
}
.header #select-system{
    position:absolute;
    left:20px;
    bottom:-18px;
    font-family:Verdana, Geneva, sans-serif;
    text-decoration:underline;
}
.side-nav{
    background-color:#FFF;
    width:250px;
    height:757px;
    position:absolute;
    left:auto;
    bottom:0px;
    border:1px dotted #F00;
}
.side-nav #english{
    text-decoration:none;
    font-size:18px;
    font-weight:bold;
    padding:5px;
    color:#06F;
}
.side-nav #blue{
    color:#03F;
    text-decoration:none;
    font-weight:bold;
    font-size:14px;
}
.side-nav #green{
    color:#6F0;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:15px;
}
.side-nav #dark_red{
    color:#900;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:30px;
}
.side-nav #light_blue{
    color:#0CF;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:45px;
}
.side-nav #red{
    color:#F00;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:60px;
}
.Body #content{
    position:absolute;
    left:260px;
    top:180px;
    width:780px;
    height:700px;
    border:1px solid #F00;
}
.Body #content1{
    position:absolute;
    left:260px;
    top:150px;
    width:780px;
    height:740px;
    border:1px solid #F00;
}
.Body #txt{
    margin-left:20px;
}
.Body #slection{
    position:absolute;
    left:260px;
    top:150px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    color:#F00;
    font-weight:bold;
}
.Body #boxes{
    border:2px solid #000;
    margin-left:10px;
    margin-top:10px;
    height:25px;
}
.Body #text{
    font-weight:bold;
    font-size:20px;
    margin-left:20px;
    margin-top:10px;
}
.Body #cont_box{
    width:730px;
    height:180px;
    border:2px solid #000;
    margin-left:20px;
    font-size:20px;
    color:#00F;
    padding:5px;
}
.Body #cont_box1{
    width:730px;
    height:280px;
    border:2px solid #F60;
    margin-left:13px;
    font-size:20px;
    color:#06F;
    padding:10px;
}
.Body #cont_box2{
    width:645px;
    height:350px;
    border:2px solid #F60;
    margin-left:60px;
    font-size:20px;
    color:#06F;
}
.Body #browse_box{
    border:2px solid #000;
    margin-left:150px;
    margin-bottom:10px;
    height:25px;
    width:400px;
}
.Body #button{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:10px;
}
.Body #button:hover{
    background-color:#09F;
}
.Body #button_more{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:567px;
}
.Body #save_but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:150px;
}
.Body #cancel_but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:20px;
}
.Body #preview-but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:100px;
}
.Body #preview-but:hover{
    color:#009;
}
.Body #checkbox{
    margin-left:150px;
    height:20px;
}
.Body #dropdownbox{
    width:180px;
    height:30px;
    position:absolute;
    left:280px;
    top:10px;
}
.Body #b1{
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:36px;
    color:#F00;
}
.Body #icons{
    width:130px;
    height:140px;
    margin-right:10px;
    margin-left:60px;
    margin-top:50px;
    float:left;
}
.Body #text_icons{
    width:190px;
    height:15px;
    float:left;
    font-size:14px;
    text-decoration:none;
    color:#06F;
    margin-left:20px;
    margin-right:5px;
}
.Body #extra-materials{
    font-size:18px;
    text-decoration:none;
    margin-left:60px;
    color:#06F;
}
.Body #extra-materials:hover{
    text-decoration:underline;
}
.Body #list-component{
    margin-left:40px;
    font-size:18px;
    font-weight:bold;
}
.Body #check-box{
    margin-left:150px;
}
.Body #label{
    margin-left:30px;
}
.Body #label2{
    margin-left:80px;
}
.Body #tabl{
    border:hidden;
    width:500px;
    height:10px;
    margin-left:150px;
    margin-top:50px;
}

Please help!!!

Thanks in advance!

+1  A: 

It looks to me that your problem lies in the fact that your "Spanish Component" link sends you to a different .html page. When the new page loads, the menu on the left side of the page also reloads to its original state (with everything hidden, or "rolled up" as you say). So, the two solutions I can see are:

(1) Don't let the page reload.

(2) Save the state of the menu, and send that state to the new page (mode 1.html), so when the new page loads, you can load the menu appropriately.

To implement the first solution, I would use AJAX to dynamically get the data from mode 1.html and display it on the page without the page reloading. If you are unfamiliar with AJAX w3schools.com has a pretty good tutorial here.

To implement the second solution, you need a way to save the state, then send it to the next page. This would probably require some server-side scripting, and even then probably wouldn't work as well as the first solution, so I would suggest sticking with the AJAX solution.

smfoote  2010-10-16 20:44:15
yes that's exactly what happened. Thanks i will give it a try!
James1  2010-10-16 20:54:26

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript