JavaScript - Hiding Elements Without Ids

i am having some problem showing and hiding some div
i want to show the div with the id="universitiesDiv" on one point and the div id="highSchoolsDiv" on another depending on the user choice of selected option.
Code:

function Show (titleImg){
		// the id of the content element from the id of the title element
	var contentID = titleImg.id.replace (/title/, "content");
	var contentDiv = document.getElementById (contentID);
		contentDiv.style.display = "block";

	return false;
}

function Hide (titleImg){
		// the id of the content element from the id of the title element
	var contentID = titleImg.id.replace (/title/, "content");
	var contentDiv = document.getElementById (contentID);

		contentDiv.style.display = "none";

	return false;
}

the functions work fine i have tested them on input type="checkbox" and they work fine
Code:

<select name="education" id="education" 
						onfocus="Show(this.options[this.selectedIndex].value);">
						<option selected value="00">-الرجاء الاختيار-</option>
						<option value="highSchoolsDiv">مدرسة ثانوية</option>
						<option value="universitiesDiv"> كلية </option>
						<option value="universitiesDiv">درجة البكالوريوس</option>
						<option value="universitiesDiv">درجة عليا</option>
						<option value="universitiesDiv">دكتوراه / ما بعد الدكتوراه</option>
						<option value="07">اسألني فيما بعد</option>
						</select>
						</span>
						</div> 
						</td></tr></table>
					</div> 
					 
					<div> 
						<div class="Left"></div>
						<table class="step2" ><tr><td>
						<div class="Right"> 
							<div class="Inner" id="Inner"> 
								<div id="universitiesDiv" class="Row innerError" style="display:none;"> 
									<div class="Left">
									<label for="universities">الجامعة / الكلية</label></div> 
									<div class="Right"> 
									<input  type="text" name="universities" id="universities" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_universities();" onblur="blurInput(this); validate_JoinPersonalInfoForm_universities();" size="55"/> 

 
									</div> 
									 
									 </td></tr><tr><td>
								</div> 
								 
								<div id="highSchoolsDiv" class="Row innerError" style="display:none;"> 
									<div class="Left">
									<label for="high_schools">المدرسة الثانوية</label></div> 
									<div class="Right"> 
										<input  type="text" name="high_schools" id="high_schools" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_high_schools();" onblur="blurInput(this); validate_JoinPersonalInfoForm_high_schools();" size="55"/> 
 
									</div> 
														
									 
								</div> 
							</div> 
						</div> 
						</td></tr></table>	
					</div>

here is doesn't do nothing i have tried onblur onfocus onchange onselect everything i even tried then in side the option <option onselect... !!!!!
anyone can help me, that would be great
thanks

Hi,

If I want to hide a title / heading if a field below is not filled in, what would be the js for that?

I have an "Attachments" h2 heading and three following fields for the client to add up to three attachments. But if none are filled in I want the h2 heading to not display.

This is what I have so far:

var attachment1 ='{tag_attachment 1}'
var attachment2 ='{tag_attachment 2}'
var attachment3 ='{tag_attachment 3}'

===
if(attachment1 == '') {
document.getElementById('attachment1').style.display = 'none';
}

if(attachment2 == '') {
document.getElementById('attachment2').style.display = 'none';
}

if(attachment3 == '') {
document.getElementById('attachment3').style.display = 'none';
}

===
<div id="attachments">
<h2>Attachments</h2>
<p>{tag_attachment 1}<br />
{tag_attachment 2}<br />
{tag_attachment 3}</p>
</div>


This should take care of the three fields, but how do I tie in the heading too?

Thank you!

I have this simple checkbox menu
http://myresearchfinder.com/dev/checktest.html

If you check the cancer box a div will appear. If you check lung, another menu pops up. If you check colon nothing appears because it's behind the lung div. I am aware of z-index. But because a person may go back and forth between menus I need a way to make sure the appropriate div is always on top. Any ideas?

Hi, I wondering if anyone can help:

I've got rows of divs in this manner

<div class="row">This is row 1 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 1</p></div>
<div class="row">This is row 2 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 2</p></div>
<div class="row">This is row 3 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 3</p></div>
<div class="row">This is row 4 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 4</p></div>

I wish to have some javascript to toggle the hidden row for its corresponding link.

Please can someone help point me to an example if available. Any help will be greatly appreciated

hello all...just joined up...very anxious to get my website improved with some of your kind help

i have this current JS running, but Im having some little issues i thought someone here could help me out with.

I want the background color to be #0f3559. But whenever I add this to the script it disables the buttons I have included.

Also, I would like to have just one "Show/Hide" button that does both functions rather than 2 seperate.

