/    Sign up×
Community /Pin to ProfileBookmark

IFRAME problems

Hi!
I just get right on to it.

I have a starting page (index.html). Within that starting page i have an IFRAME. In the sourcepage of the IFRAME (start.html) I have a link that will make a DIV-layer visible. The DIV-layer is confirmed in start.html. Now, the layer is larger in size than the IFRAME borders so what happens is that the edges of the layer becoms invisible – “tucked in” under the edges of the IFRAME. When I click the link I want the layer to “float” on top of the IFRAME (and the rest of index.html). Setting a higher z-index to the layer won’t do it.

I am not super-mega good at Javascript so if you have a complex Javascript sollution to this problem, please explain it like you would explain it to an idiot. ?

Really hope for some help! Thanks!

to post a comment
HTML

3 Comments(s)

Copy linkTweet thisAlerts:
@litenfiskauthorJan 19.2006 — Is there seriously noone here who can help me with this problem?
Copy linkTweet thisAlerts:
@johnevaJan 19.2006 — Well there is no HTML solution to this and you have posted in the HTML forum.

I should imagine you would be best using PHP but dont ask me cos I dont have any skills in PHP.

I would ask in the PHP forum and I am sure they will be able to sort you out though.
Copy linkTweet thisAlerts:
@ChoixJan 19.2006 — As far as my knowlege extends I belive it is impossible to get anything in a iframe to display outside of the iframe box and bleed into the parent page.

I think the best and closest solution you will find is a simple java popup like this page I made for you:

[Code]
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
PositionX = 100;
PositionY = 100;
defaultWidth = 276;
defaultHeight = 110;
var AutoClose = true;
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');

writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["Google"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="Google" src='+imageURL+' style="display:block"></body></html>');
close();
}}

</script>
<body>
<a href="javascript:popImage('http://www.google.co.uk/intl/en_uk/images/logo.gif','Google.co.uk')">
Example For litenfisk please click here.
</a>
<br>
<br>
I originaly got this code from http://www.codelifter.com so go there is you need more help -Choix
</body>
</html>
[/code]


You can define where it pops up on screen and the size of the page, also its not a new window as such since it cannot be resized and you can't type new urls into it either since the address bar does not show.

The code isnt mine originaly, I think with some work you can use this method to display the results you wanted.

I am just sorry that I couldn't find a way of getting your idea to work, may be I am wrong about it being impossible but I am currently working with div tags and iframes on my site and so far I have not found a way of doing exactly what you asked.
×

Success!

Help @litenfisk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...