Finding out about window size

Report · Oct 16, 2008

Hello

I'm trying to find out the window size of the browser visiting my web site. There is several javascript codes but I'm wondering whether there is anything in CF? I checked CFlib and unfortunately didn't find anything....

At the end I would like to have the width and height available for further use. My problem (because I'm a rookie) is to take this information out from javascript to a CF variable (or structure or whatever).... Thats why I prefer not to use javascript at all ;-)

Is there an easy solution?

Thank you very much

Report · Oct 16, 2008

You will need javascript to return the window height width values. If you need to retain that information for future use, you could simply submit the value into your database.

Report · Oct 16, 2008

tomtomtom wrote:
> Thats why I prefer not to use javascript at all ;-)

Unfortunately, that is not possible. ColdFusion only runs on the
server. It knows nothing of clients such as window dimensions. You
must do this with JavaScript.

>
> Is there an easy solution?

Any of those JavaScript codes you found should be fine.

Just remember, JavaScript is only on the client. It knows nothing of
servers. To get this information from the client to the server you will
need to do something to get it there. All the normal channels are fine.
Submit the information in a request with post or get. Save it to a
cookie. Make a new request -- even one behind the scenes with Ajax.

But until the client collects this information and sends it to the
server in a request, ColdFusion will have no idea.

Report · Oct 21, 2008

Hello Ian

Many thanks for your input. So far I'm able to display the viewport size by Javascript (see code) on the client. At the end I would like to have it in a request variable as you said. But I still have no idea on how to do this! can ou furnish an example (please step by step with the starting point being my javascript).
At the very end I would lik to have something like: <cfset myViewportWidth = #noidea#>

I would be very thankful...

Report · Oct 21, 2008

tomtomtom wrote:
> Hello Ian
>
> Many thanks for your input. So far I'm able to display the viewport size by
> Javascript (see code) on the client. At the end I would like to have it in a
> request variable as you said. But I still have no idea on how to do this! can
> ou furnish an example (please step by step with the starting point being my
> javascript).
> At the very end I would lik to have something like: <cfset myViewportWidth =
> #noidea#>

You need to think this through a bit more so one can choose from the
many possible paths to get to the desired result.

The main thing to keep in mind is that while the client is running this
JavaScript code and displaying the results in an Alert box. The server
knows nothing about it. It is off processing requests from entirely
different users or it is waiting idly if it has not received any requests.

So something needs to happen to send a request to the server. What do
you want to happen?

Options:
A) Wait for the user to make another request to your server by clicking
a link or submitting a form?
A1) Pass the screen data in a post by putting it into form variables
controls.
A2) Pass the screen data in a get by putting it into url variables.
A3) Pass the screen data in a cookie.

B) Make an asynchronous request behind the scenes with JavaScript - AKA
AJAX.

How do you want to handle the possibility that the user resizes their
screen between requests?

What do you want to do with the data, once the server receives it?
Store it for future requests or use it in the current request and forget
about it.

Report · Oct 21, 2008

Hi Ian

Thank you for getting back to me! My situation is the following. My designer designed a website in a supercrazy width - and he isn't willing to discuss a reduction of design width. My input was that this design doesn't work when a user uses a screen with a small resolution. As I try to be solution oriented I suggested to program the site in the dimensions the designer suggested but to write a second css with dimensions working for resolution smaller than 925px in width.

So, what I need at the very beginning is to know what resolution the client browser has and then decide what css I will use for the future visit of this user. I don't want the user to have to interact in any way, means I don't want him to click buttons, fill in form or whatever. It should work automatically so may be your suggested AJAX version is a solution!?

But there I have to admit that I don't have any clue, means I would be happy for code samples and may be further explanations....

Would this be possible?

Report · Oct 21, 2008

tomtomtom wrote:
>
> Would this be possible?
>

Of course it is possible, the question - as always - is how hard are you
willing to work to make it possible.

If you just want statistics on your users as your final post described
my first suggestion is as follows.

1) Go to www.google.com/analytics.

2) Create or log into an account.

3) Read a bit until you find the three lines of JavaScript code to add
to the end of any page on which you want statistics. [Just before the
closing </body> tag.]

4) Wait a day or so for some information to accumulate - at least 20
minutes to an hour. Google does not update a site's statistics after
every request.

