Question

The question that I am posting here is somewhat similar to question posted here but I am trying to set the properties upon the completion of ajax request.

The page displays all the feedbacks in ‘ul li’, each feedback has two voting elements ‘voteup’ and ‘votedown’

Now when the user clicks voteup element the vote is recorded using jquery’s ajax (i.e. vote function below)

The response text is populated in the ‘divProcessing’ div.

on the click of element voteup or votedown, I call the vote function as

vote('{$feedback.id},'voteup');

here is the code that I have written

function vote(action,feedbackId)
            {
                var $divEmail = $('#divProcessing');

                $.ajax({
                    type: 'get',
                    url: 'index.php?client='+$.getUrlVar('client')+'&page=ajax',
                    data: {option: 'vote', action: action, feedbackId: feedbackId},
                    dataType: 'html',
                    success: function(data,evt)
                    {
                        $divEmail.html(data)
                        .css({top:evt.pageY, left:evt.pageX})
                        .show();
                    },
                    beforeSend: function(){$divEmail.addClass('show_loading_in_center')},
                    complete: function(){$divEmail.removeClass('show_loading_in_center')}
                });
            }

Everything is working fine here but I need to show this ‘divProcessing’ near to the voting element being clicked (or near mouse position).

please help me show the divprocessing next to the img tag that is being clicked.

I hope I am able to explain my question clearly.

thanks

Answer 1

You might want to set the CSS position of the element to fixed. This will position the element relative to the screen, no matter where the element is defined and how scrolled the page is. This would be done by switching from:

.css({top:evt.pageY, left:evt.pageX})

To:

.css({position:'fixed', top:evt.screenY, left:evt.screenX})