Changing mouse into hourglass over all objects including drop downs

Discussion in 'Javascript' started by mcraven.2@wright.edu, Jul 23, 2006.

  1. Guest

    I know this works on all objects except drop down boxes.

    doc = document.all
    for (i=0;i<doc.length;i++)
    {
    doc(i).style.cursor = 'wait';
    }

    Is it possible to make a cursor into an hourglass over a drop down?
    , Jul 23, 2006
    #1
    1. Advertising

  2. RobG Guest

    Re: Changing mouse into hourglass over all objects including dropdowns

    wrote:
    > I know this works on all objects except drop down boxes.
    >
    > doc = document.all


    document.all is a proprietary MS feature that has been copied to some
    extent by other browsers, but can be considered deprecated (since IE 5)
    in favour of appropriate W3C standards - in this case,
    document.getElementsByTagName should do the trick but may not be necessary.

    Using script to do style stuff is clumsy and should really only be done
    where there is no other way.


    > for (i=0;i<doc.length;i++)
    > {
    > doc(i).style.cursor = 'wait';
    > }
    >
    > Is it possible to make a cursor into an hourglass over a drop down?


    If by 'drop down' you mean an HTML select element, yes. You can use a
    'wait' cursor over all select elements using CSS:

    <style type="text/css">
    select {cursor: wait;}
    </style>

    You can use selectors to change the cursor based on the element's id or
    class attributes. You can also use in-line styles:

    <select style="cursor: wait;" ... >


    Do you still want to use script?


    --
    Rob
    RobG, Jul 23, 2006
    #2
    1. Advertising

  3. Jim Ley Guest

    Re: Changing mouse into hourglass over all objects including drop downs

    On Sun, 23 Jul 2006 13:24:06 +1000, RobG <> wrote:

    > wrote:
    >> for (i=0;i<doc.length;i++)
    >> {
    >> doc(i).style.cursor = 'wait';
    >> }
    >>
    >> Is it possible to make a cursor into an hourglass over a drop down?

    >
    >If by 'drop down' you mean an HTML select element, yes. You can use a
    >'wait' cursor over all select elements using CSS:
    >
    ><style type="text/css">
    > select {cursor: wait;}
    ></style>
    >
    >You can use selectors to change the cursor based on the element's id or
    >class attributes. You can also use in-line styles:
    >
    > <select style="cursor: wait;" ... >
    >
    >
    >Do you still want to use script?


    The script above is equivalent to using the above.

    OP - the better approach to this is not to change every cursor -
    that's really, really slow - just add a mousemove handler to the page
    and change the cursor of the element under the cursor, much more
    efficient.

    Jim.
    Jim Ley, Jul 23, 2006
    #3
  4. RobG Guest

    Re: Changing mouse into hourglass over all objects including dropdowns

    Jim Ley wrote:
    > On Sun, 23 Jul 2006 13:24:06 +1000, RobG <> wrote:
    >
    >> wrote:

    [...]
    >>> Is it possible to make a cursor into an hourglass over a drop down?

    >> If by 'drop down' you mean an HTML select element, yes. You can use a
    >> 'wait' cursor over all select elements using CSS:
    >>
    >> <style type="text/css">
    >> select {cursor: wait;}
    >> </style>
    >>
    >> You can use selectors to change the cursor based on the element's id or
    >> class attributes. You can also use in-line styles:
    >>
    >> <select style="cursor: wait;" ... >

    [...]
    >
    > The script above is equivalent to using the above.
    >
    > OP - the better approach to this is not to change every cursor -
    > that's really, really slow - just add a mousemove handler to the page
    > and change the cursor of the element under the cursor, much more
    > efficient.


    Do you mean something like:

    <script type="text/javascript">

    function doWait(e){
    var tgt = e.target || e.srcElement;
    if (tgt && tgt.tagName && tgt.style){
    if ('select' == tgt.tagName.toLowerCase()){
    tgt.style.cursor = 'wait';
    } else {
    tgt.style.cursor = 'normal';
    }
    }
    }

    </script>

    <body onmouseover="doWait(event);"> ... </body>


    I think CSS provides a much more elegant solution.


    --
    Rob
    RobG, Jul 23, 2006
    #4
  5. Giggle Girl Guest

    RobG wrote:
    > Jim Ley wrote:
    > > On Sun, 23 Jul 2006 13:24:06 +1000, RobG <> wrote:
    > >
    > >> wrote:

    > [...]
    > >>> Is it possible to make a cursor into an hourglass over a drop down?
    > >> If by 'drop down' you mean an HTML select element, yes. You can use a
    > >> 'wait' cursor over all select elements using CSS:
    > >>
    > >> <style type="text/css">
    > >> select {cursor: wait;}
    > >> </style>
    > >>
    > >> You can use selectors to change the cursor based on the element's id or
    > >> class attributes. You can also use in-line styles:
    > >>
    > >> <select style="cursor: wait;" ... >

    > [...]
    > >
    > > The script above is equivalent to using the above.
    > >
    > > OP - the better approach to this is not to change every cursor -
    > > that's really, really slow - just add a mousemove handler to the page
    > > and change the cursor of the element under the cursor, much more
    > > efficient.

    >
    > Do you mean something like:
    >
    > <script type="text/javascript">
    >
    > function doWait(e){
    > var tgt = e.target || e.srcElement;
    > if (tgt && tgt.tagName && tgt.style){
    > if ('select' == tgt.tagName.toLowerCase()){
    > tgt.style.cursor = 'wait';
    > } else {
    > tgt.style.cursor = 'normal';
    > }
    > }
    > }
    >
    > </script>
    >
    > <body onmouseover="doWait(event);"> ... </body>
    >
    >
    > I think CSS provides a much more elegant solution.
    >
    >
    > --
    > Rob


    I found this script which uses the BODY method:

    <html>
    <head>
    <script type="text/javascript">

    function Change_Cursor(Param1)
    {
    document.body.style.cursor = Param1
    }

    </script>

    <body>

    <a href="#" onclick="Change_Cursor('wait')">Change Cursor to
    Wait</a><br>
    <a href="#" onclick="Change_Cursor('pointer')">Change Cursor to
    Pointer</a><br>
    <a href="#" onclick="Change_Cursor('default')">Change Cursor to
    Default</a><br>

    <form>
    <select>
    <option>ABCDFEGHIJKLMNO</opion>
    <option>PQRSTUVWXYZ1234</opion>
    <option>567890ABCDFEGHI</opion>
    </select>
    </form>

    </body>

    </html>

    Problem is, when you moueover elements like the LINKS or the SELECT
    box, it reverts to the default behavior for those items.

    Maybe you should step through every node stemming from the BODY and
    change it over? And then to reset re-step and change settings back to
    default?

    Someone must have code this already, right?

    Giggle Girl
    Giggle Girl, Jul 25, 2006
    #5
  6. 9.co.uk Guest

    wrote:
    > I know this works on all objects except drop down boxes.
    >
    > doc = document.all
    > for (i=0;i<doc.length;i++)
    > {
    > doc(i).style.cursor = 'wait';
    > }
    >
    > Is it possible to make a cursor into an hourglass over a drop down?


    I assume what you want to do is turn the hourglass on and off when
    something is happening.

    One solution would be to size a floating DIV to cover the whole page
    with a z-index high enough to ensure it is in front of all other
    elements and set the cursor just for that DIV.

    You can then just show/hide the DIV as you see fit. This has the
    side-effect of disabling all the elements on the page which may or may
    not be what you want.
    9.co.uk, Jul 26, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Davmagic .Com

    Need Script For Drop Downs

    Davmagic .Com, Oct 14, 2004, in forum: Perl
    Replies:
    0
    Views:
    440
    Davmagic .Com
    Oct 14, 2004
  2. JohnZing

    list of drop downs

    JohnZing, Jan 30, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    399
    JohnZing
    Jan 30, 2005
  3. =?Utf-8?B?TWlrZQ==?=

    dual drop downs

    =?Utf-8?B?TWlrZQ==?=, Mar 9, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    549
    =?Utf-8?B?VGltIFN0YWxs?=
    Mar 9, 2005
  4. jaysch
    Replies:
    0
    Views:
    1,220
    jaysch
    Apr 30, 2011
  5. sysadm
    Replies:
    2
    Views:
    443
    sysadm
    May 16, 2006
Loading...

Share This Page