5) Return to www.google.com/analytics and review reports with more data
about your users then one developer could ever collect in a home grown
solution. Including break downs of browsers by make, model, version,
dimensions, os and much more.

It is free. It is easy. It is more through then anything I could write.

Otherwise.

Grow your own solution.

You have all the pieces, but I don't have time to write the code for you.

1) You collect the data.

2) On a request, you send it to the server

3) The server stores the data.

Just to let you know, just because you put the data into a form, get or
cookie - does not mean that the user has to click buttons or fill in
forms that they are not doing already. You just piggyback your data on
the same requests that they are making to go to the next page of your
site or whatever they are doing at the time.

But if you want to use AJAX there are plenty of samples out there for
the Googling.

If you have ColdFusion 8, you have built in tags to help you generate
the necessary code with a few lines. The documentation has plenty of
examples.

If you don't have 8, there are older community grown solutions such as
CFAJAX and CFCAJAX that are nearly as easy. They come with fine
examples and documentation as well are well discussed in blogs and other
websites.

And if you don't want a CF specific aid, there are other
library|frameworks that abstract much of the difficulties out of any of
this such a JQUERY.

Report · Oct 21, 2008

Hi Ian

Thanks again for your reply and I just finished googling and am kind of frustrated because I didn't find anything I would understand!
To give some more short info. I don't want to save anything to a database nor am I interested in Google analytics. I want to know the viewport size of a internet user visiting my site and then decide what CSS is best for him. Well, I am running CF 8. You are talking about built in tags and about documentation? It sounds crazy but I can't really find anything!

Can you send me some links - and I am really willing to work a lot for a solution :-)
Thank you very much

Report · Oct 21, 2008

jQuery to the rescue (again)!

the simplest solution, but requires js support in the browser to be
enabled (probably 99% of your visitors - for the rest you can display an
unobtrusive warning advising them to enable scripting support to fully
appreciate your wonderful website):

download jQuery js library from http://jquery.com/.

put this in the HEAD section of al your pages (make it into a cfinclude
if you wish...):

<script src="path/to/jquery.js"></script>
<script>
($(window).width() >= 925) ? usecss = 'css925.css' : usecss =
'css_small.css';
$('head').append('<link rel="stylesheet" href="'+usecss+'" />');
</script>

done.

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

Report · Oct 22, 2008

Hello Azadi

Thank you for your input. You are right this helps but unfortunately doesn't solve the 100% of my problem!

I would wish something like

<script src="path/to/jquery.js"></script>
<script>
($(window).width() >= 925) ? usecss = 'css925.cfm' : usecss =
'css_small.cfm';
$('head').append('<cflocation href="'+usecss+'" />');
</script>

Then I would be able to set my request variables in css925.cfm resp. css_small.cfm. But I had a look at jquery.js and have to admit that I don't have enough knowledge to even find out whether something like my suggstion above would be possible....

Thanks for short reply

Report · Oct 22, 2008

why? why do you have to get cf involved into this? what kind of request
variables are you setting that depend on the user's screen size?

even if you do have some cf variables that need be changed (one i can
think of is maybe number of some items, like images, to display per row,
which is a common thing to do...) there are ways to get cf out of that
too, i.e. floated divs. but you do need to dive into advanced css for
that...

if you find out that you can get cf out of the picture, then all you
need is create 2 css files: one to tend to large screens and one for
smaller screen sizes...

please do explain how your cf code relies on screen resolution. i am
curious...

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

Report · Oct 22, 2008

Hello Azadi

Try to answer your question. The website is for an architecture company and they want to display SVG graphics. I built a webinterface for uploading pictures and SVG. I need to force the guy uploading SVG to set the width and height of the SVG because there is no way I could find this out. All info on such an item I save in my database.

Now its about displaying it on the website. I have an area of - let's presume - 1500px in width and 1000px in height to display pictures. Means I have to load the 'big' CSS. When the viewport is smaller than p.e. 925px then I load the small CSS. But in this case (and also in the other one!) I need to calculate in CF the proportion of the SVG to fit in the predefined adreas. So, if I had a variable telling me some basic parameters the calculating would be much easier! That's way I can't get off the idea about having the 'CSS values' in a request variable. I hope this also makes sense to you!!!

