JavaScript - Dynamically Change & Show/hide Iframes

I'm developing a site for my wife's acupuncture practice (http://www.acupunctuurfengyun.be.

Since I have two monitors (one wide screen, one square) attached to my computer I can verify how it will look in different resolutions.
While doing so I came across a nasty thing: in some resolutions the content div is very small and not using all of the full browser window (left after the header section).

Is it possible to make a change to the CSS min-height and max-height while the page is being loaded?
I've looked into lots of samples but all depend on a click or mouse over event and didn't want to work with onload in the body tag.

I've also thought about putting the stuff in the PHP part of my code but I am lost at this moment on how to do this.
Could someone help me out here?

Hello,

I have been looking for this all day - Change currencies throughout the page

when choosing between countries or currencies from dropdown menu.

What I basically need is a dropdown menu which shows countries or currencies.

When you select anyone of it like USD all the prices throughout the page are

changed to USD. Now if you change it AUD/CAD/PKR etc they will be changed

accordingly.

A very good example of this is: http://creativeon.com. When you

change currency from right top dropdown menu - it changes the currencies of

all the packages in the main content.

I am a HTML developer and do not know much about javascripting. Please help me.

P.S. I have searched codingforums.com too and found only two links which are

not of my use because they are currency converter:
http://www.codingforums.com/showthread.php?t=196577
http://www.codingforums.com/showthread.php?t=196373

Best Regards and Thanks in Advance.

I don't know a lot about Javascript... still learning..
I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code:
Code:

<script type="text/javascript" >

function showSample() {
	
  if (document.getElementById('input').value='SW001') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW002') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='block';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW003') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='block';
    document.getElementById('SW004').style.display='none';

  }
    else if (document.getElementById('input').value='SW004') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  
    else if (document.getElementById('input').value='SW005') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='block';

  }

}

</script>


<style type="text/css">
<!--
#main {
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	height: 125px;
}
#imageArea {
	float: right;
	width: 200px;
}
#formArea {
	float: left;
	width: 200px;
	height: 125px;
}
.image {
	height: 125px;
	width: 125px;
	margin-right: auto;
	margin-left: auto;
	display: none;
}
#SW001 {
	background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
	background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
	background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
	background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
	background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>

<body>
<div id="main">
  <div id="imageArea">
    <div class="image" id="SW001"></div>
    <div class="image" id="SW002"></div>
    <div class="image" id="SW003"></div>
    <div class="image" id="SW004"></div>
    <div class="image" id="SW005"></div>
  </div>
  
  <div id="formArea">
    <form action="" method="get">
      
      
      <input  type='text' name="input" id='input' />
      <input name="" type="button" onclick="showSample(this.selectedIndex)"/>
      
      
    </form>
  </div>
</div>
</body>
</html>

Any help would be greatly appreciated!

Hello,

I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management".

Does anyone know how I resolve ?.

The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link.




------------


Have placed code in attachment as too long for this section

Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link...

<script type="text/javascript">
function show(){
document.getElementById(test).style.display="block";
}

</script>

<div id="test" style="display:none;">
<p>Some text</p>
</div>


<a href="#" onclick="show(); return false;">Show</a>

this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html

using this code: http://www.linkstraffic.net/programm...nd/movediv.php

heres my code. can someone fix it?

html:

[CODE]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chris MacDonald - Javascript Assignment 2</title>

<link href="styles/styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="java.js"></script>

<div id="header">
<div id="logo"><img src="images/beat.png" /></div>
</div>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li>
<li><a href="#">About Us</a></li>
</ul>

</head>

<body>

<div id="content">

<a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a>

<div id="coverlogin">

<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<br/>

<p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p>
</div>

</div>
</div>


<div id="footer">
<div id="footertext">Beat Threads - 2010</div>
</div>





</body>
</html>
[CODE]

javascript:

// JavaScript Document

var hh=0;
var interv;

//we show the box by setting the visibility of the element and incrementing the height smoothly
function ShowBox()
{

//Depending on the amount of text, set the maximum height here in pixels
if(hh==40)
{
clearInterval(interv);
return;
}

obj = document.getElementById("coverlogin");
obj.style.visibility = 'visible';
hh+=2;
obj.style.height = hh + 'px';
}

