Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-03-15
5
Medium Priority
?
306 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 31

Assisted Solution

by:Marco Gasi
Marco Gasi earned 600 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 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 200 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 84

Accepted Solution

by:
Dave Baldwin earned 1000 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 200 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

722 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