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. Stryder Keeper of "good" ideas. Valued Senior Member

    Messages:
    13,105
    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>
    <head>
    <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>
    </head>
    <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="http://enmos.eu/2009/insects.htm" target="IFrame" onmouseover="hide('cat_block1','menubar');" onmouseout="show('cat_block1','menubar');" shape="rect" coords="11, 59, 166, 161">
    <area href="http://enmos.eu/2009/animals.htm" target="IFrame" onmouseover="hide('cat_block2','menubar');" onmouseout="show('cat_block2','menubar');" shape="rect" coords="166, 59, 327, 161">
    <area href="http://enmos.eu/2009/landscapes.htm" target="IFrame" onmouseover="hide('cat_block3','menubar');" onmouseout="show('cat_block3','menubar');" shape="rect" coords="327, 59, 487, 161">
    <area href="http://enmos.eu/2009/flowers.htm" target="IFrame" onmouseover="hide('cat_block4','menubar');" onmouseout="show('cat_block4','menubar');" shape="rect" coords="487, 59, 646, 161">
    <area href="http://enmos.eu/2009/mushrooms.htm" target="IFrame" onmouseover="hide('cat_block5','menubar');" onmouseout="show('cat_block5','menubar');" shape="rect" coords="646, 59, 806, 161">
    <area href="http://enmos.eu/2009/other.htm" target="IFrame" onmouseover="hide('cat_block6','menubar');" onmouseout="show('cat_block6','menubar');" shape="rect" coords="806, 59, 962, 161">
    <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>
    <div id="menubar" class="c2"><map name="FPMap1">
    <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.
     
  2. Google AdSense Guest Advertisement



    to hide all adverts.
  3. Randwolf Ignorance killed the cat Valued Senior Member

    Messages:
    4,201
    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
     
  4. Google AdSense Guest Advertisement



    to hide all adverts.
  5. Enmos Valued Senior Member

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

    Please Register or Log in to view the hidden image!


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

    Please Register or Log in to view the hidden image!

    ).
     
  6. Google AdSense Guest Advertisement



    to hide all adverts.
  7. Randwolf Ignorance killed the cat Valued Senior Member

    Messages:
    4,201
  8. Enmos Valued 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. Enmos Valued Senior Member

    Messages:
    43,184
    Oh my..

    Did I do it ???

    I think I did !

    Please Register or Log in to view the hidden image!



    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. Randwolf Ignorance killed the cat Valued Senior Member

    Messages:
    4,201
    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.

    Please Register or Log in to view the hidden image!



    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!

    Please Register or Log in to view the hidden image!

     
  11. Enmos Valued 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)

    Please Register or Log in to view the hidden image!



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

    Please Register or Log in to view the hidden image!



    [Edit] 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)

    Please Register or Log in to view the hidden image!

     
    Last edited: Apr 8, 2009
  12. Randwolf Ignorance killed the cat Valued Senior Member

    Messages:
    4,201
    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

    Please Register or Log in to view the hidden image!

    )

    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!

    Please Register or Log in to view the hidden image!

     
  13. Enmos Valued 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 !!

    Please Register or Log in to view the hidden image!




    The way I tried to incorporate your code:
     
  14. Randwolf Ignorance killed the cat Valued Senior Member

    Messages:
    4,201
    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...

    Please Register or Log in to view the hidden image!



    Also, i changed the invocation of the function setDivHeight () to be called each time you click one of your images. Example:
    <area href="javascript:void(0);" onmouseover="hide('cat_insects'); hide('menubar');" onmouseout="show('cat_insects'); show('menubar');"
    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. Enmos Valued Senior Member

    Messages:
    43,184
    Hey Randwolf, thanks !

    Please Register or Log in to view the hidden image!

    Please Register or Log in to view the hidden image!

    Please Register or Log in to view the hidden image!


    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. Enmos Valued 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 !!

    Please Register or Log in to view the hidden image!

     
  17. Stryder Keeper of "good" ideas. Valued Senior Member

    Messages:
    13,105
    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. Enmos Valued Senior Member

    Messages:
    43,184
    Hey Stryder

    Please Register or Log in to view the hidden image!


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

    Please Register or Log in to view the hidden image!



    http://enmos.eu/2009
     
  19. Enmos Valued Senior Member

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

    Please Register or Log in to view the hidden image!

    rolleyes

    Please Register or Log in to view the hidden image!

    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

    Please Register or Log in to view the hidden image!

     
  20. Enmos Valued 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

    Please Register or Log in to view the hidden image!

     
    Last edited: Apr 26, 2009
  21. Enmos Valued 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. Enmos Valued 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. stbalaji2u Registered Member

    Messages:
    21
    wow thats really great thanks for the info .
     
Thread Status:
Not open for further replies.

Share This Page