function HideBox()
{
obj = document.getElementById("coverlogin");

if(hh==2)
{
obj.style.visibility = 'hidden';
obj.style.height = '0.1em';
clearInterval(interv);
return;
}
hh-=2;
obj.style.height = hh + 'px';
}

[CODE]

Can someone fix this for me?

Hi all,

Check this code:
PHP Code:
<a>text</a>
<div id="pkg">pkg</div>
<div id="table_pkg">table_pkg</div> 


I'd like to show table_pkg and hide pkg when I click on <a>text</a>.
How can I do?

Thank you very much

Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome

I have a script to show and hide various divs based on a function & var.

The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want.

here is the JS:

Code:

function sitesurveyswitch(emotion) {

	var e = emotion;

	document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
	document.getElementById('FeedbackHate').style.display = 'none';
	document.getElementById('FeedbackOk').style.display = 'none';
	document.getElementById('FeedbackLove').style.display = 'none';
		
	if (e == 'hate')
		document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackHate').style.display = 'block';
	if (e == 'ok')
		document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackOk').style.display = 'block';
	if (e == 'love')
		document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackLove').style.display = 'block';
}

and here is the code related to this function:

Code:

<div id="siteSurveyBox">
				<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
				<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
				<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
			</div>
			
			<div id="FeedbackHate" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackOk" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackLove" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>

Hi guys, im new to forums and need some help with my website.
I have embed a flash player known as: JW player into my website and put it into a div.
Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif.
How would I set this up?
Im not to familiar about using javascript so im not sure if its even possible.
Anways thx for any help ore suggestions related to this subject.

Code:

<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>

</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent"  class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent"  class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent"  class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>

can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs

ok trying to get a Div tag to show if something is True and hide if something is False

JS
Code:

unction eToggle(anctag,darg) 
{
 var ele = document.getElementById('Module1');
   var ele = document.getElementById('Module2');
   var ele = document.getElementById('Module3');
   var ele = document.getElementById('Module4');

  
  if("module1" + "module2" + "module3" + "module4" <40)
  {
    div.id.Failed = "block";
	div.Failed = "Failed";
  }
  else 
  {
	div.style.Passed = "block";
	div.Passed = "show";
  }
}

HTML
Code:

<div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b>
<br  />
</div>

<div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div>

Hi Guys,
I am new to this forum,based on the combobox value,I am creating a textboxes dynamically in jsp .Based on the count of textboxe's the textarea content comes with <value1> like this...
Here i tried like this,
<html>
<head>
<script>
function copy_data(val,id,textareaValue){
var enteredText = val;
alert("enteredText -----------"+enteredText);
var boxId= id;
alert("boxId-----------"+boxId);
var textValue= textareaValue;
alert("textValue-----------"+textValue);
var beforeBrac = textValue.substring(0,textValue.indexOf("<"));
alert("beforeBrac -----------"+beforeBrac );
var inbracket = textValue.substring(beforeBrac.length+1,textValue.indexOf(">"));
alert("inbracket -----------"+inbracket);
if(boxId = "1"){
inbracket = val;
}
alert("inbracket -----------"+inbracket);
var afterBrac = textValue.substring(textValue.indexOf(">"),textValue.length);
alert("afterBrac -----------"+afterBrac );

var fstr = beforeBrac +"<"+inbracket +afterBrac ;
if(boxId == "1"){
document.getElementById('txtArea').value = fstr;
alert("final str value is"+fstr);

}
}
</script>
</head>
<body>
<input type="text" name ="a" id="1" onkeyup="copy_data(this.value,this.id,document.getElementById('txtArea').value)"/>
<input type="text" name ="a" id="2" onkeyup="copy_data(this.value,this.id, document.getElementById('txtArea').value)"/>
<textarea rows="2" cols="20" id="txtArea">
At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced <XML>, SQL, ASP, and PHP.
</textarea>
</body>
</html>

three text boxes with some value [ value1 ] [value2] [value3 ]
this is the text area content:-
At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced XML, SQL, ASP, and PHP.

