SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery not running properly on apache server

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bcalagoure View Post
    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?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    If the navigation menu is displaying vertically, that implies that that CSS file is not being loaded correctly.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    #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:

    Code:
    #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. #6
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by downtroden View Post
    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.
    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.
    Last edited by paul_wilkins; Aug 4, 2011 at 15:37.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Do you get the same vertical listing problem on the local server when no jQuery is involved?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •