Solved

iframe z-index workaround or other solution.

Posted on 2003-11-10
20
2,494 Views
Last Modified: 2012-05-04
I have a dymanic site that uses i-frames to call up specific content from different databases. This is only an issue on the home page as it contains information from several databases in a summary type fashon. BTW site uses FileMaker Pro on a Mac. I know ouch!

Here is my question:
I am redesigning our navigation to use .js dropdown and the menu is always behind the iframe no matter what z-index I assign to it. Is there a way to call out dynamic content in an iframe or something similar and be able to assign z-index to it?

Example of iframe content link:
http://www.somesite.com/FMPro?-DB=archives&-lop=and&-op=eq&Ad%20Type=reprint&-token=%5BFMP-currenttoken%5D&-sortfield=magazine%20number&-sortorder=descending&-format=ourPublication/recentArticlesHome.htm&-max=5&-intro=yes&-find

Any assistance would be greatly appreciated.

Very best regards

0
Comment
Question by:multilingual
  • 9
  • 9
  • 2
20 Comments
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
The ifrmae does support the z-index property from MSIE 5.5 and on, but this won't work in the Mac browsers Safari 1.0, IE 5.2.2 and Opera 6.0. Are you using one of those?
0
 

Author Comment

by:multilingual
Comment Utility
Our computers in house run Mac OS 9.2 and IE 5.1.  The z-index does not work in IE 5.1 browser either. I does work properly in Netscape 7.? (Mac) though. We refer to the site often and I need it to work properly in IE.

I thought of using the following script to load the dynamic page in a certain layer and then assigning the layer the proper z-index, but I have not had any success getting this following theory to work. BTW below example found in archive. Author is : COBOLdinosaur

<script language='JavaScript'>
<!--
function include(lyr,url)
{
   IE=(document.all) ? true : false;
   if (IE)
   {
      // IE version
      var xml = new ActiveXObject("Microsoft.XMLHTTP");
      xml.Open( "GET", url, false );
      xml.Send()
      document.getElementById(lyr).innerHTML=xml.responseText;
   }
   else
   {
      // Mozilla/Netscrap 6+ version
            var xml=new XMLHttpRequest();
            xml.open("GET",url,false);
            xml.send(null);
            document.getElementById(lyr).innerHTML=xml.responseText;
   }
}
//-->
</script>

You can trigger the script off the load:
<body onLoad="include('somediv','http://somepath/somefile.html'">
where somediv looks like: <div id="somediv">&nbsp;</div>

or inline as a conventional include:
<script language='JavaScript'>
   document.write('<div id="somediv">&nbsp;</div>');
   include('somediv','http://somepath/somefile.html');
</script>

Any thoughts?

0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
>>The z-index does not work in IE 5.1 browser either.
That's correct - it's only 5.5+ as noted. I believe the code you pasted above needs to be online to function - were you tesing it locally?
0
 

Author Comment

by:multilingual
Comment Utility
Yes, I was testing off-line, I will try on-line and post my results.

Regards
0
 

Author Comment

by:multilingual
Comment Utility
Tested the code online several different ways and still could not make it work properly. Perhaps I am not familiar enough with the implementing the above .js. I will scale down my page to the bare minimum and see if I can get the script to work.

Regarding browser:
Last I checked, MS did not do an update to IE for Mac OS 9.2 past 5.1. They did an update for OSX, but left the OS 9 people in the lurch. I have not checked in a little while, perhaps there has been one, I will check.

Any additional ideas as to other ways I can get a remote url to present in a layer?

As I mentioned above, I will scale back my page and try the .js code I referenced.

Regards
0
 

Author Comment

by:multilingual
Comment Utility
No go with the following code in NS7 or IE5.1.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language='JavaScript'>
<!--
function include(lyr,url)
{
   IE=(document.all) ? true : false;
   if (IE)
   {
      // IE version
      var xml = new ActiveXObject("Microsoft.XMLHTTP");
      xml.Open( "GET", url, false );
      xml.Send()
      document.getElementById(lyr).innerHTML=xml.responseText;
   }
   else
   {
      // Mozilla/Netscrap 6+ version
            var xml=new XMLHttpRequest();
            xml.open("GET",url,false);
            xml.send(null);
            document.getElementById(lyr).innerHTML=xml.responseText;
   }
}
//-->
</script>
</head>

