JS Conflict or Errors?

[ackerley1]

Hello, I am trying to add a lightbox feature to a page on my site and on my local server it works fine, but when loaded to my webserver it does not work.

The page: Island Club Resorts - Belize Yacht Club, Belize Resort, San Pedro, Ambergris Caye Vacation

The icons next to the room descriptions in the rates should open a lightbox with a couple of images.

I look at the JS errors and it indicates that a bit of JS used on my index page is what is causing the error, but not sure if that is the issue or not.

Any help please.

[kgun]

I assume this is what makes the error:

<td valign="top" width="180">
<a href="resortpictures/byc/06Oceanview Suite - 2 Queens/164.jpg" 
title="Luxurious Queen Beds and open spaces." rel="lightbox[OVFS]">
Ocean View Family Suite 
<img style="float:right;" 
src="http://www.webproworld.com/images/icon_picture.png" 
alt="See Room" />
</a>
<a href="resortpictures/byc/06Oceanview Suite - 2 Queens/249.jpg" 
title="Incredible views looking across the courtyard out to the 
Caribbean Sea and Barrier Reef!" rel="lightbox[OVFS]">
</a>
</td>

[DaveSawers]

Certainly the JS error will stop your code. In Firefox I see:

Error: document.getElementById("ajax-banner_home") is null
Source File: http://islandclubresorts.com/ajax-banner_home.js Line: 46

[kgun]

I did not look at the JS file
Line 46.

document.getElementById('ajax-banner_home').innerHTML = html_content;

A reminder: HTML DOM Properties and Methods

[ackerley1]

So how do I resolve that? The 'ajax-banner_home' is only required for the home page, but it has to be placed in the head of the file which is a header include used across the entire site.

Any ideas?

[DaveSawers]

Presumably you are trying to reference the element before it exists. AJAX works asynchronously so is good at doing that to you.

If that's the case, check the element in your code and if it doesn't exist, set up a timer to wait for it to appear.

[ackerley1]

Hmmm... Okay so I set up a php if statement to only call the ajax-banner_home if it is the home page. However this still does not make the lightbox work?

On a positive note though it appears to have eliminated the JS error that was showing up??!!?? which has me even more confused.

[subsystems]

IE8 shows this for the page...

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.21022; WWTClient2; .NET CLR 3.5.30729; .NET CLR 3.0.30618; OfficeLiveConnector.1.4; OfficeLivePatch.0.0)
Timestamp: Thu, 9 Jul 2009 19:42:48 UTC


Message: Object required
Line: 493
Char: 9
Code: 0
URI: http://islandclubresorts.com/images/...dynCalendar.js


Message: Object required
Line: 493
Char: 9
Code: 0
URI: http://islandclubresorts.com/images/...dynCalendar.js


Message: Object required
Line: 493
Char: 9
Code: 0
URI: http://islandclubresorts.com/images/...dynCalendar.js


Message: Object required
Line: 493
Char: 9
Code: 0
URI: http://islandclubresorts.com/images/...dynCalendar.js


Message: Object required
Line: 493
Char: 9
Code: 0
URI: http://islandclubresorts.com/images/...dynCalendar.js

[subsystems]

You might want to make the Island Club Resorts logo link to the home page. It was the second thing I clicked on. When it didn't work as expected I then went searching for the top nav.

Take a look at your img alt text too. They seem to be completely missing everywhere.

The links in your nav could use some title text. So when you hover over the BYC link it says "Belize Yacht Club". Keeps the nav tidy but friendly. A visitor shouldn't have to click a link to figure out what it is for.

[ackerley1]

Okay, but what does the dynCalendar.js and the nav structure have to do with the lightbox problems that I am having?

need helping figuring out why it works on my local server and not on the live server?

Any ideas?

[subsystems]

Well, I guess the image hover issue goes away in compatibility mode. Something to investigate though.

[ackerley1]

What do you mean image hover issue goes away in compatibility mode?

[subsystems]

