My problem is that I want to redirect within my same html page which contain a div named add-form.

When I click on the button my redirection should be on one div which contains some code. Here is some of my code that redirects to another page, but I have no idea how to replace the page with a div instead.

 success: function(data){

          if(data['success']){
        alert("DOne");  

        window.location = document.getElementById('add-form');
         // $("#add-form").load(function(e) {

         // });


          }
          else{
              alert("Oops, There is a Network Error.....");
          }
      }

In this code #add-form is DIV id.

I don't want to redirect to another page but to slide in the page that contain div tag.

UPDATE:

here are the two images.

In the first image click of + button which held in right side up. code is :

<a href="#add-form" data-icon="plus" data-iconpos="notext">Add</a>

result is this image.

I want to do the same for a button click, but in javascript.

My problem is that I want to redirect within my same html page which contain a div named add-form.

When I click on the button my redirection should be on one div which contains some code. Here is some of my code that redirects to another page, but I have no idea how to replace the page with a div instead.

 success: function(data){

          if(data['success']){
        alert("DOne");  

        window.location = document.getElementById('add-form');
         // $("#add-form").load(function(e) {

         // });


          }
          else{
              alert("Oops, There is a Network Error.....");
          }
      }

In this code #add-form is DIV id.

I don't want to redirect to another page but to slide in the page that contain div tag.

UPDATE:

here are the two images.

In the first image click of + button which held in right side up. code is :

<a href="#add-form" data-icon="plus" data-iconpos="notext">Add</a>

result is this image.

I want to do the same for a button click, but in javascript.

• javascript
• ajax
• jquery
• cordova

• Do you just want the browser to scroll to the Div when the user clicks a link? – Scott Helme Commented Dec 17, 2013 at 10:35
• $("#add-form").get(0).scrollIntoView(); => this should work for you – Talha Masood Commented Dec 17, 2013 at 10:35
• 1 Why do you need to do it in JS? Why not just <a href="#add-form">Click</a> – Scott Helme Commented Dec 17, 2013 at 10:36
• @TalhaMasood @ScottHelme I need to open slide panel when condition is satisfied in a onclick event and the slide panel is a <DIV>. – AndyBoy Commented Dec 17, 2013 at 10:38
• Then that means you need to animate a div visible if the condition is satisfied. Keep the div hidden by default, and make it visible by animation if the condition is satisfied. – Talha Masood Commented Dec 17, 2013 at 10:42

2 Answers 2

I think what you might be looking for is this:

<a href="#add-form">Click</a>

When a user clicks that link, they will be scrolled to the div with id="add-form".

Edit

I can't test right now, but try something like this to do it in JS:

$("#buttonToClick").click(function() {
    $('html, body').animate({
       scrollTop: $("#add-form").offset().top
    }, 2000);
});

If you really must do it in JS (although, I cannot see why you wouldn't use Scott Helme's solution), use this line to anchor your browser to the position of the div with the id "add-form":

window.location.href = '#add-form';

Make sure to prepend the hash (#) to the element's ID.