Hall of Fame

1. mplungjan1,204,382
2. hielo670,889
3. HonorGod596,196
4. kadaba367,332
5. fsze88314,325
6. wilq32222,869
7. Kravimir194,683
8. x_com179,420
9. AlbertVan...168,428
10. b0lsc0tt164,410
11. Zyloch160,485
12. third155,923
13. HainKurt154,877
14. Tomarse...152,408
15. quincydude147,940
16. Badotz147,586
17. abel147,020
18. sunithnair140,188
19. Ray_Pas...136,933
20. alien109121,569
21. TheFoot116,948
22. anoyes104,574
23. cxr104,360
24. Morcalavin97,306
25. sh0e97,300

1. Zvonko6,482,208
2. mplungjan6,016,957
3. hielo4,465,745
4. b0lsc0tt1,642,058
5. third1,475,436
6. Gwynfor...1,351,632
7. devic1,313,415
8. archrajan1,212,417
9. HonorGod1,188,062
10. Zyloch1,073,578
11. pravinasar1,049,201
12. Roonaan958,533
13. Batalf873,511
14. knightEkni...865,934
15. amit_g733,426
16. basicinsti...619,355
17. dakyd577,760
18. CJ_S549,361
19. wilq32545,559
20. gops1544,762
21. callrs523,535
22. jaysolomon489,264
23. Badotz474,117
24. Kravimir453,908
25. stanscott2435,346

	[x] Posted via EE Mobile
	Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

Question

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

9.7

How do I make an IFRAME inside a DIV automatically resize to 80% of the browser window's current height and width

Asked by hawkinwinter in JavaScript, Cascading Style Sheets (CSS), Dynamic HTML (DHTML)

Tags: XHTML JavaScript, IE7, Firefox 2, Safari 3, http://www.hawkinwinter.com/mainindex2.html

My website layout consists of a navigation pad on the left and a content area on the right that lives inside an IFRAME. Both the navigation pad and content area are framed by gif images as a part of an overall theme/graphical interface. The IFRAME content area and it's DIV container are currently fixed in pixel width and height.

I would like to use CSS and JavaScript to make the IFRAME and its DIV container automatically resize to a percent of the users browser window (for example 80% of the height, 50% of the width). Additionally, I want the set the minimum allowable size of the content IFRAME to 500 x 800 pixels, but allow it to increase in size if the browser window is larger.

Because I rely heavily on JavaScript in other parts of the site, I dont mind using it to accomplish this task but if there is a non-Java way to do it, Id prefer that instead.

