Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Help Me!! Div ID Tags?

  1. #1
    Join Date
    Oct 2006
    Posts
    94
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cool Help Me!! Div ID Tags?

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

    Code:
    <!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

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    	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.
    Code:
    	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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Oct 2006
    Posts
    94
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cool

    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.

  4. #4
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    sbmhome, Twey posted the same code above.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  6. #6
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lol

    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.

  7. #7
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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');
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  8. #8
    Join Date
    Oct 2006
    Posts
    94
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for ur help guys. Worked a charm!!

    Now I just need to impliment it into my website!!!

  9. #9
    Join Date
    Oct 2006
    Posts
    94
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  10. #10
    Join Date
    Oct 2006
    Posts
    94
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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? :-

    Code:
    <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!!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •