Solved

Why does this one page work and the other one does not?

Posted on 2014-03-15
5
297 Views
Last Modified: 2014-03-15
I've got two page that are pretty much the same, but one works and the other does not. I've gone through and tried to detail the differences, but in the end I'm missing something so I'm needing another set of eyes to tell me where I'm blowing it.

Head out to to http://thornhilllawncare.com/gallery_view.php?album_name=Irrigation. Click on one of the photo thumbnails and you're watching a Javascript function kick in.

Nice.

Now go to http://thornhilllawncare.com/mobile/gallery_view.php?album_name=Irrigation. It's the mobile version of the same page, but I can't get the "PrettyPhoto" Javascript thing to kick in and I can't figure out why.

Thoughts?
0
Comment
Question by:brucegust
5 Comments
 
LVL 30

Assisted Solution

by:Marco Gasi
Marco Gasi earned 150 total points
ID: 39931720
You have some problem here: in the desktop page you're includinh jquery twice: this doesn't create conflict since you're including the same version, but it's an unneeded spending of resource and it's slowing down the page.

In the mobile version also you include jquery twice, but you're including two different version: 1.6.1 by your local directory and 1.8.1 from Google repository: this sure prevents your script to work as expected: include only 1.6.1.

Cheers
0
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 50 total points
ID: 39931726
I'll bet once you've got the jQuery right, you will have a lot of the issues solved, but there are other things lurking below the surface.

A trip to the W3 validator will not catch everything, but it should be one of those steps that gets repeated frequently as you add functionality or styling into a web site.  Check this issue:

http://validator.w3.org/check?uri=http%3A%2F%2Fthornhilllawncare.com%2Fgallery_view.php%3Falbum_name%3DIrrigation&charset=%28detect+automatically%29&doctype=Inline&group=0

If you need some help with the character encoding, this article may help:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_11880-Unicode-PHP-and-Character-Collisions.html
0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 250 total points
ID: 39931730
Actually, the desktop view has three copies.  Line 8 with "js/jquery.js" is an old version of jquery and should be removed.

On the mobile view where it says "LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG "... it actually needs to be before the </head> tag also so it is 'in' the <head> section.  You have a bunch of other errors there also.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 50 total points
ID: 39931738
you've two jQuery version running...
found and replace :

$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();

Open in new window

by this :
jQuery(function($) {
$("area[rel^='prettyPhoto']").prettyPhoto();

Open in new window

0
 

Author Comment

by:brucegust
ID: 39931776
Cleaned up the various libraries, moved the "LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG" into the head section and all is well.

Thank you, gentlemen!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now