# How to get DIV out of IFrame.. ?

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

Thread Status:
Not open for further replies.
1. ### EnmosStaff Member

Messages:
43,184
Basically, it's like this:

Body
{

DIV
{
}

---IFrame
---{

------HTML Page
------{

----------<Button>

----------DIV
----------{
----------}

------}

---}

}

When the button on the page within the IFrame is clicked I want the DIV from the IFrame to show on top of the DIV from the body.
Can it be done ? Thanks

Please Register or Log in to view the hidden image!

2. ### Google AdSenseGuest Advertisement

to hide all adverts.
3. ### EnmosStaff Member

Messages:
43,184
Never mind, I got it

Please Register or Log in to view the hidden image!

4. ### Google AdSenseGuest Advertisement

to hide all adverts.
5. ### RandwolfIgnorance killed the catValued Senior Member

Messages:
4,121
I have done similar operations before, Enmos, but I am not sure if I tried to reposition a div that was inside an inline frame though. Not sure if that even matters. I am confident you can accomplish what you are trying to do, probably in several different ways.

I have no idea what you already know, so please don't take anything as condescending...

Please Register or Log in to view the hidden image!

The button in question would have to call a javascript function to do the repositioning. I am terrible with syntax from memory (I write in several languages and have a hard time keeping the different variants straight). I went and clipped the first example I found of a js function for repositioning for you:

In this illustration, clicking anywhere on the body element would cause the repositioning, but the idea would be the same - just use the "onclick" event for the button instead.

Positioning can be either absolute or relative:

You may also want to "hide" and "unhide" your div as needed, this property can also be manipulated in your java script.

Hope this heads you in the right direction...

Please Register or Log in to view the hidden image!

6. ### Google AdSenseGuest Advertisement

to hide all adverts.
7. ### RandwolfIgnorance killed the catValued Senior Member

Messages:
4,121
Cool!

Please Register or Log in to view the hidden image!

8. ### EnmosStaff Member

Messages:
43,184
Hey Randwolf, thanks

Please Register or Log in to view the hidden image!

I know very little, I'm just figuring it out as I go along

Please Register or Log in to view the hidden image!

I found a way around it really..

Image inside the IFrame:
<img style="cursor: pointer" onclick="window.top.frames['Img'].location.href='kleinevos.htm'; window.top.show('ImgContainer')" border="0" src="kleinevos.jpg" width="800" height="494">

Points to this hidden DIV in the parent body:
<DIV ID="ImgContainer" style="cursor: pointer; display: none; position: absolute; overflow: hidden; width: 800; height: 494; left: 50%; margin-left: -400; top: 50%; margin-top: -247">
<IFRAME name="Img" style="overflow: hidden; width: 800; height: 494;" frameborder="no" scrolling="no"></IFRAME>
</DIV>

The alignment is still a few pixels off for some reason though. It should be centered.

9. ### EnmosStaff Member

Messages:
43,184
IE sucks !

Please Register or Log in to view the hidden image!

This works fine in Firefox, but IE won't let me assign height: 100%..

<DIV ID="IFrameContainer" style="position: absolute; overflow: hidden; width: 960px; left: 50%; margin-left: -480px; top: 199px; bottom: 0px;">
<IFRAME ID= "IFrame" name="IFrame" style="overflow-x: hidden; width: 978px; height: 100%;" frameborder="no" scrolling="yes" src="homep.htm"></IFRAME>
</DIV>

This is driving me crazy. Can someone help me with this ?

10. ### RandwolfIgnorance killed the catValued Senior Member

Messages:
4,121

Try setting the properties in CSS:

I tried it, and I think it does what you want, both in IE and firefox...

11. ### EnmosStaff Member

Messages:
43,184
Hey Randwolf,
thanks for your reply. Sadly, it doesn't work. Now it does set the Iframe to 100% (fills out to the bottom of the page) but it won't let me scroll through the entire page loaded in it. It stops somewhere halfway..

Ok.. lol it DID work, obviously

Please Register or Log in to view the hidden image!

But i've had this result before. I've been going back and forth through an array of possible solutions. It seems IE just won't let me have my height at 100% AND leave the page fully scrollable at the same time.

:cry:

12. ### EnmosStaff Member

Messages:
43,184
Perhaps showing you the page will help.