Just messing in IE8 switching back and forth from compatibility mode the lightbox is interacting with the calendar when I click the description links. The date fields disappear from the calendar once clicked.

Try disabling the calendar to see if the lightbox starts working. That should point you in the right direction.
The errors I listed earlier should be a clue. I don't have time to dig into it but I hope this helps somewhat.

[lpoulsen]

Originally Posted by ackerley1

when loaded to my webserver it does not work.

In addtion to any javascript problems, you may have a filename syntax problem. When I try to get to the pictures, I get a 404 error:

The requested URL http://islandclubresorts.com/resortp...yc/06Oceanview Suite - 2 Queens/164.jpg was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

I think the spaces need to be escaped as %20 in your URL string.

[subsystems]

In native IE8 mode when I hover over most of the images on the home page (like the Summer Specials ad) it displays next to the pointer some text to better describe the link/image. When I put IE8 in compatibility mode all those stop working. The pointer just sits there with no little text message.

I always referred to them as "tool-tips" but I think there is a different term for webpage UI tool-tips.

[subsystems]

You can find out pretty quickly if the spaces in the filenames are part of the problem. Just rel="lightbox[]" the text part and not the img. That way a 404 can't freak out the lightbox.js.

Better explainagion below...

[subsystems]

I did some experimenting and found a couple of issues.
I checked out this page. Lightbox JS
I dropped their lightbox.js link onto your code and removed the [OVFS] then used their link and img urls and things seemed to work.
I tried to put your lightbox.js script url and it failed. I was also getting an undefined element error using your lightbox.js with the [OVFS] removed.

I also found IF the A tag's href url is invalid the lightbox doesn't work. Even using the one from huddletogether.

So unless you need the [OVFS] I'd replace your lightbox.js and make sure the full urls work in your links and images. I do mean actually pasting the url into your address bar and seeing if you get a 404.

I am getting 404s off your larger image file even with the %20 codes in.
This one...
http://islandclubresorts.com/resortp...Queens/164.jpg
This url actually works...
http://islandclubresorts.com/resortp...Queens/164.JPG


Here, save this code and check it out.

<html>

<head>

<script type="text/javascript" src="http://www.huddletogether.com/projects/lightbox/lightbox.js"></script>

</head>
<body>

<a href="http://islandclubresorts.com/resortpictures/byc/06Oceanview%20Suite%20-%202%20Queens/164.JPG"

title="Luxurious Queen Beds and open spaces." rel="lightbox">Ocean View Family Suite 2<img style="float:right;"

src="http://islandclubresorts.com/images/icon_picture.png" alt="See Room" /></a>

<a href="http://islandclubresorts.com/resortpictures/byc/07Oceanview%20Suite%20-%20King/219.JPG" title="Luxurious King

Bed and open spaces." rel="lightbox">Ocean View King Suite <img style="float:right;"

src="http://islandclubresorts.com/images/icon_picture.png" alt="See more Images" /></a>

</body>
</html>
This should narrow the issues down a bit.

Oh, and your lightbox.css file doesn't exist even though you are referencing it.
http://islandclubresorts.com/css/

[kgun]

Originally Posted by kgun

I assume this is what makes the error:

<td valign="top" width="180">
<a href="resortpictures/byc/06Oceanview Suite - 2 Queens/164.jpg" 
title="Luxurious Queen Beds and open spaces." rel="lightbox[OVFS]">
Ocean View Family Suite 
<img style="float:right;" 
src="http://www.webproworld.com/images/icon_picture.png" 
alt="See Room" />
</a>
<a href="resortpictures/byc/06Oceanview Suite - 2 Queens/249.jpg" 
title="Incredible views looking across the courtyard out to the 
Caribbean Sea and Barrier Reef!" rel="lightbox[OVFS]">
</a>
</td>

I reacted at this

rel="lightbox[OVFS]"

attribute the first time I saw it.

[SnerdeyWebs]

There are plenty of lightbox options out there. Some are more challenging than others. Is this the only one you've tried? I tested the site in Chrome and it's not working for me as far as the lightbox option is concerned.

