JavaScript - Creating Multiple Instance Of Css And Div Tags Using Javascript Programmatically

I need help in creating a multiple value cookie when the user clicks the Add to cart input button. Here is the portion of code from the html page that creates the inventory item display and the Add to cart button. There are six of these on the page:

Code:

<div id="inventoryspread">

       <div class='productBoxInvUL'>
        <script type:"text/javascript">
		document.write("<img src="+"'"+"images/"+arrImage[0]+"'"+"align='left'/>"+
					   "<p><br/><span class='invName'>"+arrName[0]+"</span></p>"+
          				"<p>"+arrDescription[0]+"</p>"+
		  				"<p>Item#&nbsp;"+arrItem[0]+"<br/>"+
						"<span class='invPrice'>"+arrPrice[0]+"</p>");
		</script>
        <input type="button" value="Add to Cart" onclick='createCookie("name, value, 7", prompt("cookie created"))' />
        </div>

And here is a portion of the array that fills it:

Code:

var arrItem = new Array();
var arrName = new Array();
var arrDescription = new Array();
var arrPrice = new Array();
var arrImage = new Array();


arrItem[0]= "FE100";
arrName[0]= "Blacktop Jazzmaster";
arrDescription[0]= "Monster dual-bucker tone. Vintage style alnico humbucking pickup, single coil, skirted black amp knobs, and 3-way toggle switch. Alder body, Maple neck, Rosewood fretboard, 21 medium jumbo frets, gloss urethane finish and nickel/chrome hardware.";
arrPrice[0]= "$699.00";
arrImage[0]= "FE100.png";

arrItem[1]= "FE200";
arrName[1]= "Roland-Ready Stratocaster";
arrDescription[1]= "Time-tested Fender tone, timeless styling, 3 single-coil pickups, synchronized tremolo, high-mass bridge block, shielded body cavities and medium jumbo frets. Built-in Roland GK-2A pickup system, tinted neck, parchment pickguard and control knobs, and a '70s-style logo.";
arrPrice[1]= "$1,019.00";
arrImage[1]= "FE200.png";

arrItem[2]= "FA100";
arrName[2]= "CD220SCE Exotics ";
arrDescription[2]= "Exotic and beautiful with rich tone, laminated burl ash back and sides, with a solid spruce top. Fender-designed dreadnought body, X-bracing, and die-cast tuners. Cutaway body design with  rosewood bridge featuring a compensated bone nut";
arrPrice[2]= "$629.00";
arrImage[2]= "FA100.png";

arrItem[3]= "FA200";
arrName[3]= "Dick Dale Mailbu SCE";
arrDescription[3]= "Thin folk body design, laminated spruce top, laminated mahogany back and sides, scalloped X-bracing providing well balanced tone. Maple neck, rosewood compensated bridge and fretboard, vintage-style Fender tuners, and a surfin' red paint job on the top and back";
arrPrice[3]= "$849.00";
arrImage[3]= "FA200.png";

arrItem[4]= "FB100";
arrName[4]= "Standard Precision Bass";
arrDescription[4]= "Sound, look, and feel today's bass players demand. Classic P-Bass old-school design. Contemporary features and refinements. Alder body and a split single-coil pickup, this classic electric bass guitar lives up to its Fender legacy."; 
arrPrice[4]= "$579.00";
arrImage[4]= "FB100.png";

arrItem[5]= "FB200";
arrName[5]= "Roger Waters Signature Precision Bass";
arrDescription[5]= "Tastefully tailored, black-on-black color scheme, Seymour Duncan Basslines SPB-3 Quarter-Pound split-coil Precision Bass pickup, knurled black control knobs, brass nut, black bridge and strap buttons, vintage '70s-style open-gear chrome tuners."; 
arrPrice[5]= "$1,199.00";
arrImage[5]= "FB200.png";

arrItem[6]= "GE100";
arrName[6]= "Firebird X Limited Edition";
arrDescription[6]= "Turbo-charged Pure-Analog engine. Hand-applied and unique high-end wood finish. Beautiful, historical and yet contemporary and unique. Limited run of just 1,800 units. It is sure to become a collector classic.";
arrPrice[6]= "$5,569.00";
arrImage[6]= "GE100.png";

The cookie only needs to include the Item#, Name and Price of each item to populate a shopping cart page.

