jQuery breaks in IE8

The jQuery breaks in IE8. If you click the first image on this page, either one of two things will happen the PNG file will load or nothing will happen. To understand compare in FireFox/Chrome.

For me, it’s broken in FF/Chrome for Mac too. I think there’s something wrong with the jQuery setup. Perhaps you need to refresh FF to see that it’s not working?

When you say broken you mean the content that should load isn’t and instead your getting the rolling donuts, correct ? If so then browsers Chrome/FF/IE are not working.

Yes.

How do fix this ? I can’t figure out.

I’ve checked all the paths, they look good ?

Look again at this opening anchor tag.

<a class="video_link" title="Image A" name="videos/truck.flv" href="images/tour_video.png" rel="gallery">

Check the path of the href, relative to the location of the page on your server, which is

http://www.thecreativesheep.ca/construction/prepage/

Is there a file there?

I put the video in prepage/videos if that what your hinting at ?

I’m not hinting at a path to videos. Look again at the path in the href:

images/tour_video.png

Is that file at that path?

Here is the absolute path of the page containing that href:

http://www.thecreativesheep.ca/construction/prepage/

Put those two paths together and see if tour_video.png is there.

If not, find where tour_video.png is, change the href accordingly and test your page.

It’s under construction/videos to call a FLV file. I’ve changed the path numerous times to no availability.

Let’s test that by creating a URL that will show tour_video.png when entered in the browser address bar.

If tour_video.png was in construction/videos/ then the URL would be

http://www.thecreativesheep.ca/construction/videos/tour_video.png

This produces a 404 error, so perhaps you mean images/tour_video.png is in construction/videos/

http://www.thecreativesheep.ca/construction/videos/images/tour_video.png

This also produces a 404 error.

I do know where the tour_video.png is, but you need to learn to do this for yourself. When you’ve found the correct URL, post it here or correct your path.

I’m winding up for the night, but here’s another clue.

The same href path - images/tour_video.png - works in an earlier version of your page. That page is located in the construction directory i.e.

http://www.thecreativesheep.ca/construction/

Putting the two together gives the path to tour_video.png

All you have to do is correct the path in your page, using either an absolute path, a relative path from the web root of your server, or a relative path from the document.

Select the image on the link I gave in message #1. The link should say “cafe tour” the FLV video truck.flv does not load.

I’m aware that the video doesn’t load and have been trying to help you.

All it needs is for you to correct the href path to tour_video.png in that link.

The path where is the image is, is /construction/images no matter how many times I change the path it doesn’t work.

Refresh your page and try again. Do you still see spinning donuts?

Back the the original problem. View the first link while it’s active in your mind in IE8 / IE9 the PNG image loads independently. To completely understand where I’m coming from, view the same page and click the same link in any browser other then IE.

I’ve tested the page in Firefox, Safari and IE7/8/9 (IETester)

The video now loads and plays in all.

If you still have problems, empty your cache, restart your browser and try again.

Ahh the cache, thanx. So many little things. Victor can I verify if conditional statements are working ?

Things to take away from this thread…

Remember to clear your cache when changes have been made, or disable caching in your browser during production/testing.


Learn how to identify missing files/incorrect paths
using Firebug (which you hopefully still have installed). Practise with the second video link in your page (Gorilla pic).

Go to your page in Firefox.

Open Firebug.

Click on the Net tab. The HTML button in the menu below should be highlighted.

In the list below you’ll see a number of file names, prefixed by “GET”. The ones in red are files that the browser has tried to download but the server has been unable to find. The gorilla_video.png is not listed because it will only download when the link of which it is the href is clicked.

Click the Gorilla link.

GET gorilla_video.png” will now appear in the list,. 404 Not Found.

Hover over the “GET gorilla_video.png” in the list and the (incorrect) absolute path to the file will be shown.

In future, every time something is missing from your page or doesn’t work as intended, check in Firebug first. Aim to identify and fix broken paths by yourself, every time.


Editing paths on the fly in Firebug

Click on the Inspect tool and then on the Gorilla pic. The HTML tab will become active and the img element selected. Click on the href attribute of the img’s parent anchor.

You can now edit the path. Change “images/gorilla_video.png” to “/construction/images/gorilla_video.png” and click outside the edit box to complete the edit.

Now click on the name attribute. Change “/construction/videos/gorilla.flv” to “videos/truck.flv” (we know that file exists), Click outside to complete the edit.

Click on the Gorilla again. The truck video will play.

To test your conditional comment, add background:red; to the ie7.css stylesheet. This isn’t javascript related so post further queries in the CSS or HTML forums.