Change browser cursor with Prototype.js

Question 1

Question by xain

I’m having problem changing the cursor when the page is loaded; my code is:

Event.observe(window, 'load', function() {
    document.body.style.cursor = 'wait';
     $$('select').each(function(s) {
        var ajaxRequest = new Ajax.Request(
            '/some_ajax_proc',
            {

When the page loads, the cursor doesn’t change. However it does with no problem in other event listeners further on such as:

   $('mytxt').observe('change', function() {
      document.body.style.cursor = 'wait';
   }

UPDATE: OK, it DOES change the cursor, but since there’s a document.body.style.cursor = 'default'; after the Ajax loop, it changes it back immediatly so I guess it is a threads issue. Any hints in this case ?

Answer

Answer by Nullpo

Nullpo

Have you tried this?

Ajax.Responders.register({
   onCreate: function() {
                if (Ajax.activeRequestCount === 1) {
                   //Code for change the cursor, something like this:
                   document.body.style.cursor = 'wait';
                }
             },
   onComplete: function() {
                  if (Ajax.activeRequestCount === 0) {
                     // End loading...
                     ....
                  }
               }
});

Answer

Answer by Starx

Starx

Since, you are already using jquery.

$('mytxt').observe('change', function() {
   $("body").css("cursor", "wait");
}

Question 2

Question by user1277170

user1277170

I have a webpage filled with divs, and when the page reaches 300px from the bottom, it loads more divs.
I’m having trouble finding a detection that works everywhere.

I need some JavaScript (i.e. not JQuery) if statement to put into the body’s onscroll function that will detect the browser scrolling below 300px from the bottom, which works with IE, FF, Chrome, Opera, Safari, Android browsers, iBrowsers, etc.

Answer

Answer by Starx

Starx

You have to know the position of the point, then checks the window scrollTop

if ($(window).scrollTop() > point) {
 //Carry On
}

Question 3

Question by Blender

Blender

Is it possible to add item to the default browser right button click menu?

Answer

Answer by alex

alex

No, but you can create your own.

Look at the event oncontextmenu().

Here is some good further reading.

Answer

Answer by Starx

Starx

You can’t modify the client’s application using a web page. If this would be possible, just think about how hackers could exploit our computer.

What you can do, is define your own custom menu, while user right clicks.

Check this jquery plugin: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

Question 4

Question by JaHelia

JaHelia

In a CSS file, is there a way to give a specific height for a DIV that only applies to Internet Explorer ONLY, and at the same time, give that same DIV another height that applies to all browsers except for Internet Explorer?

Answer

Answer by Starx

Starx

try this

<style>
    #mydiv { height:800px; }
</style>
<!--[if IE]>
<style>
    #mydiv { height:500px; }
</style>
<![endif]-->

Tag: browser

Change browser cursor with Prototype.js

Question by xain

Answer by Nullpo

Answer by Starx

Detect when Browser Scrolls Below a Certain Point

Question by user1277170

Answer by Starx

Adding to browser context menu?

Question by Blender

Answer by alex

Answer by Starx

how to give two heights to DIV (one for IE and second for other browsers)

Question by JaHelia

Answer by Starx

Please fill the form - I will response as fast as I can!