This is only a small student project and is client side only using javascript. Thank you for any help we can get on this.

Where to put the <ol>&&</ol> tags so everytime i run the javascript it numbers each indivdiual items which the javascript is looping.
Code:

 <table  border="2"table align="center" cellpadding="40">
  <tr>
    <th width="80%"> Questions & Time</th>
    <th>Status</th>
  </tr>
   <tr>
    <td><% for (int i=0; i < theList.size(); i++) {%>
   <tr>
   <td><%= theList.elementAt(i)+ " " + theTime.elementAt(i) %>
  <% }%>
   </td>
     <td>Where is the pending goes:</td>
  </tr>
  <tr>
  </table>

I have the following HTML code:

Quote:
<form id="registration" action="/cgi-bin/registration.cgi" method="POST" onsubmit="return control()">
<fieldset>
<legend>Legend 1</legend>
<label>......</label> <input ..../><br/>
<label>......</label> <input ....onclick="return orgreg()"/><br/>
</fieldset>
<fieldset>
<legend>Legend 2</legend>
<label>......</label> <input ..../><br/>
<label>......</label> <input ..../><br/>
<label>......</label> <input ..../><br/>
<label>......</label> <input ..../><br/>
<label>......</label> <input ..../><br/>
</fieldset>
........
........
and the following javascript code:
Quote:
function orgreg() {

if (document.getElementById) {
alert(document.getElementById("registration").firstChild);
}

}
The output of alert window is [Object Text].
My question is: first child is first fieldset tag or not.
Because I want insert (with insertBefore) an other fieldset block after first child.

I came across some embedded JavaScript code and I noticed some weird “HTML comment-like tags” within embedded JavaScript that are getting rendered in FireFox but not IE. Specifically the closing tag "//-->"

And the JavaScript code between these tags is functional (not commented out)!

Code:

<SCRIPT type=text/javascript>
<!--

....

//-->
</SCRIPT>

What are these?

Example usage:

Code:

<SCRIPT type=text/javascript>
<!--
var zz, zv, d, fTSR;
d = new Date();
fTSR=0;
zv = d.getTime();
zz = "&zz="+zv;

var gBF=false;
function GoTo(u){window.top.location = u + zz;}
function Go(u){window.top.location = u;} 

....

//-->
</SCRIPT>

Okay, I am relatively new to Java and am going to be taking a class on it next fall. For now though, I am trying to code for a client I am currently working with and am hopelessly lost.

The client I am working with has an ecommerce site with Network Solutions which uses aspx. It allows you to code html and link to css, java (pretty much anything except php). The problem I am having is that they currently have their product descriptions coded in div tags:

<div id='alternatebg'>
<div id='detailsgreybox'><div id='alternatename'><p>Alternate Name</p></div></div>
<div id='pd2'><p>Not Available</p></div>
</div>

<div id='usebg'>
<div id='detailsgreybox'><div id='use'><p>Use</p></div></div>
<div id='pd3'><p>Chemicals</p></div>
</div>

What they want to happen is for the sections that have 'Not Available' as the answer to not show up on the live page. I have tried to use <ns:if condition="..."> but do not know how to call for it to see if the div says 'Not Available'.

Any help is greatly appreciated as I can not move forward until I can figure this out.

Hi, I'm currently trying to get javascript to work with internet explorer. I managed to get one part of the translation file to work. It's a javascript to change some of the words on Facebook from English to Secwepemc (native american language). The original file works in Firefox and Chrome but not in safari. I knew it was because internet explorer has its own parameters. A file works completely for FF and chrome but not for IE. So, I changed the language a bit so that IE can understand it. Now I have one part of the translation working but not the others. I am wondering if it would be better to use ID's, names, and class all together to get the english words I want to change. I am using grease monkey for IE to use this script. I know firefox and chrome are much better but the plan is for everyone to use and some people still use IE. I know that if I have part of the words translating, then it must be the wrong identifiers. If someone can either help me find the right identifiers or if I missed changing syntax from FF and Chrome to IE, that would be amazing! Here is the javascript file.

Code:

