p:ajaxStatus at mouse pointer position

[Mucuraga]

I would like to show ajax spinner animated gif near mouse position at the moment of mouse click.
How can achieve this?

Regards

[kukeltje]

Why not do:

Code: Select all

.myAjaxWaitClass {
    cursor:wait;
}

http://www.w3schools.com/cssref/playit. ... reval=wait
or

Code: Select all

.myAjaxProgressClass {
    cursor:progress;
}

http://www.w3schools.com/cssref/playit. ... l=progress

or even

Code: Select all

.myAjaxCustomCursor {
    cursor: url(myImage.gif);
}

http://www.w3schools.com/cssref/playit. ... ur%29,auto

[Mucuraga]

Why not do:

Code: Select all

.myAjaxWaitClass {
    cursor:wait;
}

Not because showing artistic spinner is better

[kukeltje]

I edited my post... with some more examples... please have a look again

[kukeltje]

Personally I think that showing a the 'progress' cursor is better than showing 'artistic spinner' is 'better'.

[cagatay.civici]

Hi Ronald,

I've upgraded your account to PrimeFaces Elite.

Please login at;

http://www.primefaces.org/elite/

You should be able to see all the elite stuff available.

Have a nice weekend!

Btw your intercommit email doesn't seem to be working for me.

Optimus

[kukeltje]

Thanks, really appreciate it. I might sometimes have critisism, but really like what is being done. Will send a more detailed response via a new email address (due to a takeover, the former address indeed does not work anymore)

[jepsar]

Indeed, progress is better IMO

Code: Select all

<p:ajaxStatus ...
              onstart="$('html').addClass('progress')"
              oncomplete="$('html').removeClass('progress')">
    ...
</p:ajaxStatus>

Code: Select all

html.progress, html.progress * {
    cursor: progress !important;
}

See also https://stackoverflow.com/questions/157 ... n-progress

[landavid009]

Why not do:

Code: Select all

.myAjaxWaitClass {
    cursor:wait;
}

http://www.w3schools.com/cssref/playit. ... reval=wait
or

Code: Select all

.myAjaxProgressClass {
    cursor:progress;
}

http://www.w3schools.com/cssref/playit. ... l=progress

or even

Code: Select all

.myAjaxCustomCursor {
    cursor: url(myImage.gif);
}

http://www.w3schools.com/cssref/playit. ... ur%29,auto

You can achieve this with a little help of CSS and jQuery. With CSS, you can create a class which changes the cursor on the entire document. With jQuery, you can add/remove that CSS class. Under the covers, PrimeFaces uses jQuery for the ajax magic and you can for PrimeFaces <4 hook on standard jQuery ajaxStart and ajaxStop events and for PrimeFaces 4+ hook on PrimeFaces specific pfAjaxSend and pfAjaxComplete events to perform the add/remove of that CSS class.

CSS:

html.progress, html.progress * {
cursor: progress !important;
}
(the !important overrides any style set by style attribute and stronger CSS selectors for the case that)

jQuery and PrimeFaces:

$(document).on("ajaxStart pfAjaxSend", function() {
$("html").addClass("progress");
}).on("ajaxStop pfAjaxComplete", function() {
$("html").removeClass("progress");
});
For the case you're also using standard JSF <f:ajax> elsewhere and would like to have the same progress indicator, here's how you can do that:

jsf.ajax.addOnEvent(function(data) {
$("html").toggleClass("progress", data.status == "begin");
});






autoclicker for minecraft