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">

</script>
</head>
<body>
<script type="text/javascript"><![CDATA[//><!]]></script>
<script type="text/javascript"><![CDATA[//><!]]></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:

Edit: John is right, this is the one I used:
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

Originally Posted by Snookerman

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
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/dynamici...menu/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/s...085#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

Thread: why do links on pages not work behind a transparent iframe

Thread Tools

Search Thread

why do links on pages not work behind a transparent iframe

The Following User Says Thank You to Snookerman For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions