Member Avatar for Eric Cute

Hello to all (",)

Basically, I have a JSP page. What I want is to determine the screen resolution of the client machine that is viewing my JSP page.

I tried using a JavaBean to do this but Im not getting the results I wanted. So I use JS.

My JS variable gets the screen resoultion.

Now my question is how can I use this JS variable in my JSP page.

I tried this code

String jsWidth ="<script>document.write(scwidth)</script>";

but its not working for me.

Any suggestion is greatly appreciated. Thanks (",)

  • 3 Contributors
  • 7 Replies
  • 28K Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Shanti C

Recommended Answers

All 7 Replies

Member Avatar for javaAddict

If you have that js variable, just display it using javascript. No java is involved. Assuming that you call a javascript function that calculates the resolution and you have that javascript variable calculated at the client. Then:

<script>
  function clacRes() {
    // when this function is called at client side you get the resolution

    var res = 100;

    document.getElementById("resolution").value = res;
  }
</script>

<input type="text" name="resolution" id="resolution" value="">

You can make the input to be readonly, or put it in a div tag:

<div id="resolution"></div>

At the above case where you have a div, the javascript would be:

document.getElementById("resolution").innerHTML = res;

Check the tutorials at:http://www.w3schools.com/default.asp

Member Avatar for Eric Cute

The problem actually is I need to use that JS variable inside my JSP page.

Specifically, depending on the screen width, I will use a different CSS.

Example.

if (width = small) {
   use big font CSS;
else {
   use normal font CSS;
}

The problem is I cant use that width variable because it is JS. So Im thinking if i can pass that to a JSP variable then I can use it in the if statement.

Member Avatar for javaAddict

Are you saying that you want something like this:

<input type="text" ... class="<%=classVariable%>" style="<%=abc%>">

<td class="<%=someOtherCcsClass%>">
 some data
</td>

That can also be done using javascript. You can change those attributes using javascript at the client.
If I still don't understand your problem then post some code but if the above is what you want then let me know.

Also there aren't any JSP variables. Those are java code that are executed at the server and then the result which is a static page is loaded at your browser (client). Once the page is loaded then you are at the client and you use javascript with what you've got.

Waiting for reply

Member Avatar for Eric Cute

What I want is like this

<input type="text" ... class="<%=classVariable%>" style="<%=abc%>">

where classVaribale is in big_css and normal_css.

in big_css

classVariable {
	font-family:"comics sans ms,trebuchet ms";
	font-size:15px;
	color:#fa8072;
	text-align:center;
}

while in normal_css

classVariable {
	font-family:"comics sans ms,trebuchet ms";
	font-size:40px;
	color:#fa8072;
	text-align:left;
}

So really my aim is to put the corresponding css in my htm depending on the screen resolution of the client.

I have tried this but its not working.

<SCRIPT type="text/javascript" LANGUAGE="JavaScript" >
<!--
var scwidth=screen.width

switch (scwidth) {
		case 1024: 
			document.getElementById("resolution").innerText = "<link 

rel="stylesheet" type="text/css" href="normal_screen.css" />"

			break;
		case 1280: 
			document.getElementById("resolution").innerText = "<link 

rel="stylesheet" type="text/css" href="big_screen.css" />"

			break;
}

and in my html i put

<head>

<jsp:include page="js.jsp" />
	
<span id="resolution"> </span>

</head>

Thank you for the help.

Edited by Eric Cute because: n/a
Member Avatar for javaAddict

I will try your code later. What I would suggest would be to put the above code in a function and call it at the onload event of the <body> tag.
Also I would prefer if you had it like this: document.getElementById("resolution").innerText = '<link rel="stylesheet" type="text/css" href="normal_screen.css" />' Although I am not sure that this is the right approach. I will look into it

Member Avatar for javaAddict

Put the code that calculatea the width and changes the stylesheet in a function. In that way you can call it whenever you want. For starters you will call it at the onload:

<html>
<head>

<link rel="stylesheet" type="text/css" href="big_screen.css" id="styleId" />

<SCRIPT type="text/javascript" LANGUAGE="JavaScript" >
  function changeStyle() {
    var scwidth=screen.width;

    switch (scwidth) {
		case 1024: 
                    // do something
			break;
		case 1280: 
                    // do something else
			break;
    }  
  }
</SCRIPT>
</head>

<body onload="changeStyle();">
....
</body>
</html>

The stylesheet declaration needs to be in the <head> tag.

Now, you should have paid a closer look at the link I provided. I don't believe that you gave it too much time, nor you studied it thoroughly like you should have.

If you did, you would have come up with this:
http://www.w3schools.com/jsref/dom_obj_link.asp

The tag that you specify the style sheet is a link tag: <link rel="stylesheet" type="text/css" href="big_screen.css" id="styleId" /> Therefor a link object. At that page it shows how you can change its attributes like the href attribute where you specify the css file. So you can do this in the switch statement: document.getElementById("styleId").href="some_css_file.css"; Where "styleId" is the id of the link tag where you specify the css and href is the file.

If you click at the link "href" at that page I showed you: http://www.w3schools.com/jsref/dom_obj_link.asp It has as an example, exactly what you want

Member Avatar for Shanti C

yes, javaAddict is right,,,
Here you are getting client machine resolution properties in javascript only, then why you go for JSP coding here,just try with the above post example.
that is the best answer..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.