SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: showHide function not working

  1. Apr 9, 2007 01:12 #1
    tryin_to_learn
    tryin_to_learn is offline
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    showHide function not working

    I'm working on a site using these functions:

    Code:
    function showHide(elementID, show)
{
	var el = document.getElementById(elementID);

	if(show)
	{
		el.style.display = '';
	}
	else
	{
		el.style.display = 'none';
	}

	return false;
}

function showHideGroup(group, show)
/*
	Group should be an array with names of elements to hide.
*/
{
	for(i=0; i<group.length; i++)
	{
		showHide(group[i], show);
	}
}
    Right now, I'm using the showHide function on the "Description" links in each of the project boxes on the left and those are working fine. The hitch came when I tried to also use the functions with the global nav across the top (Websites, Interactive Games, etc.). I can't get those to work at all and I'm not sure what the difference is. For example, when you click on Interactive Games, the text in the translucent box should change and it doesn't. Whatever text was in the box before you clicked Interactive Games stays put. However, you can click on "Description" on the project box on the Interactive Games page and that one will work fine, so it really does just seem to be the links across the top that don't work. I don't know if this is just a dumb thing I'm overlooking or whether there's some kind of issue with what I'm trying to do. Can anyone see what's happening?

    Here's the code:

    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>
		<title><?php echo $title; ?></title>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Content-Language" content="en-us" />
		<meta name="description" content="<?php echo $metaContent; ?>" />
		<meta name="copyright" content="Copyright © <?php echo date("Y"); ?> Susan C. Litton, Ph.D. All Rights Reserved." />
		<meta name="author" content="Susan Litton" />
		<meta name="revised" content="Susan Litton, 3.16.2007" />
		<meta name="robots" content="all" />
		<meta http-equiv="imagetoolbar" content="false" />
		<meta name="MSSmartTagsPreventParsing" content="true" />
		<meta name="verify-v1" content="f9y8J4pRMIDCQfmJ/gQoxibaXtS8G4MRfp8OtoXrW64=" />
		<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />		
		<script src="http://shrink-art.com/_newSite/_scripts/external.js" type="text/javascript"></script>
		<script language="JavaScript" type="text/JavaScript" src="_scripts/common.js"></script>
		<script src="/mint/?js" type="text/javascript"></script>
		<!--[if lt IE 7]>
			<script defer type="text/javascript" src="_/scripts/pngfix.js"></script>
		<![endif]-->

		<link rel="stylesheet" href="_styles/main.css" type="text/css" />
		<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="_styles/main-ie.css" /><![endif]-->
		<?php if ($style == "noRightNav") {
			echo '<link rel="stylesheet" href="http://shrink-art.com/_newSite/_styles/noRightNav.css" type="text/css" />';
			} else if ($style == "abuse") {
			echo '<link rel="stylesheet" href="../_styles/abuse.css" type="text/css" />';		
			}
		?>

	</head>
	<body> 
	<div id="wrapper">			
		<div id="utilityTransparency">
			<div id="utilityNav"> 
				<ul id="navList">
					<li id="active"><a href="#" id="current">Resume</a></li>
					<li><a href="#">Career Goals</a></li>
					<li><a href="#">Job Postings</a></li>
					<li><a href="#">Business Card</a></li>
				</ul>
			</div> <!-- end utilityNav -->	
		</div> <!-- end utilityTransparency -->
		
		<div id="top"><a href="http://shrink-art.com/_portfolio/"><img src="_images/logoName.gif" alt="Shrink-Art web design and development" /></a></div>		
		
		<div id="topNav">
			<div id="globalNav"> 
				<ul id="navListInline">
					<li><a href="#" onclick="
					showHide('websites', 1); 
					showHide('games', 0); 
					showHide('apps', 0); 
					showHide('other', 0);
					showHide('webDescription', 1); 
					showHide('gamesDescription', 0); 
					showHide('appsDescription', 0); 
					showHide('otherDescription', 0); 
					showHide('description1', 0); 
					showHide('description2', 0); 
					showHide('description3', 0); 
					showHide('description4', 0); 
					showHide('description5', 0); 
					showHide('description6', 0); 
					return false; ">Websites</a></li>
					
					<li><a href="games.php" onclick="
					showHide('games', 1); 
					showHide('websites', 0); 
					showHide('apps', 0); 
					showHide('other', 0);
					showHide('webDescription', 0); 
					showHide('gamesDescription', 1); 
					showHide('appsDescription', 0); 
					showHide('otherDescription', 0); 
					showHide('description1', 0); 
					showHide('description2', 0); 
					showHide('description3', 0); 
					showHide('description4', 0); 
					showHide('description5', 0); 
					showHide('description6', 0); 
					return false; ">Interactive Games</a></li>
					
					<li><a href="#" onclick="
					showHide('apps', 1); 
					showHide('websites', 0); 
					showHide('games', 0); 
					showHide('other', 0);
					showHide('webDescription', 0); 
					showHide('gamesDescription', 0); 
					showHide('appsDescription', 1); 
					showHide('otherDescription', 0); 
					showHide('description1', 0); 
					showHide('description2', 0); 
					showHide('description3', 0); 
					showHide('description4', 0); 
					showHide('description5', 0); 
					showHide('description6', 0); 
					return false; ">Applications</a></li>
					
					<li><a href="#" onclick="
					showHide('other', 1); 
					showHide('websites', 0); 
					showHide('games', 0); 
					showHide('apps', 0); 
					showHide('webDescription', 0); 
					showHide('gamesDescription', 0); 
					showHide('appsDescription', 0); 
					showHide('otherDescription', 1); 
					showHide('description1', 0); 
					showHide('description2', 0); 
					showHide('description3', 0); 
					showHide('description4', 0); 
					showHide('description5', 0); 
					showHide('description6', 0); 
					return false; ">Other</a></li>
				</ul>
			</div> <!-- end globalNav -->		
		</div> <!-- end topNav -->
		

		<div id="middle">				
			<div class="projectWrap" id="websites">
				<div class="projectHead"><img src="_images/colFrog.jpg" alt="CSS Zen Garden" /><h3><a href="http://www.susanlitton.com/school/ai/css/zen/index.html" title="CSS Zen Garden">Project I</a></h3>
					<ul class="projectItems">
						<li><a href="#" onclick="
						showHide('webDescription', 0); 
						showHide('gamesDescription', 0); 
						showHide('appsDescription', 0); 
						showHide('otherDescription', 0);
						showHide('description1', 1); 
						showHide('description2', 0); 
						showHide('description3', 0); 
						showHide('description4', 0); 
						showHide('description5', 0); 
						showHide('description6', 0); 
						return false; ">Description</a></li>
						<li>Concept Note (pdf)</li>
						<li>Change Docs (pdf)</li>	
					</ul>
				</div> <!-- end projectHead	 -->		
				
				<div class="projectHead"><img src="_images/colBike.jpg" alt="Smoky Mountains National Park" /><h3><a href="http://www.susanlitton.com/school/ai/interface/assign5/index.html" title="Smoky Mountains National Park">Project II</a></h3>
					<ul class="projectItems">
						<li><a href="#" onclick="
						showHide('webDescription', 0); 
						showHide('gamesDescription', 0); 
						showHide('appsDescription', 0); 
						showHide('otherDescription', 0); 
						showHide('description1', 0); 
						showHide('description2', 1); 
						showHide('description3', 0); 
						showHide('description4', 0);  
						showHide('description5', 0); 
						showHide('description6', 0); 
						return false; ">Description</a></li>
						<li>Concept Note (pdf)</li>
						<li>Change Docs (pdf)</li>	
					</ul>
				</div> <!-- end projectHead	 -->		
				
				<div class="projectHead"><img src="_images/colBIR.jpg" alt="Bend in the River: A Journey Into Psychotherapy" /><h3><a href="http://shrink-art.com/_newSite/" title="Bend in the River: A Journey Into Psychotherapy">Project III</a></h3>
					<ul class="projectItems">
						<li><a href="#" onclick="
						showHide('webDescription', 0); 
						showHide('gamesDescription', 0); 
						showHide('appsDescription', 0); 
						showHide('otherDescription', 0); 
						showHide('description1', 0); 
						showHide('description2', 0); 
						showHide('description3', 1); 
						showHide('description4', 0);  
						showHide('description5', 0); 
						showHide('description6', 0); 
						return false; ">Description</a></li>
						<li>Concept Note (pdf)</li>
						<li>Change Docs (pdf)</li>	
					</ul>
				</div> <!-- end projectHead	 -->	
				
				<div class="projectHead"><img src="_images/colTAL.jpg" alt="This American Life" /><h3><a href="http://susanlitton.com/school/ai/css/americanlife/home.html" title="This American Life">Project IV</a></h3>
					<ul class="projectItems">
						<li><a href="#" onclick="
						showHide('webDescription', 0); 
						showHide('gamesDescription', 0); 
						showHide('appsDescription', 0); 
						showHide('otherDescription', 0);
						showHide('description1', 0); 
						showHide('description2', 0); 
						showHide('description3', 0); 
						showHide('description4', 1);  
						showHide('description5', 0); 
						showHide('description6', 0); 
						return false; ">Description</a></li>
						<li>Concept Note (pdf)</li>
						<li>Change Docs (pdf)</li>	
					</ul>
				</div> <!-- end projectHead	 -->									
			</div> <!-- end projectWrap -->
			

			

<!-- **************************  Love Grandma ******************************** -->
				
			<div class="projectWrap"  id="games" style="display:none; ">			
				<div class="projectHead"><img src="_images/colLoveGrandma.jpg" alt="The Bog of Indecision" /><h3><a href="http://www.bend-in-the-river.com/school/ai/actionscript/lovegrandma/" title="The Bog of Indecision">Project V</a></h3>
					<ul class="projectItems">
						<li><a href="#" onclick="
						showHide('webDescription', 0); 
						showHide('gamesDescription', 0); 
						showHide('appsDescription', 0); 
						showHide('otherDescription', 0);
						showHide('description1', 0); 
						showHide('description2', 0); 
						showHide('description3', 0); 
						showHide('description4', 0);  
						showHide('description5', 1); 
						showHide('description6', 0); 
						return false; ">Description</a></li>
						<li>Concept Note (pdf)</li>
						<li>Change Docs (pdf)</li>	
					</ul>
				</div> <!-- end projectHead	 -->					
			</div> <!-- end projectWrap -->

			
			
<!-- **************************  DocTypes ******************************** -->
			
				
			<div class="projectWrap" id="apps" style="display:none; ">
				<div class="projectHead"><img src="_images/colDocTypes.jpg" alt="DocTypes" /><h3><a href="http://shrink-art.com/webapp/clients.php" title="DocTypes">Project VI</a></h3>
					<ul class="projectItems">
						<li><a href="#" onclick="
						showHide('webDescription', 0); 
						showHide('gamesDescription', 0); 
						showHide('appsDescription', 0); 
						showHide('otherDescription', 0);
						showHide('description1', 0); 
						showHide('description2', 0); 
						showHide('description3', 0); 
						showHide('description4', 0);  
						showHide('description5', 0); 
						showHide('description6', 1); 
						return false; ">Description</a></li>
						<li>Concept Note (pdf)</li>
						<li>Change Docs (pdf)</li>	
					</ul>
				</div> <!-- end projectHead	 -->					
			</div> <!-- end projectWrap -->

	
