Jquery not running properly on apache server

JavaScript
1

This is a strange problem because there’s no reason it should be happening.
I’m running xampp 1.7.4 locally and jquery-1.6-dev. I’m working through the “jQuery Novice to Ninja” book and everything is working fine until I hit Chapter 3 - animated navigation. Instead of displaying across the top of the page, the nav bar displays down the page. After double- and triple-checking everything I just straight copied the example files for the book into my local server. It did the same thing. In other words, when I double-clicked the file to view in the browser it worked, but the exact same file viewed in the server did not work. I checked with the file I was working on and sure enough the same thing happened - it worked viewed in the browser but not through the server. I hope I explained this clearly. Has anyone run into this sort of thing before? Is there something on the server that needs to be configured?

2

Two possibly useful things are:

  1. Books do have errors in them. There are some corrections in the errata that do relate to the animated nagivigation.

  2. The book was written with jQuery 1.4 in mind. Going back to that might confirm whether it is a more recent library update causing the problem.

3

  1. Error in book - Yep, thought of that. That’s why I used the actual files that came with the book. Viewed through the browser (double-clicking the file) and the nav bar displays properly. Viewed the exact same file (not moved, not changed in any way) through the server (http://localhost/etc…) and the nav bar doesn’t display properly. The file is the same & in the same place, just viewed differently.

  2. Will double-check with the newer version.

4

If the navigation menu is displaying vertically, that implies that that CSS file is not being loaded correctly.

5

There are 2 css files being loaded. One is a base one, the other is for the nav bar. I added a random style (just changed the color of the h4 tag) to the navigation.css file and it worked. As far as I can tell, there is no code to display the list inline, and when I added that line it didn’t make a difference. This is the navigation.css file:

#container {
  position: relative;
}

#navigation {
	position:absolute;
  width: inherit;
  top: 0;
	right: 0;
  margin: 0;
}

#navigation li {
	height:20px;
	float:left;
	list-style-type: none;
	width:70px;
	padding:3px;
	border-right:1px solid #3687AF;
	background-color: #015287;
	background-repeat: no-repeat;
	background-position: center 30px;
}

#navigation ul {
  padding: 0;
  margin: 0;
}

#navigation li a {
  color: #FFFFFF;
}
#navigation #home{
  background-image: url("http://www.sitepoint.com/forums/images/home_icon.png");
}
#navigation #about{
  background-image:url( icon_about.png );
}
#navigation #buy{
  background-image:url( icon_buy );
}
#navigation #gifts{
  background-image:url( icon_gifts );
}

I should mention that there are no actual image files for the nav links except for home, this is just the way the code came. I also tried just adding these styles to the base.css file, with no change.

This is the base.css file:

#navigation{
	float: right;
	width: 150px;
}
#intro{
	width: 450px;
}

body {
	font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
	color: #3E3E3E;
	background: #94C5EB url(../images/background-grad.png) repeat-x;
	font-size: 12px;
}

p {
	padding: 5px;
}

a {
	color: #3687AF;
}

#container{
	margin:0 auto;
	text-align: left;
	width: 650px;
}

#header{
	height: 60px;
	color: #172322;
	background: transparent url(../images/header-corners.png) no-repeat bottom left;
}

#header h1
{
	padding:0;
	margin:0;
}

#content{
	background-color: #fff;
	padding: 0 15px 10px 15px;

}

#footer{
	background-color: #fff;
	padding:15px;
  clear: both;
}

h2 {
	border-bottom:2px solid #015287;
	color: #D15600;
	padding-top: 10px;
  margin-top: 0;
}

table {
	border-collapse:collapse;
	font-size:12px;
	margin:0 20px 20px 20px;
	border-top:2px solid #015287;
	width:480px;
}

th {
	border-bottom: 2px solid #015287;
	color: #D15600;
	font-size: 14px;
	font-weight: normal;
	text-align: left;
	padding: 3px 8px;
}

td {
	padding: 6px;
}
6

and you’re using the same version of jquery in both instances? If you’re double clicking from a book cd, then it’s most likely using 1.4 if that’s what the book was writing for.

7

The thing is, it’s not the jQuery effect that is the only problem here. The problem is that the nav bar displays down the page, which seems to be entirely dictated by the CSS styles in this example.

8

Do you get the same vertical listing problem on the local server when no jQuery is involved?