View Full Version : why do links on pages not work behind a transparent iframe
stgeorge
01-15-2009, 06:56 PM
I have scratching my head for weeks over this.
Nobody seems to know.
I have a vertical flyout menu written in css/html and javascript all in one page.
Originally I had this included in my pages but every time I wished to alter the links it involved a serious amount of copying and pasting.
I decided to call on this menu for each page leaving me only one page to edit. The navigation menu.
Presently I have the iframe transparent it works in all browsers including ie. In fact it works in ie better than it does in mozilla browsers, why how can that be you may ask?
The main page content contains links. These links operate fine in ie but in other browsers they do not. The links that do not work are behind the iframe area. I have reduced the area as much as possible but the frame flows over into the page content and that content containd links. The only links that do not work on the page are the ones behind the iframe.
My site is cross browser and from 640 x 480 resolution upwards compatible.
Has anybody got any ideas please?
I am having trouble adding php includes to my site and really do not want to go there at the moment. So I am looking for an iframe solution.
Thanks in advance.
Snookerman
01-15-2009, 07:01 PM
Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.
stgeorge
01-15-2009, 07:09 PM
This page contains links in the left of the center body.
http://winfoes.co.uk/tweaks.html
when you look at the flyout on the left it will cover the links.
ie will connect to the links.
page scripting for iframe page below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LNav</title>
<style type="text/css">
body {
background-color : transparent;
margin-left: 1%;
padding : 0;
}
.ntmenu_container {
position: absolute;
height: auto;
margin: 0;
padding: 0;
padding-top: 10px;
text-align:center;
width:120px;
}
.toplevel {
font-size : 11px;
width : 120px;
color : #ffffff;
font-weight : bold;
border-bottom : 0 solid #866a32;
font-family : Arial, Helvetica, sans-serif;
}
.level2,
.level3 {
FONT-SIZE: 11px;
WIDTH: 130px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
text-indent:2px;
}
#nav {
margin : 0;
padding : 0;
width : 120px;
list-style-type : none;
text-align : left;
}
#nav .toplevel {
margin:0px 0px;
padding-top : 6px;
padding-bottom : 6px;
background-color:#333366;
border: 1px ridge #ffcc00;
text-indent:5px;
}
#nav LI LI, #nav LI LI LI {
padding-top : 2px;
padding-bottom : 2px;
}
#nav UL, #nav UL UL {
margin : 0;
padding : 0;
float : left;
width : 130px;
list-style-type : none;
background-color : #F0FFFF;
}
#nav LI {
float : left;
}
#nav LI UL {
margin-top : -1.8em;
left : -999em;
margin-left : 120px;
border : 1px solid #000000;
width : 130px;
position : absolute;
}
#nav LI UL UL {
margin-top : -1.7em;
left : -999em;
margin-left : 120px;
border : 1px solid #000000;
width : 130px;
}
#nav LI A {
display : block;
margin : 0;
padding : 0;
text-decoration : none;
}
#nav LI A:hover {
color : #ffcc00;
}
#nav LI LI A, #nav LI LI LI A, #nav LI LI LI LI A {
display : block;
text-decoration : none;
color : #000000;
}
#nav LI LI A:hover, #nav LI LI LI A:hover, #nav LI LI LI LI A:hover {
color : #000000;
background-color : #d5dde8;
}
#nav LI:hover UL UL {
left : -999em;
}
#nav LI:hover UL UL UL {
left : -999em;
}
#nav LI.sfhover UL UL {
left : -999em;
}
#nav LI.sfhover UL UL UL {
left : -999em;
}
#nav LI:hover UL {
left : auto;
}
#nav LI LI:hover UL {
left : auto;
}
#nav LI LI LI:hover UL {
left : auto;
}
#nav LI.sfhover UL {
left : auto;
}
#nav LI LI.sfhover UL {
left : auto;
}
#nav LI LI LI.sfhover UL {
left : auto;
}
html #nav li {
float : left;
height : 1%;
}
html #nav li a {
height : 1%;
}
</style>
<script language="JavaScript" type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
<div class="ntmenu_container">
Navigation Content:
HTML Page calling iframe:
<div class="ntmenu_container">
<iframe name="LNav" src="/lnav.html" width="390px" height="300" scrolling ="no" frameborder="0" allowtransparency="true"> There is a floating frame pointing to http://winfoes.co.uk/l_nav.html</iframe>
</div>
jscheuer1
01-16-2009, 07:04 AM
To answer this in a general way, any link that is behind something can't be clicked. When this item is transparent, different browsers may treat the situation differently. But all are within their rights to make these links inaccessible to clicking.
stgeorge
01-16-2009, 01:11 PM
Well will that not be the same with php includes then or are they exempt from this in some way?
I have tried stacking with z index. Will not work.
I have tried setting the width to auto on the iframe in the main page. It will overflow into the page but it cuts off about 50 pixels or so from the outer menu.
Is there any way to put the iframe behind the main body but show the navigation when it flies out?
The thing is there has to be a way to resolve this otherwise it will be pointless having any sort of vertical flyout menu as we would not be able to avoid the positioning of hyperlinks in different screen resolutions.
Today I have been padding out my body content to avoid the flyout.
I also have to trim down the navigation.
All rather pointless really as the idea was to use the navigation all the way down the left column.
Cannot do that though as already said we cannot determine where the links come out in different resolutions.
At least with a top horizontal menu all you need to do is avoid hyperlinks in the top body content.
Thanks for replying.
Snookerman
01-16-2009, 01:33 PM
I think I used this menu a while back in an iframe and it worked just fine:
John is right, this is the one I used:
http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm (http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm)
Thanks John!
Hopefully it will work for you too.
Good luck!
jscheuer1
01-16-2009, 02:34 PM
I think I used this menu a while back in an iframe and it worked just fine:
http://www.dynamicdrive.com/dynamicindex1/jimmenu/index.htm (http://www.dynamicdrive.com/dynamicindex1/jimmenu/index.htm)
Hopefully it will work for you too.
Good luck!
That may work out, but as far as I know that menu has no frames support, while this one:
http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm
specifically states that it does. In any case, if you get yourself a menu that can fly out over the borders of an iframe, then of course the iframe itself may be as small as the root level of the menu. Therefore the problem you are having shouldn't even be an issue.
To answer your question about includes, they are different than iframe in that they are a part of the 'top' page, so once again, they need not occupy any more room in the layout than the root level of a menu contained on them. The iframe element creates a window within a window, so anything in it is not technically a part of the top page. Without special code, nothing may fly out of the borders of the iframe. What you did was to try to overcome this with a transparent background to the iframe. A good idea, but as I stated, no browser is required to allow elements that are covered, even by a transparent element, to be clickable.
You may also want to look here:
http://www.dynamicdrive.com/forums/showthread.php?p=180085#post180085
stgeorge
01-17-2009, 11:43 AM
Thanks to both of you
Snookerman
- John
I will try hvmenu.
Might be a while until I get time to have it up and flying.
Will post a link when it is done.
stgeorge
01-17-2009, 11:47 AM
By the way snookerman I installed the Rocket Dock on my XP after seeing your post. Great little tool.
Useful as I had problems creating new quick launch bars with XP while with 98se creating Quick launch bars is a breeze
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.