My last idea was to load a page (which isn't actually shown to the user) which sets the request variables for future use (p.e. in a session or in the URL).

Do you think there is a way to still realize something like this. JQuery looks really cool but in my understanding its Javascript only - I have no idea about AJAX. But wouldn't this build the bridge between Javascript and CF?

Thanks for further inputs.

Report · Oct 22, 2008

>
> Thanks for further inputs.
>

Play with this code a bit.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">


window.onload = Box();
</script>
</head>

<body>
<cfoutput>
<h1>Fun with window sizes</h1>
Diminsion Cookie

<cfif structKeyExists(cookie,"windim")>
<p>Your viewport dimension is #listFirst(cookie.windim,'|')# x
#listLast(cookie.windim,'|')# pixels</p>
</cfif>
<p><a href="#cgi.SCRIPT_NAME#">Click here to update windows
diminsion.</a></p>
</cfoutput>
</body>

It is important to note the order of things. When this page is first
ran the JavaScript gets the dimensions and writes the cookies.

When it is run again ColdFusion reads the cookies that from the previous
request and then the client gets it and runs the JavaScript again
updating the cookie.

I.E. JavaScript is always outputting the current dimensions, ColdFusion
is output the *last* dimensions. Play with this page by changing the
browser size and then clicking on the link.

If you wanted more immediate feed back replace the document.cookie line
in the javascript with a call to a ajax function that sends a request
immediately to the server.

It'll have to wait for different day for me to have time to whip up an
example like that.

Report · Nov 02, 2008

First off, thanks to all who have posted information on this thread. It has been helpful.

I have a similar situation where I am looking to set the size of an image based on the client's browser size. It is hard for me to understand why teh javascript cannot write a cfset tag with the height and width dimensions of the client browser.

basincally I want to do something like

<cfset imgHeight=#clientHeight#>
<img src="images/front.jpg" height="#imgHeight#">

Is there a CGI or any other possibility to simply make this happen?

Thanks again for your input and ideas.

Report · Nov 02, 2008

> It is hard for me to understand why teh
> javascript cannot write a cfset tag with the height and width dimensions of the
> client browser.

Read my response on this thread: http://tinyurl.com/5kj7ll.

That explains why the notion of using JS to write CF code isn't a viable
avenue to pursue.

JavaScript has access to the client screen dimensions, and that information
can be included in the next HTTP request from the client (via whatever
mechanism the request is made: the user clicking a link, an AJAX call, a
form submission, etc).

You just need to understand the sequence of events, and the relationship
between the various components, both spacially and chronologically.

--
Adam

Report · Nov 04, 2008

Hello Ian

I wish to get back to your post of 10/22/2008 10:47:52 PM which is very promising! I tried several stuff on my local machine but didn't get anything really helpful yet.
I have to courage to refer to your last line of your post saying '

quote:

...wait for different day for me to have time to whip up an example like that.

1. I think the script doesn't write a proper cookie or may be I got the wrong settings in my application.cfm where I say <cfapplication name="myName">. As I understand this allows to set client cookies, right?
2. Then I wasn't able to read the cookie in a cfm page, not even with the example you wrote.
3. And at the very end, yes i would love to have a

quote:

javascript with a call to a ajax function that sends a request immediately to the server.

But I admit that I don't have the slightest clue on how this has to be coded, programmed or whatever.

Can you prepare such an example for me???? This would be fantastic.

Many thanks and kind regards

Report · Dec 02, 2008

Hello Ian

Its some time ago I was posting in this topic. I'm still looking for a solution and it seems that you didn't find any time for me yet!?

In October you were writing about a promising solution using some ajax functions. As I told in my last post I don't think that I have the understanding yet on how this would work.

Would you mind helping me on with some hints? I would be very happy!

Many thanks and I hope I can read from you soon...

Report · Dec 08, 2008

tomtomtom wrote:

>
> Many thanks and I hope I can read from you soon...
>

I don't have time to write any actual code, just got back from vacation.

The basic idea is that you would just JavaScript to read the window
sizes in the browser.

Then you would pass this data through a JavaScript asynchronous request,
aka AJAX, to a ColdFusion template that would receive the data and do
with it what you desire on the server; IIRC store it in a database.

This should be a really simple AJAX function since you do not actually
need any feed back to the user interface, do you?

A touch of Googling for AJAX with or without ColdFusion will cough up
some ready to cut and paste code that should get you started.