Log in

View Full Version : Help Me!! Div ID Tags?


smithster
10-12-2006, 08:59 AM
Hi guys! I really need help with this problem. The idea is to have 3 of my webpages turned into just one. One page that will display all 3 pieces of content but not all on the same page. Basically, a user clicks a link and it would activate a *div*. Another link is clicked and another *div* activated. The problem is, I have put one div in, linked it, and it dissapears like it should and reappears like it should. I put another div in, and it doesn't work! It only continues to make the 1st div dissappear. I have included the html coding used, paste it into ur html editor and you will see what I mean. Maybe you could tell me where I am going wrong?!?!?

Please please help me!!!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
#div1{
position:absolute;
background:#990000;
font-weight:bold;
color:white;
width:180px;
height:100px;
top:100px;
left:100px;
}

#div2{
position:absolute;
background:#990000;
font-weight:bold;
color:white;
width:180px;
height:100px;
top:100px;
left:380px;
}

</style>

<script language="JavaScript" type="text/javascript">

function hide(){
document.getElementById("div1").style.visibility="hidden";
}
function show(){
document.getElementById("div1").style.visibility="visible";
}
function hide(){
document.getElementById("div2").style.visibility="hidden";
}
function show(){
document.getElementById("div2").style.visibility="visible";
}
</script>


</head>

<body>

<a href="#" onClick="hide();return false;">hide div1</a><p> <a href="#" onClick="show();return false;">show div1</a></p>
<div id="div1" style="width: 190; height: 301">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1" height="196">
<tr>
<td width="100%" height="127">&nbsp;</td>
</tr>
<tr>
<td width="100%" height="32">
<p align="center">

<a href="#" onClick="hide();return false;">hide div1</a></td>
</tr>
<tr>
<td width="100%" height="35">
<p align="center"> <a href="#" onClick="show();return false;">show div2</a></td>
</tr>
</table>
</div>

<a href="#" onClick="hide();return false;">hide div2</a><p> <a href="#" onClick="show();return false;">show div2</a></p>
<div id="div2" style="width: 190; height: 301">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1" height="196">
<tr>
<td width="100%" height="127">&nbsp;</td>
</tr>
<tr>
<td width="100%" height="32">
<p align="center">





</body>
</html>

Thanks in advance:cool:
Twey
10-12-2006, 10:40 AM
function hide(){
document.getElementById("div1").style.visibility="hidden";
}
function show(){
document.getElementById("div1").style.visibility="visible";
}
function hide(){
document.getElementById("div2").style.visibility="hidden";
}
function show(){
document.getElementById("div2").style.visibility="visible";
}Ugh.
function hide(id){
document.getElementById(id).style.visibility="hidden";
}

function show(id){
document.getElementById(id).style.visibility="visible";
}

...

<a href="#" onclick="show('div1');return false;">show div1</a>You cannot have multiple functions with the same name.
smithster
10-12-2006, 02:46 PM
thanks for your reply. That I can do no problem. It works fine. So I can't have a multiple function with the same name! So can I get around that? Just a thought...... There is only really two sections on the web page that actually need to change to something else when a link is clicked.

The website address is....

www.arenasmithster.co.uk

There are 3 links on the left, which one day will be a menu! When I get around to it! The content in the middle and on the right is what is different for each link. And rather than using 3 seperate pages or IFrames I thought divs would be better.

But! A div refers to a particular location, so how could I get the two sections on the page to change together under only one "function name"?!?!?!?

Thanks in advance for any help given.
sbmhome
10-13-2006, 04:21 PM
Instead of using the following:

function hide(){
document.getElementById("div1").style.visibility="hidden";
}
function show(){
document.getElementById("div1").style.visibility="visible";
}

function hide(){
document.getElementById("div2").style.visibility="hidden";
}
function show(){
document.getElementById("div2").style.visibility="visible";
}

<a href="#" onClick="hide();return false;">hide div1</a>





USE:

function hide(obj){
document.getElementById(obj).style.visibility="hidden";
}
function show(obj){
document.getElementById(obj).style.visibility="visible";
}

<a href="#" onClick="hide('div1');return false;">hide div1</a>

<a href="#" onClick="hide('div2');return false;">hide div2</a>




In essense PASS IN the name of the div. That way you will only need on show and hide function on the page.
djr33
10-13-2006, 06:00 PM
sbmhome, Twey posted the same code above.
sbmhome
10-13-2006, 06:19 PM
LOL...sorry and thanks for pointing that out! I just read the poster's last post and I didn't think he understood the issue....and I didn't notice Twey posted it already!

Sorry about that Twey.
djr33
10-13-2006, 06:44 PM
I think this might help with the question of doing both at the same time...
function showandhide(hide,show){
document.getElementById(hide).style.visibility="hidden";
document.getElementById(show).style.visibility="visible";
}

You could do different things... use visable for both, or hidden for both, etc etc.

That's just one example of combining them.

Note that there are two IDs to be called with that...

ex:
showandhide('div1','div2');
smithster
10-16-2006, 03:34 PM
Thanks for ur help guys. Worked a charm!!:)

Now I just need to impliment it into my website!!!:confused:
smithster
10-16-2006, 03:45 PM
Heres another one! What about swapping 2 divs? So basically a function needs to be called to make one dissappear and another one appear in its place.

Does that make sence?
smithster
10-17-2006, 09:11 AM
Ok, so now I have 3 divs. One div (div1) stays permanent on page. Never dissappears. No problem to set up! I have two other divs. I want for div2 to swap with div3 in just one click. Basically to the user, the page content just changes. Here is my coding. Obviously it is wrong!! Where is the problem? :-




<html>
<head>

<script language="JavaScript" type="text/javascript">

function hide(obj){
document.getElementById(obj).style.visibility="hidden";
}
function show(obj){
document.getElementById(obj).style.visibility="visible";
}
</script>

</head>

<body>

<a href="#" onclick="hide('div2');return false;"><a href="#" onclick="show('div3');return false;">Switch content



I know the content in the body is purely wrong!!! I mean two hrefs after the other! I promise I'm not that blonde!! It's just the only way I can think of to get the two divs to swap!!!

Thanks in advance!!
Twey
10-17-2006, 05:04 PM
<span onclick="hide('div2');show('div3');return false;" style="color:blue;text-decoration:underline;cursor:pointer;"> Switch content</span>
smithster
10-17-2006, 09:48 PM
Super! :cool:

Absolutely brilliant!!

Thanks a lot.