Help me condense this script.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Help me condense this script.

Post by daedalus__ »

The thing I really hate about JavaScript is implementing it. Having to give 800 tags 37 attributes to show one image is what turns me off.

I have this page:

Code: Select all

<a onmouseover="javascript:ShowNorthwest()" onmouseout="javascript:HideNorthwest()">Washington</a>

<script language="javascript">

function ShowNorthwest()
{
	document.getElementById("northwest").style.visibility = "visible";
}

function HideNorthwest()
{
	document.getElementById("northwest").style.visibility = "hidden";
}
</script>
Is there a way that I can cut that down to one function and one call or am I stuck with that ugliness?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

hint: use a ternary.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

try something like this:

Code: Select all

<a onmouseover="javascript:ShowNorthwest(this)" onmouseout="javascript:ShowNorthwest(this)">Washington</a>

<script language="javascript">

function ShowNorthwest(obj)
{
   if(obj.style.display != 'none')
      obj.style.display = "none";
   else
      obj.style.display = "block";
}

</script>
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

incorporating Feyd's idea also:

Code: Select all

<a onmouseover="javascript:ShowNorthwest(this)" onmouseout="javascript:ShowNorthwest(this)">Washington</a>

<script language="javascript">

function ShowNorthwest(obj)
{
   obj.style.display = (obj.style.display == 'none' ? 'block' : none');
}

</script>
I spaced that one...doh!
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

lololol.. I'm stupid.

Sorry, I'm using the link to change the style of another element. Thanks for suggesting the ternary operator feyd and thanks for the code examples Burrito.

I think I've got it figured out now.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

On this page I will have a link for every state, with the name of the state and the link attributes will hold the functions that make the image appear and disappear. I tried a couple of different things with a ternary operator and I tried an if then else statement but it kept giving me errors like 'cannot set property that only has getters' and 'getElementById("northwest") has no properties'.

I don't know what I did wrong.

This is what the page looks like:

Code: Select all

<script language="javascript"> 
function ShowNorthwest() 
{ 
   document.getElementById("northwest").style.visibility = "visible"; 
} 

function HideNorthwest() 
{ 
   document.getElementById("northwest").style.visibility = "hidden"; 
}

'More functions later
</script>

<div id="relative">

	<div id="links">
<a onmouseover="javascript:ShowNorthwest()" onmouseout="javascript:HideNorthwest()">Washington</a>
<a onmouseover="javascript:ShowNortheast()" onmouseout="javascript:HideNortheast()">New Jersey</a>
<a onmouseover="javascript:ShowSouthwest()" onmouseout="javascript:HideSouthwest()">California</a>
<a onmouseover="javascript:ShowSoutheast()" onmouseout="javascript:HideSoutheast()">Florida</a>
<a onmouseover="javascript:ShowAtlantic()" onmouseout="javascript:HideAtlantic()">Virginia</a>
<a onmouseover="javascript:ShowCentral()" onmouseout="javascript:HideCentral()">Texas</a>
	</div>

	<div id="map_background">
		<div id="northwest"><div class="desc">Northwest</div></div>
		<div id="northeast"><div class="desc">Northeast</div></div>
		<div id="southwest"><div class="desc">Southwest</div></div>
		<div id="southeast"><div class="desc">Southeast</div></div>
		<div id="atlantic"><div class="desc">Atlantic</div></div>
		<div id="central"><div class="desc">Central</div></div>
	</div>
</div>
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

try this:

Code: Select all

<script language="javascript">
function ShowHide(where)
{
   var obj = document.getElementById(where);
   obj.style.display = (obj.style.display == "none" ? "block" : "none");
}
</script>

<div id="relative">

   <div id="links">
<a onmouseover="javascript:ShowHide('northwest')" onmouseout="javascript:ShowHide('northwest')">Washington</a>
   </div>

   <div id="map_background">
      <div id="northwest" style="display:none">Northwest</div>
   </div>
</div>
User avatar
sweatje
Forum Contributor
Posts: 277
Joined: Wed Jun 29, 2005 10:04 pm
Location: Iowa, USA

Post by sweatje »

a function name like "toggle" or "toggleVisibility" might be more appropriate. (fore sure better than ShowNorthwest ;) )
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

Code: Select all

<a onmouseover="javascript:ShowHide('northwest')" onmouseout="javascript:ShowHide('northwest')">state</a>

function ShowHide(where) 
{ 
   var obj = document.getElementById(where); 
   obj.style.visibility = (obj.style.visibility == "visible" ? "hidden" : "visible"); 
}
Worked perfect. :)
Thanks!
Post Reply