adapt.js - include 2 css files instead of 1

[kevindougans]

Can anyone help me with "adapt.js" (http://adapt.960.gs/) to set it up to include 2 css files instead of just 1.

For example I need it to figure out I want to include /css/960.css, then i also want it to include /css/<= $pagename ?>/960.css

Here is my current code (not included the standard adapt.js):

<script>
	function myCallback(i, width) {
	  // Replace HTML tag's ID.
	  document.documentElement.id = 'range_' + i;
	
	  // Note: Not making use of width here, but I'm sure
	  // you could think of an interesting way to use it.
	}

	// Edit to suit your needs.
	var ADAPT_CONFIG = {
	  // Where is your CSS?
	  <?php if (isset($page_css)){ ?>
		path: '/css/<?= $page_css ?>/',
	  <?php  } else { ?>
	  	path: '/css/',
	  <?php  }  ?>
	
	  // false = Only run once, when page first loads.
	  // true = Change on window resize and page tilt.
	  dynamic: true,
	
	  callback: myCallback,
	  
	  // First range entry is the minimum.
	  // Last range entry is the maximum.
	  // Separate ranges by "to" keyword.
	  range: [
	    '0px    to 760px  = mobile.css',
	    '760px  to 980px  = 720.css',
	    '980px  to 1280px = 960.css',
	    '1280px to 1600px = 1200.css',
	    '1600px to 1940px = 1560.css',
	    '1940px to 2540px = 1920.css',
	    '2540px           = 2520.css'
	  ]
	};
	</script>

[kevindougans]

Ok I managed to solve it.

Here's the working code to have adapt.js include 2 css files instead of just 1:

<script>
	function myCallback(i, width) {
	  // Replace HTML tag's ID.
	  document.documentElement.id = 'range_' + i;
	  
	  <?php if (isset($page_css)){ ?>
	  	
	  	if(i == 0) {
			$('head').append('<link rel="stylesheet" href="/css/<?= $page_css ?>/mobile.css" type="text/css" />');
		}
		else if(i == 1) {
			$('head').append('<link rel="stylesheet" href="/css/<?= $page_css ?>/720.css" type="text/css" />');
		}
		else if(i == 2) {
			$('head').append('<link rel="stylesheet" href="/css/<?= $page_css ?>/960.css" type="text/css" />');
		}
		else if(i == 3) {
			$('head').append('<link rel="stylesheet" href="/css/<?= $page_css ?>/1200.css" type="text/css" />');
		}
		else if(i == 4) {
			$('head').append('<link rel="stylesheet" href="/css/<?= $page_css ?>/1560.css" type="text/css" />');
		}
		else if(i == 5) {
			$('head').append('<link rel="stylesheet" href="/css/<?= $page_css ?>/1920.css" type="text/css" />');
		}
		else if(i == 6) {
			$('head').append('<link rel="stylesheet" href="/css/<?= $page_css ?>/2520.css" type="text/css" />');
		}
		else {
			
		}
		
	  	
	  <?php  }  ?>
	  
	  // Note: Not making use of width here, but I'm sure
	  // you could think of an interesting way to use it.
	}

	// Edit to suit your needs.
	var ADAPT_CONFIG = {
	  // Where is your CSS?
	  path: '/css/',
	 
	
	  // false = Only run once, when page first loads.
	  // true = Change on window resize and page tilt.
	  dynamic: true,
	
	  callback: myCallback,
	  
	  // First range entry is the minimum.
	  // Last range entry is the maximum.
	  // Separate ranges by "to" keyword.
	  range: [
	    '0px    to 760px  = mobile.css',	// 0 
	    '760px  to 980px  = 720.css',	// 1
	    '980px  to 1280px = 960.css',	// 2
	    '1280px to 1600px = 1200.css',	// 3
	    '1600px to 1940px = 1560.css',	// 4
	    '1940px to 2540px = 1920.css',	// 5 
	    '2540px           = 2520.css'	// 6
	  ]
	};
	</script>