Click to See Complete Forum and Search --> : Image resizing
Motabobo
06-02-2003, 12:28 PM
Hi !
I've found that neatscript at dhtmlshock :
http://www.dhtmlshock.com/image-effects/resizeimage/default.asp
I have two questions about it :
1-Is it possible to make that script work without reloading the entire page everytime the browser is resized ?
2-What if i would like that image to be nested withing a 3 columns table ? The image would be in the center of that table (middle column) and when i would resize the browser, the tables, columns and image would resize accordingly (table's width in %). All the examples shown there are either fullscreen or on top of each other (+ they are not in a table).
Thanks !!
scriptkid
06-02-2003, 12:31 PM
onresize="imageid.width=newwidth; imageid.height=newheight;"
Motabobo
06-02-2003, 12:37 PM
Thanks for your fast reply !
Where do i put this line ? Do i overwrite another one ?
I forgot to mention i need a script that works for Netscape 6 !
I'll test that as soon as i know where to put it lol
scriptkid
06-02-2003, 12:40 PM
well a little more detailed then would be something like this:
<body onresize="theimage.height=screen.height;theimage.width=screen.width">
<img src="images/myimage.gif" name="theimage" id="theimage">
</body>
Im thinking it would be something like that although I'd feel more comfortable with one of the elders confirmation
Motabobo
06-02-2003, 12:48 PM
That doesn't work, even under IE.
I think it has to do as screen.height is not equal as the browser height, same thing for width !
Any idea ?
scriptkid
06-02-2003, 12:53 PM
you can try this although still i havent tested it...guess i should start testing this stuff huh...
<html>
<head>
<script language="javascript">
function resizeimage( image )
{
if(document.all)
{
theimage.width = document.body.clientWidth;
theimage.height = document.body.clientHeight;
} else {
theimage.width = window.innerWidth;
theimage.width = window.innerHeight;
}
}
</script>
</head>
<body onresize="resizeimage(theimage);">
<img src="images/img.src" height="200" width="200" name="theimage" id="theimage">
</body>
</html>
Khalid Ali
06-02-2003, 12:53 PM
if you are concerned about this piece of code in the body tag
onResize="history.go(0)"
you can remove it.
And the code should still work.the image re-sizing is not done using reload the page at all..
scriptkid
06-02-2003, 01:02 PM
document.write will refresh the page however.
Try setting up a div with the image in it and writing to that div instead of the actual document itself.
Motabobo
06-02-2003, 01:05 PM
Hi again and thank you all for your answers!
The original script seems to need the refresh action to redraw the image !
On the other hand, scriptkid's script works for IE so far. Didn't test it for Netscape, but i will in 5 minutes lol.
How can i put this image in a table now (that's the whole point of the question) ? So that the image resizes with the table ?
Thanks again !!!
btw how do i get rid of those stupid scrollbars ? I tried setting the overflow of the body to auto but it doesn't work !
Khalid Ali
06-02-2003, 01:17 PM
As I said this is what you are trying to do..
take a look...works with most browsers(IE,NS6+ oper7)
http://68.145.35.86//temp/ResizeImageOnResize.html
Motabobo
06-02-2003, 01:31 PM
I'm sorry I didn't understand you !!!
Do you have any idea about nesting the image in a table ???
Also, could you check one my previous post about my tree menu in Netscape ???
You asked me the link to the source files in a previous post. I now have made a post with everything you need (i think !)
Many thanks :-)
Khalid Ali
06-02-2003, 01:40 PM
Test the link above now....
I'll see which one you referring to as for the other post..
:D
Motabobo
06-02-2003, 01:50 PM
Thank you :D
One thing though, when i talked about nesting the images within a table, i meant putting the image in the middle column of a 3 columns table (each at ~ 33%), so the image resizes along the middle column !
Do you think it is feasible ?
scriptkid
06-02-2003, 01:57 PM
you should be able to use what he posted for that as well
Motabobo
06-02-2003, 02:12 PM
I know i'm a ***** and that it's probably html related but i used this :
<BODY style="OVERFLOW: hidden" onload=reloadImage();>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<TABLE id=tbl border="1">
<TBODY>
<TR>
<td width="33%"> </td>
<TD width="33%">
<DIV id=div_1>
</DIV>
</TD>
<td width="33%"> </td>
</TR>
</TBODY>
</TABLE>
</td>
</tr>
</table>
</BODY>
and the middle column, which holds the image is way bigger than the 2 other....Shouln't it be just equal to the 2 other columns (33%) ???
Khalid Ali
06-02-2003, 02:20 PM
Originally posted by rouxjean
IShouln't it be just equal to the 2 other columns (33%) ???
Ok now you are getting into messy territories of table layouts...you will have to be very care full with the layout..
if you want to do this
cell cell
--cell--
you will have to make the lower cell to span to 2 columns,,otherwise it will messup the layout..
Motabobo
06-02-2003, 02:33 PM
Hehe !
I'm sorry but it's hard to explain.
Take a look at the image :
http://pages.infinit.net/rouxjean/bug1.GIF
I hope you understand !
Khalid Ali
06-02-2003, 02:44 PM
Re test the link I have posted earlier
Motabobo
06-02-2003, 02:56 PM
Why do i need to use the style tag for both the table and the cells ?
I guess i could use an external CSS as well huh ?
Khalid Ali
06-02-2003, 03:22 PM
width and height attributes are not supported in strict dtd's for html....which means you should use css where ever possible to avoid some pages which may not render as desired in near future.
Motabobo
06-02-2003, 03:48 PM
Many thanks Kali !
You're the man !!!