Question

I am using the following code to fetch the screen height:

<CFSET rheight = "<script>document.write(screen.height);</script>">

The value of rheight comes out as 768, which is correct.

But when I do this :-:

<CFSET sheight = rheight / 4>

I get the following error:

The value document.write(screen.height); cannot be converted to a number.

The idea is to get the screen height in number format without reloading the page.

Answer 1

There are a number of ways this can be done:

No AJAX

Without using any AJAX requests, you could achieve the desired result using the following code (just tested in CF 9.0.2 and CF10):

<cfset rheight = "
    <script type='text/javascript' 
        src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
    </script>
    <script>
    $(document).ready(function() { 
        $('input.screenHeight').val(screen.height);
        alert($('input.screenHeight').val() / 4);
    })
    </script>">

<cfhtmlhead text="#rheight#" />

<input type="text" class="screenHeight" />

In this example, we are creating a string variable that contains a reference to the jQuery library AND your custom code to obtain the screen height.

We’ll set the height as the value of a text input box. We can then pull out the value and convert it into the number. You could convert the value before it was placed into the input box, like so:

$('input.screenHeight').val(screen.height/4);

The string variable is added to the head of the document using the cfhtmlhead tag:

http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7ae9.html

This would only work for the original page view. If you needed to obtain the dimensions after changes in the page or responsive design layout changes, you would need to run an AJAX request to bring back the screen dimensions.

No CFML

Of course, you don’t need to use ColdFusion at all. You could get the same number conversion from JavaScript alone:

<script type='text/javascript'     
    src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
</script>
<script type='text/javascript'>
    var getScreenHeight = function() {
        return screen.height;
    }

    $(document).ready(function() { 
    var screenheight = getScreenHeight();
    console.log(screenheight/4);
    })
</script>

However, it looks like you need to be able to persist the value from the screen height response in ColdFusion, like so:

With AJAX AND CFML

Amending the above JavaScript example, we can create an AJAX request to post the screen height value to a new .cfm page:

<script type='text/javascript'>
var getScreenHeight = function() {
    return screen.height;
}

$(document).ready(function() { 
    var screenheight = getScreenHeight();

$.get("screensize.cfm",
    { screenheight: screenheight },
    function(data) {
        console.log('screen height has been set in the session scope: ' + data);
    }
)
})
</script>

At it’s most basic, the screensize.cfm could include the following:

<cfsetting showdebugoutput="false" />
<cfparam name="URL.screenheight" type="numeric" default="800" />

<cfset session.screenheight = URL.screenheight />

<cfoutput>#session.screenheight#</cfoutput>

(this does not include any validation or failure captures that you may need to include)

Assuming your application has session management enabled, this will place the value you send into the SESSION scope for use throughout the application.

One thing to remember here is that the value in the SESSION scope will not be available to the original calling page (the one that made the AJAX request) until it has been refreshed.

I hope that helps.