Show-hide function question from newbie

[caglarozdag]

hi all, i started using JavaScript yesterday so i am really really new. When i call the following functions on a page an empty gap appears bellow the footer. I don't know how to eliminate it.

Show hide functions.
function show(elemID)
{
var elem=document.getElementById(elemID);
elem.style.position='relative';
elem.style.visibility='visible';
}
function hide(elemID)
{
var elem=document.getElementById(elemID);
elem.style.position='absolute'
elem.style.visibility='hidden';
}
function show_hide(elemID)
{
var elem=document.getElementById(elemID);
if(elem.style.visibility=='hidden')
{
show(elemID);
}
else
{
hide(elemID);
}
}

how i call it in the php code:

A_PARAGRAPH_REFERRING_TO_AN_IMAGE...<a href='#' onclick='javascript: show_hide(9); return false;'>Click to see the image.</a>

<div style='visibility: hidden; position: absolute;' class='faq' id='9'><img src="./include/hurriyet1_main.jpg"></div>

Thanks already.

[xlcho]

The code that you use doesn't completely hide the element, it just makes it invisible, but the element is still there and is taking some of the space. I'd recommend changing the show() and hide() to something like that:


<script type='text/javascript'>
function show(elemID)
{
var elem=document.getElementById(elemID);
elem.style.display='block';
}
function hide(elemID)
{
var elem=document.getElementById(elemID);
elem.style.display='none'
}
function show_hide(elemID)
{
var elem=document.getElementById(elemID);
if(elem.style.display=='none')
{
show(elemID);
}
else
{
hide(elemID);
}
}
</script>

<a href='#' onclick='javascript: show_hide(9); return false;'>Click to see the image.</a>

<div style='position: absolute;' class='faq' id='9'><img src="./include/hurriyet1_main.jpg"></div>


There are some minor changes in the rest of the code too, to make it work with the new show()/hide() functions.


This will completely hide the element and it will no longer disorder anything on the page

[caglarozdag]

hi,

thanks a lot for your reply. i've changed the functions and the way i call them like you said. but the gap under the footer is still there and now when i open the page for the first time, the object isn't hidden.

[xlcho]

Well, my bad. I've forgotten to hide the element. Change this:
<div style='position: absolute;' class='faq' id='9'><img src="./include/hurriyet1_main.jpg"></div>
to

<div style='display: none; position: absolute;' class='faq' id='9'><img src="./include/hurriyet1_main.jpg"></div>

You can try changing the display property of the element to inline instead of block. Change show() to:
function show(elemID)
{
var elem=document.getElementById(elemID);
elem.style.display='inline';
}
This will render the element without line breaks before and after it. Depends on your layout, but i think this is the problem that's causing the gap.

[caglarozdag]

hi,

i've made the changes but the gap is still there. another problem with the modified version that i forgot to mention earlier is that the object now opens up on top of all the content (instead of shifting everything down). Although i actually like it :) serves my purpose much better :) so i'll probably keep it.

[crath]

can you link me to the page so i can help you solve this gap problem?