Author Topic: Problem with Javascript mod  (Read 16987 times)

0 Members and 1 Guest are viewing this topic.

Offline WhiteRabbit

  • Newbie
  • *
  • Posts: 29
    • View Profile
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 :
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.

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Global Moderator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: Problem with Javascript mod
« Reply #1 on: August 06, 2005, 05:14:41 AM »
just a wild quess, what if u add some letters to the image name, and move the entire JS function into jpg.html template:

<img src="{media_src}" border="1" alt="{image_name}" name="imgid{image_id}" {width_height} /><br />
<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.imgid{image_id}.width > document.imgid{image_id}.height) && (DoResize==1))
  {
    AspectRatio = (document.imgid{image_id}.width / document.imgid{image_id}.height);
    FinalHeight = FinalWidth/AspectRatio;
    document.imgid{image_id}.width = FinalWidth;
    document.imgid{image_id}.height = FinalHeight;
  }
  if ((document.imgid{image_id}.width < document.imgid{image_id}.height) && (DoResize==1))
  {
    AspectRatio = document.imgid{image_id}.height / document.imgid{image_id}.width;
    FinalHeight = FinalWidth;
    FinalWidth = FinalHeight/AspectRatio;
    document.imgid{image_id}.width = FinalWidth;
    document.imgid{image_id}.height = FinalHeight;
  }
}
image_size();
</script>


Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)

Offline WhiteRabbit

  • Newbie
  • *
  • Posts: 29
    • View Profile
Re: Problem with Javascript mod
« Reply #2 on: August 06, 2005, 05:53:42 AM »
Thanks V@no!!!

It looks like the objects names cannot be just numbers...
It's now working OK with Firefox... but not working for IE 6. And It isn't showing any "notice bar" saying that it halted the execution of the code... it's very strange. I tried it from another PC to see if it was my computer, but no... the problem persist.

May be some internal configuration of the Sun Java VM? May be IE is taking the screen.width value from the system start and not updating the variable when I restart IE? (in both cases, my computer and the other I changed the resolution). In Mozilla, restarting it is sufficient to update the value of screen.width .

Any Ideas?

Thanks in advance.
Best regards.
WR.

PD: If anyone wants to try it... http://168.226.192.217/4images2/details.php?image_id=51

It will be on-line for a while... (until my connection drops and I have to reconnect) it's in spanish, but the navigation is the same as any 4images site.

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Global Moderator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: Problem with Javascript mod
« Reply #3 on: August 06, 2005, 06:11:44 AM »
Actualy if u want the code to work on almost any browser, you will need create cross-browser "id search" function.
For example I use this:
Code: [Select]
function get_id(id)
{
  if (document.getElementById) return document.getElementById(id);
  if (document.all && !document.getElementById) return document.all[id];
  if (document.layers) return document.layers[id];
}
I dont know how much its cross-browser friendly, but I've tested it on IE6,7, Mozilla v1.6/FF v1, Opera 6/7, Netscape (dont remmember version)
If you are planning to use this function, make sure that u use id="imgid{image_id}" instead of name="imgid{image_id}"
and instead of document.imgid{image_id} use get_id('imgid{image_id}')
Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)

Offline WhiteRabbit

  • Newbie
  • *
  • Posts: 29
    • View Profile
Re: Problem with Javascript mod
« Reply #4 on: August 06, 2005, 04:25:27 PM »
Thanks again V@no... but it still doesn't work with IE 6 (at least using WinXP SP2). I leave the code here... it works OK for Firefox so I think that the problem isn't the code itself...

Code: [Select]
<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}" id="imgid{image_id}"{width_height} /><br />
<script language="JavaScript" type="text/javascript">
function get_id(id)
{
  if (document.getElementById) return document.getElementById(id);
  if (document.all && !document.getElementById) return document.all[id];
  if (document.layers) return document.layers[id];
}
function image_size(){
  var AspectRatio, FinalWidth, FinalHeight, DoResize;
  DoResize=0;
  if (screen.width < 1025) {FinalWidth = 580; DoResize=1}
  if (screen.width < 800) {FinalWidth = 480; DoResize=1}
  if ((get_id('imgid{image_id}').width > get_id('imgid{image_id}').height) && (DoResize==1))
  {
    AspectRatio = (get_id('imgid{image_id}').width / get_id('imgid{image_id}').height);
    FinalHeight = FinalWidth/AspectRatio;
    get_id('imgid{image_id}').width = FinalWidth;
    get_id('imgid{image_id}').height = FinalHeight;
  }
  if ((get_id('imgid{image_id}').width < get_id('imgid{image_id}').height) && (DoResize==1))
  {
    AspectRatio = get_id('imgid{image_id}').height / get_id('imgid{image_id}').width;
    FinalHeight = FinalWidth;
    FinalWidth = FinalHeight/AspectRatio;
    get_id('imgid{image_id}') = FinalWidth;
    get_id('imgid{image_id}').height = FinalHeight;
  }
}
image_size();
</script>

Note that the value 1025 is just for testing purposes only, the final value should be 1024 .

Any ideas?.
Best regards and thanks again for your time.
WR.

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Global Moderator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: Problem with Javascript mod
« Reply #5 on: August 06, 2005, 05:00:03 PM »
I see a misstake, missing width:
Quote
    get_id('imgid{image_id}').width = FinalWidth;
maybe that's the case?
Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)

Offline WhiteRabbit

  • Newbie
  • *
  • Posts: 29
    • View Profile
Re: Problem with Javascript mod
« Reply #6 on: August 06, 2005, 05:35:08 PM »
Hello again:

Yep... that was a mistake, thanks V@no. I fixed it now, but still don't work in IE6 (the problem was in the path of vertical images, and I'm now trying with horizontal ones, that's why it didn't make difference).

