Jquery failure after site went live
EDIT: posted head code EDIT 2: clarification on php
I have been designing a site for weeks using JQuery. I don't have a local server or a testing server so I just created a directory through FTP, '/testing'. Everything was working great in the testing directory.
I attempted to go live tonight by moving all the files in '/testing' to the root directory and I changed all file paths and script sources accordingly. The site loads, but everything related to JQuery is non-functional. Javascript console gives errors of (just as an example from a plugin):
'$.os.name' is not a function
I'm at loss for what to do. I changed the paths referencing the JQuery library, installed a fresh copy of JQuery (to a new directory), etc.
There is a wordpress installation in a different directory '/blog'. I've read about some compatibility issues with wordpress, but that seems to be related to using JQuery inside wordpress, which I am not.
Here is the head code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="main.css" rel="stylesheet" type="text/css">
<link href="jqu开发者_如何学编程ery.lightbox-0.5.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jq.browser.js"></script>
<script type="text/javascript" src="compatible.js"></script>
<script type="text/javascript" src="nav.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox();
});
</script>
<title>Pearce Images</title>
<script type="text/javascript" src="slider.js"></script>
<link href="slider.css" rel="stylesheet" type="text/css">
</head>
It's worth noting that all the pages are in PHP. I'm not a PHP developer, I only use 1 function: require_once('some.file.php'). (sorry for no code markup, but I just can't get a handle on this markdown thing). I just use that to pull the same code for a header and footer for all the pages, that way if changes need to be made, I only have to change one chunk of code.
Your help is greatly appreciated.
Start by trying to download the jquery.js file (or whatever it's called) from your browser. Go to View Source. Some browsers automatically highlight links so you can click them. See if the jquery.js file loads when you visit it. If not, you have a server configuration issue.
Otherwise, create a simple HTML file that uses your jQuery script. If it works just fine, you will have isolated the problem.
One thing to test is to see if the jQuery variable is still available. $ might have been changed to refer to another JavaScript library. If that's the case, you don't have to replace all of your $s with jQuerys; you can keep your code compatible with code using other plugins by wrapping your jQuery-using code like this:
(function($){
/* Code using $ for jQuery. */
}(jQuery));
It might be a copy-paste problem, but there's an extra space after "1.4.2":
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2 /jquery.min.js"></script>
To troubleshoot, try pointing the <script> tag for jQuery to the Google AJAX Libraries source at http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js. If that works, then you are just messing up your src attribute. Post the header that you have in your page and where you placed jQuery physically.
EDIT (after looking at code): I wonder if "compatible.js" is overriding the $ function declaration. Try to replace all instances where you use $ with just jQuery. Also your Javascript does not seem to be in <script> tags. Make your code look like this:
<head>
<link href="main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="compatible.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () { jQuery('a.lightbox').lightBox(); });
</script>
<title>Pearce Images</title>
<link href="slider.css" rel="stylesheet" type="text/css">
Also check if you are calling jquery again from compatible.js... That may sometime cause this issue....
Oh man I feel like a jackass:
<script type="text/javascript" src="jq.browser.js"></script>
Is a plugin to detect browser type and os, this is what the "compatible.js" file uses. I apparently failed to transfer that so many times last night. Not sure why it broke the rest of the jquery functions, I would think it would just skip over the compatible functions, this is the contents of compatible.js:
var links = "a.links,a.trigger";
var folio = "a.portfolio";
//
//
$(document).ready(function() {
if ($.os.name == "mac")
{
$(links).css("fontSize","76.6%");
$(folio).css("fontSize","76.6%");
$(links).css("top","-4px");
$(folio).css("top","5px");
}
});
All is well, thanks for all the help guys!
加载中,请稍侯......
精彩评论