Reply
 
Thread Tools Display Modes
  #1  
Old 12-02-2019, 11:27 AM
Bookkeeper's Avatar
Bookkeeper is offline
Charter Member
 
Join Date: Oct 2001
Location: Ottawa, Canuckistan
Posts: 2,836

HTML Javascript Problem


I have two Webpages using Javascript to allow users to click on a small image and open a popup window with a larger version of the image. Both pages have identical script in the head section of the page, and both have identical entries for the line calling up the script.

Both pages work correctly when I open them from the local files on my hard drive, with the popup window and large image appearing when clicked. One page works when I post it to the Web and click the image, the other doesn't - clicking the small image produces no result.

Any ideas as to what is wrong and how to fix it?
  #2  
Old 12-02-2019, 05:17 PM
Tim@T-Bonham.net is offline
Charter Member
 
Join Date: Mar 2003
Location: Minneapolis, MN
Posts: 15,112
If it works on your local machine but not when uploaded to the server, the problem is usually in the names -- incomplete names, not fully qualified, depending on defaults on your local machine, etc. That's the area where you should look first.
  #3  
Old 12-02-2019, 05:29 PM
EinsteinsHund's Avatar
EinsteinsHund is offline
Member
 
Join Date: Jul 2009
Location: NRW, Germany
Posts: 3,215
Yes, maybe the link in the code is absolute and points to a a location on one of your local drives, but not to a relative link inside the website structure. First thing to look at.
__________________
And if my thought-dreams could be seen
They’d probably put my head in a guillotine
  #4  
Old 12-02-2019, 06:36 PM
Bookkeeper's Avatar
Bookkeeper is offline
Charter Member
 
Join Date: Oct 2001
Location: Ottawa, Canuckistan
Posts: 2,836
Here is the complete Head section of both pages. The only difference is the page title, as the complete section was copied and pasted from my template page to all pages (some identifying info has been x-ed out):

<!DOCTYPE HTML>

<html lang="en">

<head>

<title>xxxxx - Games Played 1988</title>

<meta name="description" lang="en-ca" content="xxxxx - Games Played 1988">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow, noarchive">

<link rel="StyleSheet" href="includes/xxxxx.css" type="text/css">
<link rel="shortcut icon" href="http://xxxxx/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://xxxxx/favicon.ico" type="image/x-icon">

<script>
//<!--
winOpen = null;
function openPhotoWindow(vpage)
{
if (!winOpen || winOpen.closed)
{
popup = window.open(vpage,"popup","directories=no,menubar=no,status=no,toolbar=no,height=788,width=1044,top= 20,left=10,scrollbars=yes,resizable=yes");
}
popup.focus();
//return false;
}
function CloseModalWin()
{
if (window.name == "newWin" || window.name == "popup" || window.name == "viewFaq")
{
opener.focus();
self.close();
}
}
//-->
<!--
function openGameDetails(vpage)
{
window.open(vpage,"gamedetails","menubar=no,scrollbars=yes,toolbar=no,location=no,directories=no,res izable=yes,height=680,width=940,top=20,left=20");
}
//-->
</script>

</head>

Here is the line in the page that inserts the small image and should open the popup window for the larger image:

<a href="javascriptpenPhotoWindow('photos/2019/Game2019-11-29b.jpg');"><img src="photos/2019/Game2019-11-29b-36.jpg" class="right" alt="Photo" style="margin: 2px 2px; border: 2px solid"></a>

Note that this line was copied for test purposes from the 2019 page, where it works, to the 1988 page, where the small image appears but the popup doesn't. All pages are in a single folder on the server, with the photos in subfolders of the main folder.
  #5  
Old 12-02-2019, 06:40 PM
Bookkeeper's Avatar
Bookkeeper is offline
Charter Member
 
Join Date: Oct 2001
Location: Ottawa, Canuckistan
Posts: 2,836
That page line should be (sans smiley):

<a href="javascript:openPhotoWindow('photos/2019/Game2019-11-29b.jpg');"><img src="photos/2019/Game2019-11-29b-36.jpg" class="right" alt="Photo" style="margin: 2px 2px; border: 2px solid"></a>
  #6  
Old 12-02-2019, 07:41 PM
Frankenstein Monster is offline
Charter Member
 
Join Date: Apr 2004
Location: Europe
Posts: 781
From looking at the code, a possible reason for why it doesn't open is if the winOpen variable somehow gets assigned.

One way to verify is to place a breakpoint. Press F12, go to the Sources (Chrome) or Debugger (IE/Edge) tab and click the line that says if (!winOpen || winOpen.closed). Then click the link. If the debugger stops at that line then you know it goes to the function. Press F10 to see if it then continues to the window.open line.