http://168.226.191.232/4images2/

It should resize images even if you are still at 1024 px. of horizontal res.

Best regards.
WR.

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Global Moderator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: Problem with Javascript mod
« Reply #7 on: August 06, 2005, 08:49:51 PM »
This is a very wierd issue...I couldnt find an explanation why IE returns 0 for image width and height...
anyway, here is a working version with using image object (tested on IE7 and FF 1)
Code: [Select]
<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}" id="imgid{image_id}"{width_height} /><br />
<script language="JavaScript" type="text/javascript">
  function get_id(id)
  {
    if (document.getElementById) return document.getElementById(id);
    if (document.all && !document.getElementById) return document.all[id];
    if (document.layers) return document.layers[id];
  }
  function image_size(){
    objImage = new Image();
    objImage.onload = function ch(){resize(this.width, this.height)};
    objImage.src = "{media_src}";
  }
  function resize(width, height)
  {
    var AspectRatio, FinalWidth, FinalHeight, DoResize;
    DoResize=0;
    FinalWidth = width;
    FinalHeight = height;
    if (screen.width < 1601)
    {
      FinalWidth = 768; DoResize=1;
    }
    if (screen.width < 800)
    {
      FinalWidth = 480; DoResize=1;
    }
    if (DoResize)
    {
      if (width > height)
      {
        AspectRatio = (width / height);
        FinalHeight = FinalWidth/AspectRatio;
      }
      if (width < height)
      {
        AspectRatio = height / width;
        FinalHeight = FinalWidth;
        FinalWidth = FinalHeight/AspectRatio;
      }
    }
    get_id("imgid{image_id}").width = FinalWidth;
    get_id("imgid{image_id}").height = FinalHeight;
  }
  image_size();
</script>
Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)

Offline WhiteRabbit

  • Newbie
  • *
  • Posts: 29
    • View Profile
Re: Problem with Javascript mod
« Reply #8 on: August 07, 2005, 11:30:59 AM »
Thanks again V@no!!!. It's working excellent.
And thanks for cleaning the code... I'm not very good with logics.

Best regards.
WR.

Offline WhiteRabbit

  • Newbie
  • *
  • Posts: 29
    • View Profile
Re: Problem with Javascript mod
« Reply #9 on: August 15, 2005, 04:29:05 PM »
Hello again people:

Well, I'm trying to do this in a better way (server side).
So now I want to pass the user's screen width as a hidden field in a form. So, when I have that value on the server, I do the math and send the correct size image directly to the user, using phpThumb. If the user wants to download the full-size image, it just clicks on download button...
The problem is that I cannot make it work. I think that I will need a form for each thumb, so if you click on any of them, you will be always sending your screen with along with the URL.
Look what I have done (it's just a test approach, I have to use getElementbyId() function and assing the width value to the hidden field):

In functions.php, line 354 (may be other line, my functions.php is heavy modified, sorry I don't have the original code):
Code: [Select]
$thumb = "<form name=\"img".$image_id."\" \"id=\"img".$image_id."\" action=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""))."\"><a onClick=\"document.img".$image_id.".submit()\">".$thumb."</a><input name=\"hsize\" type=\"hidden\" value=\"hola\" /></form>"
The result of this would be:

Code: [Select]
<form name="img58" id="img58" action="./details.php?image_id=58"><a onClick="document.img58.submit()"><img src="./data/thumbnails/5/IMG_0368_2.JPG" border="1" width="75" height="100" alt="ER 56" /></a><input name="hsize" type="hidden" value="hola" /></form>
As far as I can see, the link works, but it takes me directly to the homepage, instead of sending me to the action URL of the form.
I'm doing all OK?
There is another -simpliest- way to do what I want?.

Thanks in advance.
Best regards.
WR.

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Global Moderator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: Problem with Javascript mod
« Reply #10 on: August 16, 2005, 12:40:38 AM »
I've experienced the same thing when some url query used in form's action...
try this instead:
Code: [Select]
      $thumb = "<form name=\"img".$image_id."\" \"id=\"img".$image_id."\" method=\"GET\" action=\"".$site_sess->url(ROOT_PATH."details.php")."\"><a onclick=\"document.img".$image_id.".submit(); return false;\" href=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""))."\">".$thumb."</a><input type=\"hidden\" name=\"".URL_IMAGE_ID."\" value=\"".$image_id."\" />".((!empty($mode)) ? "<input type=\"hidden\" name=\"mode\" value=\"".$mode."\" />" : "")."<input name=\"hsize\" type=\"hidden\" value=\"hola\" /></form>";(note, there must be return false; in onclick code ;)

and here is an alternative code without javascript involved
Code: [Select]
      $thumb = "<form name=\"img".$image_id."\" \"id=\"img".$image_id."\" method=\"GET\" action=\"".$site_sess->url(ROOT_PATH."details.php")."\">".$thumb."<input type=\"hidden\" name=\"".URL_IMAGE_ID."\" value=\"".$image_id."\" />".((!empty($mode)) ? "<input type=\"hidden\" name=\"mode\" value=\"".$mode."\" />" : "")."<input name=\"hsize\" type=\"hidden\" value=\"hola\" /></form>";and then replace all
Code: [Select]
$thumb = "<img with:
Code: [Select]
$thumb = "<input type=\"image\"
Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)

Offline WhiteRabbit

  • Newbie
  • *
  • Posts: 29
    • View Profile
Re: Problem with Javascript mod
« Reply #11 on: August 16, 2005, 03:23:32 PM »
Thanks again V@no, you really beams honor to the title of guru.
I didn't remember the existence of the input type="image"!!!.
It's working great.

Best regards.
WR.