the output should be :-
At W3Schools you <value1> find all <value2> Web-building tutorials <value3 > need, from basic HTML to advanced XML, SQL, ASP, and PHP...
But i can't get it exactly..When i enter or delete the value it should replaced in the proper <> correctly.. If i enter the value in 1st textbox it should replace the value 1st <>.same for others also...Any Idea's ?Plz suggest me ...

Hi ,

I am new to javascript and have coded an invoice page through help from some available content on web.

here is my requirement

My form contains inputs "item ,rate quantity,price" in a tabular form where one can dynamically add or delete rows.And the requirement is that

when Quantity is entered the Price should change to Price=Quantity*Rate on tab out

So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows.

Code is as below
direct_invoice.html


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script type="text/javascript" src="js/direct_invoice_table.js">

</script>

<html>
     <head>
          <title>Direct Invoice</title>
     </head>
     <body leftmargin="0" topmargin="0">
	 
	 <p align = "center" font='30'><input type="text" name="company_name" size="20" maxsize="20" />
	  <b> Invoice</b></p>
	 
		<table id="Client_Details">
		  <tr>
			<th>Client Name:</th>
			<td><input type="text" name="client_name" size="20" maxsize="20" /></td>
		  </tr>
		  <tr>
			<th>Client Address:</th>
			<td><input type="text" name="address_line1" size="20" maxsize="40" /></td>
		  </tr>
		  <tr>
		  <td></td>
			<td><input type="text" name="address_line2" size="20" maxsize="40" /></td>			
		  </tr>
		  <tr>
			<th>Pin Code:</th>
			<td><input type="text" name="client_pin" size="7" maxsize="7" /></td>		
		  </tr>		  
		  <tr>
			<th>City/State/Country:</th>
			<td><input type="text" id="client_city" size="10" maxsize="30" /></td><td>/</td>
			<td><input type="text" id="client_state" size="10"  maxsize="20" /></td><td>/</td>
			<td><input type="text" id="client_country" size="10" maxsize="20" /></td>			
		  </tr>
		<tr>
			<th>Email Address:</th>
			<td><input type="text" name="client_city" size="10" maxsize="30" /></td>			
		  </tr>
		<tr>
			<th>TIN/PAN:</th>
			<td><input type="text" name="tin_or_pan" size="10" maxsize="20	" /></td>			
		  </tr>		  
		</table>
	 
	                <table align="center" width = "75%">
                    <tr>
                         <td align = "center">
                              <!--- very imporant to give the table an id --->
                              <!--- otherwise it won't know where to edit --->
                              <table border="1" id="mySampleTable">
                                     <tr>
									 	<th>Item No</th>
										<th>Item Name</th>
										<th>Description</th>
										<th>Unit Cost</th>
										<th>Quantity</th>
										<th>Price</th>
										<th> <font color="RED">Delete</font></th>
                                   </tr>
									<tr>
										<td>1</td>
					<td><input type="text" name="itemname[]"  size="40" "maxsize="100"/></td>
					<td><input type="text" name="description[]" size="20" " maxsize="100" /></td>
					<td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td>
					<td><input type="text" id = "quantity[]" name="quantity[]" onchange="dynamic_onc();" size="4" maxsize="100" /></td>
					<td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td>
								   </tr>
							  </table>
								<table id="totaltbl" align="right">
								<tr>
								  <td></td>
								 </tr>
								  <tr>
									<th>Vat %</th>
									<td><input type="text" name="total" size="3" maxsize="3" /></td>
								  </tr>
								  <tr>
									<th>Total</th>
									<td><input type="text" id = "total"  name="total" size="20" maxsize="100" /></td>
								  </tr>
								</table>

	
                         </td>
                    </tr>
               </table>
          <form action="save_entry.php" name="eval_edit" method="post" format="html">
					<p>	
						<input type="button" value="Add Row" onclick="addRow();" />	
						<input type="button" value="Calculate Total Amount" onclick="Totalcal();" />	
						<input type="button" value="Print" />
					
					</p>
          </form>
		  
		  	 <p align = "left" font='100'> <b>Company Name: </b> <input type="text" name="company_address_line1" size="20" maxsize="20" />
	  </p>
	  <p align = "left" font='100'> <b>Company address line: </b> <input type="text" name="company_address_line2" size="20" maxsize="20" /></p>
	  	  <p align = "left" font='100'> <b>Company Location: </b><input type="text" name="company_address_location" size="20" maxsize="20" /></p>
     </body>
