Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

show/hide div onMouseOver for X seconds..then 1

Status
Not open for further replies.
RhythmAddict112

RhythmAddict112

Programmer
Joined
Jun 17, 2004
Messages
625
Location
US
Hi all...I grabbed some javascript from great post and modified it a tiny bit...Im close to what I want to do..which is...

1 - on MouseOver, show a div for say, 5 seconds..(as of now, the script will display the div until another form element gets rolled over..)

2 - if a checkbox is checked, I want to hold that div there even if they mouseOver another element...

Thats about it really..any help/guidance/anythin ont his would be fantastic!

Code: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script language=JavaScript>
function show(which) {
   allDiv = document.getElementsByTagName("div");
   for (i = 0; i < allDiv.length; i++) {
      allDiv[i].style.visibility = "hidden";
   }
   visibleDiv = document.getElementById(which);
   visibleDiv.style.visibility = "visible";
}
</script>

</HEAD>

<BODY>
<body>
<form name=blahForm>
<input type="checkbox" onMouseOver='show(1)'>h</a>
	<div id=1 style='visibility : "hidden"'>Blah1</div><br>

<input type="checkbox" name=blahRadio onMouseOver='show(2)'>
	<div id=2 style='visibility : "hidden"'>Blah2</div><br>

<input type="checkbox" name=blahRadio onMouseOver='show(3)'>
	<div id=3 style='visibility : "hidden"'>Blah3</div><br>

<input type="checkbox" name=blahRadio onMouseOver='show(4)'>
	<div id=4 style='visibility : "hidden"'>Blah4</div><br>

<input type="checkbox" name=blahRadio onMouseOver='show(5)'>
	<div id=5 style='visibility : "hidden"'>Blah5</div><br>
</form>
</body>
</BODY>
</HTML>


Use your resources, you're on the internet!
 
Sort by date Sort by votes
Anyone?
[sad]
I found the script below...but I can't get setTimeout to work (problem with passing parameters - 'hidden is undefined')...

Code: 
<html>
<head>
<title>:::show.hide:::</title>

<script language="JavaScript">
<!--
// Show layer function
function Show(id, visibility) {
 obj = document.getElementsByTagName("div");
 obj[id].style.visibility = "visible";
}

// Hide layer function
function Hide(id, visibility) {
// setTimeout('Hide(sub1Div,hidden)',1250);
 obj = document.getElementsByTagName("div");
 obj[id].style.visibility = "hidden";
}
//-->
</script>

<style type="text/css">
<!--
#sub1Div
{
visibility:hidden;
width:80px;
height:80px;
position:absolute;
left:200px;
top:20px;
border:1px solid #151515;
}

#sub2Div
{
visibility:hidden;
width:80px;
height:80px;
position:absolute;
left:200px;
top:105px;
border:1px solid #151515;
}

#sub3Div
{
visibility:hidden;
width:80px;
height:80px;
position:absolute;
left:200px;
top:190px;
border:1px solid #151515;
}
-->
</style>

</head>
<body>

<div id="sub1Div"> sub1</div>
<div id="sub2Div"> sub2</div>
<div id="sub3Div"> sub3</div>

 


<p>onmouseover-method</p>

<p>
<a href="#"
      onmouseover="Show('sub1Div','visible')"
      onmouseout="Hide('sub1Div','hidden')">
      showhide.sub1
</a>
</p>



 
</body>
</html>

Use your resources, you're on the internet!
 
Upvote 0 Downvote
can you elaborate on #2? I originally overlooked this question because I was not sure of exactly what you wanted...

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Surely. Basically I'm going to have X number of checkboxes (actually, I think theyre going to be changed to radio buttons but in any case...)

When you roll over one category (a radio button/checkbox) it will display a DIV containing descriptions of that category.

If one of the categories is selected, I'd want to only display the respective DIV for that category, even if other categories are mousedOver. I think this would be the easy part (but Im not very good at js, so...)
maybe somethin' like..[psuedo]

If any radio button selected = false then
...all show/hide div code
else
..dont do any show/hide div
end

Use your resources, you're on the internet!
 
Upvote 0 Downvote
ok, so if a radiobutton (or checkbox) is selected, don't show ANY divs on the mouseover, but if there are no radiobuttons (checkboxes) selected, show the appropriate div on mouseover.

correct?

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
yes, exactly :-)

Use your resources, you're on the internet!
 
Upvote 0 Downvote
How's this?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script language=JavaScript>

var isOneSelected = false;

