resize image onresize
hi i have this
<script language="javascript">
<!-- Begin
function objbyid( id )
{
var returnVar;
if (document.getElementById)
returnVar = document.getElementById(id);
else if (document.all)
returnVar = document.all[id];
else if (document.layers)
returnVar = document.layers[id];
return returnVar;
}
// End -->
</script>
<img id="bgil" style="position:absolute;z-index:500" src="mainsh2.gif" border="0">
<table id="bgit" onResize="objbyid('bgil').width = this.width; objbyid('bgil').height = this.height;" onLoad="onResize()" cellSpacing="0" cellPadding="0" border="0">
but it aint working... any sugestions
[793 byte] By [
Mitsukai] at [2007-11-20 5:27:49]
# 1 Re: resize image onresize
The onresize event doesn't fire when the window is resized, it fires when you change the size of the table yourself.
document.getElementById('bgil').style.width = '500px';
# 2 Re: resize image onresize
so how do i do it then.
# 3 Re: resize image onresize
Attach to event to the window.
function functionname(){
// resize the image with the window dimensions
}
window.onresize = functionname();
# 4 Re: resize image onresize
okay thanks you.
# 5 Re: resize image onresize
You're welcome. Good luck! :thumb:
# 6 Re: resize image onresize
is not working to me.
<script language="javascript">
<!-- Begin
function objbyid( id )
{
var returnVar;
if (document.getElementById)
returnVar = document.getElementById(id);
else if (document.all)
returnVar = document.all[id];
else if (document.layers)
returnVar = document.layers[id];
return returnVar;
}
function resizewnd()
{
var bgit = objbyid('bgit');
var bgil = objbyid('bgil');
bgil.style.width = bgit.style.width;
}
window.onresize=resizewnd();
// End -->
</script>
<img id="bgil" style="position:absolute;z-index:500" src="mainsh2.gif" border="0">
<table id="bgit" cellSpacing="0" cellPadding="0" width="100%" border="0">
# 7 Re: resize image onresize
You're close. First you need to stop using that object function and just use document.getElementById(). It is browser universal. Second, in order to get the table width you can't use style.width because that is CSS. Since you didn't personally set the CSS yet, it will return nothing. You must use offsetWidth.
function resizewnd(){
var bgit = document.getElementById('bgit');
var bgil = document.getElementById('bgil');
var bgitWidth = bgit.offsetWidth;
bgil.style.width = bgitWidth;
}
window.onresize = resizewnd;
window.onload = resizewnd;
# 8 Re: resize image onresize
thanks man will try it
# 9 Re: resize image onresize
im sorry but i did axactly as u sayd and its not working :/
nvm i saw my mistake thnx
# 10 Re: resize image onresize
Glad all is working.
# 11 Re: resize image onresize
ok do u know i tried setting the top and left but it doesnt work with offsetSomething.
also is there a any good javascript documentation that is short and powerfull so i can look all these silly things up myselve?
# 12 Re: resize image onresize
Here is a quick function I threw together for you. It will get the dimensions and position of any HTML DOM element.
<script language="JavaScript">
function getPosition(id){
var obj = document.getElementById(id);
if(obj.offsetParent){
x = obj.offsetLeft;
y = obj.offsetTop;
w = obj.offsetWidth;
h = obj.offsetHeight;
while(obj = obj.offsetParent){
x += obj.offsetLeft;
y += obj.offsetTop;
}
alert("Left: " + x + " Top: " + y + " Width: " + w + " Height:" + h);
}
else{
alert('Cannot trap parent!');
}
}
</script>
# 13 Re: resize image onresize
it stays in 0,0 corner... :( bgit is a table in a table if that matters
<script language="javascript">
<!-- Begin
function resizewnd(){
var bgit = document.getElementById('bgit');
var bgil = document.getElementById('bgil');
bgil.style.left = bgit.offsetLeft;
bgil.style.top = bgit.offsetTop;
bgil.style.width = bgit.offsetWidth;
bgil.style.height = bgit.offsetHeight;
while(bgit = bgit.offsetParent)
{
bgil.style.left += bgit.offsetLeft;
bgil.style.top += bgit.offsetTop;
}
}
window.onresize = resizewnd;
window.onload = resizewnd;
// End -->
</script>
<img id="bgil" style="position:absolute;z-index:1;" src="mainsh2.gif" height="0" width="0" border="0">
<table style="position:absolute;z-index:2;" cellSpacing="0" cellPadding="0" width="90%" border="0">
...
<tr><td>
<table id="bgit" cellSpacing="0" cellPadding="0" width="100%" border="0">
# 14 Re: resize image onresize
Once again, close but not there. You forgot what I mentioned about obj.style.WHATEVER. That is CSS. Since you did not set them, they read as 0. So your function is just incrementing 0. Mine reads the object and increments that integer. After everything else is read then you set the CSS.
function resizewnd(){
var bgit = document.getElementById('bgit');
if(bgit.offsetParent){
x = bgit.offsetLeft;
y = bgit.offsetTop;
w = bgit.offsetWidth;
h = bgit.offsetHeight;
while(bgit = bgit.offsetParent){
x += bgit.offsetLeft;
y += bgit.offsetTop;
}
}
var bgil = document.getElementById('bgil');
bgil.style.left = x;
bgil.style.top = y;
bgil.style.width = w;
bgil.style.height = h;
}
window.onresize = resizewnd;
window.onload = resizewnd;
# 15 Re: resize image onresize
arg aah i understand ... javascript is iwth css is confusing..
# 16 Re: resize image onresize
javascript is iwth css is confusing
At first. But it is very quickly grasped. Good luck! :thumb:
# 17 Re: resize image onresize
its works ... thank you alot man..
also why doesnt 0 write to the css?
# 18 Re: resize image onresize
also why doesnt 0 write to the css?
I don't understand what you mean? Let me try to make my explanation more clear.
You cannot do the following because it is attempting to read CSS.
alert(obj.style.width);
You can do the following because you set the CSS prior to reading it.
obj.style.width = '500px';
alert(obj.style.width);
Until you set the CSS, you must use the parent offset.
# 19 Re: resize image onresize
axaclty what i mean if u write offsetWidth to the css and is 0, it does not write 0 to the css but ignores it..
# 20 Re: resize image onresize
axaclty what i mean if u write offsetWidth to the css and is 0, it does not write 0 to the css but ignores it..
No. If the offsetWidth is equal to 0. And you set the style.width = offsetWidth, then the CSS will read 0px.
