INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

DHTML

Dynamic CSS and JS loading by dkdude
Posted: 6 Nov 06 (Edited 9 Nov 06)

This is one way of loading dynamic CSS and JS. It takes a few files to complete my example, but they all rely on the loader.js.

Here we go ...

Let look at at basic xhtml document with a few extensions:

index.html

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Dynamic Script &amp Style Loader</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <link type="text/css" rel="stylesheet" href="baseline.css" />
  <script type="text/javascript" src="generic.js"></script>
  <script type="text/javascript" src="loader.js"></script>
  <script type="text/javascript" src="debug.js"></script>
</head>
  <body>
    <h3>
      My Dynamic Script &amp; Style Loader
    </h3>
    <hr />
    <h4>Let's change styles!</h4>
    <p>
      <button onclick="load_stylesheet('verdana.css')">
        Load the verdana.css stylesheet
      </button>
      <br />
      <button onclick="load_stylesheet('arial.css')">
        Load the arial.css stylesheet
      </button>
      <br />
      <button onclick="load_stylesheet('impact.css')">
        Load the impact.css stylesheet
      </button>
    </p>
    <hr />
    <h4>
      We can change scripts too!
    </h4>
    <p>
      <button onclick="hello()" id="myButton">
        I say &quot;Hello world!!&quot;
      </button>
      <br />
      <button onclick="load_script('hello.js')">
        Change the function of that button &nbsp; <b>&uarr;</b>
      </button>
    </p>
    <hr />
    <button onclick="stat()">
      Watch the Dynamic Load History
    </button>
  </body>
</html>

The document has a baseline-styling for the buttons:

baseline.css

CODE

body {
  text-align    : center;
}

button {
  width        : 300px;
  padding        : 5px;
  margin        : 10px;
}

This is quite basic xhtml. And this document uses a few JavaScript extensions.

One is a gereric "hello world" script (which we will be replacing dynamically):

generic.js

CODE

//---------------------------------------------------------------------------
//    The classic 'Hello World' :
//---------------------------------------------------------------------------

function hello() {
  alert('Hello world!!');
}

Now, let's have a look at the actual Script & Stylesheet loader :

loader.js

CODE

//---------------------------------------------------------------------------
//    Check to see if dubugging is enabled :
//---------------------------------------------------------------------------
if(!eval(debug)==true)
  var debug = false;;


//---------------------------------------------------------------------------
//    Let's load some JavaScripts :
//---------------------------------------------------------------------------
function load_script(filename) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = filename;
  document.getElementsByTagName('head')[0].appendChild(script);
  if(debug)
    monitor(dynScripts, filename);
}


//---------------------------------------------------------------------------
//    Let's load some Stylesheets :
//---------------------------------------------------------------------------
function load_stylesheet(filename) {
  var css = document.createElement('link');
  css.rel = 'stylesheet';
  css.type = 'text/css';
  css.href = filename;
  document.body.appendChild(css);
  if(debug)
    monitor(dynStyles, filename);
}


//---------------------------------------------------------------------------
//    Watch the status - IF enabled :
//---------------------------------------------------------------------------
function stat() {
  
// IF debugging is enabled, then dump via the dynStatus() function :
  if(debug)
    dynStatus();
  
// ELSE say that debugging is disabled ::
  else
    alert('Debug not enabled');
}

Here's the three sample stylesheets that are (or can be) dynamic loaded:

verdana.css

CODE

h3 {
  font-family           : verdana;
  font-size             : 22px;
  font-weight           : bold;
  color                 : #202020;
  letter-spacing        : 5px;
}

body {
  background-color      : #7DA177;
}

arial.css

CODE

h3 {
  font-family           : arial;
  font-size             : 22px;
  font-weight           : bold;
  color                 : #EAEAEA;
  letter-spacing        : 5px;
}

body {
  background-color      : #4B6697;
}

and fianlly impact.css

CODE

h3 {
  font-family           : impact;
  font-size             : 22px;
  font-weight           : normal;
  color                 : #404040;
  letter-spacing        : 5px;
}

body {
  background-color      : #F8E488;
}

Now, let's replace the generic hello world message:

hello.js

CODE

//---------------------------------------------------------------------------
//    Fetch the button that's about to change function :
//---------------------------------------------------------------------------
var myButton = document.getElementById('myButton');


//---------------------------------------------------------------------------
//    Change the label of it :
//---------------------------------------------------------------------------
myButton.innerHTML = 'I now say &quot;Hello YOU!!&quot;';


//---------------------------------------------------------------------------
//    Change the background-color of it :
//---------------------------------------------------------------------------
myButton.style.backgroundColor = '#000000';


//---------------------------------------------------------------------------
//    Change the text color of it :
//---------------------------------------------------------------------------
myButton.style.color = '#EAEAEA';


//---------------------------------------------------------------------------
//    Change the font-weight of it :
//---------------------------------------------------------------------------
myButton.style.fontWeight = 'bold';


//---------------------------------------------------------------------------
//    Replacement hello() message for the button :
//---------------------------------------------------------------------------
function hello() {
  alert('Hello YOU!!');
}

Finally, as an option, you can include the debugger (like in my example index.html):

debug.js

CODE

//---------------------------------------------------------------------------
// Global debugging variable :
//---------------------------------------------------------------------------
var debug = true;


//---------------------------------------------------------------------------
// Global Dynamic Script Name Monitor Array :
//---------------------------------------------------------------------------
var dynScripts = new Array();


//---------------------------------------------------------------------------
// Let's add a label to it :
//---------------------------------------------------------------------------
dynScripts[0] = '\n\nDynamic Scripts History:\n====================';


//---------------------------------------------------------------------------
// Global Dynamic Stylesheet Name Monitor Array :
//---------------------------------------------------------------------------
var dynStyles = new Array();


//---------------------------------------------------------------------------
// Let's add a label to it :
//---------------------------------------------------------------------------
dynStyles[0] = 'Dynamic Styles History:\n====================';


//---------------------------------------------------------------------------
// Log the loaded module names :
//---------------------------------------------------------------------------
function monitor(myArray, value) {
  var next = myArray.length;
  myArray[next] = value;
}


//---------------------------------------------------------------------------
// Alert the status - IF debugging is enabled :
//---------------------------------------------------------------------------
function dynStatus() {
  
// Split array elements into seperate lines :
  var output = dynStyles.concat(dynScripts).join('\n');
  alert(output);
}

Hope you find this FAQ useful ...

Happy coding!

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close