# How to get DIV out of IFrame.. ?

Discussion in 'Computer Science & Culture' started by Enmos, Apr 4, 2009.

Not open for further replies.
1. ### StryderKeeper of "good" ideas.Valued Senior Member

Messages:
13,101
I've been toying with your code a bit, still not anywhere closer. You can have a look what I've done so far, although by all means you'll find some things different, since it's by no means complete and still needs some tweaks. (there's even a DIV missing since I've been playing about).

Code:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Enmos.eu</title>

<script type="text/javascript">
<!-- //
function showid( id )
{
var elm = document.getElementById( id );
elm.style.display = 'block';
}

function hideid( id )
{
var elm = document.getElementById( id );
elm.style.display = 'none';
}

// Added Functions to squeeze more than one action together.
function show( id1, id2 )
{
showid(id1);
showid(id2);
}

function hide( id1, id2 )
{
hideid(id1);
hideid(id2);
}
// -->
</script>
<style type="text/css">
<!-- //
body {
background-color: #171717;
overflow: hidden;
}
div {
position: absolute;
}

div.c15 {cursor: pointer; display: none; overflow: hidden; width: 394; height: 541; left: 50%; margin-left: -196; top: 50%; margin-top: -270}
iframe.c14 {overflow: hidden; width: 394; height: 541;}
div.c13 {cursor: pointer; display: none; overflow: hidden; width: 808; height: 541; left: 50%; margin-left: -402; top: 50%; margin-top: -270;}
iframe.c12 {overflow: hidden; width: 808; height: 541;}
div.c11 {display: none; width: 100%; height: 100%; filter: alpha(opacity=80); -moz-opacity: .80; opacity: .80; background: black;}
div.c10 {overflow: hidden; width: 960px; left: 50%; margin-left: -480px; top: 199px}
iframe.c9 {position: absolute; overflow-x: hidden; width: 978px; height:70%; left: 50%; margin-left: -480px; top: 199px}
div.c8 {display: block; left: 50%; margin-left:-486; top: 3px;}
div.c7 {display: block; left: 811px; top: 164px; background-color: black; width:150;height:20;}
div.c6 {display: block; left: 651px; top: 164px; background-color: black; width:150;height:20;}
div.c5 {display: block; left: 491px; top: 164px; background-color: black; width:150;height:20;}
div.c4 {display: block; left: 331px; top: 164px; background-color: black; width:150;height:20;}
div.c3 {display: block; left: 171px; top: 164px; background-color: black; width:150;height:20;}
div.c2 {display: block;left: 11px; top: 164px; background-color: black; width:150;height:20;}
div.c1 {cursor: pointer; display: none; left: 830px; top: 4px;}
//-->
</style>
<body>
<div id="title" class="c8"><map name="FPMap0">
<area href="http://enmos.eu/2009/homep.htm" target="IFrame" shape="rect" coords="7, 36, 55, 53">
<area href="mailto:antispam@enmos.eu" onclick="showid('imgmail')" shape="rect" coords="918, 6, 962, 18"></map> <img border="0" src="Http://www.enmos.eu/2009/main3_b.jpg" width="972" height="197" usemap="#FPMap0" alt="n/a">
<div id="imgmail" class="c1" onclick="hideid('imgmail');"><img border="0" src="Http://www.enmos.eu/2009/imgmail.jpg" width="133" height="19" alt="n/a"></div>
<div id="cat_block1" class="c2"></div>
<div id="cat_block2" class="c3"></div>
<div id="cat_block3" class="c4"></div>
<div id="cat_block4" class="c5"></div>
<div id="cat_block5" class="c6"></div>
<div id="cat_block6" class="c7"></div>
<area href="http://enmos.eu/2009/tutorial.htm" target="IFrame" shape="rect" coords="196, 4, 337, 22">
<area href="http://enmos.eu/2009/leaves.htm" target="IFrame" shape="rect" coords="369, 4, 486, 22">
<area href="http://enmos.eu/2009/pets.htm" target="IFrame" shape="rect" coords="518, 4, 587, 22">
<area href="http://enmos.eu/2009/friends.htm" target="IFrame" shape="rect" coords="620, 4, 670, 22">
<area href="http://enmos.eu/2009/sitemap.htm" target="IFrame" shape="rect" coords="703, 4, 755, 22"></map>
<img border="0" src="Http://www.enmos.eu/2009/menubar.jpg" width="950" height="25" usemap="#FPMap1" alt="n/a"></div>
</div>
<div id="Grayout" class="c11"></div>
<iframe id="IFrame" name="IFrame" class="c9" frameborder="no" scrolling="yes" src="Http://www.enmos.eu/2009/homep.htm"></iframe>
<div id="hImgContainer" class="c13"><iframe name="hImg" class="c12" frameborder="no" scrolling="no"></iframe></div>
<div id="vImgContainer" class="c15"><iframe name="vImg" class="c14" frameborder="no" scrolling="no"></iframe></div>
</body>
</html>

