We Keep Coding

Resize textarea after deleting text

If you write text, a textarea increases in size, but when you delete this text then nothing happens. Is it possible to dynamically decrease the height of a textarea if you are deleting text?
$('textarea').on('input', function() {
var scrollHeight = parseInt($(this).prop('scrollHeight'));
$(this).height(scrollHeight);
});
.OuterDiv
{
width:200px;
height:300px;
border:1px solid #000;
position:relative;
bottom:0;
}
.text
{
resize:none;
width:198px;
height:45px;
max-height:145px;
background-color:rgba(90,90,180,1);
font-size:16px;
font-family:Arial;
overflow-y:auto;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OuterDiv">
<textarea class="text" placeholder="Write some text..."></textarea>
</div>

Set the height style instead of the property, and use an initial height so as to always start at 45px.
$('textarea').on('input', function() {
$(this).css('height', "45px");
$(this).css('height', this.scrollHeight+"px");
});
.OuterDiv
{
width:200px;
height:300px;
border:1px solid #000;
position:relative;
bottom:0;
}
.text
{
resize:none;
width:198px;
height:45px;
max-height:145px;
background-color:rgba(90,90,180,1);
font-size:16px;
font-family:Arial;
overflow-y:auto;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OuterDiv">
<textarea class="text" placeholder="Write some text..."></textarea>
</div>

You could use a div with contentEditable instead it will auto-resize depending on the contentno need for any script :
.OuterDiv
{
width:200px;
height:300px;
border:1px solid #000;
position:relative;
bottom:0;
}
.text
{
resize:none;
width:198px;
min-height:45px;
height:auto;
max-height:145px;
background-color:rgba(90,90,180,1);
font-size:16px;
font-family:Arial;
overflow-y:auto;
padding:0;
}
[contenteditable=true]:empty:before{
content: attr(placeholder);
display: block; /* For Firefox */
color: grey;
}
<div class="OuterDiv">
<div class="text" contentEditable="true" placeholder="Write some text..."></div>
</div>

Jquery background slide down

I was wondering if it is possible to change make the div follow the size of its table cell? At the moment I can only display something above another div. This is what I have so far.
https://jsfiddle.net/amosangyongjian/mmqasf5t/54/
$(document).ready(function(){
$("td").hover(function(){
$(this).find(".expand").slideDown("slow");
},function(){
$(this).find(".expand").slideUp("slow");
});
});

jsFiddle example
td {
width:100px;
height:100px;
position:relative; /* ADD THIS */
}
.expand {
display:none;
position:absolute;
top:0; left:0; width:100%; height:100%; /* ADD */
z-index:1;
background:red;
/*height:auto; width:100%; REMOVE */
overflow:hidden;
}
.static {
position:absolute;
z-index:0;
background:yellow;
text-align:center;
}
And here's a much cleaner solution with some minor changes in HTML, CSS, jQuery
jQuery(function( $ ) {
$("td").hover(function() {
$(this).find(".expand").stop().slideToggle("slow");
});
});
td {
width:100px;
height:100px;
position:relative;
}
.expand {
display:none;
position:absolute;
top:0; left:0; width:100%; height:100%;
background:red;
overflow:hidden;
}
.static {
position:absolute;
background:yellow;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
<td>
<div class="static">Hello1</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello2</div>
<div class="expand">Expanded</div>
</td>
</tr>
<tr>
<td>
<div class="static">Hello3</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello4</div>
<div class="expand">Expanded</div>
</td>
</tr>
</table>
and here's another example that uses no JavaScript at all
but CSS3 transition from height:0; to height:100%;
td {
width:100px;
height:100px;
position:relative;
}
.static {
position:absolute;
background:yellow;
text-align:center;
}
.expand {
position:absolute;
overflow:hidden;
top:0; left:0; width:100%; height:0;
background:red;
transition: 0.5s;
}
td:hover .expand{
height:100%;
}
<table border="1" id="tableclass">
<tr>
<td>
<div class="static">Hello1</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello2</div>
<div class="expand">Expanded</div>
</td>
</tr>
<tr>
<td>
<div class="static">Hello3</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello4</div>
<div class="expand">Expanded</div>
</td>
</tr>
</table>

Cannot click buttons in my website

I have been making some changes to my website except suddenly (this is a new problem) I am unable to click the buttons or anything on the website except for the header part (the grey part at the top of the screen.) This happens quite frequently to other pages of my site and typically after looking at it for a while I figure it out but this time I just cannot get it. The code for this page will be shown below. Any help will be appreciated. Just a little note, I believe it is in the header because I was editing the search. The code is shown below.
<!DOCTYPE html
<html>
<head>
<title>Your Pages</title>
<meta name="viewport" content="initial-scale=1.0">
<style>
div.wrapper{
margin:auto;
text-align:center;
width:100%;
transition:background 2s ease-in-out;
}
div.pages{
text-align:center;
background-color:#FFFFE8;
margin:auto;
width:95%;
padding:5px;
}
button{
margin:5px;
width:95%;
padding:4px;
background-color:skyblue;
border:2px solid skyblue;
}
a.opt{
margin:5px;
}
input[type="text"], input[type="submit"], textarea{
width:50%;
border-radius:10px;
border:1px solid lightblue;
height:30px;
padding:2px;
margin:4px;
text-align:center;
background-color:white;
}
div.newp{
position:relative;
z-index:0;
width:75%;
margin:auto;
padding:10px;
border-radius:10px;
box-shadow:10px 5px 5px black;
background-color:white;
display:none;
}
</style>
</head>
<body>
<style>
span.posts{
font-family:sans-serif;
font-weight:bold;
font-size:28px;
float:left;
}
div.wrapper{
position:absolute;
top:30%;
width:100%;
font-family:sans-serif;
z-index:-1;
}
h3.num{
font-family:sans-serif;
font-weight:normal;
font-size:28px;
}
div.main{
position:fixed;
border:1px solid black;
box-shadow:10px 10px 10px #000000;
background-color:rgba(000, 000, 000, 0.7);
width:100%;
padding:5px;
}
body{
padding:0px;
margin:0px;
}
a.hea{
text-decoration:none;
color:white;
float:left;
font-size:28px;
}
a.mlinks{
float:none;
}
a.menu{
margin:28px;
color:white;
}
div.mmenu{
display:none;
position:absolute;
z-index:0;
transition:all 2s ease-in-out;
}
input[type="text"].se{
margin-top:7%;
visibility:hidden;
width:0%;
transition:all 2s ease-in-out;
float:left;
}
#media (max-width:480px){
a.menu{
display:none;
}
a.menbs{
float:left;
}
div.mmenu{
display:block;
position:absolute;
left:-100%;
width:100%;
top:30%;
height:70%;
text-align:center;
background-color:black;
color:white;
transition:left 2s ease-in-out;
}
}
#media (min-width:481px){
a.menb{
display:none;
}
}
a.menb{
float:right;
margin-right:8px;
}
a.menbs{
float:right;
margin-right:8px;
}
img.menuimage{
width:3em;
height:3em;
}
div.searchField{
width: 100%;
background-color:black;
display:none;
opacity:0;
position:absolute;
top:0%;
left:0%;
color:white;
text-align:center;
padding-top:10%;
transition:all 1s ease-in-out;
}
input[type="text"].headerSearch{
background-color:transparent;
border:2px solid white;
color:white;
text-align:center;
width:75%;
font-size:28px;
padding:4px;
}
</style>
<div class="main" id="main">
<h3 class="num"><span class="posts">Posts</span>101</h3>
<a class="menu hea" href="http://www.wilsonfamily5.org/posts101/pages" target="frame">Pages</a>
<a class="menu hea" href="http://www.wilsonfamily5.org/posts101/accounts" target="frame">My Account</a>
<input type="text" onclick="submitForm()" placeholder="search" class="se" id="se">
<a class="menb hea" onclick="mmenu()"><img class="menuimage" src="http://www.wilsonfamily5.org/posts101/menu.png" alt="menu"></a>
<a class="menbs hea" onclick="search()"><img class="menuimage" src="http://www.wilsonfamily5.org/posts101/search.png" alt="search" onclick="search()"></a>
</div>
<div class="mmenu" id="mmenu">
<a class="hea mlinks" href="http://www.wilsonfamily5.org/posts101/pages" target="frame">Pages</a><br>
<a class="hea mlinks" href="http://www.wilsonfamily5.org/posts101/account" target="frame">My Account</a>
</div>
<div class="searchField" id="searchField" style="height: 100%;">
<form action="results.php" method="GET">
<h1>search anything, then click enter</h1>
<input type="text" name="q" placeholder="search" class="headerSearch"><br><br>
<a onclick="cancelSearch()" style="color:white;">cancel search</a>
</form>
</div>
<script>
var mmop = false;
function mmenu(){
if(mmop == false){
document.getElementById("mmenu").style.display="block";
document.getElementById("mmenu").style.left="0%";
mmop = true;
}else{
document.getElementById("mmenu").style.left="-100%";
mmop = false;
setTimeout(function(){
document.getElementById("mmenu").style.display="none";
}, 2000);
}
}
var sea = false;
function search(){
document.getElementById("searchField").style.display="block";
document.getElementById("searchField").style.opacity="0.7";
}
function cancelSearch(){
document.getElementById("searchField").style.display="none";
}
function submitForm(){
var se = document.getElementById("se").value;
window.location="http://www.wilsonfamily5.org/posts101/results.php?q=" + se;
}
</script>
<div id="wrapper" class="wrapper">
<h1>Your Pages</h1>
<p>Click on "Create page" to create a page. Click on a page, and then select whether you want to open it, edit it, or unsubscribe.</p>
<p style="color:green;"></p>
<p style="color:red;"></p>
<button id="cbutton" onclick="newf()">Create page</button>
<div id="newp" class="newp">
<form id="newpageform" name="newp" action="newPage.php" method="POST">
<h1>New Page</h1>
<input type="text" name="title" placeholder="Title"><br>
<textarea form="newpageform" name="description" placeholder="Description"></textarea><br>
<textarea form="newpageform" name="keywords" placeholder="Keywords (separated by space)"></textarea><br>
<input type="text" onkeyup="ajaxRefresh()" style="display:none; margin:auto;" name="rCode" id="rcode" placeholder="rewards code">
<p id="info"></p>
<input type="submit" value="Create Page"><br>
<a onclick="redeemCode()">Redeem rewards code</a>
</form>
<button onclick="closeNewPage()">Close</button>
</div>
<div id="newep" class="newp">
<form id="editpageform" name="newp" action="editPage.php" method="POST">
<h1>Edit Page</h1>
<input type="text" id="title" name="title" placeholder="Title"><br>
<textarea form="editpageform" id="description" name="description" placeholder="Description"></textarea><br>
<textarea form="editpageform" id="keywords" name="keywords" placeholder="Keywords (separated by space)"></textarea><br>
<input type="hidden" name="ident" id="ident">
<input type="submit" value="Edit Page">
</form>
<button onclick="closeEditPage()">Close</button>
</div>
<div id="pages" class="pages">
Helicopter<a class='opt' href='page.php?p=45'>Open</a><a class='opt' onclick='edit(45)'>Edit</a><a class='opt' onclick='unsubscribe(45)'>Unsubscribe</a><br>Test page<a class='opt' href='page.php?p=43'>Open</a><a class='opt' onclick='unsubscribe(43)'>Unsubscribe</a><br>Test page<a class='opt' href='page.php?p=42'>Open</a><a class='opt' onclick='unsubscribe(42)'>Unsubscribe</a><br> <p>To get new pages on this list, create or search for a page!</p>
</div>
</div>
<script>
function newf(){
document.getElementById("wrapper").style.background="black";
document.getElementById("newp").style.display="block";
document.getElementById("cbutton").style.display="none";
document.getElementById("pages").style.display="none";
}
function unsubscribe(id){
window.location="../substatus/unsubscribe.php?i=" + id + "&t=1";
}
function edit(id){
document.getElementById("wrapper").style.background="black";
document.getElementById("newep").style.display="block";
document.getElementById("cbutton").style.display="none";
document.getElementById("pages").style.display="none";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
var text = xhttp.responseText;
var parts = text.split("?(105|SpLiTtEr)!");
document.getElementById("title").value = parts[0];
document.getElementById("description").value = parts[1];
document.getElementById("keywords").value = parts[2];
document.getElementById("ident").value = id;
}
xhttp.open("GET", "http://www.wilsonfamily5.org/posts101/pageInfo.php?i=" + id, true);
xhttp.send();
}
function closeEditPage(){
document.getElementById("wrapper").style.background="white";
document.getElementById("newep").style.display="none";
document.getElementById("cbutton").style.display="block";
document.getElementById("pages").style.display="block";
}
function closeNewPage(){
document.getElementById("wrapper").style.background="white";
document.getElementById("newp").style.display="none";
document.getElementById("cbutton").style.display="block";
document.getElementById("pages").style.display="block";
}
function redeemCode(){
document.getElementById("rcode").style.display="block";
}
function ajaxRefresh(){
var input = document.getElementById("rcode").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText == ""){
document.getElementById("rcode").style.border="2px solid red";
document.getElementById("info").innerHTML = xhttp.responseText;
}else{
document.getElementById("rcode").style.border="2px solid green";
document.getElementById("info").innerHTML = xhttp.responseText + " points are available on this card.";
}
}
}
xhttp.open("GET", "../rewards/ajaxCheck.php?c=" + input, true);
xhttp.send();
}
</script>
</body>
</html>

