View Full Version : Divs hell (atleast so far for me)

03-24-2009, 02:59 PM
Sorry about this guys. Im sure yall are tired of answering this question but i did a search, and looks through all the results i found and none of them are doing what I need for the script to do. I dont think its hard but I cant figure out since I dont know javascript.

I have 5 divs.

- main
- music
- art
- write

And a div "contain" to hold all 4 of them. This div is set at something like 300px by 400px of something like that I dont remember right off.

when the page loads, I need to open or show the div (main) and hide the others. But not as a toggle.

when I click the music link for example, I need check to see which div is visible and set it to invisible. then make the div im calling make itself visible.

So if i have main open or art and i click music, i need to hide main or art whichever it is and bring music to the front.

Almost every script ive seen is for a toggle though.

Thanks in advance guys and again im sorry for posting this question. I havent slept in 2 days and cant even think anymore. haha

03-24-2009, 03:04 PM
I also cant just make the div called from the link come to the front either. they are somewhat transparent so i have to physically hide the layers and then bring the one i want in.

03-24-2009, 05:38 PM
What do you mean you don't want a toggle? Also, show the code you have so far.

03-24-2009, 06:58 PM
well by toggle i mean clicking a link to show it, then clicking the link again to hide it.

i want it to work more like an iframe. when u click the link for the div it shows it and hides all the others. if u click another link, it brings that one up and hides the others, etc.

cuz my links are gonna be like this (music, artwork, writings)
i also have a seperate main page which is also a div (main) all 4 of thse are in teh same container. i only want main to load up with the page load though. no links to bring it back once its hidden.

the code i have so far is pretty crappy, i would try something, then comment it out and do it again. so i have tons of code for very little work. i actually think it would be harder to go through mine than to just start over.

but its gonna be like this:

when the page loads, u see (main) div and 3 links (artwork, music, writings) off to the side.

click on artwork and it hides (main, and makes sure that music and writings is also hidden, then shows artwork)

click on music, it would then hide artwork and make sure writings is hidden and then show music.

i wish i knew more about this to help yall help me but im new to javascript.

03-24-2009, 07:01 PM
i think that is still toggling but what i meant was the link would bring it in only, not have to click the link again to hide it or have a seperate link just to hide it.

03-24-2009, 07:08 PM
have all the divs visibilty set by a test.

have a variable that gets changed by the switch you are using.

for instance, in your function to change the visibility, you just test for which number you send it

