PDA

View Full Version : Changing visibility of something w/ onclick


kendokendokendo
06-22-2005, 10:16 PM
Hello!

I have a page with 3 jumpref links. using the dom and javascript, all the content is hidden until you click a jumpref link - in which case only the content for that particular jumpref shows up while the other 2 are hidden. a tutorial for this can be found at http://www.alistapart.com/articles/eatcake/ .

This is cool but it creates a problem because one of the jumpref links points to a section with an iframe containing a Flash object. The Flash object will begin to play and you can hear it regardless of what section of the jumpref page you are on and this is annoying.

What I would like to do is make it so that, when you click on the jumpref pointing to the Flash object section, the iframe will become visible; in all other cases it will be hidden (when you first load the page, when you click away, etc.)

I don't know a lot about DOM. My code so far looks like:
<a id="flashpart" href="#flash" onclick="document.getElementById('testflash').style.visibility='visible'">Go To Flash</a>
<a id="otherparts" href="#other" onclick="document.getElementById('testflash').style.visibility='hidden'">Go Away from Flash</a>
<div id="flash">
<iframe id="testflash" src="flashpage.html"></iframe>
</div>
<div id="other">
<p>bla bla some text</p>
</div>


Please help me fix my code so it works, or point me in the right direction to find out! Thanks very much in advance for your time.

kendokendokendo
06-22-2005, 10:58 PM
changing around the specifications a bit.

After thinking about it I realized that just changing the source onclick would be a smarter idea.

Here is my current syntax but it isn't really working:
<a id="flashpart" href="#flash" onclick="document.getElementById('testflash').src='flashpage.html'">Go To Flash</a>
<a id="otherparts" href="#other" onclick="document.getElementById('testflash').src='blankpage.html'">Go Away from Flash</a>
<div id="flash">
<iframe id="testflash" src="flashpage.html"></iframe>
</div>
<div id="other">
<p>bla bla some text</p>
</div>

Any suggestions/corrections?

Kor
06-23-2005, 11:10 AM
Try using display instead of visibility (not tested)

kendokendokendo
06-23-2005, 04:57 PM
works out - thanks. i didn't even think of using display :p