Show Posts
16
Templates & Styles (Requests & Discussions) / Problem with Javascript mod
« on: August 06, 2005, 05:05:27 AM »
Hello people.
I'm making a mod to my current template, to allow it to change the height and width values of an image, depending on the visitor's resolution.
Here is the "core" of the modification, the size calculation script. I made it on a separate page with static values for the image name, and it is working OK. But when I adapted it to 4images, it has no effect. I leave here the entire modification, to anyone that wants to debug it...
On header.html add :
On <template's directory>/template/media/jpg.html change:
with this:
On <template's directory>/details.html add:
The last part can be added in jpg.html , it don't make difference.
I don't have any debug windows of IE or Mozilla saying that the code is wrong, as I say, it works OK with the object's name static...
Any ideas?.
Best regards.
WR.
I'm making a mod to my current template, to allow it to change the height and width values of an image, depending on the visitor's resolution.
Here is the "core" of the modification, the size calculation script. I made it on a separate page with static values for the image name, and it is working OK. But when I adapted it to 4images, it has no effect. I leave here the entire modification, to anyone that wants to debug it...
On header.html add :
Code: [Select]
<script language="JavaScript" type="text/javascript">
function image_size(){
var AspectRatio, FinalWidth, FinalHeight, DoResize;
DoResize=0;
if (screen.width < 1024) {FinalWidth = 640; DoResize=1}
if (screen.width < 800) {FinalWidth = 480; DoResize=1}
if ((document.{image_id}.width > document.{image_id}.height) && (DoResize==1))
{ AspectRatio = (document.{image_id}.width / document.{image_id}.height);
FinalHeight = FinalWidth/AspectRatio;
document.{image_id}.width = FinalWidth;
document.{image_id}.height = FinalHeight;}
if ((document.{image_id}.width < document.{image_id}.height) && (DoResize==1))
{ AspectRatio = document.{image_id}.height / document.{image_id}.width;
FinalHeight = FinalWidth;
FinalWidth = FinalHeight/AspectRatio;
document.{image_id}.width = FinalWidth;
document.{image_id}.height = FinalHeight;}
}
</script>On <template's directory>/template/media/jpg.html change:
Code: [Select]
<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />with this:
Code: [Select]
<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}" name="{image_id}" {width_height} /><br />On <template's directory>/details.html add:
Code: [Select]
<script language="JavaScript">
image_size();
</script>just before the tag {footer}The last part can be added in jpg.html , it don't make difference.
I don't have any debug windows of IE or Mozilla saying that the code is wrong, as I say, it works OK with the object's name static...
Any ideas?.
Best regards.
WR.