function show(theId) {
    // if a checkbox is checked, don't bother
    if (isOneSelected) return false;

    // hide all of the divs
    hideAll();
    
    // get a handle on the div we want
    var theDiv = document.getElementById(theId);
    
    // make the div visible
    theDiv.style.visibility = "visible";
    
    // set a timeout to hide all again in 2 seconds
    var tid = setTimeout("hideOne(" + theId + ")", 2000);
}

function hideAll() {
   var allDivs = document.getElementsByTagName("div");
   for (i = 0; i < allDivs.length; i++) {
      allDivs[i].style.visibility = "hidden";
   }
}

function hideOne(theId) {
    document.getElementById(theId).style.visibility = "hidden";
}

function setFlag(b) {
    // get set of checkboxes
    var cbSet = document.forms['blahForm'].elements['blahRadio'];
    
    // loop through each one
    for (var i = 0; i < cbSet.length; i++)
        if (cbSet[i].checked) isOneSelected = true;
}

</script>

</HEAD>

<BODY>
<body>
<form name="blahForm">
<input type="checkbox" onclick="setFlag(this.checked);" name="blahRadio" onMouseOver='show(1)'>h</a>
    <div id=1 style="visibility: hidden;">Blah1</div><br>

<input type="checkbox" onclick="setFlag(this.checked);" name="blahRadio" onMouseOver='show(2)'>
    <div id=2 style="visibility: hidden;">Blah2</div><br>

<input type="checkbox" onclick="setFlag(this.checked);" name="blahRadio" onMouseOver='show(3)'>
    <div id=3 style="visibility: hidden;">Blah3</div><br>

<input type="checkbox" onclick="setFlag(this.checked);" name="blahRadio" onMouseOver='show(4)'>
    <div id=4 style="visibility: hidden;">Blah4</div><br>

<input type="checkbox" onclick="setFlag(this.checked);" name="blahRadio" onMouseOver='show(5)'>
    <div id=5 style="visibility: hidden;">Blah5</div><br>
</form>
</body>
</BODY>
</HTML>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
It is perfection.
[thumbsup2]

thank you!



Use your resources, you're on the internet!
 
Upvote 0 Downvote
:)

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Ack!one thing....if I've got a check/list box selected, it stops displaying other DIV's but doesnt 'lock' on its respective DIV

Use your resources, you're on the internet!
 
Upvote 0 Downvote
damn, i was waiting for that. it'll take a little more work - i'll get back to you.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
you're hired.
[pc3]

Use your resources, you're on the internet!
 
Upvote 0 Downvote
ok, I'm not sure if there's unnecessary code here - I don't think so. Anyway, I [tt]believe[/tt] this is what you want. Let me know:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script language=JavaScript>

var isOneSelected = false;
var selectedDivList = "";

function show(theId) {
    // if a checkbox is checked, don't bother
    if (isOneSelected) return false;

    // hide all of the divs
    hideAll();
    
    // get a handle on the div we want
    var theDiv = document.getElementById(theId);
    
    // make the div visible
    theDiv.style.visibility = "visible";
    
    // set a timeout to hide all again in 2 seconds
    var tid = setTimeout("hideOne('" + theId + "')", 2000);
}

function hideAll() {
   var allDivs = document.getElementsByTagName("div");
   for (i = 0; i < allDivs.length; i++) {
      if (selectedDivList.indexOf("," + allDivs[i].id) == -1)
        allDivs[i].style.visibility = "hidden";
   }
}

function hideOne(theId) {
    var d = document.getElementById(theId);
    if (selectedDivList.indexOf("," + d.id) == -1)
        d.style.visibility = "hidden";
}

function setFlag(b, src) {

    // clear list
    selectedDivList = "";

    // get set of checkboxes
    var cbSet = document.forms['blahForm'].elements['blahRadio'];
    
    document.getElementById(src).style.visibility = (b) ? "visible" : "hidden";
    
    // loop through each one
    for (var i = 0; i < cbSet.length; i++) {
        if (cbSet[i].checked) {
            isOneSelected = true;
            selectedDivList += ",d" + i;
        }
    }
}

</script>

</HEAD>

