Background changes to blue color when a popup is moved across in IE8

V

venu madhav

Hi,
In my application I've a table which displays details obtained from
the database. It also has a dhtml popup which displays some more
details. Now when I move the popup across the page in IE8 the
background turns blue in color. I couldn't figure out the reason why?
One more problem I am facing is , when I move the popup to the
lower edge of the screen, the whole page is moving up ( along with the
scroll bar) and I am seeing white background after the whole page
moves up.
Can some one please help me in figuring out the reason.

Please let me know if you need any further information.

Thank you,
Venu.
 
R

rf

venu madhav said:
Hi,
In my application I've a table which displays details obtained from
the database. It also has a dhtml popup which displays some more
details. Now when I move the popup across the page in IE8 the
background turns blue in color. I couldn't figure out the reason why?
One more problem I am facing is , when I move the popup to the
lower edge of the screen, the whole page is moving up ( along with the
scroll bar) and I am seeing white background after the whole page
moves up.
Can some one please help me in figuring out the reason.

When you are moving the popup you are not cancelling mouse events. Those
events are getting through to the underlying page which thinks you are using
the mouse to select an area.

Perform the actions of "moving" the popup when there is no popup displayed.
You'll see what is happenning.
 
V

venu madhav

When you are moving the popup you are not cancelling mouse events. Those
events are getting through to the underlying page which thinks you are using
the mouse to select an area.

Perform the actions of "moving" the popup when there is no popup displayed.
You'll see what is happenning.

Thank you for the reply. I'll try disabling the mouse select events.
But what could be the reason for the entire page moving up?
 
R

rf

When you are moving the popup you are not cancelling mouse events. Those
events are getting through to the underlying page which thinks you are
using
the mouse to select an area.

Perform the actions of "moving" the popup when there is no popup
displayed.
You'll see what is happenning.

Thank you for the reply. I'll try disabling the mouse select events.
But what could be the reason for the entire page moving up?

Once again try this without the popup there. Left click and then move the
mouse below the viewport and the page will scroll up. That's how you select
stuff below the viewport, in just about every program that allows selection
that I have ever seen.
 
V

venu madhav

Thank you for the reply. I'll try disabling the mouse select events.
But what could be the reason for the entire page moving up?

Once again try this without the popup there. Left click and then move the
mouse below the viewport and the page will scroll up. That's how you select
stuff below the viewport, in just about every program that allows selection
that I have ever seen.- Hide quoted text -

- Show quoted text -

Sir,
I did what you've mentioned. Its true that the page moves below
if you click some where on the text and drag it. But the moving of the
view port ends where the scroll bar ends. But with the popup, even the
end of the scroll bar is moving up. Hence white space is showing up on
the screen with all the data part moved up. But this behavior is not
observed on Firefox.
Since I cant attach a screen shot here, if you don't have any
problem, I can send a screen shot to your mail. Plz let me know.

Thank you,
 
R

rf

Thank you for the reply. I'll try disabling the mouse select events.
But what could be the reason for the entire page moving up?

Once again try this without the popup there. Left click and then move the
mouse below the viewport and the page will scroll up. That's how you
select
stuff below the viewport, in just about every program that allows
selection
that I have ever seen.- Hide quoted text -

- Show quoted text -
Sir,
I did what you've mentioned. Its true that the page moves below
if you click some where on the text and drag it. But the moving of the
view port ends where the scroll bar ends. But with the popup, even the
end of the scroll bar is moving up.

Yes. That is what I would expect.

We have established that the mouse events are bubbling up to the document
level, and the document is being scrolled up when the cursor is dragged
below the bottom of the viewport.

Now, think about what happens when you have a popup there. You are dragging
the popup below the bottom of the viewport. When those drag events bubble up
the document is scrolled up.

What happens next? Your popup is below the bottom of the viewport *because
that is where you have just dragged it to*. So the document is scrolled up
as there is now content below the bottom of the viewport that needs to be
"selected".

