Updating form appearance with jQuery's $.ajax when submitting forms

Question

Updating form appearance with jQuery's $.ajax when submitting forms

This is an example of the list of forms on my page: http://jsfiddle.net/GSC3x/

While it functions well, having a lot of list items on the page can make it less user-friendly. I am looking to change the way forms are displayed after clicking on one of the list items.

I want it so that when an item is clicked, the form appears in the center of the page and the other list items become invisible while the form is active. Clicking on the previously selected item again should return it to the normal list view. How can this be achieved?

@@UPDATE - I have added a hyper-professional image to illustrate how it should work! : ]

jquery html css ajax

Answer 1

Answer №1

Check out the code snippet below...

Here is the CSS:

ul{
    position:relative;
}

.centerDiv{
    position:absolute;
    z-index:1000;
    top:0px;
    left:30px;
}

And here is the Javascript:

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(e){
       if( $(e.target).next(".slidingDiv").css('display') != 'block'){
            $(".slidingDiv").hide();
            $(".show_hide").hide();
            $(e.target).show();
            $(e.target).next(".slidingDiv").addClass("centerDiv");
            $(e.target).next(".slidingDiv").slideToggle();
       }else{
              $(".slidingDiv").hide();
                $(".show_hide").show();
       }   
    });
});

Answer 2

Check out the code snippet below...

Here is the CSS:

ul{
    position:relative;
}

.centerDiv{
    position:absolute;
    z-index:1000;
    top:0px;
    left:30px;
}

And here is the Javascript:

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(e){
       if( $(e.target).next(".slidingDiv").css('display') != 'block'){
            $(".slidingDiv").hide();
            $(".show_hide").hide();
            $(e.target).show();
            $(e.target).next(".slidingDiv").addClass("centerDiv");
            $(e.target).next(".slidingDiv").slideToggle();
       }else{
              $(".slidingDiv").hide();
                $(".show_hide").show();
       }   
    });
});

Answer 3

Answer №2

$(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

        $('.show_hide').click(function(event){
             $('.show_hide').not($(this)).next(".slidingDiv").hide();
             $(event.target).next(".slidingDiv").slideToggle();
        });
});

Answer 4

$(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

        $('.show_hide').click(function(event){
             $('.show_hide').not($(this)).next(".slidingDiv").hide();
             $(event.target).next(".slidingDiv").slideToggle();
        });
});

Answer 5

Answer №3

To achieve a smoother animation effect for centering the form, you can use the following code snippet instead of

$(e.target).next(".slidingDiv").slideToggle();

:

var verticalPosition = ($(window).height() - $(this).next(".slidingDiv").height()) / 2 + $(window).scrollTop();
var horizontalPosition = ($(window).width() - $(this).next(".slidingDiv").width()) / 2 + $(window).scrollLeft();         
$(e.target).next(".slidingDiv").css('position', 'absolute');
$(e.target).next(".slidingDiv").animate({
    left: horizontalPosition,
    top: verticalPosition,
}, 500).show();
});

Answer 6

To achieve a smoother animation effect for centering the form, you can use the following code snippet instead of

$(e.target).next(".slidingDiv").slideToggle();

:

var verticalPosition = ($(window).height() - $(this).next(".slidingDiv").height()) / 2 + $(window).scrollTop();
var horizontalPosition = ($(window).width() - $(this).next(".slidingDiv").width()) / 2 + $(window).scrollLeft();         
$(e.target).next(".slidingDiv").css('position', 'absolute');
$(e.target).next(".slidingDiv").animate({
    left: horizontalPosition,
    top: verticalPosition,
}, 500).show();
});

Updating form appearance with jQuery's $.ajax when submitting forms

Answer №1

Answer №2

Answer №3

Similar questions

Guide on aligning a series of divs in a single row within a parent div

Using Node.js and Express to make an AJAX POST request

Learn how to toggle the visibility of a gif image with a button click in an ASP.NET application

Django is experiencing difficulties loading CSS on certain template files

The browser is struggling to interpret the incorrect HTML content

ajax rendering in Ruby on Rails

Restrict the amount of pages displayed in pagination

Error encountered: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING, anticipating either a comma or a semicolon

What is the most dependable method for referencing a CSS class through programming?

Troubleshooting: Why is my CSS Div tag failing to

The fallback mechanism for the success method in AJAX is ineffective

Ways to create a smooth transition in element height without a known fixed target height

extracting URL parameters using AJAX

What is the best way to add CSS to email addresses that are hidden by the WordPress antispambot feature?

Pictures of Model in HTML Django 1.10

Any idea why the HTML Select dropdown isn't functioning properly in Angular 2?

HTML5 pattern grouping feature is not functioning as expected

When using Cordova on iOS, the AJAX call encounters issues, displaying a message like this: `{"readyState":"0", "responseText":"", "status":0,"statusText":"

Guide on incorporating a "choose file" button to store an image in a mongodb database for a meteor application

Positioning a secondary div beside a primary div that is centered on the page