Hope this helps.
  #7  
Old 12-02-2019, 08:38 PM
markn+ is online now
Guest
 
Join Date: Feb 2015
Location: unknown; Speed: exactly 0
Posts: 2,830
The code calls openPhotoWindow('photos/2019/Game2019-11-29b.jpg'). Are you sure that that file exists and is readable? As the first two responses to this thread suggested, if that file exists on your local machine but not on the server, that would explain what you're seeing. Also you can use the F12 debugger to look at the console output; sometimes there will be informative messages there when something fails.
  #8  
Old 12-02-2019, 10:43 PM
Bookkeeper's Avatar
Bookkeeper is offline
Charter Member
 
Join Date: Oct 2001
Location: Ottawa, Canuckistan
Posts: 2,836
Interesting. When I use the debugger, it says that "openPhotoWindow" is not defined for the page which can't open the picture. While the header code on the two pages appears identical in my HTML code editor, in the debugger, the failing page has the complete header on a single line, while the working page has the same multi-line layout as the HTML editor display.

Why would the header display differently, and can this be what is causing the problem?

Note that the called file exists and opens correctly in one page, but not in the other calling the same file.

Last edited by Bookkeeper; 12-02-2019 at 10:44 PM.
  #9  
Old 12-02-2019, 11:02 PM
ZipperJJ's Avatar
ZipperJJ is offline
Just Lovely and Delicious
Charter Member
 
Join Date: Aug 2001
Location: Northeast Ohio
Posts: 25,563
Are you just FTPing the files up or are you using some sort of web interface, or maybe a function of your code editor? Sounds like it's trying to minify the header for some reason.

Also, is that javascript the same on each page that needs it? If so you could put it in a .js file and reference it in your header, the same as you do with the css, and then you'd be using the exact same code for each page, which might help troubleshoot.

Code:
<script type="text/javascript" src="YourWindowFile. js"></script>
  #10  
Old 12-02-2019, 11:55 PM
Bookkeeper's Avatar
Bookkeeper is offline
Charter Member
 
Join Date: Oct 2001
Location: Ottawa, Canuckistan
Posts: 2,836
Quote:
Originally Posted by ZipperJJ View Post
Are you just FTPing the files up or are you using some sort of web interface, or maybe a function of your code editor? Sounds like it's trying to minify the header for some reason.

Also, is that javascript the same on each page that needs it? If so you could put it in a .js file and reference it in your header, the same as you do with the css, and then you'd be using the exact same code for each page, which might help troubleshoot.

Code:
<script type="text/javascript" src="YourWindowFile. js"></script>
I use mirabyte Web Architect to edit and FileZilla to FTP to the Website. Both pages are edited and FTPed the same way, but the older pages were originally done with different software.

I'll try your suggestion to use a separate .js file once the current problem is resolved.

Last edited by Bookkeeper; 12-02-2019 at 11:56 PM.
  #11  
Old 12-03-2019, 01:15 AM
markn+ is online now
Guest
 
Join Date: Feb 2015
Location: unknown; Speed: exactly 0
Posts: 2,830
If the whole script is being joined together as one line, that could be a problem because your script starts with a comment:

// <!--

If the whole rest of the script is being seen as part of that line, it's all being commented out.

I'm suspicious of some line ending incompatibility somewhere. Check whether the line endings on the working script and the non-working script are different.
  #12  
Old 12-03-2019, 09:34 AM
Bookkeeper's Avatar
Bookkeeper is offline
Charter Member
 
Join Date: Oct 2001
Location: Ottawa, Canuckistan
Posts: 2,836
Quote:
Originally Posted by markn+ View Post
If the whole script is being joined together as one line, that could be a problem because your script starts with a comment:

// <!--

If the whole rest of the script is being seen as part of that line, it's all being commented out.

I'm suspicious of some line ending incompatibility somewhere. Check whether the line endings on the working script and the non-working script are different.
I think you have identified the problem. I applied ZipperJJ's suggestion to move the JavaScript into a separate file, and everything now works.

Thanks to all who helped me with this problem!
Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 11:19 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

Send questions for Cecil Adams to: cecil@straightdope.com

Send comments about this website to: webmaster@straightdope.com

Terms of Use / Privacy Policy

Advertise on the Straight Dope!
(Your direct line to thousands of the smartest, hippest people on the planet, plus a few total dipsticks.)

Copyright © 2019 STM Reader, LLC.

 
Copyright © 2017