<body onLoad="include('layer1','http://www.somesite.com'" bgcolor="#FFFFFF">
<div id="layer1" style="position:absolute; left:0px; top:0px; width:500px; height:200; z-index:1; visibility: visible; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000"></div>
</body>
</html>

I substitute "somesite" with an actual page, what am I missing?

Thanks for any assistance.

BTW, Mac OS9 latest IE version is 5.1.7, so browser upgrade is not an option at the moment.
0
 
LVL 11

Expert Comment

by:Zontar
Comment Utility
Did somebody let a page-widening troll from Slashdot loose in here? Geeeez...
0
 

Author Comment

by:multilingual
Comment Utility
Not sure what you mean, this thread looks fine in my browser.
0
 
LVL 11

Expert Comment

by:Zontar
Comment Utility
I'm at 10X7 resolution and there's a horizontal scrollbar half again as big as the page, due to the extremely long link posted in the question. And I don't keep my font settings particularly large, either.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
That's probably a browser interpretation of the cell. At 1280 I have no scroll, but the link wraps. It may not be wrapping for you...
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:multilingual
Comment Utility
Question still not answered, does anyone have a suggestion??
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Sorry...

It should be fine as long as you're using a fully qualified URL (http://www.domain.com/index.html) If it's not working - it may be another Mac/Browser issue. I can't test on a Mac, and haven't been able to find a reference as to why it wouldn't function :-)
0
 

Author Comment

by:multilingual
Comment Utility
Thanks for the reply, but I have tried both methods (onload & inline as a conventional include) and cannot get either to work on Mac (NS7) or PC (IE6). Perhaps there is an error in the code?

Surely this is not that hard to do? Have you ever had sucess with the code I referenced above? If so, can you post some working code? Thanks for any assistance.

Regards
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 150 total points
Comment Utility
Here's a page on my site that uses this method (view the source). I'm now going to check if my code is different from your code...

http://www.pdgmedia.com/new_page_2.htm
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
This is with your code - doesn't work - so hold on a sec...
http://www.pdgmedia.com/new_page_3.htm
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Damn - change your onload line to this:

<body onLoad="include('layer1','http://www.pdgmedia.com/index.html')">
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
You were missing a  )
0
 

Author Comment

by:multilingual
Comment Utility
Thanks for all your help, I was able to copy your code and get it to work in NS7 (Mac) and on the PC (IE6).

FWIW, the div link must also be located on the same site as the loaded .htm file. I was calling a file from another one of our sites and I could not get it to work, but once I called a file from the site where the .htm was called, all worked fine.

Thanks again George, I am going to post your working code below in case someone else runs arcoss this thread and needs it.

Working code:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
<script language='JavaScript'>
<!--
function include(lyr,url)
{
     IE=(document.all) ? true : false;
     if (IE)
     {
          // IE version
          var xml = new ActiveXObject("Microsoft.XMLHTTP");
          // older versions (IE4 and some IE5.0) might be using MSXML2.XMLHTTP.4.0
          xml.Open( "GET", url, false );
          xml.Send()
          document.getElementById(lyr).innerHTML=xml.responseText;
     }
     else
     {
          // Mozilla/Netscrap 6+ version
          var xml=new XMLHttpRequest();
          xml.open("GET",url,false);
          xml.send(null);
          document.getElementById(lyr).innerHTML=xml.responseText;
     }
}
//-->
</script>

</head>

<body onLoad="include('layer','http://www.somesite.com/index.htm')">

<div id="layer">&nbsp;</div>

</body>
</html>
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
>>I was calling a file from another one of our sites

Now you tell me :-) When you said specific content from different databases, I assumed you meant the same site. Sorry about that - I should have asked you earlier on...
0
 

Author Comment

by:multilingual
Comment Utility
Thanks again for all your assistance. Now I just need to get the proven theory to work as I hope it can. Well... tomorrow is another day.

Regards
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now