HTML Javascript Problem

Factual Questions
1

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

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

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.

4

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,resizable=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=“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>

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

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

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

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

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.

9

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.



<script type="text/javascript" src="YourWindowFile. js"></script>
10

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.

11

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

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!