SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Jun 30, 2008, 23:52 #1
- Join Date
- Jun 2008
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Show-hide function question from newbie
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.
Code: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); } }
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>
-
Jul 1, 2008, 01:48 #2
- Join Date
- Jun 2004
- Location
- Mumbai, India
- Posts
- 541
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Instead of using
elem.style.visibility='visible';
elem.style.visibility='hidden';
use
elem.style.display='block';
elem.style.display='none';Vikrant Korde
S Y S T I M E, Mhape,
Mumbai, Maharashtra, India.
-
Jul 1, 2008, 02:02 #3
- Join Date
- Jun 2008
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
hi,
thanks for the reply. I've made the changes. But the gap still exists, plus now i don't think the function works anymore. when i click to open up the box, instead of showing the content inside the box, it displays empty space (like there is a <br> right where the box is supposed to be), and when i click again to close the empty space, nothing happens.
is there a problem with the way i call the function?
===in php===
<a href='#' onclick='javascript: show_hide(18); return false;'>more...</a>
<div style='visibility: hidden; position: absolute;' class='faq' id='18'>more stuff</div>
===in functions.js===
function show(elemID)
{
var elem=document.getElementById(elemID);
elem.style.position='relative';
elem.style.display='block';
}
function hide(elemID)
{
var elem=document.getElementById(elemID);
elem.style.position='absolute'
elem.style.display='none';
}
function show_hide(elemID)
{
var elem=document.getElementById(elemID);
if(elem.style.visibility=='hidden')
{
show(elemID);
}
else
{
hide(elemID);
}
}
thanks.
-
Jul 1, 2008, 05:06 #4
- Join Date
- Jun 2004
- Location
- Mumbai, India
- Posts
- 541
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
you need to change all the occurances of
visibility with display
and
hidden with none
even in <div style='visibility: hidden;....
basically visibility only hides the element but keeps the space occupied. however display hides object as well as the space is not consumed.
id you thing JS function is not working then put alert("hi"); at the start of the function and check if atleast function is getting called.Vikrant Korde
S Y S T I M E, Mhape,
Mumbai, Maharashtra, India.
-
Jul 1, 2008, 23:16 #5
- Join Date
- Jun 2008
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
hi,
i've made the changes and the gap is still there.
-
Jul 1, 2008, 23:54 #6
- Join Date
- Mar 2006
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You're talking about an empty gap below a footer, but there's no obvious footer in your testcase. You should provide a better testcase.
My guess is that if you made the visibility to display property changes, it's probably an issue with CSS (your stylesheet).
Try including Yahoo's CSS reset file to reset all your elements' paddings/margins to see if it's actually a CSS issue....
HTML Code:<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/reset/reset.css">
-
Jul 2, 2008, 00:21 #7
- Join Date
- Jun 2008
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks for the tip. I found my simple CSS mistake, and solved the problem.
Bookmarks