can anyone take a look? THANKS.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>ESPN SCORELINE</title>
<script type="text/javascript">
function setVisibility(theId, visibility) {
document.getElementById( theId ).style.visibility = visibility; }
function setDisplay(theId, display) {
document.getElementById( theId ).style.display = display; }
</script>
</head>
<body>
<input type="button" value="show" onclick="setVisibility('scoreline', 'visible'); ">
<input type="button" value="hide" onclick="setVisibility('scoreline', 'hidden'); ">
</body>
<iframe src="http://espn.go.com/bottomline/espnewsbottomlinebasic.html" width="1000" height="45" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" style="visibility:hidden;" alt="scoreline" id="scoreline"></iframe>
</html>

OK, I've been working on this for quite some time now, and have it working, almost. lol. Hopefully someone here can lend a fresh pair of eyes to what I'm doing wrong (bare in mind, I don't know javascript very well at all). I'm creating a simple faq page for my site, but there's a lot of questions, so instead of lumping it all in at once, I'm using divs to store answers in that hide and reappear as my guests click on a question they want to see an answer too. ok, heres the basics of the code I'm using so far:

Code:

<script type="text/javascript">
function showit(boxName) 
	{
	theBox = document.getElementById(boxName);
	theBox.className = "boxVisible";
	}
</script>
<script type="text/javascript">
function hideit(boxName) 
	{
	theBox = document.getElementById(boxName);
	theBox.className = "boxHidden";
	}
</script>

That, is in the head section of my page. Then for the links and such I have:

Code:

<div><a href="link.html" onclick="showit('s11'); hideit('s12'); hideit('s13'); hideit('s14'); hideit('s15'); hideit('s16'); return false;">Do you shoot in color, or black and white?</a></div>
	<div id="s11">
		&nbsp;&nbsp;&nbsp;&nbsp; We shoot in color.&nbsp; 
		Color prints can be printed in black and white and come out perfectly 
		just as though they were shot in black and white.&nbsp; However if you 
		shoot in black and white, you can't print it in color.&nbsp; For this 
		reason we shoot all of our images in full color.
	</div>

obviously there are more questions that that, but I don't want to fill this screen with all of them either.

Ok, heres what its doing, when you click on the first question, no problem, the answer opens right up, appears where it should be, everythings great, except, that its also following the link and leaving the page. I get to a 404 error telling me that link.html does not exist on my server. So, apparently the

Code:

return false

isnt working.... what do I need to do here, I'm now lost...

OH, I should include the CSS I'm using for these DIV's so you can see what the javascript is calling on for them:

Code:

.boxVisible 
	{
	display: block;
	position:relative;
	left:25px;
	width:755px;
	overflow:auto;
	}
.boxHidden 
	{
	display: none;
	}

Thanks to ANYONE that can help out!

I don't mean for this to be an advertisement, and if its not allowed by all means I'll remove it from this post, but if you want to see my exact code that I'm using, you'll find the page I'm working on at http://www.smmahoney.com/index.php?page=faq

I want to hide my JavaScript but when I checked the FAQ of this forum, I saw that it said that it isn't possible.

But how did worldometers.info did it? Because I cant find the JavaScript source.

Hey - I'm pretty much a Javascript n00b, but I know enough to cut and pasted and do minor edits. I wanted some help with this problem I'm having or really just wanted to know if what I want is possible.

I would like to have the 'Previous' link hidden on the first image and then the 'Next' link hidden on the last. I wondered if there was some way I could do that based on the number, which I guess would be the ImgNum variable? Here's the code (pulled of Google):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title> </title>
	<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <style> #content2 {position:absolute; top:110px; left:610px; width:250px; margin-top:0px;} </style>
    <SCRIPT LANGUAGE="JavaScript">
NewImg = new Array (
"images/sketch02/1.jpg",
"images/sketch02/2.jpg",
"images/sketch02/3.jpg",
"images/sketch02/4.jpg",
"images/sketch02/5.jpg",
"images/sketch02/6.jpg",
"images/sketch02/7.jpg",
"images/sketch02/8.jpg",
"images/sketch02/9.jpg",
"images/sketch02/10.jpg",
"images/sketch02/11.jpg",
"images/sketch02/12.jpg",
"images/sketch02/13.jpg",
"images/sketch02/14.jpg",
"images/sketch02/15.jpg",
"images/sketch02/16.jpg",
"images/sketch02/17.jpg",
"images/sketch02/18.jpg",
"images/sketch02/19.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.sketchbook02.src = NewImg[ImgNum];
   }
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
   }
}
</script>
</head>

<body>
    <div id="content1">
	    <img src="images/sketch02/1.jpg" name="sketchbook02">
        <table cellpadding="3" cellspacing="0" border="0" width="380"><tr>
        <td align="left"><a href="javascript:chgImg(-1)">< previous</a></td>
        <td align="right"><a href="javascript:chgImg(1)">next ></a></td>
        </tr></table>
        <br /><br />
    </div>	
</body>
</html>

Thanks for your help!

I am trying to make an order form I am working on accessible for users who have javascript turned off in their browser, and to do this I would like to hide a div if JS is disabled.

