display appear where i am on page not only center

Question

Here is my ajax code, i have 81 products per page...
When i click add to cart button a div appears on the center of the page but when i add product to last or bottom in page, div always appears on the center of page and i need to scroll up the page to see it.
I want the result where i am on page, like if i am bottom of the page, I want the div to appear on bottom .

    <script type="text/javascript" >
        $(function() {
           $('a.addbtn').click(function(e){
                 e.preventDefault(); 
                 var quantity = $(this).attr("qty");
                 var prod_id = $(this).attr("prid");
                 var dataString = '&quantity=' + quantity + '&prod_id=' + prod_id;
                 if(quantity=='' || prod_id==''){
                    alert('some thing went wrong');
                 }
                 else{
                   $.ajax({
                      type: "GET",
                      url: "ajax_checkout.php",
                      data: dataString,
                      cache: false,
                      success: function(html){
                           $('.addcart').remove('');
                           $("#viewr").append(html);
                      }
                   });
                 }
                 return false;
            }); 
        });
    </script>

I would do this with `css` not with `js` although you could. — Jamie Hutber, Apr 10 '13 at 12:36
display appear in this

and ajax call this class
The Product nameadded.
' — Sunaina Yawar, Apr 10 '13 at 12:45

score 0 · Answer 1 · answered Apr 10 '13 at 12:48

0

Whilst you can style this with jQuery and set an inline style with top I would always just use css and place it at the top of the browser. Although this means, until you close the box it will always be there, it won't be fixed where it opens.

 .addcart {
      position: fixed;
      top: 10px;
 }

Should do the trick

answered Apr 10 '13 at 12:48

Jamie Hutber

26,790
46
179
291

its work but could you make like faceb ook ? or like other website means its position alway center and its not fixed ?? but appear only where i need ? – Sunaina Yawar Apr 10 '13 at 12:58

Hmxa Mughal · Accepted Answer · 2013-04-11T08:37:18.227

0

Make the div viewr's position to fixed. like so:

    #viewr{    
        width:30em;
        height:18em;
        border: 1px solid #ccc;
        background-color: #f3f3f3;
        display:none;
    }

use whatever class you want to style it
Now add this function in the jquery, this will make the appear on the center of the screen:

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
};

Now in your success function do the following to make it visible and invisible after some time:

success: function(html){
    $('#viewr').html(html);
    $('#viewr').fadeIn('slow').center().delay(2000).fadeOut('slow');
}

Do not use append(), that will always append the html in the div.
The delay amount is in milliseconds, so set it to whatever you require.
This should do the trick

edited Apr 11 '13 at 08:37

answered Apr 10 '13 at 12:56

Hmxa Mughal

394
1
4
17

also its works but its more more better if is not fixed ? :(( – Sunaina Yawar Apr 10 '13 at 13:04
a box appear slow and suddenly going fadeout. – Sunaina Yawar Apr 10 '13 at 13:17
change the set interval value to as much time as you need, it is now set to only 500 milliseconds, make it 1000 or 2000 to suit your need – Hmxa Mughal Apr 10 '13 at 13:19
hmm but my main problem solve little why its fixed position ? i dont need its fixed just like a msg appear wher i am and when i scoll page then its dont scroll i dont want it fixed :(((( i want it like facebook msg just appear and dont scroll with page – Sunaina Yawar Apr 10 '13 at 13:25
its work good but now problem little bit msg appear still only center . and u do all wich i want but 1 problem is that msg appear in center. and i want it where i am on the page. if i am bottom display msg bottom in center. like we send request frnd in facebook we saw msg always center, we dont need to go top og page for read msg :)) if you this i will be thank full to you :(( – Sunaina Yawar Apr 10 '13 at 14:00

display appear where i am on page not only center

2 Answers2