By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,813 Members | 1,030 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,813 IT Pros & Developers. It's quick & easy.

fill the parent window height using 100%

P: 6
I want to fill the parent window height with respect to the sub window height which is loading using ajax (mootools).
For example if the parent window height is normal and the loading child window height is 1200px (saying), when the child window load the height of the parent window changs but the backgorund color which is given 100% not fill the parent window.

I have given my example codes, please give a solution as soon as possible,

Thank You,

this is my javascript named as effect.js
Expand|Select|Wrap|Line Numbers
  3.             function dimBg() {
  4.                 document.getElementById("contentarea").style.visibility = "hidden";
  5.                 var conjoin = new Chain();
  6.                 function fadeinBg(){
  7.                     var dimmerObj = new Fx.Style($('Bg'), 'opacity', {duration: 200, transition: Fx.Transitions.Quart.easeInOut});
  8.                     dimmerObj.start(0.0,0.75); // fade in Bg
  9.                 }
  10.                 function fadeinqwe(){
  11.                     var dimmerObj = new Fx.Style($('midim'), 'opacity', {duration: 200, transition: Fx.Transitions.Quart.easeInOut});
  12.                     dimmerObj.start(0.0,0.5); // fade in Bg
  13.                 }
  14.                 function fadeinPage(){
  15.                     var focusObj = new Fx.Style($('contentarea'), 'opacity', {duration: 500, transition: Fx.Transitions.Quart.easeInOut});
  16.                     focusObj.start(0,1); // fade in contentarea.
  17.                 }
  18.                 conjoin.chain(fadeinBg);
  19.                 conjoin.chain(fadeinqwe);
  20.                 conjoin.chain(fadeinPage);
  21.                 conjoin.callChain();
  22.                 conjoin.callChain.delay(200, conjoin);
  23.                 conjoin.callChain.delay(1900, conjoin);                
  24.             }
  27.                 // load link on top of the homepage itself using AJAX.
  29.                 var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
  30.                 var loadedobjects=""
  31.                 var rootdomain="http://"+window.location.hostname
  32.                 var bustcacheparameter=""
  34.                 function loadLink(url, containerid){
  35.                     // start link load by dimming out the BG.
  36.                     dimBg();
  38.                     var page_request = false
  39.                     if (window.XMLHttpRequest) // if Mozilla, Safari etc
  40.                         page_request = new XMLHttpRequest()
  41.                     else if (window.ActiveXObject){ // if IE
  42.                         try {
  43.                             page_request = new ActiveXObject("Msxml2.XMLHTTP")
  44.                         } 
  45.                         catch (e){
  46.                             try{
  47.                                 page_request = new ActiveXObject("Microsoft.XMLHTTP")
  48.                             }
  49.                         catch (e){}
  50.                         }
  51.                     }
  52.                     else
  53.                     return false
  54.                     page_request.onreadystatechange=function(){
  55.                         loadpage(page_request, containerid)
  56.                     }
  57.                     if (bustcachevar) //if bust caching of external page
  58.                         bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
  59.               'GET', url+bustcacheparameter, true)
  60.                         page_request.send(null)
  61.                     }
  63.                     function loadpage(page_request, containerid){
  64.                         if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
  65.                         document.getElementById(containerid).innerHTML=page_request.responseText
  66.                     }
  68.                     function loadobjs(){
  69.                         if (!document.getElementById)
  70.                         return
  71.                         for (i=0; i<arguments.length; i++){
  72.                             var file=arguments[i]
  73.                             var fileref=""
  74.                             if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
  75.                                 if (file.indexOf(".js")!=-1){ //If object is a js file
  76.                                     fileref=document.createElement('script')
  77.                                     fileref.setAttribute("type","text/javascript");
  78.                                     fileref.setAttribute("src", file);
  79.                                 }
  80.                             else if (file.indexOf(".css")!=-1){ //If object is a css file
  81.                                 fileref=document.createElement("link")
  82.                                 fileref.setAttribute("rel", "stylesheet");
  83.                                 fileref.setAttribute("type", "text/css");
  84.                                 fileref.setAttribute("href", file);
  85.                             }
  86.                         }
  87.                         if (fileref!=""){
  88.                             document.getElementsByTagName("head").item(0).appendChild(fileref)
  89.                             loadedobjects+=file+" " //Remember this object as being already added to page
  90.                         }
  91.                     }
  92.                 }
