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.

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.

• javascript
• coldfusion
• screen
• detection
• responsive-design

• Do file.cfm and file1.cfm include HTML or JavaScript as their output content? – Jake Feasel Commented Mar 6, 2012 at 5:14

3 Answers 3

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"
}

You should be using CSS media queries and stylesheets for different display rendering based on screen size. This will allow you to have one CF page for both displays. No AJAX needed.

W3C documentation on Media Queries: http://www.w3/TR/css3-mediaqueries/

Great article on "Responsive Web Design": http://www.alistapart./articles/responsive-web-design/

Here are some awesome examples of sites that use this technique:http://mediaqueri.es/

What you are trying to do is not possible. JavaScript is a client side language, ColdFusion is a server side language. You cannot do a cfinclude in a block of JavaScript as that code will be executed in the browser, not on the server.