Links

Lists

Latest Updates

Ruby On Rails List
Python list
Advanced Java
The JavaScript List
Apache Users
Full Disclosure
Linux Security

Search the archives!
Having a development problem? Ask eDevelopment.org forums!

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Javascript] Internet Explorer, iFrames and JavaScript

  • From: Travis.Falls at thehartford.com (Falls, Travis D (HTSC, CASD))
  • Subject: [Javascript] Internet Explorer, iFrames and JavaScript
  • Date: Thu Jun 30 13:43:43 2005
Do you have a public site that we can see this working/not working in?  I
tried to get your code to work that you sent and it doesn't... not even in
fire fox.  thanks.  :-)
 

Travis D. Falls | Consultant   RAFT.Net   IT | 860.547.4070 |
travis.falls@xxxxxxxxxxxxxxx 

-----Original Message-----
From: javascript-bounces@xxxxxxxxxx [mailto:javascript-bounces@xxxxxxxxxx]On
Behalf Of Julien Nadeau
Sent: Thursday, June 30, 2005 1:13 PM
To: javascript@xxxxxxxxxx
Subject: [Javascript] Internet Explorer, iFrames and JavaScript


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/'
<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




*************************************************************************
PRIVILEGED AND CONFIDENTIAL: This communication, including attachments, is
for the exclusive use of addressee and may contain proprietary,
confidential and/or privileged information.  If you are not the intended
recipient, any use, copying, disclosure, dissemination or distribution is
strictly prohibited.  If you are not the intended recipient, please notify
the sender immediately by return e-mail, delete this communication and
destroy all copies.
*************************************************************************

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.LaTech.edu/pipermail/javascript/attachments/20050630/6f3be523/attachment-0001.html