parent window html file
Expand|Select|Wrap|Line Numbers
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. "">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <script type="text/javascript" src="mootools.js"></script>
  8. <script type="text/javascript" src="effects.js"></script>
  9. <title>Untitled Document</title>
  10. <script type="text/javascript">
  11. function dimtest(){
  12. document.getElementById('bg').style.visibility="visible";
  13. }
  14. </script>
  15. <style type="text/css">
  16. body{
  17. border-bottom:0px;
  18. border-left:0px;
  19. border-right:0px;
  20. border-top:0px;
  21. height:100%;
  22. margin:0px;
  23. }
  24. .outer {width:100%; height:100%;background:#000000; border-bottom:0px; border-right:0px; border-right:0px; border-top:0px; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:-50px; visibility:hidden;}
  25. .footer {width:100%;height:100%;background:yellow}
  26. </style>
  27. </head>
  29. <body>
  30. <div id="Bg" class="outer" ></div>
  31.         <div style="width: 100%; position: absolute; top: 0px;  left: 0px; z-index:40;">
  32.             <div id="contentarea" style="margin:90px auto; margin:5% 5%;width:90%;  position:absolute; background-color:#FFFFFF; visibility:hidden; "></div>
  33.         </div>
  34. <div id="midim" style="top:100px;left:500px; position:absolute; font-size:36px; color:#990000; "><a id="dimbg();" href="javascript:loadLink('testround.html', 'contentarea');" >click here</a></div>
  35. </body>
  36. </html>
this is the child window which i named as testround.html
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
  2. <html>
  3. <head>
  4. <title>Nifty Corners: HTML CSS rounded corners</title>
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  6. <meta name="generator" content="HAPedit 3.1">
  7. <style type="text/css">
  8. body{padding: 20px;background-color: #FFF;
  9.     font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif; height:100%;}
  10. h1,h2,p{margin: 0 10px}
  11. h1{font-size: 250%;color: #FFF}
  12. h2{font-size: 200%;color: #f0f0f0}
  13. p{padding-bottom:1em}
  14. h2{padding-top: 0.3em}
  15. div#nifty{ margin: 0 10%;background: #9BD1FA}
  17. b.rtop, b.rbottom{display:block;background: #FFF}
  18. b.rtop b, b.rbottom b{display:block;height: 1px;
  19.     overflow: hidden; background: #9BD1FA}
  20. b.r1{margin: 0 5px}
  21. b.r2{margin: 0 3px}
  22. b.r3{margin: 0 2px}
  23. b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
  24. </style>
  25. </head>
  26. <body>
  27. <div id="nifty">
  28. <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
  29. <h1>Nifty Corners</h1>
  30. <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
  31. <h2>Rounded corners without images</h2>
  32. <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
  33. ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
  34. <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
  35. uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
  36. <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
  37. auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
  38. uaeuueuu eeue ieu.</p>
  39. <h1>Nifty Corners</h1>
  40. <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
  41. <h2>Rounded corners without images</h2>
  42. <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
  43. ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
  44. <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
  45. uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
  46. <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
  47. auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
  48. uaeuueuu eeue ieu.</p>
  49. <h1>Nifty Corners</h1>
  50. <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
  51. <h2>Rounded corners without images</h2>
  52. <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
  53. ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
  54. <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
  55. uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
  56. <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
  57. auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
  58. uaeuueuu eeue ieu.</p>
  59. <h1>Nifty Corners</h1>
  60. <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
  61. <h2>Rounded corners without images</h2>
  62. <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
  63. ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
  64. <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
  65. uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
  66. <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
  67. auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
  68. uaeuueuu eeue ieu.</p>
  69. <h1>Nifty Corners</h1>
  70. <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
  71. <h2>Rounded corners without images</h2>
  72. <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
  73. ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
  74. <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
  75. uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
  76. <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
  77. auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
  78. uaeuueuu eeue ieu.</p>
  79. <h1>Nifty Corners</h1>
  80. <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
  81. <h2>Rounded corners without images</h2>
  82. <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
  83. ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
  84. <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
  85. uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
  86. <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
  87. auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
  88. uaeuueuu eeue ieu.</p>
  89. <h1>Nifty Corners</h1>
  90. <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
  91. <h2>Rounded corners without images</h2>
  92. <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
  93. ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
  94. <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
  95. uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
  96. <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
  97. auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
  98. uaeuueuu eeue ieu.</p>
  99. <h1>Nifty Corners</h1>
  100. <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
  101. <h2>Rounded corners without images</h2>
  102. <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
  103. ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
  104. <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
  105. uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
  106. <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
  107. auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
  108. uaeuueuu eeue ieu.</p>
  109. <h1>Nifty Corners</h1>
  110. <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
  111. <h2>Rounded corners without images</h2>
  112. <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
  113. ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
  114. <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
  115. uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
  116. <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
  117. auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
  118. uaeuueuu eeue ieu.</p>
  119. <h1>Nifty Corners</h1>
  120. <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
  121. <h2>Rounded corners without images</h2>
  122. <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
  123. ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
  124. <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
  125. uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
  126. <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
  127. auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
  128. uaeuueuu eeue ieu.</p>
  129. <h1>Nifty Corners</h1>
  130. <p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
  131. <h2>Rounded corners without images</h2>
  132. <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
  133. ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
  134. <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
  135. uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
  136. <p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
  137. auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
  138. uaeuueuu eeue ieu.</p>
  139. <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
  140. </div>
  141. </body>
  142. </html>
please help, your help will be greatefull to me..
thank you so much..
Apr 16 '08 #1
Share this Question
Share on Google+
1 Reply

Expert Mod 15k+
P: 16,027
Have you tried this without any effects, simply loading the page via Ajax?
Apr 17 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.