Searching the Web has led me to think that styling the div to not display is the way forward and then using JS to display it. It is the JS bit I am struggling with!

The div in question is a set of radio buttons to allow a purchaser to choose how many gift memberships they want to buy:

Code:

<div id="giftmember-buttons" style="display:none";>
<h2 class="threepeaksform">How many gift memberships do you wish to purchase?</h2>
<fieldset class="threepeaksform">
<legend>Please select the number of people you are buying a gift membership for using the buttons below.</legend>
<div class="generalcontactform-group">
<label>1</label><input name="numbergift" type="radio" value="1" checked="checked" onClick="showhidefields(this.value)" />
<label>2</label><input name="numbergift" type="radio" value="2" onClick="showhidefields(this.value);"/>
<label>3</label><input name="numbergift" type="radio" value="3" onClick="showhidefields(this.value);"/>
<label>4</label><input name="numbergift" type="radio" value="4" onClick="showhidefields(this.value);"/>
</fieldset>
</div>
<br />
</div>

I have used a JS switch function lower down the page but that relies on onClick to make it work, I want the above div to display as the page loads - would I do this with the switch function and onLoad applied to the body to make the div display when JS is on?

The full page is at: http://yd97.peak1.titaninternet.co.u...sform-gift.htm

Thanks for any help.

Cheers

Stu

Alright, working on an ajax image uploader, and im a bit rusty with JS.

How would i go about hiding the form after the submit button is pressed, so it disappears? Heres my website. If you need the scripts, just ask.


Thanks in advance.

Hi

when we used to place mouse over a menu,the submenu goes downwards.The submenu is not visible in one page as it is hided by an iframe which contains the pdf. Is there any way to over this Bug in order to display the the submenu over the iframe. the link with this error is

http://www.rosarychurchqatar.com/lec...pg=roster&id=2

Any help will be appreciated

Regards
Rajeev

I'm new to web programming, and so I may be going about this all wrong but this is what I'm trying to do.

I'm creating an interface to access my google base, I can do that part without much trouble but to access the server you need to request a session token. This token has to be sent to the server along with your query. I use JS on the main page which calls a php script that requests the key, then calls the server for a full list of items which is then passed back to the javascript in JSON format. The user then selects a field from the option box and i need to requery the server for the updated list. But to do this i need to resend the session token, and this is where I'm having trouble.

I need to save this token, but im not sure the best way to go about this. I can pass it back to the JS portion and save it as a variable that i can then pass to the PHP script that queries the server, but im worried the key may contain private information about my log in information. Is there a way to make this token variable hidden in the JS so that the client could not see it? Or am i way off base and the client can't view any of the variables anyways?

If someone has a suggestion for me that would be much appreciated.

I am using a jquery gallery slideshow on my homepage and I am having an issue where the images loaded before the dom is loaded causing the images to display in an ugly stack.

I combated this a bit by setting a height on the div and setting the overflow to hidden. however you can still see the unstyled stack of images within the small div for a couple of seconds before the page is loaded.

the code to start the javascript is:

Code:

<script type="text/javascript">
	$(document).ready(function(){		
	$('#photos45').galleryView({
		panel_width: 980,
		panel_height: 300,
		gallery_width: 980,
		gallery_height: 900,
		frame_width: 120,
		frame_height: 50,
		pause_on_hover: true,
		nav_theme: 'light'
	});
	});
</script>

and the html is:

Code:

 <div style="height:360px; overflow:hidden; " >
 <ul id="photos45">
 <li><img src="../site_files/banners/cush.jpg" alt="Baffin Cush"/></a></li>

  <li><img src="../site_files/banners/coveralls.jpg" alt="Big Al Coveralls"/></li>

 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 
 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 </ul>
  

</div>

I have a feeling that this has something to do with the .ready function maybe it should be something else? You can see this in action he

http://bit.ly/8QRXWU

I am in the progress of building a new website; the layout and stuff is already done for the most part, but I am having a problem with the two order forms on my website. Well not the forms themselves, more with how they appear (and disappear).

Like stated I have 2 forms on my website. When coming to my website they should be hidden (standard). When someone wants to order they press the link for order form A or form B.

From here I am running into several problems.

Problem #1
I want each form only to appear when they click on a link.
For example; when a person clicks on link 1 form A appears. If they click on link 2 form B appears.

Problem #2
If form A appears and they click on link 2, than form A should disappear and form B should be visible and the other way around.

Problem #3
Is it possible to load a page within the DIV for example I want form B to include extra-info.php. Is this possible?

If I understand correctly the above would be possible with Javascript and with the use of hidden DIV's. But I really don't know much about Javascript to pull this of myself.

Anyone in here who can help me out and provide me with a working example?

I would be very grateful...

If something is not clear, please do no hesitate to ask me...

I have a simple password protection setup on my site but the password is displayed when it is typed in is there a way to change it to a # or * when it is typed in