var es = new Array();
es["Home"] = "Tsitcw";
es["News Feed"] = "Lexeyem";
es["Friends"] = "Kweselkten";
es["Like"] = "Xwexwisten";
es[" likes this."] = " r xwexwistes.";
es["Today"] = "Pyin Te Sitqt";
es["Say hello."] = "Say weytk.";
es["Say hi."] = "Say weytk.";
es["Tomorrow"] = "Pexweyt";
es["What are you planning?"] = "Me7 Stemi ke7 tsuwet?";
es["Where?"] = "T'he7en";
es["Who's invited?"] = "Sweti7?";
es["What's on your mind?"] = "Stemi ke7 peti'nesme?";

function loadSecwepemc() {
	var fbelem = document.getElementsByTagName('a');

	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
	    }
	}

	var fbelem = document.getElementsByTagName('span');

	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
	    }
	}

	var fbelem = document.getElementsByClassName('ego_social_context');

	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
	    }
	}


	var fbelem = document.getElementsByTagName('input');
	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.getAttribute('placeholder') in es) {
		thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]);
	    }
	    if (thisElem.getAttribute('value') in es) {
		thisElem.setAttribute('value',es[thisElem.getAttribute('value')]);
	    }
	}

	var fbelem = document.getElementsByTagName('textarea');
	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.getAttribute('placeholder') in es) {
		thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]);
	    }
	    if (thisElem.getAttribute('title') in es) {
		thisElem.setAttribute('title',es[thisElem.getAttribute('title')]);
	    }
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
	    }
	}

	var fbelem = document.getElementsByTagName('h3');
	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
		thisElem.attachEvent( "onClick", loadSecwepemc());  // capture phase
	    }
	}

	var fbelem = document.getElementsByTagName('h2');
	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.innerText in es) {
		icon = thisElem.childNodes[0]
		thisElem.innerText = es[thisElem.innerText];
		thisElem.appendChild(icon)
	    }
	}
}

loadSecwepemc();

function changedNode(e) {
	var fbelem = e.target.getElementsByTagName('a');

	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.innerText in es) {
		    		thisElem.innerText = es[thisElem.innerText];
		    	    }
		}

	var fbelem = e.target.getElementsByTagName('span');

	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.innerText in es) {
		    		thisElem.innerText = es[thisElem.innerText];
		    		thisElem.attachEvent( "onLoad", loadSecwepemc());  // capture phase
		    
		    	    }
		}
		
	var fbelem = e.target.getElementsByClassName('ego_social_context');

	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.innerText in es) {
		    		thisElem.innerText = es[thisElem.innerText];
		    	    }
		}



	var fbelem = e.target.getElementsByTagName('input');
	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.getAttribute('placeholder') in es) {
		    		thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]);
		    	    }
		    if (thisElem.getAttribute('value') in es) {
		    		thisElem.setAttribute('value',es[thisElem.getAttribute('value')]);
		    	    }
		}
	var fbelem = document.getElementsByTagName('textarea');
	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.getAttribute('placeholder') in es) {
		thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]);
	    }
	    if (thisElem.getAttribute('title') in es) {
		thisElem.setAttribute('title',es[thisElem.getAttribute('title')]);
	    }
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
	    }
	}

	var fbelem = e.target.getElementsByTagName('h3');
	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.innerText in es) {
		    		thisElem.innerText = es[thisElem.innerText];
		    		thisElem.attachEvent( "onClick", loadSecwepemc());  // capture phase
		    	    }
		}

	var fbelem = e.target.getElementsByTagName('h2');
	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.innerText in es) {
		    		icon = thisElem.childNodes[0]
		    		thisElem.innerText = es[thisElem.innerText];
		    		thisElem.appendChild(icon)
		    	    }
		}
}

document.attachEvent('onNodeInserted', changedNode());

Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once.

Does anyone know how to do this please?

Thanks so much for your help.

Hi the
Is it possible to probe the name of the variable assigned to an object instance in JavaScript? For example:

Code:

function house(){
}

var bobhouse=new house()
if (instancename=="bobhouse")
 //do something

In other words, can I do some sort of string comparison on the variable name "bobname", so I know it's actually called "bobname"? I feel I'm asking how to have a variable recognize itself as a variable.