<BODY>
<body>
<form name="blahForm">
<input type="checkbox" onclick="setFlag(this.checked, 'd0');" name="blahRadio" onMouseOver="show('d0');">
<div id="d0" style="visibility: hidden;">Blah1</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd1');" name="blahRadio" onMouseOver='show("d1")'>
<div id="d1" style="visibility: hidden;">Blah2</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd2');" name="blahRadio" onMouseOver='show("d2")'>
<div id="d2" style="visibility: hidden;">Blah3</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd3');" name="blahRadio" onMouseOver='show("d3")'>
<div id="d3" style="visibility: hidden;">Blah4</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd4');" name="blahRadio" onMouseOver='show("d4")'>
<div id="d4" style="visibility: hidden;">Blah5</div><br>

</form>
</body>
</BODY>
</HTML>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
The code you wrote works perfectly...But of course, there is another side to this...I'll explain, no problem if you can't help, though.

I'm doing this page/form in asp/vb.net...So i'm not using "normal HTML" forms....

Instead of a checkbox being somethin like...
Code: 
<input name="checkbox" type="checkbox" value="0">
instead, it is...
Code: 
	<asp:checkbox id="AdminServices" Runat="server" OnCheckedChanged="DisplayDescrip" Text="Admin Services" onclick="setFlag(this.checked, 'd0');"  onMouseOver="show('d0');" />

In the first script you provided me, when I ran it on my ASP page I encountered an error 'length is null or not an object' My guess was it was of this line...

Code: 
var cbSet = document.forms['Form1'].elements['Radio'];

Which I changed to this...

Code: 
var cbSet = document.getElementsByTagName("asp:checkbox");

Which made it work. I'm not sure what was causing that, I am just assuming it was because there is not formally a 'name' tag in an asp:checkbox form element....In any case, it solved it...with the second script, if I apply this same solution...

Code: 
function setFlag(b, src) {

    // clear list
    selectedDivList = "";

    // get set of checkboxes
    //var cbSet = document.forms['Form1'].elements['blahRadio'];
   [b] var cbSet = document.getElementsByTagName("asp:checkbox");[/b]
    
    document.getElementById(src).style.visibility = (b) ? "visible" : "hidden";
    // alert(src);
    // loop through each one
    for (var i = 0; i < cbSet.length; i++) {
        if (cbSet[i].checked) {
            isOneSelected = true;
            selectedDivList += ",d" + i;
        }
    }
}

I dont get an error, However the div doesn't remain visible, as it does in a 'normal' HTML page....Can you think of any quick work arounds?

-wipes sweat from forehead-

thanks for all your help.


Use your resources, you're on the internet!
 
Upvote 0 Downvote
I'm not really sure how all that stuff renders on the browser side. Does it still display as <asp: checkbox... > when you do a View > Source?

