how do I display a div after ajax call success next to mouse position
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
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})
精彩评论