CODEWITHSUNDEEP
jqueryhtmlcssajax
pawel
pawel

Reputation: 6136

Submitting forms using jquery $.ajax - change the view of form

I this is example of my list of forms on my page: http://jsfiddle.net/GSC3x/

It works great, but when I have a lot of list items on my page, it's quite not user-friendly. I want to change the way of displaying forms after clicking on the one of list items.

I want it in a way, that when I click on the item, the form shows on the center of the page, and the other list items are invisible when the form is ON - when I click on my previously clicked item again - it should return into normal list view - how to do it?

@@UPDATE - added hyper professional image to show how it should work! : ]

enter image description here

Upvotes: 1

Views: 248

Answers (3)

Rajesh Tandukar
Rajesh Tandukar

Reputation: 403

Instead of $(e.target).next(".slidingDiv").slideToggle(); you can add the code below to animate the form to the center.

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

Upvotes: 1

Priyank Patel
Priyank Patel

Reputation: 3535

Try below my code...

CSS append below

ul{
    position:relative;
}

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

and 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();
       }   
    });
});

Upvotes: 1

Rajesh Tandukar
Rajesh Tandukar

Reputation: 403

$(document).ready(function(){

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

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

Upvotes: 1

Related Questions