function switch(x){
if (x==1){make div1 visible}
if(x!=1){make div1 hidden}

then from the toggle


from div1 will make it visible

all the other will become hidden

03-24-2009, 07:11 PM
Well, maybe there's another word besides "toggle" that means what you want to do, but I don't know what it is. I'd use toggle code, but in multiple. Open 1, close 4. Something like:

/* pass in the div id to open */
function toggle(toggle_me_on){
var toggle_id_array = new Array('my_div1','my_div2','my_div3','my_div4','my_div5');
for (toggle_div in toggle_id_array) {
/* check for exists and id == function arg */
if ((toggle_me = document.getElementById(toggle_id_array[toggle_div])) && toggle_id_array[toggle_div] != toggle_me_on) {
toggle_me.style.display = 'none';
else {
toggle_me.style.display = 'block';

Not quite sure if that's functional code, but it should work something like that. Other methods are also available, and probably cleaner.

03-24-2009, 07:25 PM
here is a cleaned up version of the code i had. prolly still isnt right though. This is in a .js file external to the html file

function goto(divname){

var thearray = new Array("main","music", "art", "write");

for(i=0; i<thearray.length; i++){
if(thearray[i] == divname){

here is my css code: also an external file

.contain { position: absolute;
top: 60px;
left: 60px;
width: 425px;
height: 400px;
font-size: 10px;
line-height: 15px;
font-weight: normal;
letter-spacing: 1.0px;
padding: 20px;
background-color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;

.main { display: block;
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;}

.music { display: none;
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;}

.art { display: none;
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;}

.write { display: none;
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;}

.twitter { font-size: 12px;
font-weight: bold;
color: #333;
line-height: 50px;
width: 100%;
background-image: url(images/hover.png);

Download Button, Headline, and Container */

.download { font-size: 20px;
color: #666;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;}

.headline { font-size: 16px;
color: #333;
padding-bottom: 15px;
padding-top: 15px;}

/* -----------------------------------------------------------------------------------------------
Navigation Area and Rollovers */

.navi { font-size: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: dotted;
border-bottom-width: 1px;
border-bottom-color: #333;
line-height: 17px;
letter-spacing: 1.0px;
word-spacing: 0.8px;}

.navi:hover { background-image: url(images/downloadbg.png);}

/* -----------------------------------------------------------------------------------------------
Dynamic Spacer & Background Image (100% x 100%) */

.spacer { height: 40px;}

#background { position:fixed; width:100%; height:auto;}

and the html

<!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">

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="content.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simplyjkh [dot] com | Digital Lifestyle &amp; Playground of Joseph Harrison.</title>

<img id="background" src="images/stefanie-posavec_on-the-map_jack-kerouac_on-the-road_sentence-drawings.jpg" /> <!-- fullscreen background -->

<div id="contain" class="contain"> <!-- Main Container (black bg, rounded corners -->

<div id="main" class="main">

<div id="twitter" class="twitter">
<div align="center">@ The Studio, Working On Some Music For You Guys</div>

<div id="spacer" class="spacer"></div><div id="spacer" class="spacer"></div>

<div class="links" id="links">
<div id="navi" class="navi"><a href="#" onclick="goto('music');">Music Sets & Productions</a></div>
<div id="navi" class="navi"><a href="#" onclick="goto('art');">Artwork & Designs</a></div>
<div id="navi" class="navi"><a href="#" onclick="goto('write');">Writings & Ideas</a></div>

<div id="spacer" class="spacer"></div>

<!-- body area of the page -->
<div id="content" class="content">
<div align="left">
Here is the latest demo for those of you wondering where I am musically. Feedback is greatly appreciated. I hope you like it, Enjoy.</div>
<div id="headline" class="headline" align="left">March 2009 Demo</div>
<div id="download" class="download"><div align="center"><img src="images/download.png" /></div>


<div id="music" class="music">

<div id="art" class="art">

<div id="write" class="write">



sloppy i know but thats one of the reasons i joined this community, to learn how to clean things up a big.

03-24-2009, 08:20 PM

1. Get rid of the absolute positioning until your function is doing what you want. Then you can try to figure out how to place your divs where you want.

2. You're using div#main as both a wrapper and a holder of content. The toggle function in its current state will screw that up. Change the existing div#main to a div#wrapper instead, and then put a div#main inside the wrapper to hold your main content. Toggle will be happy then.

3. In the function, your test for the div name is backwards. Test for != instead of ==.

Tips unrelated to the problem:

1. If you don't have a web host, find one to use for posting problem code online for forum users to help. I suspect that your questions are far more likely to get attention if the forum members aren't required to set up the whole thing. Some people have mentioned free hosts, but I don't know anything about them.

2. Get rid of those "spacer" divs. CSS is your friend. Use margins or padding.

03-24-2009, 08:32 PM
got it. like i said im new to this. and honestly i thaught the spacer divs were a good idea hehe. and yes i have a host. i use media temple and didnt think to put it on there to send to you guys. as for the messed up code, javascript isnt something i know anythiing bout. i basicly was doing thes ame thing with it that i did to learn html back in the day. i took code that someone was using and tried to reverse it to get what i needed with it, but it wasnt working for this. I know it can easily be done because I have done it before. Few years ago on a site I had but i havent used the concept in a while so i have no clue where to begin on it. im sending you a pm.

03-24-2009, 08:44 PM
It's usually best to carry the discussion in the forums so that others who are having the same problems can find the solution through Google or site search. Other people's answers have helped me out that way lots of times.

03-24-2009, 09:03 PM
i do agree with u there.

im a lil new to css as well. and u said earlier something about me using a tag as a wrapper and as something else. can you explain to me what a wrapper is, etc. so i can think of things differently when im coding later ??

03-25-2009, 02:04 AM
What is a wrapper? (http://www.webteacher.ws/2005/02/01/494/)

It's just a container. In your case, div#main is a wrapper, a container, for all of those other divs. Simplified version:

<div id="main">
<div id="music" />
<div id="art" />
<div id="write" />
</div><!--end div#main>
But there's a problem. When your javascript hides the divs, it's also hiding main. Why's that a problem? Because main has all of the others inside it. Thus, everything vanishes. I'm guessing you don't want your website visitors staring at a blank page.

Solution? Make the current div#main a wrapper, and then place main as a child of the wrapper. Like so:

<div id="wrapper">
<div id="main" />
<div id="music" />
<div id="art" />
<div id="write" />
</div><!--end div#wrapper>
With this setup, you can toggle your divs independently.

03-25-2009, 08:56 AM
aah i see now. is that why i sometimes see css code with # in front of the name like:

#main or div#main

and sometimes i see them with a period like:

.main ??

cuz i havent quite gotten the rules behind that and it has been causing me alot of problems. Eventually i work out those bugs but not in a good way. for example my "main" rule being a wrapper and a container could be solved by eventually with more div layers and i eventually get it to look right but not necessarily by seperating the 2 that easily. I'd end up with 5 or 6 layers all with only 2 or 3 lines of css each until i find the one causting the problem. like process of elimination. not sure if that makes sense but its one of the problems i've had learning the way i have. hence the reason im here.

03-25-2009, 12:58 PM
# is an ID selector, style definition that follows applies to an element with ID attribute equal to what follows # sign, for example:

#myid {color:black;}
<p id="myid">...</p>
and . is a class selector, style definition applies to all elements with a class following that .

.myclass {color:black;}
<p class="myclass">...</p>
<p class="myclass">...</p>

In your document you should always have only one element[tag] with each ID, but you can have many elements with the same class.

#main or div#main means the same. If you code correctly, there's no need to precede ID selector with an element [as in div#main], because you should always have only 1 element with each unique ID [so #main is enough, there should be only 1 element in your document with id="main"].

<p id="myid">...</p>
<p id="myid">...</p>

<p id="myid">...</p>
<p id="mydifferentid">...</p>

Truth is, most browsers will happily work with multiple elements sharing one ID as long as it means applying styles. When you start using Javascript for example, you will have problems, because some important functions of Javascript [getElementById] depend on all IDs in the document being unique and applied to only one element each.

03-25-2009, 01:27 PM
aah ok. i see now. i think. lol

so its basicly better to use the # attribute for instances to use the same code ??
u wouldnt position anything there.

and the . is more for the positionings, etc. ????

03-25-2009, 01:48 PM
Well, just the opposite maybe. Use .myclass to apply same style to many elements with same class="myclass" attribute, and use #myid to apply styles to only one element with id="myid" attribute.

Depending on the effect you want to achieve you can position elements using class or id. More likely though, you will be using id selector # to position things.

03-25-2009, 01:57 PM
If you haven't gone through the w3schools tutorials (http://www.w3schools.com/) yet, they're a good place to start.