show/hide div problem

[darkfact]

I'm using this code to show and hide a div.

function showDiv(){
document.getElementById("test").style.visibility="visible"
}
 
function hideDiv(){
document.getElementById("test").style.visibility="hidden"
}
 

The link to hide the div is in another frame and it works fine.

When it is hidden a background image is visible and I've made it clickable with this:

#box-link { 
        position: absolute; 
        top: 21px; 
        left: 21px; 
        width: 267px; 
        height: 180px; 
        background-color: transparent; 
        border: 1px solid yellow; }
 
 

and this:

<div class="box-link" id=test2><a id="box-link"  href="" onClick="javascript:showDiv()"></a></div>
 

It works fine if I create a link in the other frame but it will not work in IE from the transparent box link div. Instead of making the div visible again, it goes to the directory page showing a list of files. It works perfectly in Firefox. But this is for an offline app in an app specific browser based on IE. So I don't care if it works in other browsers. Just IE.

Thanks in advance for any suggestions.

[darkfact]

Well after spending a ridiculous amount of time trying to figure out the problem, I figured it out. All I had to do was add an # to the href=

[kovik]

You need for your event handler functions to return false.

That cancels the default action of the click, which is to navigate to the page in the href attribute. Setting the value to be "#" will only force the page to jump to the top.

[darkfact]

Thanks for the reply. If what you mean by "jump to the top" is making the div visible, that is what I wanted. Regardless, it works now and all I did was add the #.

thanks

[kovik]

No, what I mean is that you are sending your users to the empty anchor (as opposed to an anchor like "#content" or "#nav"), which sends them to the top of the page. Once you have a page that is large enough to scroll, you'll see it.

[darkfact]

The page is of a set size in an iframe. So that won't be an issue but for the sake of learning something, I changed it to #nav. The action is taking place in an iframe. There are two divs. One is a page and the other is a transparent image so that you can see a background image that is clickable. So the only page is the hidden div. But if everything was taking place on my main page and there was no iframe, in that case, without adding content or nav, my div would not reappear, but instead the main page would jump to the top?

Thanks again

[kovik]

Okay... And your div would still appear and disappear, but every time that it did, the user would jump to the top of the page.

I'm still not sure what's so hard about adding the line "return false;" to the end of your functions, though...

[darkfact]

I'm only just learning. I didn't understand what you meant by return false before. I added it to the end of my functions. And now I know the proper way to do it.

Thank you.

[kovik]

Oh, okay. I didn't realize that was the issue. Good to see that we're on the same page, now. :)

Also, there's a difference between "visibility:hidden" and "display:none". The former makes the object invisible, but keeps it's position in the document so that no other elements are moved. The latter removes the element from the document (it can be restored by giving the display style a different value, such as "block").

[darkfact]

In this case my hidden div has windows media player controls in it and it continues to play even when hidden. with display:none, would it close and stop playing?

thanks

[kovik]

No, it wouldn't. Though, you can probably force it to stop via JavaScript. How, I'm not sure. Sorry.