We Keep Coding

Adding New Row In Reduced Screen Sizes Does Not Perceive Media Queries Class Change

A section of my form is a row of data that is formatted responsively with media queries. The user may add additional rows. This is done using JavaScript (jQuery). The problem is, when I clone the new row, not all changed formatting, as laid out in media queries, is read, instead, reverting to the formatting in the original stylesheet.
Row (HTML with some PHP)
<div class="WFormSection BOLItems">
<div class="WTableHead">
<div class="alignleft FormCol60 WHeadText">Units</div>
<div class="space"></div>
<div class="alignleft FormCol20 WHeadText">Haz</div>
<div class="space"></div>
<div class="alignleft FormColMid WHeadText">Description of Articles</div>
<div class="space"></div>
<div class="alignleft FormCol60 WHeadText">NMFC</div>
<div class="space"></div>
<div class="alignleft FormCol60 WHeadText">Class</div>
<div class="space"></div>
<div class="alignleft FormColTiny WHeadText">Weight</div>
</div>
<div class="clear"></div>
<!--=============================== -->
<!-- R O W 0 -->
<!--=============================== -->
<div class="parent-group">
<div class="form-group">
<hr>
<div class="alignleft FormCol60 TD Inline">
<div class="ColTitle">Units: </div>
<input type="text" id="Pieces(0)" name="Pieces[0]" maxlength="5" size="4" value="<?PHP echo($Pieces[0]); ?>" class="inputtext right FirstCell" placeholder="Units">
</div>
<div class="space"></div>
<div class="alignleft FormCol20 Center TD Inline">
<div class="ColTitle">Hazmat: </div>
<label class="CBContainer CB">
<input type="checkbox" id="HM(0)" name="HM[0]" value="X" <?PHP if($HM[0]=="X"){echo('checked="Checked"');} ?>>
<span class="Checkmark"></span>
</label>
</div>
<div class="space"></div>
<div class="ColTitle">Description:</div>
<div class="alignleft FormColMid TD">
<div class="DescriptionTextarea">
<textarea class="txt" id="Descr(0)" name="Descr[0]" maxlength="53" placeholder="Description"><?PHP echo($Descr[0]); ?></textarea>
<input class="FormCol30 ChrCt" name="Output" id="Output" size="5" value="53" readonly disabled />
</div>
</div>
</div>
<div class="space"></div>
<div class="alignleft FormCol60 TD Inline">
<div class="ColTitle">NMFC: </div>
<input type="text" id="NMFC(0)" name="NMFC[0]" maxlength="10" size="8" value="<?PHP echo($NMFC[0]); ?>" class="inputtext right" placeholder="NMFC">
</div>
<div class="space"></div>
<div class="alignleft FormCol60 TD Inline">
<div class="ColTitle">Class: </div>
<?PHP echo PopSelect('Class[0]', $ClassArr, $Class[0], 'DropBox2',1,0,'',0,'','','Class(0)'); ?>
</div>
<div class="space"></div>
<div class="alignleft FormColTiny TD Inline">
<div class="ColTitle">Weight: </div>
<input type="text" id="Weight(0)" name="Weight[0]" maxlength="5" size="4" value="<?PHP echo($Weight[0]); ?>" class="inputtext right EndCell" data-datarow=0 placeholder="Weight">
</div>
<div class="space"></div>
<div class="alignleft form-group">
<a class="RowDeleteButton del" id="DeleteRow" href="javascript:void(0)"> X </a>
</div>
<div class="Clear"></div>
</div> <!-- child-group -->
<div class="clearfix"></div>
</div> <!-- parent-group -->
What's happening here is that the original row is completely horizontal, thus the original column header (WHeadText). At smaller screen sizes, the header goes away, and the labels (ColTitle) come into play. So, at a certain screen size, the class "WHeadText" is hidden, and the class "ColTitle" appears. This works fine in the original row. In the cloned rows, neither the header, nor the labels appear, and other formatting is not changed, as well.
JavaScript
<script>
function CreateNewRow()
{
var ChildCount = $('.child-group').length;
if(ChildCount == 7)
{
alert("Sorry, 8 is the maximum number of rows");
}
else
{
var len = window.LastArrayValue;
window.LastArrayValue = len + 1;
$('.parent-group').clone(true, true).find(':input').each(function(idx, ele)
{
var ename = ele.name;
var eid = ele.id
var ArrayValue = len+1;
ele.name = ename.replace(/(\[\/?[^\]]*\])/g, "["+ArrayValue+"]");
ele.id = eid.replace(/(\(\/?[^\]]*\))/g, "("+ArrayValue+")");
if (typeof $(this).data('datarow') !== 'undefined'){$(this).data('datarow', ArrayValue);} // Skip if there is not a datarow attribute
if(ele.type == "checkbox"){ele.checked = false;}
else{ele.value = '';}
}).end().find('.form-group').toggle(true).end()
.toggleClass('parent-group child-group').hide()
.appendTo('#container').slideDown('slow',function()
{
$("#container").find(".FirstCell").last().focus();
});
}
}
</script>
I can, of course, instigate the class changes with Javascript, but formatting changes more then once, and each time most of the formatting you see below changes, so that presents a real problem, in addition to the possible differences there may be detecting viewport by two different methods.
CSS (Just for one example, here is one media query change):
.WFormSection.BOLItems .ColTitle {display:block; padding-top:15px; width:75px; margin-right:15px; text-align:Left; clear:left; font-weight:bold;}
.WFormSection.BOLItems .CBContainer {margin-top:15px;}
.WFormSection.BOLItems .WTableHead {display:none;}
.WFormSection.BOLItems .TD {float:left;}
.WFormSection.BOLItems .DescriptionTextarea {margin-bottom:10px;}
.WFormSection.BOLItems .DescriptionTextarea textarea {width:80%;}
.BOLItems .FormColSmall, .BOLItems .FormColMedium, .BOLItems .FormColMid, .BOLItems .FormColWide {max-width:100%; padding-right:3px;}
CSS From Original StyleSheet (since it was requested):
.WFormSection {border:1px solid #969696; padding:15px; background:url(../images/comment-form_bg.png) 0 0 repeat-x #e9e9e9; margin-bottom:15px; position:relative;}
.WFormSectionTitle {color:#0F61AC; font-weight:500; font-size:16px; width:100%; text-align:center; margin-bottom:15px;}
.WFormSection .one_third {width:28%;}
.WFormSection .one_fourth {width:20%;}
.WFormSection .one_fifth {width:16.800%;}
.WFormSection .one_half {width:40%;}
.WFormSection .Split, .TrackBox .Split {float:left; width:48%; padding:0 1%;}
.WFormSection .CheckBox {width:100%;}
.WFormSection .StateDrop, .WFormSection .DateDrop, .WFormSection .SmallDrop, .WFormSection .LongDrop {padding:10px 10px 19px 10px; margin-top:4px;}
.WFormSection.SubnitBox {padding:8px; margin-top:20px; text-align:center;}
.WFormSection.SubmitBox .RadioHorizontal {display:inline-block; margin-left:20px;}
.WFormSection.Table {padding-bottom:0; margin-bottom:0;}
.WFormSection .VerticalSpace20 {height:20px;}
.WFormSection .form-group .DescriptionTextarea {height: 54px;}
.WFormSection .form-group .DescriptionTextarea textarea {width:85%; height:100%; line-height:110%;}
.WFormSection .form-group .DescriptionTextarea .ChrCt {display:inline-block; border:none; background:transparent; margin-left:10px; color:#D78E21; font-size:16px; font-weight:600;}
.WFormSection em {display:inline; padding-left:12px; font-style:normal;}
.WHeadText {color:#000000; display:block; font-weight:600}
.WHeadText {font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:18px; width:100%; margin:3px 0; padding:7px 10px 7px 2px;}
.WFormSection .form-group .DescriptionTextarea {height: 54px;}
.WFormSection .form-group .DescriptionTextarea textarea {width:85%; height:100%; line-height:110%;}
.WFormSection .form-group .DescriptionTextarea .ChrCt {display:inline-block; border:none; background:transparent; margin-left:10px; color:#D78E21; font-size:16px; font-weight:600;}
.ColTitle {display:none;}
.CBContainer {display:block; position:relative; padding-left:24px; margin-bottom:8px; cursor:pointer; font-size:14px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.CBContainer.RB {display:inline-block; padding-left:30px;}
/* Hide the browser's default checkbox */
.CBContainer input {position:absolute; opacity:0; cursor:pointer; height:0; width:0;}
/* Create a custom checkbox */
.CBContainer.CB .Checkmark {position:absolute; top:0; left:0; height:20px; width:20px; background-color:#FFFFFF; border:1px solid #585858;}
.CBContainer.RB .Checkmark {position:absolute; top:0; left:0; height:22px; width:22px; background-color:#FFFFFF; border:1px solid #585858; border-radius:50%;}
/* On mouse-over, add a grey background color */
.CBContainer:hover input ~ .Checkmark {background-color:#CCCCCC;}
/* When the checkbox is checked, add a blue background */
.CBContainer input:checked ~ .Checkmark {background-color:#2196F3;}
/* Create the checkmark/indicator (hidden when not checked) */
.CBContainer.CB .Checkmark:after, .CBContainer.RB .Checkmark:after {content:""; position:absolute; display:none;}
/* Show the checkmark when checked */
.CBContainer input:checked ~ .Checkmark:after {display:block;}
/* Style the checkmark/indicator */
.CBContainer.CB .Checkmark:after {left:7px; top:3px; width:5px; height:12px; border:solid white; border-width:0 3px 3px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.CBContainer.RB .Checkmark:after {left:6px; top:6px; width:8px; height:8px; border-radius:50%; background:#FFFFFF;}
.TD {} /* Not defined in original stylesheet */
.BOLItems {} /* Not defined in original stylesheet */
/* The other FormCol settings, as well as "Space" simply define the width and padding */

The problem here was simply an extra closing div. It has been commented out.

styling select drop-downs workarounds and alternatives?

I have been trying to find the best way to style select drop downs and since you can't really at all I have been trying to find the best way to recreate a simple version using other form elements like radio buttons/checks.
My question is does anyone have a better method then mine or knows a workaround to style the normal one, this is what I came up with: http://codepen.io/naniio/pen/RPGNGj
HTML:
<div class="container">
<form action="">
<p>Radio buttons can be hidden by adding "hidden"</p>
<input type="radio" id="item-1" name="item-1" value="drama">
<input type="radio" id="item-2" name="item-1" value="humor" >
<input type="radio" id="item-3" name="item-1" value="ecchi" >
<input type="radio" id="item-4" name="item-1" value="magic" >
<div class="select_box">
<span id="select-op-btn" class="js-option">Select</span>
<ul id="options" class="js-drop">
<li><label for="item-1" class="js-option">Drama</label></li>
<li><label for="item-2" class="js-option">Humor</label></li>
<li><label for="item-3" class="js-option">Ecchi</label></li>
<li><label for="item-4" class="js-option">Magic</label></li>
</ul>
</div>
</form>
CSS:
body{
font-size:18px;
line-height:20px;
font-family: 'Open Sans', sans-serif;
}
p{
line-height:22px;
color:#111111;
}
.container{
width:500px;
padding:15px;
margin:50px auto;
}
#select-op-btn{
border:1px solid #F2F2F2;
display:block;
padding:5px;
cursor:pointer;
background-image:url('http://i.imgur.com/K5gtkay.png');
background-repeat:no-repeat;
background-position:right center;
}
.select_box{
box-sizing: border-box;
margin:30px 0;
}
ul#options{
list-style-type:none;
font-size:0px;
border-color:#F2F2F2;
border-style: solid;
border-width: 0px 1px 1px 1px;
}
ul#options li label{
font-size:18px;
display:block;
padding:5px;
}
ul#options li:hover{
background:#F2F2F2;
}
.js-drop{
display:none;
}
.js-option{
display:inline-block;
}
label{
cursor:pointer;
}
JS:
$('input').on('change', function() {
$('#select-op-btn').html(this.checked ? this.value : '');
});
$('.js-option').on('click', function() {
$( "#options" ).toggleClass( "js-drop" );
});

How to hide the div on any click outside

I am starting up on jquery and was tryin to create a simple div hide and show effect. The effects seem to work fine but i need that when user clicks on any other part of the document(i. except the hide/show box), the box should hide back. This is the jsfiddle :
http://jsfiddle.net/39DzJ/. I have not styled it properly. I wanted the effects to work first.
Can anyone help me out ?
Here's the HTML code :
<style>
#mail_floater
{
background:#fce8bd;
height:88px;
width:342px;
border:1px solid #b7ad02;
border-radius:5px;
position:absolute;
left:200px;
top:50px;
border-top:none;
z-index:100;
padding:0;
}
#subscribe_user
{
width:248px;
height:16px;
border:1px solid #b7ad02;
}
#cust_care_floater
{
background:#fce8bd;
height:12px;
width:108px;
border:1px solid #b7ad02;
border-radius:2px;
border-bottom-left-radius:2px;
position:absolute;
left:450px;
top:30px;
border-top:none;
z-index:100;
clear:both;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
font-weight:bold;
color:#036f05;
box-shadow:1px 1px 3px #ccc inset;
}
#closer
{
float:right;
margin-right:5px;
margin-top:2px;
width:19px;
height:19px;
background:url(../images/close.png) no-repeat;
}
</style>
</head>
<body>
Subscribe
Customer care
<div id="mail_floater">
<h5>Email</h5>
<div id="closer"></div>
<div id="email_input"><form><label>Enter E-mail : </label><span><input type="text" id="subscribe_user" /></span>
<input type="submit" id="subscribe_me" value="Done" /></form></div>
</div>
<div id="cust_care_floater">
<span style="padding:0px 10px 0 10px;">033-993-99920</span>
</div>
</body>​
The javascript code :
$(document).ready (
function()
{
var disp_box=$('#mail_floater');
var sub_link=$('#subscribe');
var disp_box_2=$('#cust_care_floater');
var sub_link_2=$('#customer_care');
disp_box.hide();
disp_box_2.hide();
sub_link.click
(
function()
{
disp_box.show();
});
disp_box.find('#closer').click
(
function()
{
disp_box.hide();
});
sub_link_2.click
(
function()
{
disp_box_2.show();
});
});​

$(document).on('click', ':not(.hideDiv)', function(e){
if($(e.target).is(':not(.hideDiv)')) { //extra check for good measure
$('.hideDiv').hide();
}
});​
Demo: http://jsfiddle.net/maniator/S9fDy/

jQuery ladder slide out list effect

I know this should be fairly easy but I can't quite figure it out by myself. facepalm.
I have a site that I'm building at this address and as you can see by looking at it, after the picture loads the menu list items come out of the left side. I just wanted to know how I could make them come out one at a time starting with the top one and working their way down.
Here is the code that makes the slide out effects:
$(function() {
//the loading image
var $loader = $('#st_loading');
//the ul element
var $list = $('#st_nav');
//the current image being shown
var $currImage = $('#st_main').children('img:first');
//the list of soclial links
var $socialLinks = $(".social_links");
//the download link
var $download = $("a.st_img_download");
//let's load the current image
//and just then display the navigation menu
$('<img>').load(function(){
$currImage.fadeIn(3000);
$download.attr("href",$currImage.attr("src"));
//slide out the menu
setTimeout(function(){
$loader.hide();
$list.animate({'left':'0px'},1000);
$socialLinks.animate({ 'bottom': '0px' }, 1000);
$download.fadeIn(2000);
},
1000);
}).attr('src',$currImage.attr('src'));
//calculates the width of the div element
//where the thumbs are going to be displayed
buildThumbs();
function buildThumbs(){
$list.children('li.album').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * 183;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollable($thumbs_wrapper,$thumbs);
});
}
Although I think that's more than you need...
And here is the HTML structure for the menu:
<ul id="st_nav" class="st_navigation">
<li class="album">
<span class="st_link">Photo Album<span class="st_arrow_down"></span></span>
<div class="st_wrapper st_thumbs_wrapper">
<div class="st_thumbs">
<img src="images/album/thumbs/slide1.jpg" alt="images/album/slide1.jpg" />
<img src="images/album/thumbs/slide2.jpg" alt="images/album/slide2.jpg" />
<img src="images/album/thumbs/slide3.jpg" alt="images/album/slide3.jpg" />
<img src="images/album/thumbs/slide4.jpg" alt="images/album/slide4.jpg" />
</div>
</div>
</li>
<li class="album">
<span class="st_link">Videos<span class="st_arrow_down"></span></span>
<div class="st_wrapper st_thumbs_wrapper">
<div class="st_thumbs">
<span class="caption-wrap">
<img src="http://img.youtube.com/vi/EelyyqU-ce0/0.jpg" alt="videos/SkyscraperCover.mp4" />
<span class="caption">Skyscraper Cover</span>
</span>
<span class="caption-wrap">
<img src="http://img.youtube.com/vi/KNlwqFWiNaU/0.jpg" alt="videos/DontBreakMyHeartSlow.mp4" />
<span class="caption">Don't Break My Heart Slow</span>
</span>
<span class="caption-wrap">
<img src="http://img.youtube.com/vi/VwYyRmgutx4/0.jpg" alt="videos/BattleCover.mp4" />
<span class="caption">Battle Cover</span>
</span>
</div>
</div>
</li>
<li>
<span class="st_link">Bio<span class="st_modal"></span></span>
<div class="modal">
<div style="width:600px;">
<h2>Bio</h2>
I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine. I am
so happy, my dear friend, so absorbed in the exquisite sense
of mere tranquil existence, that I neglect my talents.
</div>
</div>
</li>
<li>
<span class="st_link">Contact<span class="st_modal"></span></span>
<div class="modal">
<h2>Contact</h2>
<form id="contact_form" method="POST" action="#">
<label>Name:</label><br />
<input type="text" name="name" /><br />
<label>Email:</label><br />
<input type="text" name="email" /><br />
<label>Reason:</label>
<label><input type="radio" name="reason" value="praise" checked='checked' /> Praise</label> <label><input type="radio" name="reason" value="booking" /> Booking</label><br />
<label>Message:</label><br />
<textarea name="name"></textarea><br />
<input type="submit" value="Submit" name="submit" /> <span class="status_message"></span>
</form>
</div>
</li>
</ul>
And the css:
ul.st_navigation{
position:absolute;
width:100%;
top:140px;
left:-300px;
list-style:none;
}
ul.st_navigation li {
float:left;
clear:both;
margin-bottom:8px;
position:relative;
width:100%;
}
ul.st_navigation li span.st_link{
background: rgba(0,0,0,.8);
float:left;
position:relative;
line-height:50px;
padding:0px 20px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down,
ul.st_navigation li span.st_arrow_up{
position:absolute;
margin-left:20px;
width:40px;
height:50px;
cursor:pointer;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down{
background: rgba(0,0,0,.8) url(../images/icons/down.png) no-repeat center center;
}
ul.st_navigation li span.st_arrow_up{
background: rgba(0,0,0,.8) url(../images/icons/up.png) no-repeat center center;
}
ul.st_navigation li span.st_modal{
position:absolute;
margin-left:20px;
width:40px;
height:50px;
cursor:pointer;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
background: rgba(0,0,0,.8) url(../images/icons/modal.png) no-repeat center center;
}

Try this:
$('<img>').load(function(){
$currImage.fadeIn(3000);
$download.attr("href",$currImage.attr("src"));
//slide out the menu
setTimeout(function(){
$loader.hide();
$list.children().each(function(i,el) { // loop through the LI elements within $list
$(el).delay(500*i).animate({'left':'0px'},1000);
});
$socialLinks.animate({ 'bottom': '0px' }, 1000);
$download.fadeIn(2000);
},
1000);
}).attr('src',$currImage.attr('src'));

When you use animate() you can specify a callback as the last parameter, you could chain the slide in of the elements:
setTimeout(function(){
$loader.hide();
$firstElement.animate({'left':'0px'},1000, function(){
$secondElement.animate({'left':'0px'},1000, function(){
//and so on
});
});
$socialLinks.animate({ 'bottom': '0px' }, 1000);
$download.fadeIn(2000);
},
1000);
if you provide something on jsfiddle.net or post here your html code and full js it's easier to help

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.