Javascript Menu

Question

I am working on a page, which has a link which reads "update". When users click this link, I would like a form to use a slide effect and appear underneath the link. When the form is submitted, it updates the db, and the menu vansihes.

I know this can be done with javascript, but I am not sure how to implement it.

Much thanks

Answer 1

First off, use jquery, it will be simpler and compliant cross browser.

Appearing with a slide effect can be done with Jquery UI.

$("div").click(function () {
      $(this).show("slide", { direction: "down" }, 1000);
});

Updating the db assynchronously can be done using the post method:

$.post("/action.php", { },
      function(data){
    }, "text");

... but you can also simply post the form synchronously and refresh the page.

Answer 2

You can do this using JQuery or AJAX toolkit on ASP.NET. WHIch language do you want it in? It cannot be done in pure javascript only

Answer 3

May I also add that you will need to ensure the page works without javascript as well, many users, myself included surf with javascript disabled. And I personally would abandon your site if key functionality was sacrificed so you can make the page look prettier.

Answer 4

You should consider a javascript library such as jQuery to help you achieve this. Basically what you need is to create a DIV at disired position and hide it when the document finishes loading then add events for the menu click

With jQuery:

$(document).ready(function() {

        $('#myDivId').hide(); //Hiding the div

        $('#updadeLinkId').click(function() {
             $('#myDivId').slideToggle('slow'); //This is the slide effect
        });

    });

The jQuery library can be downloadeds at http://www.jquery.com/