</html>

***************

The below is the javascript function that i wrote


Code:

function addRow()
     {
          // grab the element, i.e. the table your editing, in this we're calling it 
          // 'mySampleTable' and it is reffered to in the table further down on the page 
          // with a unique of id of you guessed it, 'mySampleTable'
          var tbl = document.getElementById('mySampleTable');
          // grab how many rows are in the table
          var lastRow = tbl.rows.length;

          // if there's no header row in the table (there should be, code at least one 
          //manually!), then iteration = lastRow + 1
          var iteration = lastRow;
		  
          // creates a new row
          var row = tbl.insertRow(lastRow);

          // left cell
          // insert a cell
          var cellLeft = row.insertCell(0);
          // here we're just using numbering the cell, like anything else you don't
          // have to use this, but i've kinda noticed users tend to like them
          var textNode = document.createTextNode(iteration);
          // takes what we did (create the plain text number) and appends it the cell
          // we created in the row we created. NEAT!
          cellLeft.appendChild(textNode);

          // right cell
          // another cell!
          var cellRight1 = row.insertCell(1);
          // creating an element this time, specifically an input
          var el = document.createElement('input');
          // a data type of text
          el.type = 'text';
          // the name of the element itemname, and because this is dynamic we also
          // append the row number to it, so for example if this is the eigth row
          // being created the text box will have the name of itemname8. super fantastic.
          // the exact same thing with a unique id
          el.id = 'itemname[]'+ iteration;
          // set it to size of 40. setting sizes is good.
          el.size = 40;
          // same thing as earlier, append our element to our freshly and clean cell
          cellRight1.appendChild(el);
		  
    	  var cellRight2 = row.insertCell(2);
          var e2 = document.createElement('input');
          e2.type = 'text';
          e2.id = 'description[]' + iteration;
          e2.size = 20;
	      e2.maxsize = 100;
          cellRight2.appendChild(e2);

    	  var cellRight3 = row.insertCell(3);
          var e3 = document.createElement('input');
          e3.type = 'text';
          e3.id = 'unitcost[]' + iteration;
          e3.size = 10;
 	      e3.maxsize = 100;
          cellRight3.appendChild(e3);
	
    	  var cellRight4 = row.insertCell(4);
          var e4 = document.createElement('input');
          e4.type = 'text';
          e4.id = 'quantity[]'+ iteration;
          e4.size = 4;
 	      e4.maxsize = 100;
	
          cellRight4.appendChild(e4);

    	  var cellRight5 = row.insertCell(5);
          var e5 = document.createElement('input');
          e5.type = 'text';
          e5.id = 'price[]'+ iteration;
          e5.size = 10;
		  e5.maxsize = 100;
		  
          cellRight5.appendChild(e5);
	  
		 // var cellRight7 = row.insertCell(7);
         // var e7 = document.createElement('input');
         // e7.type = 'CHECKBOX';
         // e7.id = 'cancel[]';
         // cellRight7.appendChild(e7);
		
		  var cellRight6  = row.insertCell(6);
		  cellRight6.innerHTML = "&nbsp;&nbsp;<input type='button' value='Delete' size='6' onclick='removeRow(this);'/>";
		
          e4.onclick = dynamic_onc();	
			
     }

	function removeRow(src)
	{
		/* src refers to the input button that was clicked.	
		   to get a reference to the containing <tr> element,
		   get the parent of the parent (in this case case <tr>)
		*/			
		var oRow = src.parentElement.parentElement;		
		
		//once the row reference is obtained, delete it passing in its rowIndex			
		document.all("mySampleTable").deleteRow(oRow.rowIndex);		
	}
	function countRow()
	 {
		var Rowcount = document.getElementById('mySampleTable').rows.length;
		document.eval_edit.count.value = Rowcount-1;
		
	 }
	 	function CalculatePrice()
	 {
		var Rowcount = document.getElementById('mySampleTable').rows.length;
		document.eval_edit.count.value = Rowcount-1;
		
	 }
	 
	     function onc() {
	
        var a= document.getElementById('unitcost[]');
        var b= document.getElementById('quantity[]');
		var c = Math.ceil(a.value*b.value);
			alert(b);
	document.getElementById('price[]').value =c;
	
 }
		
		function dynamic_onc()
		{
		alert('Jay'	);
		e5.value =7;		
		}
		
		function Totalcal() {
		var a= document.getElementById('unitcost[]');
        var b= document.getElementById('quantity[]');
		var c = Math.ceil(a.value*b.value);
		alert(b.value);
		document.getElementById('price[]').value =c;
		}

