Search the archives!
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[Javascript] Internet Explorer, iFrames and JavaScript
- From: junado at junado.com (Julien Nadeau)
- Subject: [Javascript] Internet Explorer, iFrames and JavaScript
- Date: Thu Jun 30 13:28:17 2005
Hi,
First of all, as I'm new to this list, let me introduce myself. I'm a
20 years old student (studying in mechanical engineering) from Quebec
in Canada. I have been doing web programming (mostly html/css/php/
mysql) for the last 3 to 4 years as a hobby, as a freelance and as a
part time job. I recently turned to JavaScript for some of my
programming needs, which it filled so far, but I'm also learning
that, like CSS, JavaScript is extremely browser dependant.
So I have this little script that a friend sent me, which I modified
to fit my needs, that create a popup window on my site. The popup
itself is a <div> that can be dragged around the page. I'm using a
<iframe> in the main popup's <div> in order to display content.
Everything is working seemlessly in Safari (v2.0), Firefox (v1.0.4 on
my Mac) and Firefox on a PC, but somehow, Internet Explorer 6 refuses
to cooperate.
Basically, here's what my HTML code looks like:
<div id="floatingWindow" style="left: -1000px; top: -1000px;">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0"
height="36">
<tr>
<td id="floatingTitle" width="100%">
<layer width="100%" onSelectStart="return false;">
<layer id="floatingTitleText" width="100%"
onMouseover="isHot=true;if (isN4) ddN4(theLayer);"
onMouseout="isHot=false;">
Title
<a href="#" onClick="hideMe();return false;">
(close)</a>
</layer>
</layer>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF" colspan="1">
<iframe id="floatFrame" style="border: 1px solid black;"
src=""></iframe>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
This is my floating window, and this code is put right after the
<body> tag.
Here's also an example on how I would call the function to show the
window:
<a href="javascript:showMe(200,200,250,250,'http://www.perdu.com/',
'Window title');">show</a>
And finally, here's the JavaScript file that's attached to my HTML page:
/* floatingWindow.js */
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;
// outInit is used for module to init the variable whichDog
// which is needed in order to use the extended window
function outInit() {
whichDog=isIE ? top.document.all.floatingWindow :
top.document.getElementById("floatingWindow");
whichFTT=isIE ? document.all.floatingTitleText :
top.document.getElementById("floatingTitleText");
whichFF=isIE ? document.frames("floatFrame") :
top.document.getElementById("floatFrame");
//whichFTT= top.document.all.floatingTitleText;
//whichFF= top.document.all.floatFrame;
}
function ddInit(e){
topDog=isIE ? "BODY" : "HTML";
hotDog=isIE ? event.srcElement : e.target;
outInit();
while (hotDog.id!="floatingTitle"&&hotDog.tagName!=topDog){
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="floatingTitle"){
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}
function dd(e){
if (!ddEnabled) return;
whichDog.style.left=isIE ? nowX+event.clientX-offsetx + 'px' : nowX
+e.clientX-offsetx + 'px';
whichDog.style.top=isIE ? nowY+event.clientY-offsety + 'px' : nowY
+e.clientY-offsety + 'px';
return false;
}
function ddN4(whatDog){
if (!isN4) return;
N4=eval(whatDog);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown=function(e){
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e){
if (isHot){
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function(){
N4.releaseEvents(Event.MOUSEMOVE);
}
}
function hideMe(){
if (isIE||isNN) {
whichDog.style.visibility="hidden";
top.document.getElementById("floatFrame").style.height = 0 + 'px';
} else if (isN4) {
top.document.floatingWindow.visibility="hide";
top.document.floatFrame.style.height = 0 + 'px';
}
}
// int int int int str str
function showMe(pLeft, pTop, pWidth, pHeight, pUrl, pTitle){
if (isIE||isNN) {
whichDog.style.visibility="visible";
whichDog.style.left = pLeft + 'px';
whichDog.style.top = pTop + 'px';
whichDog.style.height = pHeight + 'px';
whichDog.style.width = pWidth + 'px';
whichFTT.innerHTML = pTitle + '\n<a href="#" onClick="hideMe
();return false;">(close)</a>';
whichFF.style.height = parseInt(pHeight)-26 + 'px';
whichFF.style.width = pWidth + 'px';
whichFF.src = pUrl;
} else if (isN4) {
top.document.floatingWindow.visibility="show";
top.document.floatingWindow.left = pLeft + 'px';
top.document.floatingWindow.top = pTop + 'px';
top.document.floatingWindow.height = pHeight + 'px';
top.document.floatingWindow.width = pWidth + 'px';
top.document.floatingTitleText.innerHTML = pTitle + '\n<a
href="#" onClick="hideMe();return false;">(close)</a>';
top.document.floatFrame.height = pHeight-24 + 'px';
top.document.floatFrame.width = pWidth + 'px';
top.document.floatFrame.src = pUrl;
}
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
/* end floatingWindow.js */
As I said, this code works flawlessly in both Safari and Firefox.
However, when I test it on Internet Explorer 6, when I call the showMe
(); function, everything related to whichDog.[anything] works, but
everything relating to whichFTT or whichFF fails and stops the
script's execution so I get presented with a nicely sized container
window, but the title is not altered to what it should be nor is the
iframe sized appropriately or given any value for the .src attribute.
I've been pulling my hairs out for a few days now and I can't seem to
figure out what's wrong. Any help would be greatly appreciated!
Thank you very much for taking the time to read through this!
Julien Nadeau
junado at junado dot com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.LaTech.edu/pipermail/javascript/attachments/20050630/92f3d6d4/attachment.html
- Prev by Date: [Javascript] (no subject)
- Next by Date: [Javascript] A loop for this script?
- Previous by thread: [Javascript] regexp help: matching selectors
- Next by thread: [Javascript] Internet Explorer, iFrames and JavaScript
- Index(es):