Member Avatar for kevindougans

Can anyone help me with "" (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 ):

<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>
  • 1 Contributor
  • 1 Reply
  • 248 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by kevindougans

Dani AI

Generated

Useful follow‑up to — the callback append trick works, but it can create problems over time: every resize (with dynamic: true) will append another <link>, producing duplicates, extra downloads, and confusing order of overrides. Two practical fixes: (1) keep a single, named/linked element and update its href instead of appending every time; (2) avoid a long if/else ladder by deriving the filename from the ADAPT_CONFIG.range entry.

Example pattern (replace-or-create + parse filename):

<script>
var lastRangeIndex = null;

function myCallback(i) {
  if (i === lastRangeIndex) return; // only act when the range actually changes
  lastRangeIndex = i;

  var entry = ADAPT_CONFIG.range[i] || '';
  var file = (entry.split('=')[1] || '').trim();
  if (!file) return;

  var href = '/css/<?php echo $page_css;?>/' + file;
  var id   = 'adapt-page-css';

  var existing = document.getElementById(id);
  if (existing) {
    existing.href = href;
  } else {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.id  = id;
    link.href = href;
    document.head.appendChild(link);
  }
}
</script>

Troubleshooting & notes

  • If adapt.js itself injects a primary stylesheet, keep the second stylesheet ID'd so you can control load order and avoid duplicates.
  • During development add a ?v=1.2 query string to bust cache; remove it for production.
  • Use devtools Network/Elements to confirm only one page‑CSS link exists and that it updates on range change.
  • If you prefer not to rely on parsing, store a small filename array and index it by i — cleaner and explicit.

These changes keep the behavior deterministic, avoid repeated DOM churn on resize, and let the page‑specific CSS cleanly override the base grid rules.

Member Avatar for kevindougans

Ok I managed to solve it.

Here's the working code to have 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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.