View the Solution FREE for 30 Days

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:

           
           
             <body style="background-image:url(backgroundfade.gif); background-color: #000000; height: 100%; border: 1px solid #ffffff;"  onResize="bodyheight();">
 
    <div> <!-- main zone -->
 
        <!-- PAGE CONTENT WRAPPER -->
        <div style="width: 970px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; border: 1px solid #ffffff;">  <!-- inner wrapper -->
 
            <!-- SPACER -->
            <div style="padding-top:25px; border: 1px solid #facefa;"></div>
 
            <!-- PAGE HEADER -->
            <div style="height: 20px; width: 970px; background-image:url(title.gif)"></div>
                                    <!-- was 974 -->
 
            <!-- SPACER -->
            <div style="padding-top:5px; border: 1px solid #facefa;"></div>
 
            <!-- NAVIGATION COLUMN -->
            <div style="min-height: 100%; height: 100%; width: 130px; float: left; overflow: auto; text-align: center; border: 1px solid #ffffff; ">
            
                <div style="height: 255px; width:129px;">
 
                    <div style="height: 40px; width: 129px; background-image:url(menupadtop.gif);"></div>
 
                    <div style="height: 186px; width: 10px; background-image:url(menupadleft.gif); float: left;"></div>
 
                    <div style="height: 186px; width: 106px; background-image:url(menupadcenter.jpg); float: left;">
 
                        <a style="display:block;  margin-top: 3px; margin-bottom: 2px;" href="introduction.html" target="mainview" onclick="singleover('viewtitle','viewtitleintroduction.gif');" onmouseover="singleover('menuintroduction','menulinkintroductionon.gif'); window.status=''; return true;" onmouseout="singleover('menuintroduction','menulinkintroductionoff.gif'); window.status='';"><img src="menulinkintroductionoff.gif" name="menuintroduction" height="18" width="106" border="0"></a>
                        <a style="display:block; margin-bottom: 2px;" href="aboutmeintro.html" target="mainview" onclick="singleover('viewtitle','viewtitleaboutme.gif');" onmouseover="singleover('menuaboutme','menulinkaboutmeon.gif'); window.status=''; return true;" onmouseout="singleover('menuaboutme','menulinkaboutmeoff.gif'); window.status='';"><img src="menulinkaboutmeoff.gif" name="menuaboutme" height="18" width="106" border="0"></a>
                        <a style="display:block; margin-bottom: 2px;" href="aboutmypageintro.html" target="mainview" onclick="singleover('viewtitle','viewtitleaboutmypage.gif');" onmouseover="singleover('menuaboutmypage','menulinkaboutmypageon.gif'); window.status=''; return true;" onmouseout="singleover('menuaboutmypage','menulinkaboutmypageoff.gif'); window.status='';"><img src="menulinkaboutmypageoff.gif" name="menuaboutmypage" height="18" width="106" border="0"></a>
                        <a style="display:block; margin-bottom: 2px;" href="photographyintro.html" target="mainview" onclick="singleover('viewtitle','viewtitlephotography.gif');" onmouseover="singleover('menuphotography','menulinkphotographyon.gif'); window.status=''; return true;" onmouseout="singleover('menuphotography','menulinkphotographyoff.gif'); window.status='';"><img src="menulinkphotographyoff.gif" name="menuphotography" height="18" width="106" border="0"></a>
                        <a style="display:block; margin-bottom: 2px;" href="travelintro.html" target="mainview" onclick="singleover('viewtitle','viewtitletravel.gif');" onmouseover="singleover('menutravel','menulinktravelon.gif'); window.status=''; return true;" onmouseout="singleover('menutravel','menulinktraveloff.gif'); window.status='';"><img src="menulinktraveloff.gif" name="menutravel" height="18" width="106" border="0"></a>
                        <a style="display:block; margin-bottom: 2px;" href="projectsintro.html" target="mainview" onclick="singleover('viewtitle','viewtitleprojects.gif');" onmouseover="singleover('menuprojects','menulinkprojectson.gif'); window.status=''; return true;" onmouseout="singleover('menuprojects','menulinkprojectsoff.gif'); window.status='';"><img src="menulinkprojectsoff.gif" name="menuprojects" height="18" width="106" border="0"></a>
                        <a style="display:block; margin-bottom: 2px;" href="/weblog/" target="mainview" onclick="singleover('viewtitle','viewtitleblog.gif');" onmouseover="singleover('menublog','menulinkblogon.gif'); window.status=''; return true;" onmouseout="singleover('menublog','menulinkblogoff.gif'); window.status='';"><img src="menulinkblogoff.gif" name="menublog" height="18" width="106" border="0"></a>
                        <a style="display:block; margin-bottom: 2px;" href="worthylinksintro.html" target="mainview" onclick="singleover('viewtitle','viewtitleworthylinks.gif');" onmouseover="singleover('menuworthylinks','menulinkworthylinkson.gif'); window.status=''; return true;" onmouseout="singleover('menuworthylinks','menulinkworthylinksoff.gif'); window.status='';"><img src="menulinkworthylinksoff.gif" name="menuworthylinks" height="18" width="106" border="0"></a>
                        <a href="contactmeintro.html" target="mainview" onclick="singleover('viewtitle','viewtitlecontactme.gif');" onmouseover="singleover('menucontactme','menulinkcontactmeon.gif'); window.status=''; return true;" onmouseout="singleover('menucontactme','menulinkcontactmeoff.gif'); window.status='';"><img src="menulinkcontactmeoff.gif" name="menucontactme" height="18" width="106" border="0"></a>
 
                    </div>
 
                    <div style="height: 186px; width: 13px; background-image:url(menupadright.gif); float: left;"></div>
 
                    <div style="height: 29px; width: 129px; background-image:url(menupadbottom.gif); clear: both;"></div>
 
                </div>
 
                <br/>
                <p class="font_attention eight_point text_white"><b>Content Updated:</b><br/>15 March 2008</p>
 
            </div>
 
            <!-- IFRAME AND CONTENT COLUMN -->
            <div style="width: 830px; float: right; border: 1px solid #ffffff;">
            
                <div style="height: 3px; width: 829px; background-image:url(viewtitletop.gif);"></div>
            
                <div style="height: 12px; width: 13px; background-image:url(viewtitleleft.gif); float: left;"></div>
                <div style="height: 12px; width: 245px; float: left; background-color: #DCDCDC;"><img src="viewtitleintroduction.gif" width="120" height="12" name="viewtitle"/></div>
                <div style="height: 12px; width: 571px; background-image:url(viewtitleright.gif); float: left;"></div>
            
                <div style="height: 17px; width: 829px; background-image:url(viewtop.gif); clear: both;"></div>
            
                <div style="height: 500px; width: 13px; background-image:url(viewleft.gif); float: left;"></div>
            
                <div style="height: 500px; width: 800px; float: left;">
                    <iframe src="introduction.html" name="mainview" border="0" frameborder="0" framespacing="0" marginwidth="0" marginheight="0" scrolling="auto" height="100%" width="100%"></iframe>
                </div>
            
                <div style="height: 500px; width: 16px; background-image:url(viewright.gif); float: left;"></div>
            
                <div style="height: 32px; width: 829px; background-image:url(viewbottom.gif); clear: both;"></div>
            
            </div>
 
            <!-- SPACER -->
            <div style="padding-top:1px; border: 1px solid #facefa; clear: both;"></div>
 
            <!-- FOOTER - INCLUDING MUSIC PLAYER -->
            <div style="height: 19px; width: 40px; background-image:url(musicleft.gif); float: left;"></div>
            <div style="height: 19px; width: 400px; float: left">
                <div style="height: 2px; width: 400px; background-image:url(musictop.gif);"></div>
                <div style="height: 15px; width: 400px;">
        
                    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="400" height="15">
                        <param name="allowScriptAccess" value="sameDomain"/>
                        <param name="movie" value="http://www.hawkinwinter.com/music/xspf_player_slim.swf?playlist_url=http://www.hawkinwinter.com/music/playlist.xspf"/
                        <param name="quality" value="high"/>
                        <param name="bgcolor" value="#E6E6E6"/>
                        <embed src="http://www.hawkinwinter.com/music/xspf_player_slim.swf?playlist_url=http://www.hawkinwinter.com/music/playlist.xspf" quality="high" bgcolor="#E6E6E6" name="xspf_player" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="15" width="400"></embed>
                    </object>
        
                </div>
                <div style="height: 2px; width: 400px; background-image:url(musicbottom.gif);"></div>
            </div>                           <!-- was 534 -->
            <div style="height: 19px; width: 530px; background-image:url(musicright.gif); float: left;"></div>
 
            <!-- SUB FOOTER - FOR DATES AND STUFF -->
            <div style="clear:both; text-align: right;">
                <span class="font_attention eight_point text_white" style="margin-right: 15px">&copy; 2008 www.hawkinwinter.com</span>
            </div>
 
        </div>
 
    </div>
 
</body>
</html>

           
         

	Title
1	CSS Rounded Corners help
2	CSS float drop caused by Firefox 3
3	how to center an image that loads into …

How do I make an IFRAME inside a DIV automatically resize to 80% of the browser window's current height and width

Asked by hawkinwinter in JavaScript, Cascading Style Sheets (CSS), Dynamic HTML (DHTML)

Tags: XHTML JavaScript, IE7, Firefox 2, Safari 3, http://www.hawkinwinter.com/mainindex2.html

About this solution