I have created a class providing various functions called BaseBrowser and the class definition by using prototype.
Specific browser implementations are then acheived by extending BaseBrowser (eg as 'FF' for Firefox) as shown below.
The window alert(); function is overridden for alternate message box popup (using layers in the same window).
The function 'browser.customAlert()' can be called from either any code or an actual 'alert()' function.
However whenever it is called the value of 'someVar' as defaulted back to the new instance value of false despite the instance 'browser' having already set it to true as it were a new instance.
Why is this occuring as it should remember its state between function calls ?

Code:

var browser;

function BrowserBase(){

      //instance variables
      this.someVar=false;

      function customAlert(){
            this.someVar=true;
            // . . . other custom alert code
      }
}

function browserLink(){
	BrowserBaseFF2p0.prototype=new BrowserBase();//inherit
	BrowserBaseFF2p0.prototype.constructor=BrowserBase;
	browser=new BrowserBaseFF2p0();
}

function BrowserBaseFF2p0(){
	BrowserBase.call(this);//call parent constructor
	
        //override generic functions for enhancement
	if(document.getElementById){
		window.alert=function(txt){
			browser.customAlert(txt);
		}
	}

}

Below is a javascript function from my website that loops through nodes in an XML file retrieving certain information about those who joined in the current month/year. The part in red creates a link which when clicked runs a function called show() with the relevant i variable value e.g. show(2) for the second node if that is relevant. Anyway the red part works in Chrome but not Internet Explorer (surprise surprise). I did some research which says that .setattribute is not allowed in IE. How can I change the red code to create links for the relevant records which works in IE?

Thank you for your help

Code:

