Dynamically alter outter div as inner one gets bigger.
- by Razor Storm
I have two divs, one inside another. The outter one is called #wrapper, while the inner one is called #pad.
Now #pad allows user input, and I have a javascript (jQuery) function that changes the content of #pad based on what the user input is. Sometimes, because of this function, #pad's content will cause the div to become more elongated than before. Now obviously I would wish for #wrapper to grow longer as well to accommodate this change in #pad's length. However, this does not occur.
#wrapper
{
clear:both;
padding-top:0.5em;
/*padding-left:50px;*/
height: 100%;
background-color: rgba(255,255,255,0.4);
-moz-border-radius: 20px 20px 0px 0px;
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
}
#pad
{
margin-top: 25px;
-moz-border-radius: 5px;
border: solid 1px #DDD;
margin-left:25px;
padding-left:25px;
margin-right:25px;
padding-right:25px;
margin-bottom:2em;
}
This is the javascript function:
function preview()
{
var id1=$("#input1").val();
var id2=$("#input2").val();
var id3=$("#input3").val();
var id4=$("#input4").val();
var id5=$("#input5").val();
if(id1!= null && id1!="")
{
if( $("#preview1").attr("src")!=id1)
{
$("#preview1").attr("src",id1);
$("#preview1").fadeIn("slow");
}
}
else
{
$("#preview1").attr("src","");
$("#preview1").fadeOut("slow");
}
if(id2!= null && id2!="")
{
if( $("#preview2").attr("src")!=id2)
{
$("#preview2").attr("src",id2);
$("#preview2").fadeIn("slow");
}
}
else
{
$("#preview2").attr("src","");
$("#preview2").fadeOut("slow");
}
if(id3!= null && id3!="")
{
if( $("#preview3").attr("src")!=id3)
{
$("#preview3").attr("src",id3);
$("#preview3").fadeIn("slow");
}
}
else
{
$("#preview3").attr("src","");
$("#preview3").fadeOut("slow");
}
if(id4!= null && id4!="")
{
if( $("#preview4").attr("src")!=id4)
{
$("#preview4").attr("src",id4);
$("#preview4").fadeIn("slow");
}
}
else
{
$("#preview4").attr("src","");
$("#preview4").fadeOut("slow");
}
if(id5!= null && id5!="")
{
if( $("#preview5").attr("src")!=id5)
{
$("#preview5").attr("src",id5);
$("#preview5").fadeIn("slow");
}
}
else
{
$("#preview5").attr("src","");
$("#preview5").fadeOut("slow");
}
setTimeout("preview()",1000);
$("#wrapper").attr("height",$(document).attr("height"));
}
http://surveys.mylifeisberkeley.com/