Hi there, I have a site which consists of the html page and css page. I have been trying to get the image at the top of the page to dissapear when the user clicks on the footer. Any suggestions on how I can do this? Below is my code, Thanks in advance.


HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body {
background-color: #CC6;
}

</style></head>
<body>

<div id="header-wrap">
<div id="header-container">
<div id="header">
<h1>JavaScript</h1>
</div>
</div>
</div>
<div id="ie6-container-wrap">
<div id="container">
<DIV STYLE="font-size:12pt" onmouseover="this.style.fontSize='16pt'"
onmouseout="this.style.fontSize='12pt'">
<div id="content">
<h1>Mainframe</h1>
<p>Enter the content of your website within this area.</p>
</div></DIV>
</div>
</div>
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">

<center>

<body onLoad="dateandtime()">


<script>



var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var cdate="<small><font color='#87ac6d' font size='2.5' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else
document.write(cdate)
}
if (!document.all)
getthedate()
function dateandtime(){
if (document.all)
setInterval("getthedate()",1000)
}

</script>
<span id="clock"></span>
</center>
</div>
</div>
</div>
</body>
</html>


CSS:
body {
font: 62.5% Arial, Helvetica, sans-serif;
color: #597347;
margin: 0;
padding: 0;
background: #beffbf;
}

h1, h2 {
color: #87ac6d;
font-family: Tahoma, Arial, Geneva, sans-serif;
margin: 20px 0 10px;
}

h1 {
font-size: 2.5em;
}

p {
margin: 10px 0;
padding: 0;
}

blockquote {
font-style: italic;
}

#header-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

#header-container {
height: 90px;
background: url(../images/banner.jpg) repeat-x left bottom;
}

#header {
width: 940px;
margin: 0 auto;
position: relative;
}

#header h1 {
color: #beffbf;
text-align: right;
width: 290px;
margin: 0;
position: absolute;
left: 476px;
top: 32px;
}

#header h1 em{
color: #90b874;
font-size: small;
display: block;
}

#header ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 35px;
right: 0;
}

#header ul li {
float: left;
margin-right: 5px;
}

#header ul li a{
color: #90b874;
font-weight: bold;
font-size: 1.4em;
margin-right: 5px;
text-decoration: none;
}

#header ul li a:hover {
color: #beffbf;
}

#container {
width: 940px;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
padding: 90px 0 40px;
}

#content {
float: left;
width: 100%;
}

#sidebar {
float: right;
width: 275px;
margin-top: 10px;
}

#footer-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

#footer-container {
height: 40px;
background-color: #000;
}

#footer {
width: 940px;
margin: 0 auto;
position: relative;
}

I have a script that is to hide specific divs and show the one called, or at least that is what I would like to happen.

Right now when I click the link to show my div it hides my entire page and display the item in quetion.

When I parse the return from document.getelementbytagname('div') it shows that I have 8 elements on my page. Great, but I only want to turn off the ones that match the following reg exp: "/^F\d+$/" the rest of the page I want to be left in tact.

So far the rabbit trail that I am going down is working out so great, can you advise a script that will let me hide all div elements that match a specific pattern: /^F\d+$/

I have two samples that I am working from.
The first:
Code:

<script language=javascript type='text/javascript'> 

