473,320 Members | 1,865 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

div in window to be positioned over iframe

Hi

i am generating a div in my window which moves with my cursor on the screen.
this works fine until i try to move the cursor over an iframe in the window.
if i use the z-index the div moves in front of the iframe, but the moment the cursor is inside the iframe the div stops.

i use the following code as javascript:
"
<script type="text/javascript">
function cursorPos()
{
var Arr = new Array()
<%set getnames=myconn.execute("select * from names order by name asc")
iCnt=0
while not getnames.eof%>
Arr[<%=iCnt%>]= '<table><tr><td align=center><span style="font-variant: small-caps; text-decoration: blink; letter-spacing: 2px"><b><%=getnames("name")%></b></span></td></tr><tr><td align=center><font size=1 face=verdana><%=getnames("city")%>, <%=getnames("country")%></font></td></tr><tr><td><font size=1 face=verdana>[scroll over the screen to see who respects you more]</font></td></tr>';
<%iCnt=iCnt+1
getnames.movenext
wend
getnames.close%>
var xpos = event.clientX+1
var ypos = event.clientY+1
name = (ypos/xpos)
if (name > 1)
{
name=1/name
}
name = Math.round(2000*name)

document.getElementById('zzz').style.left=event.cl ientX
document.getElementById('zzz').style.top=event.cli entY
document.getElementById('zzz').innerHTML='<font face=verdana size=1 color=000000>'+Arr[name]+'</font>'
}
</script>"

where Arr[name] contains the content of the div.

the div looks like:
"<div id="zzz" style="padding: 5px; position: absolute; left: 1; top: 1; background-color: #FFFF00; z-index: 100;" ></div>"

and the event is triggered by:
"<body onmousemove="cursorPos()" bgcolor="<%=bodyback%>" topmargin=10 leftmargin=10 align=center>"

the iframe looks like:
"<IFRAME SRC="sitecontent.asp" STYLE="position:absolute; z-index:0;"> name="content" frameborder="0" width="100%" height="100%" scrolling="auto"></iframe>"

it looks like the event is not fired within the iframe.
i have tried to fire it inside the iframe but that does not work either.

what can i do?

thanks for your help!

lefrison
Jun 16 '06 #1
4 10592
Hi

who can help me out here?

i have a script which generates a div following the cursor.
the document containing the script also contains iframes.

if the cursor moves into an iframe the script works fine as long as the cursor moves down and to the right.
the moment the cursor goes up or left the script stops functioning.

what could be the cause?

appreciate any help!

henk jelt
Jun 17 '06 #2
Banfa
9,065 Expert Mod 8TB
I don't know this for a fact (if the page is available on the web post a link to it) but I suspect it is due to the way events bubble throw the DOM.

When you move the mouse across the browser page events are generated the are sent to the lowest level element that the mouse is over *the div in your case I think). If the div does not handle this event and prevent it being sent on the event is then bubbled up the DOM tree so next it is sent to the parent element of the current element and so on until it reachs the top of the tree, the Window.

Now you iFrame contains it's own page and so it's own DOM tree and I do not believe that that is linked to the DOM tree of it's containing page so when you move the mouse over the Iframe the events start bubbleing up the DOM tree for the iframe and no longer go to the tree of the div you are moving and the div stops moving.

What can you do? Well off the top of my head I'm not really sure but what you need to do is communiate the mouse position from them iframe where the event arrives to the containing window so you can re-postion your div.

As a final not I should point out that this is all educated guess on my part I have not verified that this happens anywhere so you should test my hypothysis to see if it is true before writing the code based on it.
Jun 17 '06 #3
Hi Banfa

thanks for the reply.
i also think it has something to do with different DOM environments in the parent and the iframe.
i have tried three options, and all work partially.

the idea is to have this div following the cursor everywhere on the screen, also in the iframes without losing the possibility to click on links.

Option 1 is the one i described, but here the div only follows if the cursor is moving down and to the right.

With option 2 i put the same script in the iframe, and that works ... but not completely. the moment the cursor enters the iframe the iframe script picks it up and a div in the iframe appears. however the old div in the parent still remains visible. i have tried to make it invisible with onmouseleave but that does not work. a second disadvantage is that the div within the iframe remains in the iframe-window.

With option three i have defined a second table (the first one containing the content of the site), covering the whole parent window with a z-index of 200. i have projected the div in this table, and then it works, due to the z-index. the div perfectly follows the cursor on the whole screen. the downside of this is that the table containing the sitecontent lies under this layer, and the links are not accessible anymore.

i now think of a variation on option 3: to introduce a button to disable the moving div (ie decreasing the z-index) to enable the visitor to access the site. it is however not very userfriendly.

do you (or any of the other readers) have tips, comments or other suggestions?

thanks

henk jelt
Jun 18 '06 #4
Hi all

thanks for the help.
i've solved it with option 3.

i have defined a table covering the whole screen with z-index 200 which contains the moving div. i have also defined a table with z-index 10, also covering the whole screen.
initially this table lies underneath the first table.
in both tables i have defined a button which changes the z-index of the first table, toggling between -1 and 200. in this way i can just disable the moving div.

for anybody else with a similar problem.
Jun 19 '06 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

5
by: Lee | last post by:
I am using a modal window and an iFrame to try and pull a return value back. I am doing this across domains. I have the value returned from the modal window to the iFrame window but I can not...
5
by: Reply Via Newsgroup | last post by:
Folks, I am specifically using an IFRAME but am also interested if this is possible via a window opened using window.open Basically - I have a popup window that I use for uploads - When an...
3
by: Russell | last post by:
I have a quirky issue that I believe involves timing and only 2 hairs left to pull. I have a modal dialog that is an IFrame. The IFrame contains another window - which contains the appropriate...
1
by: nospam | last post by:
All I am trying to achieve the following: Main window page's asp code writes the following line to launch a popup window (note the IFRAME has to be in the popup window, it cannot be in the...
3
by: Daz | last post by:
Hi everyone. I have just been making a JavaScript chat applet, which should open in a new child window. It does all of this fine, and works within Firefox beatifully. However, IE thinks it's...
4
by: Will Hartung | last post by:
I was wondering if there was a portable way to make a popup window that autosizes to the content (or a specific div within the content). I have some dialogs that would look nicer in a "proper"...
1
by: Bhishm | last post by:
Hi, I have a window (192.168.1.223/test.ph) in which one iframe continuously runs. I open another window from that window (192.168.1.223/test1.php) which also runs an iframe continuously. ...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.