Short answer:
Your links and such aren't clickable because they have a negative z-index, and are falling underneath the body. Line 91:
div.wrapper {
z-index: -1;
}

I made a jquery slide show but it doesn't work right, what do i do [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay so i made this jquery slider from a video series on youtube and it doesn't seem to be working right... The image fades in at first but then the next image doesn't come in. How can i fix this.. Im using older versions of jquery because of deprecated functions
here is the html.
<!DOCTYPE html>
<html>
<head>
<title>
Home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript">
</script>
<script src="jquery-ui-1.8.18.js" type="text/javascript">
</script>
<script src="script.js" type="text/javascript">
</script>
</head>
<body class="body" onload="Slider()">
<div class="container">
<div class="bg">
<div class="mainHeader">
<nav>
<ul>
<li class="last">
Contact
</li>
<li>
Products
</li>
<li>
About
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
<div class="topArea">
<div class="topAInfo">
<h2>
Here is just a simple title
</h2>
<p>
This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.
</p>
</div>
</div>
<div class="middleArea">
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
<div class="middleAInfo">
<h3>
Welcome to
</h3>
<p>
A dummy website!!
</p>
</div>
<div class="latestNews">
<hr>
<h2>
Latest News
</h2>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="newsLetter">
<div class="newsLInfo">
<h3>
Newsletter sign-up
</h3>
<hr>
<p>
If you would like to sign up for our free NewsLetter please enter your email below
</p>Unsubscribe
</div><input type="text" name="textBox" class="textBox" style="width:200px; height:20px;">
<div class="button1">
Submit
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css:
*{margin:0;padding:0;}
#font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}
body{
background:#ebebeb;
width:80%;
height:1300px;
}
.container{
width:100%;
}
.mainHeader nav{
width:95%;
height:40px;
position:relative;
left:30px;
top:60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul{
}
.mainHeader nav ul li{
float:right;
display:inline;
text-align:center;
border:1px solid #ADADA8;
border-bottom:none;
border-top:none;
border-left:none;
padding-top:20px;
}
.mainHeader nav ul li.last{
border-right:none;
}
.mainHeader nav ul li a{
text-decoration:none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family:Arial;
position:relative;
top:-10px;
color:white;
padding:10px;
padding-right:20px;
padding-left:20px;
}
.mainHeader nav ul li a.active{
background:white;
color:black;
}
.mainHeader nav ul li a:hover{
background:white;
color:black;
}
.topArea{
width:95%;
height:300px;
position:relative;
left:30px;
top:10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(white,rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white,rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white,rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(white,rgb(33, 171, 198)); /* Standard syntax */
}
.topArea .topAInfo{
margin:20px;
padding-top:60px;
width:60%;
margin:50px;
font-family:;
}
.topArea .topAInfo h2{
font-family:SketchFont;
font-weight: normal;
}
.topArea .topAInfo p{
line-height:25px;
font-family:cursive;
font-size:15px;
}
.bg{
width:100%;
height:1200px;
position:relative;
left:10%;
background:linear-gradient(blue, white, white, blue); /* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}
.middleArea{
background:linear-gradient(white, white, #55C4E9); /* Standard syntax */;
height:600px;
width:95%;
position:relative;
left:30px;
top:10px;
}
.middleArea .middleAInfo {
padding:30px 0 0 30px;
}
.middleArea .middleAInfo p{
color:#49CBF0;
font-size:30px;
font-weight:400;
}
.middleArea .latestNews {
width:250px;
height:300px;
background:#0099cc;
float:right;
position:relative;
top:-60px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews hr{
position:relative;
top:50px;
color:black;
width:90%;
margin-left:10px;
}
.middleArea .latestNews h2{
padding:10px 10px 10px 10px;
color:white;
}
.middleArea .latestNews p.date{
color:white;
font-size:13px;
font-weight:bold;
padding:10px 10px 10px 20px;
}
.middleArea .latestNews p{
color:white;
font-size:13px;
position:relative;
left:10px;
width:225px;
}
.middleArea .latestNews a{
color:blue;
font-size:15px;
font-family:Arial;
}
.middleArea .latestNews .newsLetter{
background:white;
width:250px;
height:200px;
position:relative;
top:80px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews .newsLetter .textBox{
position:relative;
top:40px;
left:25px;
}
.middleArea .latestNews .newsLetter .button1{
width:50px;
height:25px;
background:#1768ED;
padding:3px 10px 2px 10px;
border-radius:7px;
text-align:center;
color:white;
font-family:Arial;
position:relative;
top:45px;
left:155px;
}
.middleArea .latestNews .newsLetter .button1:hover{
cursor: pointer;
}
.middleArea .latestNews .newsLetter h3{
position:relative;
top:15px;
left:10px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter hr{
position:relative;
top:20px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter p{
color:black;
position:relative;
top:40px;
color:#21AFEA;
font-size:15px;
}
.middleArea .latestNews .newsLetter a{
position:relative;
top:90px;
left:30px;
}
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(loading.gif);
background-repeat:no-repeat;
background-position:center;
background-size: 100px 100px;
}
.slider img{
display:none;
}
javascript:
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$("slider #"+count).show("slide", {direction:'right'}, 500);
$("slider #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and the images zip
https://www.dropbox.com/s/z8cxqlfp7i46066/slides.zip?dl=0

The problem is that your syntax is wrong, the class selector should contain a dot
change $("slider") to $(".slider")
try this
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
console.log(count);
$(".slider #" + count).show("slide", {direction:'right'}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and replace your slider container with
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
and make sure to rename your image slider3.jpg to slide3.jpg

Well, Here are the following problems make it not working, and you can have a try:
In your javascript file, the data type of variable count is int, that's the reason why selector cannot find the DOM pointing to.
You should code like count.toString().
You select dom by Id, so you don't need to code like: $("slider #"+count), and $("#"+ count.toString()) is the proper way.
In the html, the name of image3 is incorrect, should be slider3.jpg.
I think that will help you to resolve the problem of image 2 and 3 not showing.
The other thing you need to think of is, how to slide back.

Roll up/down in javascript

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
57.102 Introductory Spanish<br />
<div id="n1" style="display:none">
Section 1:Introduction to Spanish Culture<br />
<div id="n2" style="display:none">
Topic 1:Getting started<br />
Topic 2:Introduction to Grammar<br /><br /><br />
</div>
Section 2:Getting started with reading and writing<br />
<div id="n3" style="display:none">
Topic 1:Reading Spanish<br />
<div id="nn3" style="display:none">
Mode 1:Spanish Components
<div id="nn4" style="display:none">
Spanish Reading
</div>
</div><br />
Topic 2:Writing in Spanish<br />
</div>
</div><br />
Topic SuperMode<br />
<div id="m1" style="display:none">
Study Guide<br />
Key Words<br />
<div id="m2" style="display:none">
Pragmatics<br />
Manana<br />
Tiempo<br />
Cara<br />
Triste<br />
</div>
Learning Support<br />
Help<br />
Chat<br />
Email<br />
Notes<br />
</div><br />
Pre-defined modes<br />
<div id="p1" style="display:none">
Culture aspects<br />
Reading practice<br />
Writing practice<br />
Listening and speaking<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!

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.