I do recall having a few pains dealing with these, mostly human error in the coding

[ackerley1]

hmmm... I will try these things and get back to you... regard which lightbox I have used it can be found here: Dynamic Drive DHTML Scripts- Lightbox image viewer 2.03

The [OVFS] you will see in the demo is just a method used to group pics together... the OVFS is a room type so I grouped two pics together.

Will get back to you in the morning when I have a chance to trial some of these suggestions... thanks everyone!

[subsystems]

Here is the developer's site. Lightbox 2

Substituting the code in the <head> gives the html below.
I also just to test put lightbox[OVFS] for both links. Works nicely.
The close gif in my test below was of course using the wrong url. Easy fix on a live page.

<html>

<head>

<script src="http://www.lokeshdhakar.com/projects/lightbox2/js/prototype.js" type="text/javascript"></script>
<script src="http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.lokeshdhakar.com/projects/lightbox2/css/lightbox.css" type="text/css" media="screen" />

</head>
<body>

<a href="http://islandclubresorts.com/resortpictures/byc/06Oceanview%20Suite%20-%202%20Queens/164.JPG" title="Luxurious Queen Beds and open spaces." rel="lightbox[OVFS]">Ocean View Family Suite 2<img style="float:right;" src="http://islandclubresorts.com/images/icon_picture.png" alt="See Room" /></a>

<a href="http://islandclubresorts.com/resortpictures/byc/07Oceanview%20Suite%20-%20King/219.JPG" title="Luxurious King Bed and open spaces." rel="lightbox[OVFS]">Ocean View King Suite <img style="float:right;" src="http://islandclubresorts.com/images/icon_picture.png" alt="See more Images" /></a>

</body>
</html>

This should get you going.

[kgun]

Originally Posted by subsystems

This should get you going.

Hopefully yes, but

Originally Posted by ackerley1

Hello, I am trying to add a lightbox feature to a page on my site and on my local server it works fine, but when loaded to my webserver it does not work.

The page: Island Club Resorts - Belize Yacht Club, Belize Resort, San Pedro, Ambergris Caye Vacation

The icons next to the room descriptions in the rates should open a lightbox with a couple of images.

I look at the JS errors and it indicates that a bit of JS used on my index page is what is causing the error, but not sure if that is the issue or not.

Any help please.

is a template for bad (at least first) feedback.

1. You use AJAX technology. Explain how that is done. As explained above, because of the asynchronous background call to the server, you may need to check the status and / or the readyState property of the XMLHttpRequest object and use a timeout function (like the inbuild JS SetTimeout( , ) function).
2. How many and wich js files do you use.
3. Supply relevant HTML and PHP snippets.
4. Try to locate the problem and where in the code you think the error occurs.
5. The statusText property of the XMLHttpRequest object can be combined with the JS alert function to give additional meaningful output.
6. General advice when debugging: Alert and echo each code segment.
7. The php var_dump function displays structured information about one or more expressions that includes its type and value. Arrays and objects are explored recursively with values indented to show structure.
8. Did you use Fiddler Web Debugger - A free web debugging tool and / or Firebug - Web Development Evolved to check what is going on?

[Uncle Dog]

Dear WPW professionals.

Here is some language that I'm not familiar with that I've cut'N'pasted alongside some other bits I collected, that I also don't really understand. I'm hoping you'll do me a favour and tell me what the hell is going on and explain what I've done and perhaps provide me with some alternatives that give me some sort of functionality that I can stick in to what I'm trying to make so that I can...

[subsystems]

You are welcome.

Actually it wasn't too hard to solve. I found a page that was working with the lightbox and sectioned out the code the developer was using. I created 2 html files on my desktop. One worked, one didn't. I changed each suspected difference one by one until it started working. Once I got it working I was able to experiment with which part of it was making it fail.

Then I just copied the code from my working file and pasted it here. Just basic troubleshooting.
I didn't feel like going through the lightbox.js file to find the exact error since I was able to find the developer's site. I just used his example files.

