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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

block display or hide 1

Status
Not open for further replies.
mrsbean

mrsbean

Technical User
Jul 14, 2004
203
US
I am not very knowledgeable about javascript. I can copy and paste and maybe tweak a bit. I am having trouble getting where I want to go, and I hope someone can either point me to a tutorial or guide me in writing a function to do what I need to do.

I looked at a thread elsewhere that showed me the following:

Code: 
<script type="text/javascript">

function showIt() {
document.form1.imageMap.style.display="block"; //set to visible
}
function hideIt() {
document.form1.imageMap.style.display="none"; //set to hidden
}
</script>


What I want to do is to click on an image and then show a form text area. If I click on the image again, I want to hide it.

Code: 
  <tr><td valign="top">

	  <img src="images/arrow.gif" border="0" align="left" onClick="somethingsomethingsomething" class="arrowcss" />

</td>
	  <td valign="top">Image Map(?)&nbsp;</td>
	  <td><div class="showme">
	  <textarea  name="imageMap" cols="46" rows="5" id="imageMap"></textarea>
	  </div>
		</td></tr>

I have a general idea, but need guidance. What do I need in my onClick? Do I need to do something different in the script? Must the script be in the header to work? It would be preferable not to put the script in the header.

All help is must appreciated.

MrsBean
 
Sort by date Sort by votes
mrsbean, here's an example of how to hide and show a form. Use this code to incorporate it into your own page. The function is called from the handler of the button labeled "hide/show". You could just as easily call the function from the onclick of an image. If you need more assistance please let us know where you get stuck:

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 xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function showHide() {
   var frm = document.getElementById("theForm");
   frm.style.display = (frm.style.display == "none") ? "block" : "none";
}

</script>
<style type="text/css"></style>
</head>
<body>

<input type="button" value="hide/show" onclick="showHide()" />

<form id="theForm">
   <input type="button" value="some button"><br /><br />
   <input type="radio" name="r">Some
   <input type="radio" name="r">Radio
   <input type="radio" name="r">Buttons<br /><br />
   <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
   </select><br /><br />
   <input type="text"><br /><br />
   <textarea></textarea>
</form>

</body>
</html>

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
Thank you so much! It worked beautifully, and I learned something very valuable.

I think it's funny that you a "cat" who is offering dogs (silkypups).

Thanks again,

MrsBean
 
Upvote 0 Downvote
I think it's funny that you a "cat" who is offering dogs
Click to expand...

Yeah, I get reminded of that quite often [smile]

P.S. new pictures of them posted last night [thumbsup2]

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
New related question. I am using cold fusion, and the code above is incorporated into an index.cfm page which is used by many different templates.

Since I have to put an onload event into the code to make the text area invisible initially, the index page is looking for the text area each time it loads. 98% of the time, it isn't finding what it is looking for, and it returns a javascript error.

I would like to get rid of the error. Relevant portions of the code are provided below. Is it possible to add some error handling in javascript?

In the <head> section:
Code: 
<script language="JavaScript">

function showHide() {
   var box = document.getElementById("imageMap");
   box.style.display = (box.style.display == "none") ? "block" : "none";
}

// -->

</script>

In the body section:
Code: 
<body bgcolor="#EEEEEE" text="#505050" link="#FF0000" vlink="#900000" alink="#ffcc00" leftmargin="2" topmargin="2" rightmargin="2" bottommargin="2" marginwidth="2" marginheight="2" onLoad="showHide()">

in the body section as part of the form:
Code: 
<tr><td valign="top">

	  <img src="images/arrow.gif" border="0" align="left" onclick="showHide()" class="arrowcss" />

</td>
	  <td valign="top">Image Map(<a href="javascript:launchHelp('help.cfm?template=ec_category_edit_1')">?</a>) &nbsp;</td>
	  <td>
	  <textarea  name="form_imageMap" cols="46" rows="5" id="imageMap">#cat_hdr_imgmap#</textarea>

		</td></tr>


MrsBean
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
167
chikwendu
chikwendu
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
955
MDGarcia
MDGarcia
Krus1972
  • Locked
  • Question
Pop-up Blocker Detecter
Replies
1
Views
145
spamjim
spamjim
MDGarcia
  • Locked
  • Question
Connection to ORACLE from OutSystems
Replies
0
Views
119
MDGarcia
MDGarcia

Part and Inventory Search

Sponsor

Back
Top