function displaymember() {
    var d = new Date();

    var curr_month = d.getMonth();
    curr_month++;
    if (curr_month < 10) curr_month = "0" + curr_month;
    var curr_year = d.getFullYear();

    for (i = 0; i < x.length; i++) {

        membershipstatus = (x[i].getElementsByTagName("membership_status")[0].childNodes[0].nodeValue);
        name = (x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
        body = (x[i].getElementsByTagName("body_type")[0].childNodes[0].nodeValue);
        ethnicity = (x[i].getElementsByTagName("ethnicity")[0].childNodes[0].nodeValue);
        sex = (x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
        seeking = (x[i].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
        date = (x[i].getElementsByTagName("date_joined")[0]);
        month = (date.getElementsByTagName("month")[0].childNodes[0].nodeValue);
        year = (date.getElementsByTagName("year")[0].childNodes[0].nodeValue);
         newa = document.createElement("a");
        aIdName = "my" + i + "a";
        ahref = "#";
        aclick = "show(" + i + ")";
        newa.setAttribute("id", aIdName);
        newa.setAttribute("href", ahref);
        newa.setAttribute("onclick", aclick);
        newa.innerHTML = name + " | " + body + " " + ethnicity + " " + sex + " with " + membershipstatus + " membership seeks " + seeking + "<br/>"; 

        if (curr_month == month && curr_year == year) {
            document.getElementById("member").appendChild(newa);
        }


    }

}

I basically have a property website with different types of properties, e.g. detached houses, semi detached houses. and I want to create a filter so when you click 'detached houses' only detached houses are shown.


Is there any tutorials you can point me to, would be appreciated.

This is what i have so far..
Code:

<div id="main">
	
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
	<td><div id="filter"><p class="houses" style="font-family:helvetica;color:#0155a1;font-size:14px;background:url(cutouts/forsale/filter.jpg) no-repeat;"><b><u>Houses</u></b>
						<br />
						<span class="dh"><b><u>Detached Houses</u></b></span>
						<br />
						<span class="dh"><b><u>Semi-detached houses</u></b></span>
						<br />
						<span class="dh"><b><u>Terraced houses</u></b></span>
						<br />
						<br />
						<b><u>Flats / Apartments</u></b>
	
	</p></div></td>
	<td><div id="info1"><a href="#"><img src="cutouts/forsale/pinfo1.jpg" alt=""/></a></div></td>
	</tr>
</table>

<div id="info2"><a href="#"><img src="cutouts/forsale/pinfo2.jpg" alt=""/></a></div>
<div id="info3"><a href="#"><img src="cutouts/forsale/pinfo3.jpg" alt=""/></a></div>
<div id="info4"><a href="#"><img src="cutouts/forsale/pinfo4.jpg" alt=""/></a></div>


<script type="text/javascript">

var properties = {$properties_json};

// very simple getter method that uses a single key-value pair.
var selectProperties(k, v) {
  var rv = [];
  for (var i in properties) {
    if (properties[i][k] == v) {
      rv.push(properties[i]);
    }
  }
  return rv;
} // selectProperties()


</script>
	
	</div>

Is there a way that I can run a second set of this script on the same page at the same time?

If I want a 2nd instance of this script to run on the same page...what values would I need to rename in the 2nd instance?

When I try to place this script a second time it only shows the 2nd scripts values or banner ads... I'm trying to make a Banner rotation placement on my sites inner pages (It's a Wordpress powered site) One Set of Banners that ROTATE directly Above Another Set...

I like this script since it allows for a Random order on each page load and will ALSO cycle through Each Banner once before repeating the order, That way Each Advertiser will get seen before another is seen a second or third time...

I know there are plug-ins for wordpress for advertising, but I have not found any that will rotate out the banners every x niumber of seconds, like this does...

Is there a way that I can run a second set of this script on the same page at the same time?




<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['http://www.rockinghamcountymerchants.com/CraigTravis/CraigTravis250x250.jpg', 'http://tcraigtravis.com/', '_new']
ultimateshow[1]=['http://www.rceno.com/RCENO/bannerads/elizabethspizza/elizabethspizza250x250.jpg', 'http://www.rceno.com/RCENO/advertisers/elizabethspizza/index.html', '_new']
ultimateshow[2]=['http://www.rceno.com/RCENO/bannerads/gavinsmightychamps/gavin250x250.jpg', 'http://www.gavinsmightychamps.com/index.html', '_new']
ultimateshow[3]=['http://www.rceno.com/RCENO/bannerads/redrivergrill/RedRiver2420-250x250.jpg', 'http://www.rockinghamcountymerchants.com/redrivergrill', '_new']
ultimateshow[4]=['http://www.rceno.com/RCENO/bannerads/qualitycleaners/QC250x250-011510.jpg', 'http://www.rockinghamcountymerchants.com/qualitycleaners', '_new']








//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="250px" //set to width of LARGEST image in your slideshow
var slideheight="250px" //set to height of LARGEST iamge in your slideshow
var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="yes" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=9000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>


In Other words I would have one set of 5 ads rotating and directly below it another set of 5 Ads

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>
	<title>Overlay test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	#overlay {
		background-color: #ccffcc;
		display: none;
		margin-left: -400px;
	position: absolute;
	top: -250px;
	left: 50%;
	width: 800px;
	height: 500px;
	visibility: visible

	}
	
	#container{
	
		color: white;
	background-color: #0ff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	overflow: visible;
	visibility: visible;
	display: block

		
	}
	</style>
    <script type="text/javascript" src="swfobject/swfobject.js"></script>

	<script type="text/javascript">
	//<![CDATA[
			   
			  
	function hide() {
		document.getElementById("overlay").style.display = "none";
	}
	
	function show() {
		document.getElementById("overlay").style.display = "block";
		swfobject.embedSWF("helpdeskApp_three.swf", "flashcontent", "800", "500", "9.0.0", "expressInstall.swf");
	

		
	
	}
	
	

	//]]>
	</script>
</head>
<body>
<div id="container"> <div id="overlay"><div id="flashcontent">fdgfdg</div>

 <a href="#" onclick="hide();">Click me</a> to close.</div></div>

<div><a href="#" onclick="show();">Click me</a> to show the hidden content.</div>


</body>
</html>

I got some of this code from these forums. Thank you.

It works great, however I'll be using this code with a school's website's template. The problem is that the "overlay" div tags would be placed within the container div tags of the template,therefore confining to these dimensions.

How can I modify my code to have my div tags not affected by the templates div tags... and have the overlay be center in the browser..

Thanks

I am trying to remove all Javascript code from my HTML doc and put into external .js file(s). I have event triggers that I would like to move to an external file, but I am not sure how. Below is an example.
[CODE]
<a href="residential.html" class="textdeco" >
<img class="img-menu" id="res" src="images/buttons/btn_res_mouse_out.jpg" alt="Residential"
onmouseover="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_over.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_out.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_down.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_up.jpg')" />
[CODE]

The reason I want to do this is that this code is repeated in all pages and I want to reduce potential maintenance issues. Any help will be appreciated.