The URL is: http://enmos.eu/2009
Click on the frog.

In Firefox it fills out to the bottom of the page, in IE it does not.
In both browsers the loaded page is fully scrollable.

If I add your code both browsers will fill the IFrame out to the bottom of the page, but the loaded page won't scroll all the way down.

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

Messages:
13,101
There always has been a slight difference between how Internet Explorer and Mozilla browsers tend to view layouts. I remember having a problem once when trying to develop a console design using radio buttons and form elements. For some reason Mozilla can stick the edges of a table closer to a text box than I.E.

What would be really handy is actually trying to get an idea of what you are trying to accomplish in the long run, since there is probably a cleaner coded method of doing the task.

(Meh you responded in the time I did hehe)

14. ### EnmosStaff Member

Messages:
43,184
Hey Stryder,
I have an IFrame within a DIV. And I'm loading all my pages in the IFrame.
When the page content is longer than the browser can display I want the IFrame to scroll the content.
But for some reason IE keeps the IFrame what looks like standard IFrame height. As Randwolf showed, it can be filled out to the bottom of the page but then it won't scroll the loaded page properly.

15. ### RandwolfIgnorance killed the catValued Senior Member

Messages:
4,121
Enmos, that is very interesting, because the (admittedly hasty) test that I did on a site I am currently developing was successful.

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

The only code on the page is:

I get the exact same behavior when viewing this page in Firefox or IE.

I also got the behavior that your site is currently displaying by using your original code example:
It works in Firefox, but not in IE. I get the 2 inch (or thereabouts) high frame in IE, while it fills to the bottom of the page in Firefox. After changing to the CSS in the header, the problem (at least for me) disappeared, and I am able to scroll the IFrame all the way to the bottom. At least in my test page.

Perhaps there are other factors involved in your "live" site as there is obviously a lot more code.

Can you try viewing my example http://www.bonuscashbackrewards.com/test.htm in both your browsers and let me know what you experience? If the bare bones example works for you, then we can rule out browser versions. Also, if it performs the way you are expecting, it gives a starting point to add back the rest of your code to identify where and when the problem starts replicating again.

Mind you, my example "ain't purty", I just grabbed a handy html only page to fill the IFrame with.

Let me know...

Please Register or Log in to view the hidden image!

16. ### EnmosStaff Member

Messages:
43,184
Hmm in Firefox it won't scroll all the way down by just scrolling within the IFrame (I have my parent page scrollbar hidden).
In IE something weird happens. It scrolls all the way down (by just scrolling within the IFrame), but during the last bit of scrolling the IFrame seem to overflow at the top.

Edit: wait, it does that as well in Firefox.
Also, the loaded page starts halfway down the article in Firefox.

I think the hidden scrollbar on my page is the cause of not being able to scroll further down. But there must be some way around it without un-hiding the scrollbar again..

17. ### EnmosStaff Member

Messages:
43,184
Here's the entire code (index.htm).
It's a bit unsightly though.. hehe

Please Register or Log in to view the hidden image!

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

Messages:
13,101
Still manually looking at it, however here's some links to help in the future. (Although it will probably increase your headache.)

Test your CSS:
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http://www.enmos.eu/2009/

Test and Clean your HTML/XHTML:
http://validator.w3.org/check?uri=h...verbose=1&st=1&user-agent=W3C_Validator/1.654

(This one I actually ran the cleaner on, should give you a new method to deal with your DIV layout

Please Register or Log in to view the hidden image!

)

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

Messages:
13,101
Okay from what I've worked out, using height: 100%; in the IFRAME tag is defaulting to height: auto in Internet Explorer. This is why it appears different to Firefox, I'm still in the process of trying to find a work around. (I did notice if you stick in 200% you double the box size. )

For what it's worth, you have to define how the overall layout fits together to manipulate "Auto" to fill out the rest of the space.

Some more info here:
http://www.webmasterworld.com/forum83/200.htm

Here's a Javascript Workaround for you!

Where your code says:
Code:
<IFRAME ID= "IFrame" name="IFrame" style="overflow-x: hidden; width: 978px; height: 100%;" frameborder="no" scrolling="yes" src="homep.htm"></IFRAME>

