PHP challenge: Navigation works in tutorial, fails in real world

Get Started
1

Hello,
Following a tutorial (‘AJAX Load Content’ on youtube, phpacademy.org ) I built a working php navigation, based on a piece of javascript.

When I adapted it to a real-world site, the urls don’t function. I checked my links/file directory, css and javascript links. Still, no go.

Any ideas what broke this seemingly simple php?

2

please provide your code and tell what you did to change it.

3

Thanks, FYI: File path: index.html > ‘content’ folder, ‘css’ folder, ‘js’ folder.

Here’s the source (my version has a more recent version of jquery1.7.1, utf-8, modernizr):

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title>untitled</title>
<link rel=“stylesheet” href=“css/tx.css”>
<link rel=“stylesheet” href=“css/str.css”>
<!–[if IE]><script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
<script src=“js/modernizr.custom.11220.js”></script>
<script src=“js/jquery-1.7.1.min.js”></script>
<script src=“js/general.js”></script>
</head>

<body>
<div id=“outerwrapper”>
<div id=“innerwrapper”>
<!-- Main Navigation –>
<div id=“mainNav”>
<ul>
<li><a href=“index”>about us</a></li>
<li><a href=“profile”>profile</a></li>
<li><a href=“editorial”>editorial projects</a></li>
<li><a href=“clients”>clients</a></li>
<li><a href=“media”>media</a></li>
<li><a href=“testimonials”>testimonials</a></li>
<li><a href=“#/” title=“” target=“_blank”>blog</a></li>
<li id=“contact”><a href=“contact”>contact us</a></li>
</ul>
</div><!-- End Main Nav –>

<!-- Contains all content –><div id=“maincontent”>

     &lt;div id="content"&gt;&lt;/div&gt;

<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js”></script>
<!-- End content –></div>
<!-- Begin Footer –>
<div id=“footer”></div><!-- End Footer –>
</div>
</div></body>
</html>

Javascript follows:
$(document).ready(function() {
// initial
$(‘Content’).load(‘content/index.php’);

// handle menu clicks
$(‘ul#mainNav li a’).click(function() {
var page = $(this).attr(‘href’);
$(‘Content’).load(“content/” + page + “.php”);
var page = $(this).attr(‘href’);
return false;

    });

});

4

I hate to ask but why would you want to do this? So you don’t ahve to type or paste /content and .php a few times?

5

The current site is flash. I’m looking for a way to update it so that it’s fluid, and mobile friendly.

6

don’t use flash and don’t use javascript when you don’t need toa

7

I don’t use Flash anymore; I tried this (php) solution and it occurred to me that it might be a good technique to use. And it worked in theory.

8

PHP is great to use, but using JS to save you from pasting it is not a good way to go. Did you try doing return true vs return false?

9

I want to preserve the design and have a degree of flexibility regardless of screen size (not really concerned about avoiding cut-and-paste, the site isn’t that large).

I changed ‘return false’ to return true, I’ve also tried removing .js and/or css… still nothing.

10

I think you’ve failed to grasp how to use PHP – and most certainly when it’s appropriate to use javascript… using it to include CONTENT means that the page is a miserable steaming pile of failure – users like myself wouldn’t even SEE your content since we enable scripting on a per site basis. (and some people refuse to enable it at all)

Make your page a .php file, and switch to this:


<div id="content">
<?php include('content/index.php'); ?>
</div>

You’re already using php, so USE IT to handle the include server side. Then you can swing an axe at the bloated jquery garbage, and the ‘scripting for nothing’.

Also, you’re commenting style may be tripping rendering bugs in IE and some versions of FF. YES, I said COMMENTS… tripping bugs. Good rule of thumb, don’t put comments between sibling block level containers… Which is why comments like:

<!-- Contains all content --><div id="maincontent">

Should be avoided… mainContent contains all content? REALLY? Never would have guessed. Redundant and pointless bloat… You’re using a verbose name to say what it is, why the comment?!? While on the closing side

</div><!-- End Footer -->

</div> is the end of a section? REALLY? Likewise putting it after can nestle it between sibling level blocks, tripping all sorts of bugs like double render and disappearing content, which is why I advise:

<!-- #footer --></div>

Putting it before avoids the bugs, you don’t need to say end, and the # lets you know it’s an ID being closed.

Unrelated to your main issue, just thought I’d point it out before you come back going “why isn’t my content showing in IE7?” once you add a few floats.