fill the parent window height using 100% | Newbie | | Join Date: Apr 2008
Posts: 6
| |
HELLO ALL,
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 -
-
-
function dimBg() {
-
document.getElementById("contentarea").style.visibility = "hidden";
-
var conjoin = new Chain();
-
function fadeinBg(){
-
var dimmerObj = new Fx.Style($('Bg'), 'opacity', {duration: 200, transition: Fx.Transitions.Quart.easeInOut});
-
dimmerObj.start(0.0,0.75); // fade in Bg
-
}
-
function fadeinqwe(){
-
var dimmerObj = new Fx.Style($('midim'), 'opacity', {duration: 200, transition: Fx.Transitions.Quart.easeInOut});
-
dimmerObj.start(0.0,0.5); // fade in Bg
-
}
-
function fadeinPage(){
-
var focusObj = new Fx.Style($('contentarea'), 'opacity', {duration: 500, transition: Fx.Transitions.Quart.easeInOut});
-
focusObj.start(0,1); // fade in contentarea.
-
}
-
conjoin.chain(fadeinBg);
-
conjoin.chain(fadeinqwe);
-
conjoin.chain(fadeinPage);
-
conjoin.callChain();
-
conjoin.callChain.delay(200, conjoin);
-
conjoin.callChain.delay(1900, conjoin);
-
}
-
-
-
// load link on top of the homepage itself using AJAX.
-
-
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
-
var loadedobjects=""
-
var rootdomain="http://"+window.location.hostname
-
var bustcacheparameter=""
-
-
function loadLink(url, containerid){
-
// start link load by dimming out the BG.
-
dimBg();
-
-
var page_request = false
-
if (window.XMLHttpRequest) // if Mozilla, Safari etc
-
page_request = new XMLHttpRequest()
-
else if (window.ActiveXObject){ // if IE
-
try {
-
page_request = new ActiveXObject("Msxml2.XMLHTTP")
-
}
-
catch (e){
-
try{
-
page_request = new ActiveXObject("Microsoft.XMLHTTP")
-
}
-
catch (e){}
-
}
-
}
-
else
-
return false
-
page_request.onreadystatechange=function(){
-
loadpage(page_request, containerid)
-
}
-
if (bustcachevar) //if bust caching of external page
-
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
-
page_request.open('GET', url+bustcacheparameter, true)
-
page_request.send(null)
-
}
-
-
function loadpage(page_request, containerid){
-
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
-
document.getElementById(containerid).innerHTML=page_request.responseText
-
}
-
-
function loadobjs(){
-
if (!document.getElementById)
-
return
-
for (i=0; i<arguments.length; i++){
-
var file=arguments[i]
-
var fileref=""
-
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
-
if (file.indexOf(".js")!=-1){ //If object is a js file
-
fileref=document.createElement('script')
-
fileref.setAttribute("type","text/javascript");
-
fileref.setAttribute("src", file);
-
}
-
else if (file.indexOf(".css")!=-1){ //If object is a css file
-
fileref=document.createElement("link")
-
fileref.setAttribute("rel", "stylesheet");
-
fileref.setAttribute("type", "text/css");
-
fileref.setAttribute("href", file);
-
}
-
}
-
if (fileref!=""){
-
document.getElementsByTagName("head").item(0).appendChild(fileref)
-
loadedobjects+=file+" " //Remember this object as being already added to page
-
}
-
}
-
}
-
-
-
parent window html file -
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-
"http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-
<script type="text/javascript" src="mootools.js"></script>
-
<script type="text/javascript" src="effects.js"></script>
-
<title>Untitled Document</title>
-
<script type="text/javascript">
-
function dimtest(){
-
document.getElementById('bg').style.visibility="visible";
-
}
-
</script>
-
<style type="text/css">
-
body{
-
border-bottom:0px;
-
border-left:0px;
-
border-right:0px;
-
border-top:0px;
-
height:100%;
-
margin:0px;
-
}
-
.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;}
-
.footer {width:100%;height:100%;background:yellow}
-
</style>
-
</head>
-
-
<body>
-
<div id="Bg" class="outer" ></div>
-
<div style="width: 100%; position: absolute; top: 0px; left: 0px; z-index:40;">
-
<div id="contentarea" style="margin:90px auto; margin:5% 5%;width:90%; position:absolute; background-color:#FFFFFF; visibility:hidden; "></div>
-
</div>
-
<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>
-
</body>
-
</html>
-
-
-
this is the child window which i named as testround.html
please help, your help will be greatefull to me..
thank you so much..
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,581
| | | re: fill the parent window height using 100%
Have you tried this without any effects, simply loading the page via Ajax?
|  | Similar JavaScript / Ajax / DHTML bytes | | | /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,531 network members.
|