OnBlur not working !

[EviL KerneL]

Hi -

I cannot seem to get these two events to work together. If I change
them to say onmousedown and onmouseup, they seem to work fine. In this
case, the onclick appears to work properly but onblur does not kick
in.

<a href="javascript:submitCheck();"><img border="0" alt="Next"
name="btnNext" src="Resources/SurveyButtons/Next.gif"
onclick="this.src='Resources/SurveyButtons/Wait.gif';"
onblur="this.src='Resources/SurveyButtons/Next.gif'"></a>

Any ideas? am i doing something wrong?

thanks!

 

[Michael Winter]

[snip]

<a href="javascript:submitCheck();"><img border="0" alt="Next"
name="btnNext" src="Resources/SurveyButtons/Next.gif"
onclick="this.src='Resources/SurveyButtons/Wait.gif';"
onblur="this.src='Resources/SurveyButtons/Next.gif'"></a>

Any ideas? am i doing something wrong?

An image can never get focus, therefore it can never blur.

Check whether an element supports an intrinsic event before trying to use
it:

<URL:http://www.w3.org/TR/html4/struct/objects.html#h-13.2>

If you can read the DTD, you should see that an IMG element only supports
those intrinsic events listed by the "events" parameter entity.

Mike

 

[Evil Kernel]

[snip]

<a href="javascript:submitCheck();"><img border="0" alt="Next"
name="btnNext" src="Resources/SurveyButtons/Next.gif"
onclick="this.src='Resources/SurveyButtons/Wait.gif';"
onblur="this.src='Resources/SurveyButtons/Next.gif'"></a>

Any ideas? am i doing something wrong?

An image can never get focus, therefore it can never blur.

Check whether an element supports an intrinsic event before trying to use
it:

<URL:http://www.w3.org/TR/html4/struct/objects.html#h-13.2>

If you can read the DTD, you should see that an IMG element only supports
those intrinsic events listed by the "events" parameter entity.

Mike

Is there then a way to create an event such as 'onmousedown' bring up
a small, centered, scroll-less, toolbar-less window that says Please
wait... while the next page loads? that is what I am trying to
accomplish here.

thanks

 

[Martin Walke]

You could use the <input type="image"... construct

Martin

[snip]

<a href="javascript:submitCheck();"><img border="0" alt="Next"
name="btnNext" src="Resources/SurveyButtons/Next.gif"
onclick="this.src='Resources/SurveyButtons/Wait.gif';"
onblur="this.src='Resources/SurveyButtons/Next.gif'"></a>

Any ideas? am i doing something wrong?

An image can never get focus, therefore it can never blur.

Check whether an element supports an intrinsic event before trying to use
it:

<URL:http://www.w3.org/TR/html4/struct/objects.html#h-13.2>

If you can read the DTD, you should see that an IMG element only supports
those intrinsic events listed by the "events" parameter entity.

Mike

 

[Michael Winter]

[snip]

Is there then a way to create an event such as 'onmousedown' bring up a
small, centered, scroll-less, toolbar-less window

Not a window, no. But you can use a DIV.

that says Please wait... while the next page loads? that is what I am
trying to accomplish here.

How about:

<URL:http://www.mlwinter.pwp.blueyonder.co.uk/clj/kernel/wait.html>

The submit button is actually just a regular button and for demonstration
purposes only. I would actually put the showWait() function into a submit
listener on the form, integrated into any validation code. However, that's
a little harder to demonstrate.

If you need to tweak the content of the box, you'll probably have to
adjust the CSS. You'll want to note of a few things:

1) The nested DIVs are intentional. It should avoid the IE5 box model bug
without the need to use the Tantek hack, but I can't test that. The inner
DIV has it's width and height set, whilst the outer DIV sets margins,
padding and borders.
2) There is a conditional comment that forces IE to use absolute
positioning. Preferably, the DIV is given a fixed position so that it
doesn't move when scrolled. Unfortunately, IE doesn't support this, but
decent browsers like Mozilla and Opera do. You could emulate it with a
script, but I'm not going to write that (feel free to, though).
3) If you change the content of the inner DIV significantly, you'll have
to recalculate the margins. It's simple enough, really. Take the content
width of the inner DIV (currently 8em), add the padding twice (once for
each side - currently 1em), and divide by two. This is the *negative*
margin for the outer DIV (currently -5em). Do the same for the height. If
you do change the width, it would be wise to round the value up to the
next 0.5em. Don't try to get the value exact or you might make it too
small on some configurations.

I have tested this with Opera 7.54, Mozilla 1.7.3, Firefox 0.9.3, Netscape
7.2 and IE6, and there are no problems.

It won't work with NN4, and I'm not going to take the effort to change
that (too much like hard work).

Hope that helps,
Mike

 

[Michael Winter]

On Wed, 29 Sep 2004 12:23:51 GMT, Michael Winter

[snip]

2) There is a conditional comment that forces IE to use absolute
positioning. Preferably, the DIV is given a fixed position so that it
doesn't move when scrolled. Unfortunately, IE doesn't support this, but
decent browsers like Mozilla and Opera do. You could emulate it with a
script, but I'm not going to write that (feel free to, though).

Actually I will. Unless it's a small page, you'll need it.

A second version of the page can be found at

<URL:http://www.mlwinter.pwp.blueyonder.co.uk/clj/kernel/wait2.html>

There are a few changes to the page, but the main change is a new script
block within the conditional comment that changes the position of the
outer DIV when the page is scrolled. I also moved the button down the page
to demonstrate the scrolling.

I've tested this page with, and without, a DOCTYPE and is works with both,
but I strongly suggest you include one. Again, this hasn't been tested
with any IE versions other than IE6/Win. I don't know how it will act with
earlier versions, or versions ported to other platforms.

[snip]

Mike