SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    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);
    	}
    }
    how i call it in the php code:
    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.

  2. #2
    SitePoint Evangelist vikrantkorde's Avatar
    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.

  3. #3
    SitePoint Member
    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.

  4. #4
    SitePoint Evangelist vikrantkorde's Avatar
    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.

  5. #5
    SitePoint Member
    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.

  6. #6
    SitePoint Member
    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">

  7. #7
    SitePoint Member
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •