www.webdeveloper.com
Results 1 to 7 of 7

Thread: hide() function always moves page back to top

  1. #1
    Join Date
    Jun 2008
    Posts
    207

    hide() function always moves page back to top

    Hi I am trying to use this code that was submitted on dreamincode.net. The trouble i am having is that the page will always go back to the top everytime i click the link. Does anyone know how i can prevent this from happening?

    Thanks


    <script type="text/javascript">

    function hide(status) {

    if (status == "hidden") {
    document.getElementById("textbox").style.visibility = "hidden";
    document.getElementById("button").innerHTML = "<a onclick=\"hide(\'show\')\" href=\"#\">Show Textbox<\/a>";
    }
    else {
    document.getElementById("textbox").style.visibility = "visible";
    document.getElementById("button").innerHTML = "<a onclick=\"hide(\'hidden\')\" href=\"#\">Hide Textbox<\/a>";
    }

    }

    </script>

    <textarea id="textbox"></textarea><br>

    <span id="button">
    <a onclick="hide('hidden')" href="#">Hide Textbox</a>
    </span>

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    Code:
    <a onclick="hide('hidden');return false" href="#">Hide Textbox</a>

  3. #3
    Join Date
    Jun 2008
    Posts
    207
    Hi, Thanks for the post. That works the first time you click it, but the second time will throw you back to the top of the page. Any ideas? Thanks

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  5. #5
    Join Date
    Jun 2008
    Posts
    207
    function hide(status) {

    if (status == "hidden") {
    document.getElementById("textbox").style.visibility = "hidden";
    document.getElementById("button").innerHTML = "<a onclick=\"hide(\'show\')\" href=\"#\">Show Textbox<\/a>";
    }
    else {
    document.getElementById("textbox").style.visibility = "visible";
    document.getElementById("button").innerHTML = "<a onclick=\"hide(\'hidden\')\" href=\"#\">Hide Textbox<\/a>";
    }

    }


    Thanks for your help

  6. #6
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    It's because he is over writing the span containing the link.
    Code:
    document.getElementById("button").innerHTML = "<a onclick=\"hide(\'hidden\')\" href=\"#\">Hide Textbox<\/a>";
    Add the return false there as well.

  7. #7
    Join Date
    Jun 2008
    Posts
    207
    Ah i can see where it is going wrong. Each time it's clicked it changes the html for the button and the second time it does not include the "return false". It is now sorted. Thanks for your time and help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles