Member Avatar for billymcguffin

ok. i am having trouble with this code:

<head>
    <script type="text/javascript">
    <!--
    function switchPic(picID)
    {
    document.getElementById(picID).style.display="none";
    }
    //-->
    </script>
    </head>
    <body>
    <a href="" onclick="switchPic(_1)">Click Here</a>
    </body>

when you click the link, it gets the id from the info provided in the link and makes it disappear (thats how its supposed to work). but it doesn't do that. i have seen the same code work on an different site.

thanks,
billy

  • 2 Contributors
  • 3 Replies
  • 3K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by billymcguffin
Member Avatar for essential

Assuming you have this div in your page, initially set as div1 for its id.

<div id="div1">Link 1</div>
<a href="javascript:void(0);" onclick="showPic('div1');">Hide Div</a>

it seems that your created function is used for hiding images.
Anyway you can easily create another function that will handle element's inside your page (showing/hiding).

Member Avatar for essential

Here's a little demo that will show different div's depending on what link's you will click.

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Page Template</title>
<meta name="author" content="DANI-USER : essential" />
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #f0f0f0;
  border : none;
  color : #696969;
  font : normal normal normal 90%/1.6 Verdana, Tahoma, Helvetica, Arial, sans-serif;
  height : auto;
  min-height : 600px;
  min-width : 800px;
  text-align : center;
  vertical-align : baseline;
  width : auto; }

h2 {
  background-color : #ccc;
  border-bottom : 1px solid #708090;
  border-top : 1px solid #708090;
  font : 700 160% "Bernard MT Condensed";
  line-height : 2ex;
  margin-top : 0;
  min-height : 2ex;
  padding : .100em 0em .100em 1em;
  white-space : nowrap; }

div {
  border : none;
  margin : 0%;
  padding : 0%; }

div#main {
  margin : 0% auto;
  text-align : left;
  height : 100%;
  overflow : hidden;
  width : 98%;
   }

div.show {
  border : 2px solid;
  margin-bottom : .200em;
  padding : .300em; 
  background-color : #fff;
  font : 700 160% Verdana, Arial, sans-serif;
  width : auto;
}
div.tube {
  border : 1px solid #ccc;
  height : 600px;
  margin : 1% auto 1% auto;
  padding : 1.200em; }

.hide { display : none; }
.show { display : block; }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var showElem;
showElem = function( showID ) {
   div = (( document.getElementById ) ? document.getElementById( showID ) : document.all[ showID ] );
   try {
   div.className = (( div.className === "hide" ) ? "show" : "hide" );
   } catch( e ) {
   div.style.display = (( div.style.display === "none" ) ? "block" : "none" );
   }
};
// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<h2>JavaScript Live DEMO!</h2>
<div id="div1" class="hide">DIV 1</div>
<div id="div2" class="hide">DIV 2</div>
<div id="div3" class="hide">DIV 3</div>
<p>
<!-- First Format -->
<a href="javascript:void(0);" onclick="showElem('div1');">Show DIV 1</a><br />
<!-- Second Format -->
<a href="javascript:void(showElem('div2'));">Show DIV 2</a><br />
<a href="javascript:void(0);" onclick="showElem('div3');">Show DIV 3</a><br /></p>
</div>
</div>
</body>
</html>
Member Avatar for billymcguffin

thanks for the help essential, but it just turned out to be me forgetting some quotes.

silly me.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.