WarpConduit Computing

  • Quick Tips
  • Web Design & Development
  • Graphic Design
  • Home
  • WordPress Plugins
  • Password Generator
  • About
  • Contact

Dynamically Load CSS and JS files using PHP

May 12, 2009 by Josh Hartman

I’ve been working more and more with jQuery and plugins that go with it and it can be a pain to keep going back to the code and adding another <script> tag for each of these and then removing it again when you find out it isn’t quite what you needed.  I came up with a solution to look in a “js” folder and create the correct tags for loading the files.  Then i extended this to do CSS files as well.  All you need to do is drop js/css files into “js” and “css” directories and the page you have placed the PHP code onto will load those files.  To disable a file, just delete it or move it into a subfolder. Oh, you are worried about loading order you say?  Since readdir() lists the files in alphabetical order you can rename your files using numbers (01-jquery.js, 02-jquery-plugin.js, 03-global.js, etc.) to adjust the loading order.  If you find any issues leave a comment to help others figure it out.  Hope you find it useful in some application.

Directory Structure

css

01-style.css
02-morestyles.css
03-custom.css

js

01-jquery.min.js
02-jquery.plugin.min.js
03-custom.js

index.php

Code

Place the following code just before your document’s closing </head> tag.

<?php
// FOR JAVASCRIPT FILES
$js = '';
$handle = '';
$file = '';
// open the "js" directory
if ($handle = opendir('js')) {
    // list directory contents
    while (false !== ($file = readdir($handle))) {
        // only grab file names
        if (is_file('js/' . $file)) {
            // insert HTML code for loading Javascript files
            $js .= '<script src="js/' . $file . '" type="text/javascript"></script>' . "\n";
        }
    }
    closedir($handle);
    echo $js;
}
 
// FOR CSS FILES
$css = '';
$handle = '';
$file = '';
// open the "css" directory
if ($handle = opendir('css')) {
    // list directory contents
    while (false !== ($file = readdir($handle))) {
        // only grab file names
        if (is_file('css/' . $file)) {
            // insert HTML code for loading Javascript files
            $css .= '<link rel="stylesheet" href="css/' . $file .
                '" type="text/css" media="all" />' . "\n";
        }
    }
    closedir($handle);
    echo $css;
}
?>

<?php // FOR JAVASCRIPT FILES $js = ''; $handle = ''; $file = ''; // open the "js" directory if ($handle = opendir('js')) { // list directory contents while (false !== ($file = readdir($handle))) { // only grab file names if (is_file('js/' . $file)) { // insert HTML code for loading Javascript files $js .= '<script src="js/' . $file . '" type="text/javascript"></script>' . "\n"; } } closedir($handle); echo $js; } // FOR CSS FILES $css = ''; $handle = ''; $file = ''; // open the "css" directory if ($handle = opendir('css')) { // list directory contents while (false !== ($file = readdir($handle))) { // only grab file names if (is_file('css/' . $file)) { // insert HTML code for loading Javascript files $css .= '<link rel="stylesheet" href="css/' . $file . '" type="text/css" media="all" />' . "\n"; } } closedir($handle); echo $css; } ?>

Result

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Dynamically Load CSS and JS files using PHP</title>
 
<script src="js/01-jquery.min.js" type="text/javascript"></script>
<script src="js/02-jquery.plugin.min.js" type="text/javascript"></script>
<script src="js/03-custom.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/01-style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/02-morestyles.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/03-custom.css" type="text/css" media="all" />
</head>
 
<body>
<h2>Hello World!</h2>
</body>
</html>

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Dynamically Load CSS and JS files using PHP</title> <script src="js/01-jquery.min.js" type="text/javascript"></script> <script src="js/02-jquery.plugin.min.js" type="text/javascript"></script> <script src="js/03-custom.js" type="text/javascript"></script> <link rel="stylesheet" href="css/01-style.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/02-morestyles.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/03-custom.css" type="text/css" media="all" /> </head> <body> <h2>Hello World!</h2> </body> </html>

Notes

This code will not search subdirectories for files to load.  This code also doesn’t help when you are using a WYSIWYG editor such as Adobe Dreamweaver that will look for JS/CSS links in the HTML header and load the files.  These programs don’t run the PHP code and therefore don’t know what JS/CSS files are suppose to be loaded. You may need to adjust the path to the “js” and “css” directories based on the location of the page you enter the code onto.

Filed Under: Web Design & Development Tagged With: css, javascript, php

Base64 Inline Images in CSS cause Unsecure Page Warning in IE

February 25, 2009 by Josh Hartman

While working on a magento e-commerce website i found that customers were receiving the “unsecure items” warning during the checkout process.  I used various tools to find the offending item, but was unsuccesful, nothing would tell me what this “unsecure item” was. One thing that i had ignored but suspected was a reference in Firefox’s “View Page Info” window under the media tab.  The address column identified it as “data:image/gif,AAAA” and the size was “unknown” and the type was “image.”  I investigated this item further and found a reference to it inside the lightbox CSS file used as a background-image to create some workaround for an IE issue with the lightbox.  I replaced the base64 background-image reference with a spacer GIF file url, updated the magento cache and voilà, no more unsecure item warnings in IE!

Filed Under: Web Design & Development Tagged With: base64, inline images, magento

  • « Previous Page
  • 1
  • …
  • 7
  • 8
  • 9

Connect

  • Facebook
  • GitHub
  • RSS
  • Twitter
  • YouTube

Recent Posts

  • Extremely Useful Applications for Web Development and IT Tasks
  • Installing BookStack Wiki on cPanel Shared Hosting
  • Media (MIME) Type Reference List

Tags

automatic base64 benchmark cache counter css deflate email font gzip htaccess html image inarray increment inline images in_array javascript jquery link list magento mailto menu metadot mysql number obfuscation opencart operating system order php random redirect rewriterule slashes software timestamp ubuntu unix upgrade url windows windows 7 wordpress

Blogroll

  • CodeIgniter
  • Fusion Forward
  • jQuery
  • Nettuts+
  • Smashing Magazine

© 2021 WarpConduit Computing. All Rights Reserved.