Page jerks and goes to the top after I show an id element

Question

I have a page where everything is working fine, but the one problem is that after setting a hidden element to being shown, my page suddenly jerks up. The previously hidden element does get displayed, but I would like the page not to jerk up.

Here is the page: http://www.problemio.com/add_problem.php

When you add anything to the 3rd input area and click the link for "add category" the page jerks up to the top. If you scroll down, you can see that a previously hidden text box is shown, but how can I stop the jerking up of the page?

Here is my jQuery code:

$('#add_category').click(function() { //alert ("in add category"); // Now have to get value of the text entry area var category = $("#category_field").val(); // Works

     var text_area = $("#log").val();        
     //alert ("text_area: " + text_area);

     // Should append to value of textarea what is in the category
     if ( text_area )
     {
         //alert ("text area NOT EMPTY: " + text_area + " and category: " + category );
         text_area = text_area + " , " + category;    
     }
     else
     {
         //alert ("text area EMPTY: " + text_area + " and category: " + category );
         text_area = category;          
     }    

     // Now replace old text_area with new one
     $("#log").val(text_area); 

     // Now reset the text field
     $("#category_field").val("");

     // Make the categories box visible 
     document.getElementById("categories_box").style.display = 'block';

});

and here is the HTML form:

         <form id="create_problem" name="form" method="post">
                 <p>
                 <label for="problem_name">Problem Name: </label><input type="text" value="<?php echo $problem_name;?>" size="75" name="problem_name" id="problem_name"></input>
                 </p>
                 <p>
                 Explain the problem:
                 </p>

         <textarea id="content" name="content" class="tinymce" style="width: 500px; height: 350px;">
         </textarea>
        </p>

    <p class="ui-widget">
        <label for="category_field">Category: </label> 
        <input id="category_field" size="25"/> <a id="add_category" href="#">Add Category</a>
    </p>

    <p id="categories_box" class="ui-widget" style="margin-top:2em; font-family:Arial; display: none;">
        Categories:<br />
        <textarea id="log" style="height: 150px; width: 500px;" ></textarea>
    </p>

        <span class="error"   id="categories_error" style="display:none">Categories Can Not Be Empty</span>
        <span class="success" id="categories_success" style="display:none">Categories Added Successfully!</span>    

                 <input type="hidden" id="question_html" name="question_html" />

                 <!-- Check if the person is logged in -->
<!--
                 <p>
                    <input class="problem_follow_checkbox" TYPE="checkbox" NAME="follow_problem" /> Follow this problem        
                 </p>
-->



<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Problem Added Successfully!</span>

        <input type="submit" class="button" value="Add Problem"></input>

<form>

Specifically the line that is doing this is the last line in the jQuery, which tries to display the element like this:

document.getElementById("categories_box").style.display = 'block';

Thanks!!

Answer 1

This is because of the link has a pound at the end (an anchor to a label that doesn't exist.. therefore it goes to the top of the page). Two possible options are to either add a label with the new category box as an anchor so that it jumps to that label (and therefore the category box that was added), or to return false at the end of the onclick event so it doesn't register.

Answer 2

You need to return false; in tha last line of

$('#add_category').click(function() {
     var text_area = $("#log").val();        
     //alert ("text_area: " + text_area);

     // Should append to value of textarea what is in the category
     if ( text_area )
     {
         //alert ("text area NOT EMPTY: " + text_area + " and category: " + category );
         text_area = text_area + " , " + category;    
     }
     else
     {
         //alert ("text area EMPTY: " + text_area + " and category: " + category );
         text_area = category;          
     }    

     // Now replace old text_area with new one
     $("#log").val(text_area); 

     // Now reset the text field
     $("#category_field").val("");

     // Make the categories box visible 
     document.getElementById("categories_box").style.display = 'block';

return false;
});

Not returning false creates the # at the top of the page;