Clean Links to PHP-Generated JavaScript and CSS

Clean links to PHP-generated JavaScript and CSS

Put an .htaccess file in your /js/ folder and add the .js extension to PHP, like this:

AddHandler application/x-httpd-php .js

In other words, have PHP parse all .js files as PHP files. So your scripts would really be PHP files on the server-side that output JavaScript. Do the same for stylesheets, only use the .css extension, obviously.

Note: I've never tried doing this in a separate .htaccess file. If it doesn't work, just put it into your global Apache config.

Clean URLs messing up relative links

You either need to change those URL's to absolute urls, e.g.:

    "<div id='loading' style='width:100%; text-align:center;'>" 
    + "<img src='/images/ajax-loader.gif' style='margin-top:50px;' />"
    + "</div>"

and

$.getJSON("/includes/pages.php", {page:page, n:number}, function(json) {

Or add this tag to the header of your page:

<base href="/" />

The reason why this is all happening is because the browser doesn't know anything about your mod_rewrite routing, so as far as it's concerned, it's loading a page located at www.mysite.com/papers/2/. Which means any relative URL has the URL base of /papers/2/, (instead of / in the case of loading /index.php). So every relative URL the browser sees, it will automatically append what it thinks is the relative URL base to the beginning of it.

clean url and javascript load order problem in php

When you use your clean URLs, the browser thinks it's in a different directory (/packing/pure). The relative URLs that point to your JS files will no longer work.

Use absolute URLs instead:

 <script type="text/javascript" src="/js/jquery.gallery.js">

How to include the CSS and JS in pages?

Simple

Put Scripts at the Bottom.
Put Stylesheets at the Top

The HTML specification clearly states that stylesheets are to be
included in the HEAD of the page: "Unlike A, [LINK] may only appear in
the HEAD section of a document, although it may appear any number of
times." Neither of the alternatives, the blank white screen or flash
of unstyled content, are worth the risk. The optimal solution is to
follow the HTML specification and load your stylesheets in the
document HEAD.

For javascipts

The problem caused by scripts is that they block parallel downloads.
The HTTP/1.1 specification suggests that browsers download no more
than two components in parallel per hostname. If you serve your images
from multiple hostnames, you can get more than two downloads to occur
in parallel. While a script is downloading, however, the browser won't
start any other downloads, even on different hostnames.

FYI:
http://developer.yahoo.com/performance/rules.html#css_top

http://developer.yahoo.com/performance/rules.html#js_bottom

[EDIT]

For your new question,

Make that header.html to dynamic page.
When ever that is being included, Read the data from output buffer (assuming you are not
flushing it out) using ob_get_contents.
Then you can inject the css file into the head part.
Echo it.
Clean the buffer with ob_end_clean();

Some frameworks, like zend allows you to control this with the helpers.

dynamic php header file with dynamic .js and .css include

Try code below :

<!DOCTYPE html>
<html>
<head>
<?php
$get_url=$_SERVER['REQUEST_URI'];
$get_extension=explode('/',$get_url);
$get_extension_php=end($get_extension);
if($get_extension_php=='mycollection.php')
{
    echo '<link href="your.css"/>';
    echo '<script src="your.js"></script>';
}
?>
</head>
<body>
</body>
</html>

Hope it helps you

Clean Links to PHP-Generated JavaScript and CSS