PDA

Click to See Complete Forum and Search --> : change DIV Width

pelegk1
08-25-2003, 05:05 AM
i have a div with an img in it!
is it possible to change the div width?
then how?
i tried this and it didnt work :
div1.style.width=10;
and nothing happend
10X:)
peleg
Fang
08-25-2003, 07:19 AM
document.getElementById('div1').style.width="10px";
pelegk1
08-25-2003, 07:58 AM
maybe bacuse i insert into my div an html code
with an image in a fixed size?
pelegk1
08-25-2003, 08:01 AM
as the div has changes its size and it dosent:(
what 2 d?
10X:) peleg
pyro
08-25-2003, 08:06 AM
Try adding this line:

document.getElementById("div1").style.overflow = "hidden";
pelegk1
08-25-2003, 08:10 AM
where did u hide that property all of this time?

by the way maybe u have a function that :
what oi want to do i like to open sore of a duv in the center of my screen
that will start in div width= 0
and will open until width=300
???
thanks alot for the help
peleg
pyro
08-25-2003, 08:32 AM
No, I don't have anything off hand, but it would be easy enough to build one, using this (http://www.infinitypages.com/research/verticalcentereddiv.htm) to center the div... Hang on...

Ok, here it is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Expanding Centered Div</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function expand() {
width = 300 // The width you'd like the div to be
speed = 2 //the number of pixels to move each time
obj = document.getElementById("mydiv");
obj.style.overflow = "hidden";
divwidth = parseInt(obj.style.width);
if (divwidth <= width) {
newwidth = divwidth + speed
obj.style.width = newwidth+"px";
expanddiv = setTimeout("expand()",10);
}
else {
clearTimeout("expanddiv");
}
}
expanddiv = setTimeout("expand()",10);
</script>

</head>
<body>
<div id="mydiv" style="position:absolute;
top: 50%;
left: 50%;
width:0px;
height:250px;
margin-top: -125px; /*set to a negative number 1/2 of your height*/
margin-left: -200px; /*set to a negative number 1/2 of your width*/
border: 1px solid;
background-color: #eeeeee;
overflow: auto;">
This is a centered, expanding div....
</div>
</body>
</html>
pelegk1
08-25-2003, 08:34 AM
ok 1 sec checking
pelegk1
08-25-2003, 08:36 AM
i was looking for something that expands to both sides atthe same time
pelegk1
08-25-2003, 08:40 AM
open to both sides and closes to both sides fom the center
equally but i cant figure out how they did it :
http://javascript.internet.com/messages/QLib/amazing-message-box.html

maybe some else can
pyro
08-25-2003, 09:22 AM
Try something like this, then:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Expanding Centered Div</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
width = 300 // The width you'd like the div to be
height = 252;
speed = 2 //the number of pixels to move each time
left = Math.round(width/2);
right = Math.round(width/2)+2;
function expand() {
obj = document.getElementById("mydiv");
left = left - speed;
right = right + speed;
if (left >= 0) {
obj.style.clip = "rect(0px "+right+"px "+height+"px "+left+"px)";
expanddiv = setTimeout("expand()",10);
}
else {
clearTimeout("expanddiv");
}
}
expanddiv = setTimeout("expand()",10);
</script>

</head>
<body>
<div id="mydiv" style="position:absolute;
top: 50%;
left: 50%;
width:300px;
height:250px;
margin-top: -125px; /*set to a negative number 1/2 of your height*/
margin-left: -200px; /*set to a negative number 1/2 of your width*/
border: 1px solid;
background-color: #eeeeee;
overflow: hidden;">
This is a centered, expanding div....

</div>
</body>
</html>
pelegk1
08-26-2003, 12:27 AM
the Only things i can say u in Hebrew
"ATA mebozbaz " which means your wasted talent man!
10X:) alot *100000000000000000000
pyro
08-26-2003, 06:57 AM
Happy to help... :)