By the way, the "length" error was coming from this line:
Code: 
for (var i = 0; i < cbSet.length; i++) {

because, i guess, cbSet was not returning any values.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
It's rendered like..

Code: 
<span onMouseOver="show('d0');" name="blahRadio">
<input id="AdminServices" type="checkbox" name="AdminServices" onclick="setFlag(this.checked, 'd0');" />
<label for="AdminServices">Admin Services</label>
</span>

If that did not have a onMouseOver event it would be
Code: 
<input id="AdminServices" type="checkbox" name="AdminServices" /><label for="AdminServices">Admin Services</label>

ie, just lackin the 'span' tag...
When I code <asp:checkbox name:someName id=someID>

name isn't an actual vb.net tag, so it is putting whatever value (someName) into the span tag along with the onMouseOver event. The value of ID (someID) is what populates the name attribute of the <input> tag...so that would be..

<span name="someName">
<input name="someID" type="checkbox">
</span>


Use your resources, you're on the internet!
 
Upvote 0 Downvote
ok. I'm not very familiar with asp, since i friggin despise m$ :). Try this code, let me know if it's any better:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script language=JavaScript>

var isOneSelected = false;
var selectedDivList = "";

function show(theId) {
    // if a checkbox is checked, don't bother
    if (isOneSelected) return false;

    // hide all of the divs
    hideAll();
    
    // get a handle on the div we want
    var theDiv = document.getElementById(theId);
    
    // make the div visible
    theDiv.style.visibility = "visible";
    
    // set a timeout to hide all again in 2 seconds
    var tid = setTimeout("hideOne('" + theId + "')", 2000);
}

function hideAll() {
   var allDivs = document.getElementsByTagName("div");
   for (i = 0; i < allDivs.length; i++) {
      if (selectedDivList.indexOf("," + allDivs[i].id) == -1)
        allDivs[i].style.visibility = "hidden";
   }
}

function hideOne(theId) {
    var d = document.getElementById(theId);
    if (selectedDivList.indexOf("," + d.id) == -1)
        d.style.visibility = "hidden";
}

function setFlag(b, src) {

    // get set of elements
    var elSet = document.forms['blahForm'].elements;
    var foundOne = false;

    // clear list
    selectedDivList = "";
    
    document.getElementById(src).style.visibility = (b) ? "visible" : "hidden";
    
    // loop through each element (now we have to check for checkboxes)
    for (var i = 0; i < elSet.length; i++) {
        if (elSet[i].type == "checkbox") {
            if (elSet[i].checked) {
                foundOne = true;
                selectedDivList += ",d" + i;
            }
        }
    }
    
    isOneSelected = foundOne;
}

</script>

</HEAD>

<BODY>
<body>
<form name="blahForm">
<input type="checkbox" onclick="setFlag(this.checked, 'd0');" name="blahRadio" onMouseOver="show('d0');">
<div id="d0" style="visibility: hidden;">Blah1</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd1');" name="blahRadio" onMouseOver='show("d1")'>
<div id="d1" style="visibility: hidden;">Blah2</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd2');" name="blahRadio" onMouseOver='show("d2")'>
<div id="d2" style="visibility: hidden;">Blah3</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd3');" name="blahRadio" onMouseOver='show("d3")'>
<div id="d3" style="visibility: hidden;">Blah4</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd4');" name="blahRadio" onMouseOver='show("d4")'>
<div id="d4" style="visibility: hidden;">Blah5</div><br>

</form>
</body>
</BODY>
</HTML>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
okay, Im baffled...

this code, does not work:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>WebForm4</title>
		<meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
		<meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
		<meta content="JavaScript" name="vs_defaultClientScript">
		<meta content="[URL unfurl="true"]http://schemas.microsoft.com/intellisense/ie5"[/URL] name="vs_targetSchema">
		<LINK href="styles/style.css" type="text/css" rel="stylesheet">
<script language=JavaScript>

var isOneSelected = false;
var selectedDivList = "";

function show(theId) {
    // if a checkbox is checked, don't bother
    if (isOneSelected) return false;

    // hide all of the divs
    hideAll();
    
    // get a handle on the div we want
    var theDiv = document.getElementById(theId);
    
    // make the div visible
    theDiv.style.visibility = "visible";
    
    // set a timeout to hide all again in 2 seconds
    var tid = setTimeout("hideOne('" + theId + "')", 2000);
}

function hideAll() {
   var allDivs = document.getElementsByTagName("div");
   for (i = 0; i < allDivs.length; i++) {
      if (selectedDivList.indexOf("," + allDivs[i].id) == -1)
        allDivs[i].style.visibility = "hidden";
   }
}

function hideOne(theId) {
    var d = document.getElementById(theId);
    if (selectedDivList.indexOf("," + d.id) == -1)
        d.style.visibility = "hidden";
}

function setFlag(b, src) {

    // get set of elements
    var elSet = document.forms[b]['Form1'][/b].elements;
    var foundOne = false;

    // clear list
    selectedDivList = "";
    
    document.getElementById(src).style.visibility = (b) ? "visible" : "hidden";
    
    // loop through each element (now we have to check for checkboxes)
    for (var i = 0; i < elSet.length; i++) {
        if (elSet[i].type == "checkbox") {
            if (elSet[i].checked) {
                foundOne = true;
                selectedDivList += ",d" + i;
            }
        }
    }
    
    isOneSelected = foundOne;
}

</script>


 
	</HEAD>
		<body MS_POSITIONING="GridLayout">
			<form name="Form1" method="post" action="webform4.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" 

value="dDwtMjAzNTI4NDM2MTt0PDtsPGk8MT47PjtsPHQ8O2w8aTwxMT47PjtsPHQ8cDw7cDxsPG9uQ2xpY2s7b25Nb3VzZU92ZXI7PjtsPHNldEZsYWcodGhpcy

5jaGVja2VkLCAnZDAnKVw7O3Nob3coJ2QwJylcOzs+Pj47Oz47Pj47Pj47bDxBZG1pblNlcnZpY2VzO0FydHdvcms7QXVkVmlkO0NhZmU7RG9vcnM7RnVybml0dXJ

lO0dlbmVyYWw7SFZBQztKYW5pdG9yaWFsO0xhbmRzY2FwaW5nO0xpZ2h0cztNb3ZlcztQYXJraW5nO1NlY3VyaXR5O1V0aWxpdGllczs+PnzK6edelOeDK+lSaQIZ

1FMWP7b7" />

				<table cellPadding="3" width="80%" align="left" border="1" bordercolor=3366ff>
					<tr>
						<td>Enter employee ID:</td>
						<td>
							<input name="empID" type="text" value="Enter employee id.." 

maxlength="7" id="empID" class="textfield" style="width:150px;" />
						</td>
						<td>Address:</td>
						<td rowSpan="2">
							<textarea name="empAddress" rows="5" cols="5" id="empAddress" 

class="textfield" style="width:300px;BACKGROUND-COLOR: #f8f8ff"></textarea>
						</td>
					</tr>
					<tr>
						<td>Name:</td>
						<td>
							<input name="empName" type="text" maxlength="50" id="empName" 

class="textfield" style="width:200px;" />
						</td>
						<td></td>
					</tr>
					<tr>
						<td>Location:</td>
						<td>
							<input name="empLocation" type="text" id="empLocation" 

class="textfield" style="width:200px;" />
						</td>
						<td>Region:</td>
						<td>
							<input name="empRegion" type="text" id="empRegion" class="textfield" 

style="width:200px;" />
						</td>
					</tr>
					<tr>
						<td colSpan="4">Service Requested:</td>
					</tr>
					<tr>
						<td colSpan="2">

<!-- vs.net generated table -->
<TABLE cellSpacing="1" cellPadding="1" width="100%" border="0">
 <TR>
	<TD>
<input type="checkbox" onclick="setFlag(this.checked, 'd0');" name="SomeOtherName" id="SomeOtherName" 

onMouseOver="show('d0');">
<div id="d0" style="visibility: hidden;">Blah1</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd1');" name="blahRadio" onMouseOver='show("d1")'>
<div id="d1" style="visibility: hidden;">Blah2</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd2');" name="blahRadio" onMouseOver='show("d2")'>
<div id="d2" style="visibility: hidden;">Blah3</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd3');" name="blahRadio" onMouseOver='show("d3")'>
<div id="d3" style="visibility: hidden;">Blah4</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd4');" name="blahRadio" onMouseOver='show("d4")'>
<div id="d4" style="visibility: hidden;">Blah5</div><br>
	</TD>
	<TD>
		<input id="Artwork" type="checkbox" name="Artwork" /><label for="Artwork">Artwork/Signage/Whiteboards</label>
	</TD>
 </TR>

</TABLE>
<!--End vs.net table and all checkboxes/radiobuttons -->					
		</td>
		<td colSpan="2">
		<span id="message"></span></td>
	</tr>  
	

 </table>
</form>
 
<form name="Form11">



</form>
 
</body>
</HTML>

That is asp.net generated code..just did a view source. I C/P'd code right from your [working] example...put it in my existing form, and I changed the form name reference in your code.

and here is the kicker, this code works...Same exact thing, only thing I changed was the formName and the physical placement of the form (not in a table or anything...)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>WebForm4</title>
		<meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
		<meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
		<meta content="JavaScript" name="vs_defaultClientScript">
		<meta content="[URL unfurl="true"]http://schemas.microsoft.com/intellisense/ie5"[/URL] name="vs_targetSchema">
		<LINK href="styles/style.css" type="text/css" rel="stylesheet">
<script language=JavaScript>

var isOneSelected = false;
var selectedDivList = "";

function show(theId) {
    // if a checkbox is checked, don't bother
    if (isOneSelected) return false;

    // hide all of the divs
    hideAll();
    
    // get a handle on the div we want
    var theDiv = document.getElementById(theId);
    
    // make the div visible
    theDiv.style.visibility = "visible";
    
    // set a timeout to hide all again in 2 seconds
    var tid = setTimeout("hideOne('" + theId + "')", 2000);
}

function hideAll() {
   var allDivs = document.getElementsByTagName("div");
   for (i = 0; i < allDivs.length; i++) {
      if (selectedDivList.indexOf("," + allDivs[i].id) == -1)
        allDivs[i].style.visibility = "hidden";
   }
}

function hideOne(theId) {
    var d = document.getElementById(theId);
    if (selectedDivList.indexOf("," + d.id) == -1)
        d.style.visibility = "hidden";
}

function setFlag(b, src) {

    // get set of elements
    var elSet = document.forms['Form11'].elements;
    var foundOne = false;

    // clear list
    selectedDivList = "";
    
    document.getElementById(src).style.visibility = (b) ? "visible" : "hidden";
    
    // loop through each element (now we have to check for checkboxes)
    for (var i = 0; i < elSet.length; i++) {
        if (elSet[i].type == "checkbox") {
            if (elSet[i].checked) {
                foundOne = true;
                selectedDivList += ",d" + i;
            }
        }
    }
    
    isOneSelected = foundOne;
}

</script>


 
	</HEAD>
		<body MS_POSITIONING="GridLayout">
			<form name="Form1" method="post" action="webform4.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" 

value="dDwtMjAzNTI4NDM2MTt0PDtsPGk8MT47PjtsPHQ8O2w8aTwxMT47PjtsPHQ8cDw7cDxsPG9uQ2xpY2s7b25Nb3VzZU92ZXI7PjtsPHNldEZsYWcodGhpcy

5jaGVja2VkLCAnZDAnKVw7O3Nob3coJ2QwJylcOzs+Pj47Oz47Pj47Pj47bDxBZG1pblNlcnZpY2VzO0FydHdvcms7QXVkVmlkO0NhZmU7RG9vcnM7RnVybml0dXJ

lO0dlbmVyYWw7SFZBQztKYW5pdG9yaWFsO0xhbmRzY2FwaW5nO0xpZ2h0cztNb3ZlcztQYXJraW5nO1NlY3VyaXR5O1V0aWxpdGllczs+PnzK6edelOeDK+lSaQIZ

1FMWP7b7" />

				<table cellPadding="3" width="80%" align="left" border="1" bordercolor=3366ff>
					<tr>
						<td>Enter employee ID:</td>
						<td>
							<input name="empID" type="text" value="Enter employee id.." 

maxlength="7" id="empID" class="textfield" style="width:150px;" />
						</td>
						<td>Address:</td>
						<td rowSpan="2">
							<textarea name="empAddress" rows="5" cols="5" id="empAddress" 

class="textfield" style="width:300px;BACKGROUND-COLOR: #f8f8ff"></textarea>
						</td>
					</tr>
					<tr>
						<td>Name:</td>
						<td>
							<input name="empName" type="text" maxlength="50" id="empName" 

class="textfield" style="width:200px;" />
						</td>
						<td></td>
					</tr>
					<tr>
						<td>Location:</td>
						<td>
							<input name="empLocation" type="text" id="empLocation" 

class="textfield" style="width:200px;" />
						</td>
						<td>Region:</td>
						<td>
							<input name="empRegion" type="text" id="empRegion" class="textfield" 

style="width:200px;" />
						</td>
					</tr>
					<tr>
						<td colSpan="4">Service Requested:</td>
					</tr>
					<tr>
						<td colSpan="2">

<!-- vs.net generated table -->
<TABLE cellSpacing="1" cellPadding="1" width="100%" border="0">
 <TR>
	<TD>

	</TD>
	<TD>
		<input id="Artwork" type="checkbox" name="Artwork" /><label for="Artwork">Artwork/Signage/Whiteboards</label>
	</TD>
 </TR>

</TABLE>
<!--End vs.net table and all checkboxes/radiobuttons -->					
		</td>
		<td colSpan="2">
		<span id="message"></span></td>
	</tr>  
	

 </table>
</form>
 
<form name="Form11">

<input type="checkbox" onclick="setFlag(this.checked, 'd0');" name="SomeOtherName" id="SomeOtherName" 

onMouseOver="show('d0');">
<div id="d0" style="visibility: hidden;">Blah1</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd1');" name="blahRadio" onMouseOver='show("d1")'>
<div id="d1" style="visibility: hidden;">Blah2</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd2');" name="blahRadio" onMouseOver='show("d2")'>
<div id="d2" style="visibility: hidden;">Blah3</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd3');" name="blahRadio" onMouseOver='show("d3")'>
<div id="d3" style="visibility: hidden;">Blah4</div><br>

<input type="checkbox" onclick="setFlag(this.checked, 'd4');" name="blahRadio" onMouseOver='show("d4")'>
<div id="d4" style="visibility: hidden;">Blah5</div><br>

</form>
 
</body>
</HTML>

I must be missing something obvious here, right?

Use your resources, you're on the internet!
 
Upvote 0 Downvote
It's the asp.net _viewstate field...If i remove that, it works perfectly....only thing is...I can't remove it as its generated when the page is loaded.....

any idea why would that hidden field cause this?

Use your resources, you're on the internet!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb
Rayj0000
  • Locked
  • Question Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
862
Rayj0000
Rayj0000
JScannell
  • Locked
  • Question Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
chrisjchrisj
  • Locked
  • Question Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
333
chrisjchrisj
chrisjchrisj

Part and Inventory Search

Sponsor

Back
Top