Replace with:
Code:
<SCRIPT LANGUAGE="Javascript">
document.open();
document.write('<IFRAME ID="IFrame" name="IFrame" style="overflow-x: hidden; width: 978px; height: ');
document.write(eval(screen.height-197));
document.write('px;" frameborder="no" scrolling="yes" src="homep.htm"></IFRAME>');
document.close();
</SCRIPT>
</DIV>

It's a dirty hack, as you can see it uses Javascript to work out the true screen height and then I manually added the value you have "cut" from the top. I'm sure others can find another way around.

[Further Edit:]
Now you'll find a problem with Firefoxes rendition, this means creating a method to only parse the script when dealing with IE.

Last edited: Apr 6, 2009
20. ### RandwolfIgnorance killed the catValued Senior Member

Messages:
4,121
Enmos, check out this page:

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

Code:
I always find it helpful to pare everything down to the bare minimum when trying to isolate problems.

Stryders comments are on track, but what I am seeing as relates to your issue is the actual % used when you set the dive height. If you set it to 100% it "runs out of room" in the body container when scrolling - thus necessitating the ability for scrolling the body to see the bottom contents in your div. (I am having real difficulty in putting this concept in words.)

Anyway, setting the attributes in CSS in the <head> definitely works in both Firefox and IE. The problems that you are experiencing after you do this has to do with setting the div height to 100%, since the div is positioned partway down the page by setting top:199. To see this in action, just allow all your scrollbars to show (both in the body, iframe, div, etc) - it is much easier (at least for me) to see the conflict with the scrollbars on then to explain it in words.

What I did for your example was set the div height to 70% - it seems to give the effect you want, both in IE and in Firefox. This may not display properly in all monitor resolutions, etc - haven't had time to test on any other PC's, but it works quite well with the computer I am currently working on. If this becomes a problem for you, it is possible to calculate screen setting through javascript and set percentages accordingly.

What I am presenting for you seems to be the easiest "workaround", if you are satisfied with the results - my not be perfectly what you are seeking but maybe the compromise is within tolerance. The concept can be fine tuned of course, as I mentioned earlier.

Anyway, I think it is safe to say that you definitely want to do your property setting in CSS because it works in both IE and Firefox.

Check it out and let me know:
http://www.bonuscashbackrewards.com/enmos.htm

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

Messages:
13,101
Meh... I just spotted, there was no HEIGHT attribute added to the IFRAME container

Please Register or Log in to view the hidden image!

. Works in IE and Firefox. although there is still a bug with firefox.... will fix.

22. ### EnmosStaff Member

Messages:
43,184
Your code is missing the div opening tag, so I added my own (<div ID="IFrameContainer" style="position: absolute; overflow: hidden; width: 960px; left: 50%; margin-left: -480px;">)

It seems to work fine, but it still doesn't fully scroll the loaded page (the result is exactly the same as with Randwolfs code).

I really appreciate it that you guys are trying to help out btw, thanks

Please Register or Log in to view the hidden image!

Perhaps detecting client screen height would be the best work-around at this point. I tried to look it up but I can't figure out how to calculate [client screen height - 199] and then set the IFrame height to that dynamic height.
I know it should be fairly simple.. the only (perhaps minor) problem I see with it is that different browsers take up a different amount of screen space at the bottom of the page. But I could use a buffer of 50 pixels or so. It would look perfect, but it would work

Please Register or Log in to view the hidden image!

Last edited: Apr 7, 2009
23. ### EnmosStaff Member

Messages:
43,184
Yep that works, but I rather have it working on all screens

Please Register or Log in to view the hidden image!

If I set a fixed height of 554, both IE and Firefox do perfectly on my own screen, but on a different resolution it would suck.

Edit: I'll paste here what I wrote in my reply to Stryder. If you know how to do it, that would be awesome

Please Register or Log in to view the hidden image!

Perhaps detecting client screen height would be the best work-around at this point. I tried to look it up but I can't figure out how to calculate [client screen heigh - 199] and then set the IFrame height to that dynamic height.
I know it should be fairly simple.. the only (perhaps minor) problem I see with it is that different browsers take up a different amount of screen space at the bottom of the page. But I could use a buffer of 50 pixels or so. It would look perfect, but it would work

Please Register or Log in to view the hidden image!

Last edited: Apr 7, 2009
Thread Status:
Not open for further replies.