☆ A M B ☆
$('#block1').load('block1.html');$(window).load(function() {
var windowSize = $(window).width();
if (windowSize <= 767) {
$('#block1').load('block1_phone.html');
}
else if (windowSize <= 979) {
$('#block1').load('block1_pad.html');
}
else if (windowSize >= 980) {
$('#block1').load('block1_full.html');
}
});
AJAX with JQuery is really easy. You have an HTML element in your page where you want custom data; say it has an id attribute like id="block1". You have a resource with no template that just has the data you want; this can be like any resource content with snippets, chunks, etc. to generate the block of content. If you entered the URL to this resource in your browser, you'd see the actual block of content you want and nothing else.
Then your JQuery would look like this:
$('#block1').load('block1.html');
As you can see, it simply says to load the block1.html content into your block1 div.
You would have one of these for each of the if conditions as mentioned in your earlier post.
$(window).load(function() { var windowSize = $(window).width(); if (windowSize <= 767) { $('#block1').load('block1_phone.html'); } else if (windowSize <= 979) { $('#block1').load('block1_pad.html'); } else if (windowSize >= 980) { $('#block1').load('block1_full.html'); } });
AJAX with JQuery is really easy. You have an HTML element in your page where you want custom data; say it has an id attribute like id="block1". You have a resource with no template that just has the data you want; this can be like any resource content with snippets, chunks, etc. to generate the block of content. If you entered the URL to this resource in your browser, you'd see the actual block of content you want and nothing else.
☆ A M B ☆
Why you don't use mediaqueries to check for screen width and then apply classes like .showMobile or hideMobile to make sections of page visible or hidden? You can also pull in modernzr to use mediaqueries or yepnope I think, to test for screen width and then pull in certain javascripts depending on the results of the test. You can see this strategy in action at http://www.kindflow.com. view source in firefox and you'll see how I accomplished it. You will also see that I used this technique to either show or not show a random background image. I also routinely use this tactic to have two nav schems in a page and then only display one of them depending on the width of the browsers. I've found this to be a much cleaner and easier development process.
-noah