What happens next? Your popup is below the bottom of the viewport *because
that is where you have just dragged it to*. So the document is scrolled up
as there is now content below the bottom of the viewport that needs to be
"selected".

What happens next? Your popup is below the bottom of the viewport *because
that is where you have just dragged it to*. So the document is scrolled up
as there is now content below the bottom of the viewport that needs to be
"selected".

See a pattern emerging here? The page would scroll to infinity if you had
enough time. The same thing would happen that ---> way if you were to drag
your popup off the right hand side of the viewport.
Hence white space is showing up on
the screen with all the data part moved up. But this behavior is not
observed on Firefox.

Firefox (and every other browser) handles events differently to IE.
Quirksmode has an article on the matter:
http://www.quirksmode.org/js/introevents.html
Since I cant attach a screen shot here, if you don't have any
problem, I can send a screen shot to your mail. Plz let me know.

No need. I know exactly what is going on :)
 
V

venu madhav

Yes. That is what I would expect.

We have established that the mouse events are bubbling up to the document
level, and the document is being scrolled up when the cursor is dragged
below the bottom of the viewport.

Now, think about what happens when you have a popup there. You are dragging
the popup below the bottom of the viewport. When those drag events bubbleup
the document is scrolled up.

What happens next? Your popup is below the bottom of the viewport *because
that is where you have just dragged it to*. So the document is scrolled up
as there is now content below the bottom of the viewport that needs to be
"selected".

What happens next? Your popup is below the bottom of the viewport *because
that is where you have just dragged it to*. So the document is scrolled up
as there is now content below the bottom of the viewport that needs to be
"selected".

What happens next? Your popup is below the bottom of the viewport *because
that is where you have just dragged it to*. So the document is scrolled up
as there is now content below the bottom of the viewport that needs to be
"selected".

See a pattern emerging here? The page would scroll to infinity if you had
enough time. The same thing would happen that ---> way if you were to drag
your popup off the right hand side of the viewport.

So, should we leave it as an expected behavior or is there any fix for
it? I also noticed it
moving to its right too :)
 
R

rf

Yes. That is what I would expect.
So, should we leave it as an expected behavior or is there any fix for
it? I also noticed it
moving to its right too :)

<sigh/>

Your drag/drop code, the bit that moves the popup window around, should not
let mouse events bubble up to the document level. I thought we covered that
back in my first or second reply.

The behaviour is expected when events are allowed to bubble up. This is not
the *required* behaviour. The required behaviour is for your drag/drop code
to action the mouse events and then cancel them.

Since I have not seen your code I cannot suggest a way to do this but things
like returning false from *every* mouse event handler, and setting
event::cancelbubble to true come to mind. It's been so long since I wrote
the only drag/drop handler I ever need that I can't remember the exact
details, especially the quirks one has to use to make IE play the game.

There are a million pages out there that have drag/drop in some form or
another. Search for one and look at the code. Specificaly look to see what
happens after they have actioned mouse events.
 
V

venu madhav

<sigh/>

Your drag/drop code, the bit that moves the popup window around, should not
let mouse events bubble up to the document level. I thought we covered that
back in my first or second reply.

The behaviour is expected when events are allowed to bubble up. This is not
the *required* behaviour. The required behaviour is for your drag/drop code
to action the mouse events and then cancel them.

Since I have not seen your code I cannot suggest a way to do this but things
like returning false from *every* mouse event handler, and setting
event::cancelbubble to true come to mind. It's been so long since I wrote
the only drag/drop handler I ever need that I can't remember the exact
details, especially the quirks one has to use to make IE play the game.

There are a million pages out there that have drag/drop in some form or
another. Search for one and look at the code. Specificaly look to see what
happens after they have actioned mouse events.

I am using DHTML window to open that popup. I am still trying to fix
it but couldn't till now. Shall I paste some code snippets related to
that so that you can give me some suggestions.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top