function showDiv(pass) { 
var divs = document.getElementsByTagName('div');
alert(divs.length);
var regExp = "/^F\d+$/";
 
for(i=0; i<divs.length; i++){//
	var obj = document.getElementsById(pass).item(i); 
	if (obj){
		var divIdName = obj.id;
		alert(divIdName);
	}
	//myregexp = /regex/
		alert(i);
			if(divs[i].id.match(pass))//if they are 'see' divs 
			{
				alert(divs[i].id.value);
				if (document.getElementById) // DOM3 = IE5, NS6 
					divs[i].style.visibility="visible";// show/hide 
				else if (document.layers) // Netscape 4 
						document.layers[divs[i]].display = 'visible'; 
				else // IE 4 
					document.all.divs[i].visibility = 'visible'; 
			} else if (!divIdName.match(pass) && document.getElementById()== regExp){ 
				if (document.getElementById) 
					divs[i].style.visibility="hidden"; 
				else if (document.layers) // Netscape 4 
					document.divs[i].visibility = 'hidden'; 
				else // IE 4 
					document.all.divs[i].visibility = 'hidden'; 
			} else {  }
	}	
} //end function

</script>

The second example is closer to what I want to do, but I haven't been able to figure out how to dynamically load the array "var ids=new Array();" so that I can automate the script.

The code for this page:
Code:

<script language="JavaScript">
//here you place the ids of every element you want.
//var ids=new Array('F256','F257','F258','F259');// etc...
var divs; // = document.getElementsByTagName('div'); 
var obj;
var divIdName;
var ids=new Array();

function switchid(id){
	divs = document.getElementsByTagName('div'); 
	
	for(i=0;i<divs.length;i++){//
		
		obj = document.getElementsByName(id).item(i); 
		divIdName = obj.id;
		
		alert(divIdName);
		if(divIdName.match(/^F\d+$/))
		{
			ids[i] = divIdName;	
				
		}
	
		alert(divs.length);
	}
		
	hideallids();
	showdiv(id);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i]);
	}		  
}

function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}
</script>


   
</head>
<body>
	<div id="test" class="jobTitle_and_descriptionParent">
	
		<div id="test1" class="jobListTitles">
		  <h5>Click one of the job titles to reveal the description on the right</h5>
		  <ol>
			<li><a href="javascript:switchid('F256');">Breakfast Club Coordinator</a></li>
			<li><a href="javascript:switchid('F257');">Bible Teacher</a></li>
			<li><a href="javascript:switchid('F258');">Registration Coordinator</a></li>
			<li><a href="javascript:switchid('F259');">Staff</a></li>
			<li><a href="javascript:switchid('F260');">Assistant Counselor</a></li>
			<li><a href="javascript:switchid('F261');">Drama Coordinator</a></li>
			<li><a href="javascript:switchid('F262');">Special Services Assistant</a></li>
			<li><a href="javascript:showDiv('F263')">Deans</a></li>
			<li><a href="javascript:showDiv('F264')">Registration Workers</a></li>
			<li><a href="javascript:showDiv('F265')">Counselors</a></li>
			<li><a href="javascript:showDiv('F266')">Drama &amp; Breakfast Club Assistants</a></li>
			<li><a href="javascript:showDiv('F267')">Aunt &amp; Uncle</a></li>
			<li><a href="javascript:showDiv('F268')">Placement Coordinator</a></li>
			<li><a href="javascript:showDiv('F269')">Activity Center Person</a></li>
			<li><a href="javascript:showDiv('F270')">Social Worker/Psychologist</a></li>
		  </ol>
		</div>
	
		<div id='test3' class="jobDescriptions">
		
			<div id="F256" name="F256" style="position: inherit; visibility:hidden;"> 
			f256 Here 
			</div> 
			
			<div id="F257" name="F257" style="position: inherit;visibility:hidden;"> 
			f257 Here 
			</div> 
			
			<div id="F258" name="F258" style="position: inherit;visibility:hidden;"> 
			f258 Here 
			</div>
			
			<div id="F259" name="F259" style="position: inherit;visibility:hidden;"> 
			f259 Here 
			</div>
			
			<div id="F260" name="F260" style="position: inherit;"> 
			f260 Here 
			</div>
		
		</div>
	
	</div>

Been struggling with this for a couple days now and just not making any headway. Could you advise?

Kevin