<!-- **************************  Text ******************************** -->

		
			<div class="projectBody" id="projectBody">				
								
				<div class="description" id="webDescription">
					<p>Here is stuff that will appear when you first come to the websites page.</p>
				</div> <!-- end webDescription -->		
				
				<div class="description" id="gamesDescription" style="display: none;">
					<p>Here is stuff that will appear when you first come to the Games page.</p>
				</div> <!-- end gamesDescription -->			
				
				<div class="description" id="appsDescription" style="display: none;">
					<p>Here is stuff that will appear when you first come to the Applications page.</p>
				</div> <!-- end appsDescription -->	
				
				<div class="description" id="otherDescription" style="display: none;">
					<p>Here is stuff that will appear when you first come to the Other page.</p>
				</div> <!-- end otherDescription -->	
						
				<div class="description" id="description1" style="display: none;">
					<p>Here is a description of Project I. And I might have lots more text and even more.</p>
				</div> <!-- end description1 -->		
								
				<div class="description" id="description2" style="display: none;">
					<p>Here is a description of Project II.</p>
				</div> <!-- end description2 -->	
				
				<div class="description" id="description3" style="display: none;">
					<p>Here is a description of Project III.</p>							
				</div> <!-- end description3 -->
				
				<div class="description" id="description4" style="display: none;">
					<p>Here is a description of Project IV.</p>							
				</div> <!-- end description4 -->					
				
				<div class="description" id="description5" style="display: none;">
					<p>Here is a description of Project V.</p>							
				</div> <!-- end description5 -->		
				
				<div class="description" id="description6" style="display: none;">
					<p>Here is a description of Project VI.</p>							
				</div> <!-- end description6 -->
				
			</div> <!-- end projectBody -->
			
			
		</div> <!-- end middle -->
		
		<!-- <div id="bottom"></div> -->
		<div id="footer">
			<div id="footerContact">
			<a href="&#x6d;ail&#x74;&#x6f;:&#x73;&#x75;s&#x61;&#x6e;&#x40;&#x73;&#x75;s&#x61;&#x6e;&#x6c;&#x69;&#x74;t&#x6f;n.co&#x6d;">Susan C. Litton,</a> Interactive Designer/Developer | Decatur, GA  30033 | 770-441-6361
			</div>
	
	 		<div id="designer">
			This interactive media project was created by students for educational purposes at The Art Institute of	Atlanta <br />and is in no way intended for commercial gain or as a source of public information.
			</div> 
	
			<div id="copyright">
			Copyright © <?php echo date("Y"); ?> by Susan C. Litton, Ph.D. All rights reserved.
			</div>
	
			<div id="validation">
				<a href="http://validator.w3.org/check/referer" title="This site meets W3C XHMTL web standards">XHTML 1.0 Transitional</a> | 
				<a href="http://jigsaw.w3.org/css-validator/check/referer" title="This site meets W3C CSS web standards">Valid CSS</a> 
			</div>
		
		</div>
	
	</div> <!-- end wrapper -->
	
	</body>
	</html>
  2. Apr 9, 2007 01:35 #2
    abb
    abb is offline
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Missing something here el.style.display = '';

    if(show)
    {
    el.style.display = 'block'; // or 'inline' whichever more appropriate
    }
  3. Apr 9, 2007 09:06 #3
    tryin_to_learn
    tryin_to_learn is offline
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that but it doesn't seem to make a difference.
  4. Apr 9, 2007 22:27 #4
    SimplyFu
    SimplyFu is offline
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you might have problem with element referencing. el might be null
  5. Apr 9, 2007 23:00 #5
    abb
    abb is offline
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On your onclicks, some of the showHide() ids pointed to does not exist so your script cannot complete. Definitely check that.

    You can add this to check if an element exist or not first, adding this to your script made it work, but do clean up or try a loop, see after first code block ...
    Code:
    	if ( el ) // <-- Check if el exist
	{
		if( show)
		{
			el.style.display = 'block';
		}
		else
		{
			el.style.display = 'none';
		}
	}
    You may also define all your divs as a JS array, loop though them when each link is clicked, the idea is to set the current clicked el to visible, otherwise hide the div. This way you don't have to have all those showHide() on each link

    Code:
    function showHide(elementID)
{
    var el = document.getElementById(elementID);

    var a = array('websites', 'games');
    c = a.length;
    for ( i=0; i<c; i++ )
    {
        if ( elementID == a[i] )
       {
              // show div
       }
       else
       {
              // hide div
       }
    }

}
    for default open div , maybe have
    <div class="" style="display: block"> or <div class="xxxx show_this_css"> or perhaps JS to window.onload = function() { // show which div by default }
  6. Apr 10, 2007 19:34 #6
    tryin_to_learn
    tryin_to_learn is offline
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abb View Post
    On your onclicks, some of the showHide() ids pointed to does not exist so your script cannot complete. Definitely check that.
    That's exactly what it was. Thanks so much for your help.
  7. Apr 11, 2007 02:52 #7
    SimplyFu
    SimplyFu is offline
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you may want to learn javascript prototype framework you can use Element.show function
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules