?
Solved

getElementById  function

Posted on 2003-03-19
5
Medium Priority
?
231 Views
Last Modified: 2012-05-04
I am having a small problem with this script
I have 5 Tpoic when you click any topic twice 2 time it's giving me problem
also I want to Hide this entire fuction in NE 4 only
Here is the code
-----------------------------------------------
<html>
<head>
<script langauge="javascript">
var showing = null;

function show(rowID) {
var tr = document.getElementById('tr'+rowID);
if (tr.className=="hide") {
 tr.className="show";
 if (showing != null)
   showing.className = "hide";
 showing = tr;
}
else {
 tr.className="hide";
}
}

</script>
<style>
<!--
.hide        { visibility: hidden; display: none }
.show        { visibility: visible; display: block }
//-->
</style>
</head>
<body bgcolor="#FFFFFF" onLoad="show('1')">
<form name="form1" method="post" action="">
<table border=1 cellspacing=1 cellpadding=5 width="497">
<tr> <td><a style="cursor:hand" onclick="show('1')" href="#no"> Topic 1</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onclick="show('2')" href="#no">Topic 2</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onclick="show('3')" href="#no">Topic 3</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="show('4')" href="#no">Topic 4</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="show('5')" href="#no">Topic 5</a></td></tr>
<tr id="tr1" class="hide"> <td>Information for Topic 1 here</td></tr>
<tr id="tr2" class="hide"> <td>Information for Topic 2 here</td></tr>
<tr id="tr3" class="hide"> <td>Information for Topic 3 here</td></tr>
<tr id="tr4" class="hide"><td>Information for Topic 4 here</td></tr>
<tr id="tr5" class="hide"><td>Information for Topic 5 here</td></tr>
</table>
</form>
</body>
</html>
0
Comment
Question by:Sanjiv Rajiv
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8169912
You will have to use different code for hiding showing if you want it to work with NS4. Here is something to get you started:

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;

function switchDiv(strDivName,bolVisible){

 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName];
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName);
 }
 
 if(isNS4){
     if(!bolVisible) {
       objElement.visibility ="hidden"
     } else {
       objElement.visibility ="visible"
     }    
 }else{
     if(!bolVisible) {
       objElement.style.visibility = "hidden";
     } else {
       objElement.style.visibility = "visible";
     }
 }
}
//-->
</SCRIPT>
</HEAD>

<BODY>

<FORM action="" method=POST id=form1 name=form1>
<p><INPUT type="button" value="Show" name=ShowMe onClick="switchDiv('myDiv',true)">
<INPUT type="button" value="Hide" name=HideMe onClick="switchDiv('myDiv',false)"></p>
</form>
<div id="myDiv" style="visibility:hidden;position:relative">
<form>
Text1<INPUT type="text" name="text1"><br>
Text2<INPUT type="text"  name="text2"><br>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</FORM>
</div>

</BODY>
</HTML>


Fritz the Blank
0
 
LVL 1

Expert Comment

by:tpatten
ID: 8171169
If it's NS4, just exit the function.

Your problem with the elements not showing correctly is with the following code:

if (showing != null)
  showing.className = "hide";

change it to say:

if (showing != null && showing != tr)
  showing.className = "hide";
0
 

Author Comment

by:Sanjiv Rajiv
ID: 8174456
tpatten,

You are almost close but
when you clik each Topic twice it opens and close
I Just what Open when you clik twice on any Topic
and then when you click another topic then it close

Let me Explain in more

This how i whant it

I have Topic 1 2 3 4 5

When page Loads I have Topic 1 opens

Now If you click Topic 1 while it's open it closeing the topic one ( I don't what it this way)

I just want to open when person click on any Topic twice
and have it close on if they go to Topic 2 3 4 5

I hope you understood if not  let me know

Thanks



0
 
LVL 1

Accepted Solution

by:
tpatten earned 1000 total points
ID: 8174960
sp * 3 -- Let me try to get this straight. You want Topic 1 to load by default. Then, if a user double-clicks on another topic (say Topic 4), Topic 1 will be hidden and Topic 4 will be displayed. Correct? Then, if they double click on Topic 2, Topic 4 will be hidden and Topic 2 displayed.

If this is true you need to do two things. The first is to change the in the link from a "click" event to a double click event. Then, simply get rid of your "else" statement.
0
 

Author Comment

by:Sanjiv Rajiv
ID: 8176125
Cool
Thanks
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question