coldfusion after screen size detection

Question

I am making a responsive website and I want to be able to use javascript to get the screen size and then render a coldfusion include depending on the screen size. Something like this:

if (screen.width <= 700) {
     <cfinclude template="file1.cfm">
} else {
     <cfinclude template="file.cfm">
}

I've also tried loading via .ajax() but I get stuck when I have include files inside the cfm file in already want to include.

Answer 1

JavaScript is client side. ColdFusion is server side. If you want to mix the two, you need Ajax. You should try something more like using jQuery for easy Ajax:

// LOOK AT THE SCREEN WIDTH
if (screen.width <= 700) {
     // LOAD THE PAGE INTO THE CORRECT SIZED DIV
     $("#YourDiv").load("ColFusionFile-01.cfm");
} else {
     // LOAD THE PAGE INTO THE CORRECT SIZED DIV
     $("#YourDiv").load("ColFusionFile-02.cfm");
}

Or, you might want to redirect them:

// LOOK AT THE SCREEN WIDTH
if (screen.width <= 700) {
     // SEND THE VISITOR TO THE CORRECT SIZED PAGE
     window.location.href = "ColFusionFile-01.cfm"
} else {
     // SEND THE VISITOR TO THE CORRECT SIZED PAGE
     window.location.href = "ColFusionFile-02.cfm"
}