PDA

View Full Version : Please help! onclick show/hide div



ryanhtam
Jul 4th, 2009, 05:14 AM
Hi, I'm trying to create an effect similar to the one found here: www.apple.com/iphone , where the panel changes with a click on a thumbnail below.

I have used a script taught here on the forum for a simpler version of that changing panel effect. I'm not looking to reproduce the fancy fade effect, but am just looking to be able to change the large panel by hiding/showing div via the onclick command. Below is my code so far. I'd appreciate any help.

<style type="text/css">
<!--
.switch { display: none;}
-->
</style>

<script type="text/javascript" charset="utf-8">
function showItem(id) {
document.getElementByID().style.display = "block";
return false;
}
</script>

<div id="panel_container">
<div class="switch" id="div1">
<a href="url1"><img src="/templates/grace/images/panel1.jpg"/></a>
</div>
<div class="switch" id="div2">
<a href="url2"><img src="/templates/grace/images/panel2.jpg"/></a>
</div>
</div>
<!--credit-->
<a href="#" onclick="showItem("div1");" ><img src="/templates/grace/images/thumb1.jpg" /></a>
<a href="#" onclick="showItem("div2");" ><img src="/templates/grace/images/thumb2.jpg" /></a>

Old Pedant
Jul 4th, 2009, 06:21 AM
Let's generalize this script, to handle more than just two divs. Lets say that you have N divs, all named "div1", "div2", "div3", .... in sequence.

So:



<script>
function showItem(which)
{
for ( var dnum = 1; dnum < 999999; ++dnum )
{
var dv = document.getElementById("div" + dnum);
if ( dv == null ) return; // quit when we can't find divNNN
dv.style.display = ( dv.id == which ) ? "block" : "none";
}
}
</script>


You see it? We loop through until we find a div that doesn't exist (in your case that would be when dnum==3 so that document.getElementById("div3") returns null).

As we process each div, we hide it unless it matches the id that was passed to the function.

Okay? Clean and easily expandable to any number of divs/panels.

Old Pedant
Jul 4th, 2009, 06:23 AM
Oh...and it's a good idea to return false from all those onclick calls. Otherwise, because you have href="#", the page will scroll back to the top each time.

That is:


<a href="#" onclick="showItem("div1"); return false;" ><img src="/templates/grace/images/thumb1.jpg" /></a>
<a href="#" onclick="showItem("div2"); return false;" ><img src="/templates/grace/images/thumb2.jpg" /></a>

ryanhtam
Jul 4th, 2009, 07:23 AM
Okay,

Here is what I have now, but it still doesn't display the image. Am I still missing something?

<style type="text/css">
<!--
.switch { display: none;}
-->
</style>

<script>
function showItem(which)
{
for ( var dnum = 1; dnum < 999999; ++dnum )
{
var dv = document.getElementById("div" + dnum);
if ( dv == null ) return; // quit when we can't find divNNN
dv.style.display = ( dv.id == which ) ? "block" : "none";
}
}
</script>

<div id="panel_container">
<div class="switch" id="div1">
<a href="url1"><img src="/templates/grace/images/panel1.jpg"/></a>
</div>
<div class="switch" id="div2">
<a href="url2"><img src="/templates/grace/images/panel2.jpg"/></a>
</div>
</div>
<!--credit-->
<a href="#" onclick="showItem("div1"); return false;" ><img src="/templates/grace/images/thumb1.jpg" /></a>
<a href="#" onclick="showItem("div2"); return false;" ><img src="/templates/grace/images/thumb2.jpg" /></a>

Old Pedant
Jul 4th, 2009, 09:23 AM
You have illegal HTML there:


<a href="#" onclick="showItem("div1"); return false;" ><img src="/templates/grace/images/thumb1.jpg" /></a>
<a href="#" onclick="showItem("div2"); return false;" ><img src="/templates/grace/images/thumb2.jpg" /></a>

HTML sees the " after onclick and then looks for the next quote mark. It grabs the stuff between quotes and send it off to JavaScript.

So, as you can see, the ONLY thing it is sending to JavaScript is


showItem(


When you enclose javascript code in quotes, in your HTML, you must then use apostrophes in the JS code. SO:


<a href="#" onclick="showItem('div1'); return false;" ><img src="/templates/grace/images/thumb1.jpg" /></a>
<a href="#" onclick="showItem('div2'); return false;" ><img src="/templates/grace/images/thumb2.jpg" /></a>

Old Pedant
Jul 4th, 2009, 09:24 AM
HINT: In the future, use a JavaScript debugger. It will tell you about problem such as that right away.

ryanhtam
Jul 4th, 2009, 11:39 AM
Thanks for all the help! What would be the best way to make it so that div1 is displayed by default to start? should i put it in the css file?