You'll notice a few changes, like the change to how you load pages onclicking (I removed the Javascript:void(0); and replaced it with a full URL, you just need to add the TARGET of "IFrame" to point where it should load)

I was trying to cut your Category Hiding entries down. In the end I removed the use of the Image you were using and settled for making the DIV's a set size with background-color: black; works just as well, however you no longer have file's being pulled from your server (saving bandwidth) as well as the page code in general is less from not having IMG tags (saving even more bandwidth).

Obviously there is still a number of errors to address, like for instance how much you can view when you scroll the content. I would toy more but I've been at it for hours, so need a little break.

3. ### RandwolfIgnorance killed the catValued Senior Member

Messages:
4,167
Enmos, I know stryder is working on this for you as well, but here is the answer I found:

This is based on my earlier ad hoc solution of 70%, but now calculates screen height minus an offset. I currently have the offset (var topper in the code) set to 499 so that you can see it work, just change the 499 to 199 (or whatever value you prefer) for production. Technically, I am not checking screen height, but rather browser window height - this is actually what you want, I think. Also, you must leave the "div" as the first line in your CSS section, as the height adjustment relies on this being the first line (index[0]) after your style tag.

Try it, but remember the offset is currently at 499 so it will display a very short div:

http://www.bonuscashbackrewards.com/enmos.htm

5. ### EnmosRegistered Senior Member

Messages:
43,184
Awesome, thanks Stryder and Randwolf !

I will take a good look at it later (I need to take a break myself now

).

Messages:
4,167
8. ### EnmosRegistered Senior Member

Messages:
43,184
I believe I've got it..

Now I just need to dynamically apply this script.
I need to detect what browser the client is using.

IF browser = IE then
var frame = document.getElementById("IFrame");
var screenheight = window.screen.height-'345';
frame.style.height = screenheight + "px";
ELSE
frame.style.height = '100' + "%";

How do I do this ?

Also, is it possible to detect if the client has the window resized to less than 100% ?

9. ### EnmosRegistered Senior Member

Messages:
43,184
Oh my..

Did I do it ???

I think I did !

There is still the 'minor' problem of window resize though. If the client has his browser resized the page doesn't scroll all the way down in IE.
There must be a way to solve this though, right ?

10. ### RandwolfIgnorance killed the catValued Senior Member

Messages:
4,167
Enmos, whichever solution you adapt, both stryder and I are headed for the same result. To answer this particular question:

To test which is which:
To see this work, go to:
http://www.bonuscashbackrewards.com/enmos2.htm
Resize your browser to a small height, say half screen and refresh.

Now maximize your browser with out refreshing - you will see your div is still very "short". Refresh again, and it will resize to match your browser size.

This part of the suggestion can be used in either solution - mine or Stryder's.

Would it be easier if I "fleshed it out" similar to what Stryder has been doing? In the interest of time (or lack thereof) I have focused on the specific issue rather than making a fully functional page. With some additional effort I can produce the whole page for you. Also, I would streamline the code and get rid of extraneous garbage, I have been rather "sloppy" to this point.

Does the example at:
http://www.bonuscashbackrewards.com/enmos2.htm
not give the results you are after (as pertains to the display of that particular div)? There are always many ways to achieve a given result but I would like to know what is missing, just for my own curiosity.

The most important thing, of course, is that you get your problem solved, one way or the other. Happy programming!

11. ### EnmosRegistered Senior Member

Messages:
43,184
Randwolf, that is awesome. It works marvelously.
However.. while I do see it working on you example page, I'm not getting the same result when I add your solution to my code.
I must be doing something wrong, somehow. So, since you offered, I'd be very happy if you could insert your solution into my existing code (I want to see it work like it is now, you can streamline it if you want after that)

Again, thanks a bunch !! To the both of you of course !

 Here's the code:

The bold parts in red are the bits that constitute my semi-solution.

[Edit2]
Was this your solution yesterday i.e. you didn't change the code ? If so, I'm sorry I didn't notice (I didn't refresh)

Last edited: Apr 8, 2009
12. ### RandwolfIgnorance killed the catValued Senior Member

Messages:
4,167
Thanks, Enmos.

Real quick, 'cause I've got to run right now, I would like to ask a couple of things:

It is very important for cross browser compatibility that you use the CSS attributes for formatting - are you doing this when you "insert my code"?

Also, I invoke the javascript function using the "onload" event in the body, not the IFrame. Not sure if it will work in both instances, will have to try.

It would be very helpful to me if you could post the code you are attempting to use when you try incorporate my suggestions. This would not only save me time, but also perhaps allow me to see what you may be missing when you try it.

Will be happy to - should get to it later today, I just have a prior engagement at the moment.

Again, you are very welcome!

Yes, this is the same as yesterday - note there are two pages, enmos.htm and enmos2.htm. The former has a much higher offset (499 vs 199) intended to illustrate the effect of changing the value of 'topper'. The latter (enmos2) was designed to show what the page would look like in "production", harder to see the effect of the offset though. If you do the refresh/resize exercise in either you will still get a change in the height of the div / iframe. (In fact, it is quite possible to get the thing to entirely disappear in enmos.htm

)

I am very confident that I can incorporate the solution into your live code and deliver the result you are expecting, now that we seem to be on the same page as to functional requirements. Mostly, it just involves the tedium of updating your hrefs to the full path (i.e. prepending http://enmos.eu/2009/ to everything so that it displays correctly on my site.) I do not anticipate having to invent any "new" concepts to get the job done.

Again, plan to get it to you later today, assuming no fires flare up on my end requiring immediate attention. Happy to help!

13. ### EnmosRegistered Senior Member

Messages:
43,184
Hmm, no I didn't. But that might just be the reason it didn't work if it's that important.

See bottom of post.

Oh crap.. lol Sorry man..

Very cool of you, thanks again !!

The way I tried to incorporate your code:

14. ### RandwolfIgnorance killed the catValued Senior Member

Messages:
4,167
Here you go:
http://www.bestvaluetimeshare.com/enmosfull.htm
(note new site - happen to be working on a different project at the moment)

Appears to be fully functional. As to why the partial solution didn't work for you without the CSS, the javascript "function setDivHeight ()" relies on the existence of the CSS in the first place, specifically:
document.styleSheets[0].rules[0].style.height = winheight;
This line refers to the first CSS rule in the <style> tag and changes the height property within that rule. Hence, no rule in existence, no change to that rule...

Also, i changed the invocation of the function setDivHeight () to be called each time you click one of your images. Example:
onclick="frames['IFrame'].location.href='http://enmos.eu/2009/insects.htm'; setDivHeight();" shape="rect" coords="11, 59, 166, 161">

Same for:
<area href="javascript:void(0);" onclick="frames['IFrame'].location.href='http://enmos.eu/2009/tutorial.htm'; setDivHeight();" shape="rect" coords="196, 4, 337, 22">

This alleviates the need for the user to refresh the page to make everything display properly in the case of them resizing their browser - it will set the div height properly each time they click one of your images / links. If you add more images, make sure to include the function call there as well...

Full Code:

You can use the code as is, or go back to relative hrefs by replacing http://enmos.eu/2009/ with "nothing" in your code editor prior to publishing.

To be honest, I did not spend a lot of time trying to "break" the page, so I may have missed a function call or something - let me know if some part doesn't display correctly and I will help you track down whatever mistake I made. However, it does seem to function properly at first blush:

http://www.bestvaluetimeshare.com/enmosfull.htm

Let me know...

15. ### EnmosRegistered Senior Member

Messages:
43,184
Hey Randwolf, thanks !

Works perfectly !!

Only one thing though.
Click the butterfly (in the title). Click the beetle (top category). Click the first image.
It should open in the Iframe "hImg", which is in the hidden DIV "hImgContainer".
As it is now, it opens in a new page.

This is the code that is somehow by-passed right now:

DIV set to 80% transparency to grays out page upon opening image:
Hidden DIV with an IFrame in it to display landscape-shaped images, which opens on top of the gray-out-DIV:
Hidden DIV with an IFrame in it to display portrait-shaped images, which opens on top of the gray-out-DIV:
Don't worry about it too much though. I'll take a look at it myself later on (I have to go now).

At a quick glance I see nothing wrong with this code though (apart from one overflow: hidden that's missing but that can't be the problem), so it must be something else affecting it.
In case I missed something, here's code as it should be:

16. ### EnmosRegistered Senior Member

Messages:
43,184
Randwolf, never mind the problem I mentioned above. That (naturally) was caused by the index being on a different domain than the other pages.
I copied your code and changed all the url's back to relative. Everything works like a charm !
I can't say this enough, but thank you once again !!

17. ### StryderKeeper of "good" ideas.Valued Senior Member

Messages:
13,101
The problem with all those Javascript:void(0); is that not all search robots are clever enough to understand what to do with them. If you are eventually after search rankings you really need to have the HREF entries to point to the file you are loading. (it's one of the reasons I'd mentioned the change previously.

As for resizing.... It's all good if the user keeps to the size when the browser first loads the page, however it's not adaptive.

I'd been looking at some example code previously to deal with this since the use of an ONRESIZE component was actually not true HTML:

Code:
<script>
window.captureEvents(Event.RESIZE);
window.onresize=bla;

function bla()
{
alert("Hey you resized me! \nNow my outer width: " +this.outerWidth + "\n and my outer height: " +this.outerHeight);
}
</script>

(original site with it posted: http://forums.whirlpool.net.au/forum-replies-archive.cfm/154734.html)

Basically everytime the page is resized the function is called. Obviously you'd have to replace the sample function with your resize function for it to work.

As for Cross browser compatibility. The simplest method is to actually use more than one CSS external file for Mozilla and Internet Explorer and use something like PHP to identify the browser and make the decision over which one should be used. You can of course get Javascript to make the decision, however thats placing load on the browser and increasing the filesize of your HTML, when you could get the server to deal with that decision matrix.

18. ### EnmosRegistered Senior Member

Messages:
43,184
Hey Stryder

It works perfectly now. I adapted Randwolfs code somewhat and now you don't have to refresh anymore either

http://enmos.eu/2009

19. ### EnmosRegistered Senior Member

Messages:
43,184
I've started a new one

rolleyes

and everything was going just perfect, until I checked the functionality in IE :bawl: (I'm starting to hate IE).

Does anyone know why this wouldn't work in IE ?

vImgdiv.style.marginTop = document.body.scrollTop+(document.body.clientHeight/2)-271.5;

EDIT: Oh jeez.. never mind, I saw the light as I pushed the post button

20. ### EnmosRegistered Senior Member

Messages:
43,184
I'm still mystified as to why that line should be in readyInfo(). It was there before, but then I removed it because I had made the heightInfo() function. That worked fine in Firefox..

The javascript:
Code:
function readyInfo()
{
Info.style.marginTop = document.body.scrollTop+(document.body.clientHeight/2)-275;
grayout();
show( 'Info' );
lockscroll( 'pbody' );
}

function heightInfo()
{
var iNewHeight = window.frames['InfoFrame'].document.body.scrollHeight;
if (iNewHeight<540)
{
FrameID.style.height = iNewHeight;
center.style.height = iNewHeight;
Info.style.height = iNewHeight+10;
Info.style.marginTop = document.body.scrollTop+ (document.body.clientHeight/2)-(iNewHeight+10)/2;
}
else
{
FrameID.style.height = 540;
center.style.height = 540;
Info.style.height = 550;
Info.style.marginTop = document.body.scrollTop+(document.body.clientHeight/2)-275;
}
}
The Html:
Code:
<a href="javascript:void(0);" onclick="frames['InfoFrame'].location.href='info_pages/animals/i_animalia.htm'; readyInfo();">more</a>
Code:
<DIV ID="Info" style="z-index: 100; display: none; position: absolute; width: 618; height: 550; left: 50%; margin-left: -309; background-color: black;">
<DIV ID="center" style="position: absolute; width: 608px; height: 540px; left: 5px; top: 5px;">
<IFRAME ID="FrameID" name="InfoFrame" onload="heightInfo() "style="overflow-x: hidden; width: 608px; height: 540px" frameborder="0">
</IFRAME>
</DIV>
</DIV>
I fear I will have to make an if/else statement for readyInfo() now as well

Last edited: Apr 26, 2009
21. ### EnmosRegistered Senior Member

Messages:
43,184
The goal is to center the info popup (Info/center/FrameID) on the client screen and to dynamically resize the Iframe and Divs to the Frame content.
This works all very well in Firefox, but now it seems I have to essentially copy heightInfo() to make it work in IE..
On the other hand.. I don't think that will fly, since, at that point, the document is not loaded yet.. :bugeye:

Am I doing something wrong ?

http://enmos.eu/tempdir/Image2ze.jpg
http://enmos.eu/tempdir/Image3ze.jpg

Last edited: Apr 26, 2009
22. ### EnmosRegistered Senior Member

Messages:
43,184
Hmm I think 'if (iNewHeight<540)' comes back as 'false' in IE causing it to execute the else statement, which sets the height to max (540px).

Why ?

23. ### stbalaji2uRegistered Member

Messages:
21
wow thats really great thanks for the info .