Often times it is the results that count, not the effort involved.

[Uncle Dog]

That's why I bought my wife a vibrator.

[ackerley1]

Okay, I got it fixed... sort of...

I changed the page name for testing purposes so it can be viewed here:
Island Club Resorts - Belize Yacht Club, Belize Resort, San Pedro, Ambergris Caye Vacation

Got the lightbox to function on all of them, but for some reason, the first two room types don't load the pictures... I have finely gone over the URL for typos, I have tried absolute URLs, I have tried the %20 instead of spaces and I even removed the hyphen from the folder name as that was the only difference between the first two and the rest of them. No luck on the first two...

any further ideas?

[Uncle Dog]

OK
No.1 http://www.islandclubresorts.com/res...yc/06Oceanview Suite 2 Queens/164.jpg
No.2 http://www.islandclubresorts.com/res...yc/07Oceanview Suite King/219.jpg

... do not exist, or your server is refusing to give them out. It also reports 'a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.'

No.3 http://www.islandclubresorts.com/resortpictures/byc/021 Bedroom Suite/inside_pics 017.jpg exists and is accessible through a browser.

If you're absolutely certain that you haven't made any typo's... it's just possible the server, or JavaScript, doesn't like the purely numeric names for the first two jpgs (the other big difference). Personally I wouldn't use spaces in directorynames or filenames. You can see how just cutting and pasting your urls to here has broken them. JavaScript will probably suffer too.

[ackerley1]

Okay... I figured out the problem... wow such a small oversight! the images are named with caps JPG extensions. so 164.jpg is NOT 164.JPG... sigh... but now it is functioning properly.

Many thanks to everyone for your help on this matter... greatly appreciated. (especally your satirical responses Uncle Dog - most ammusing!)

[williamc]

ackerly1: while the issue may not present itself anymore, your other obvious issue is still present. The one of pulling in the entire image javascript on every page when it is only need on the index page. If you can use php on the index, this will alleviate the issue.

<?php
  if(eregi('index', $_SERVER[SCRIPT_FILENAME])){
    echo '<script type="text/javascript" src="js/lightbox.js"></script>' . "\n";
  }
?>

You can add other echo's in there as well to only be used on the index if you choose.

I am sure there should be a way of doing it in javascript as well, but that is a language I do not pay enough attention to.

[DaveSawers]

Since javascript files are cached, it will only be loaded the first time a visitor hits one of your pages so I wouldn't worry about that too much.

I would however suggest you look at validating your pages as there are many HTML errors that may cause some little problems.

[kgun]

Originally Posted by DaveSawers

Since javascript files are cached, it will only be loaded the first time a visitor hits one of your pages so I wouldn't worry about that too much.

I would however suggest you look at validating your pages as there are many HTML errors that may cause some little problems.

Good observation, but be careful with help on this forum. I have limited my own contribution and stopped commenting in some threads.

I got a negative anonymous red rep point in this thread with the message. "nothing wrong with that code at all". I think without my initial fast comment, this thread would have drowned without any comment because of the very bad information in the first post. The thread was even put on the front page of WPW. Thank you anonymous commentator for your reputation building. I have still no time to program for other members, neither time to comment thoroughly on bad information.

[subsystems]

Glad to hear you got it working.
I guess you didn't notice the .jpg .JPG that I pointed out in my links. Mine worked, your's didn't. Glad you finally spotted it.

I hadn't checked back sooner because my system has been down waiting for parts to show up.

I came home to find one of my cats sleeping in my open full tower case. With the system running of course and a black screen. I should have put that cover on before I left. It's on now. New MB and Power Supply later. grumble grumble LOL

Then there is the always fun reactivation of Windows via phone...
"Please read the installation code."
It's only installed in 1 system.
"Here is your activation code."
"Please say continue. I didn't catch that. Please say continue. I didn't catch that. Please press 2 to continue"
2, 2, 2, 2, 2, 2, 2, 2, 2, next.

What a pain. I've been through that about a dozen times on different systems replacing failed hardware.