ASP.NET

Javascript to obtain screen size working but... RSS

10 replies

Last post Dec 19, 2012 09:45 PM by Madog

‹ Previous Thread|Next Thread ›

- Reply
Madog

Member

65 Points

134 Posts
Javascript to obtain screen size working but...

Dec 12, 2012 03:12 AM|LINK
I have a Master page with a javascript function set to run on page load.
```
<body onload='GetScreenSize()'>
     <script type="text/javascript" >
         function GetScreenSize() {
             document.getElementById('<%= screenSize.ClientID %>').value = screen.height + ',' + screen.width;
         }
    </script>
```
It's purpose is to populate a hidden field in the master page called screenSize
```
<input type="hidden" id="screenSize" name="screenSize" runat="server"/>    
```
In the Page Load event of the content pages I then access the value of the hidden field of the masterpage and heh presto, I have the users screen size which I place into session state for subsequent calls. This is later used to set the size and position of modal popups.

If String.IsNullOrEmpty(Convert.ToString(Session("scnWidth"))) Then
Dim scnHeight As String
Dim scnWidth As String
Dim scrSizeArray() As String
Dim scrsize As System.Web.UI.HtmlControls.HtmlInputHidden = CType(Master.FindControl("screenSize"), System.Web.UI.HtmlControls.HtmlInputHidden)

If Not scrsize Is Nothing Then
scrSizeArray = Split(scrsize.Value,",")
Dim maxIndex As Integer = scrSizeArray.GetUpperBound(0)
If maxIndex <> 0 Then
scnHeight = scrSizeArray(0)
scnWidth = scrSizeArray(1)
Session("scnHeight") = scnHeight
Session("scnWidth") = scnWidth
modalScreenX = Convert.ToInt32((Convert.ToInt32(scnWidth) / 2) - 450)
modalScreenY = Convert.ToInt32(((Convert.ToInt32(scnHeight) - taskbarsize) / 2) - 450)
End If
End If

Else

modalScreenX = Convert.ToInt32((Convert.ToInt32(Session("scnWidth")) / 2) - 450)
modalScreenY = Convert.ToInt32(((Convert.ToInt32(Session("scnHeight")) - taskbarsize) / 2) - 450)
End If

The problem is the script in the master page does not run on inital page load, only on postbacks, so I am forced to use defaults on page loads. Any ideas why this is occurring. I suspect it is to do with what part the masterpage plays in constucting the control tree of the page? Thanks
<script type="text/javascript">// ').value = screen.height + ',' + screen.width; } // ]]></script>
- Reply
senthilwaits

Contributor

3832 Points

651 Posts
Re: Javascript to obtain screen size working but...

Dec 12, 2012 04:10 AM|LINK
```
$(document).ready(function() {
  GetScreenSize();
});
```
1. Add a reference to jQuery.js
2. Call your function inside "document.ready"
Regards,

Senthil Kumar Sundaram
- Reply
raju dasa

Star

14410 Points

2451 Posts

Re: Javascript to obtain screen size working but...

Dec 12, 2012 04:32 AM|LINK

Hi,

because you are populating sizes in hiddenfield, so you cant access it until postback.
a better way can be to use Ajax to send the sizes for calc or fill ur session.
or implement those size calc logic in JS at clientside.

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || blog@opera
- Reply
roopeshreddy

All-Star

20155 Points

3328 Posts
Re: Javascript to obtain screen size working but...

Dec 12, 2012 10:49 AM|LINK
Hi,

Instead of onload function on the body tag, try placing the script before the end of body tag. i.e., before </body>tag!
```
<html>
<head>
</head>
<body>


<script type="text/javascript" >
         
             document.getElementById('<%= screenSize.ClientID %>').value = document.body.clientHeight + ',' + document.body.clientWidth;

    </script>
</body>
</html>
```
Hope it helps u...
Thanks & Regards
Roopesh Reddy C
Roopesh's Space
- Reply
Madog

Member

65 Points

134 Posts
Re: Javascript to obtain screen size working but...

Dec 16, 2012 11:29 PM|LINK
Thankyou for your answers. I have tried some of the solutions and unfortunately they have not worked.
So I am attempting my first foray into jQuery.
I have downloaded the lates file for the jQuery library 'jquery-1.8.3.js' and placed it in a folder called Scripts.

I then placed the following code in the Masterpage

<script src="scripts/jquery-1.8.3.js" type="text/javascript" ></script>
```
<script type="text/javascript" >
```
```
 function GetScreenSize() {document.getElementById(
```
```
 '<%# screenSize.ClientID %>').value = screen.height + ',' + screen.width; }
</script>
```
```
<script type="text/javascript" >
$(document).ready(function() { 
GetScreenSize();});
```
```
</script>
```
It is bombing out on the jQuery call to run the GetScreenSize function with "object not found".

So I don't know if it's the way I've set jQuery up or something else?
- Reply
roopeshreddy

All-Star

20155 Points

3328 Posts
Re: Javascript to obtain screen size working but...

Dec 17, 2012 06:27 AM|LINK
Hi,

I found a mistake in the GetScreenSize function -
```
//It should be "=" instead of "#"
function GetScreenSize() {
document.getElementById('<%=screenSize.ClientID %>').value = screen.height + ',' + screen.width;
}
</script>
```
Hope it helps u...
Thanks & Regards
Roopesh Reddy C
Roopesh's Space
- Reply
Madog

Member

65 Points

134 Posts

Re: Javascript to obtain screen size working but...

Dec 17, 2012 08:26 PM|LINK

Thank you but when I use the "=" syntax it bombs with

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

I have researched this and found the answer was to use "#" binding syntax, it doesn't blow up but doesn't work either.

So I am going off the study jQuery to find the solution, especially how to reference controls, be they html or asp.net controls.
- Reply
roopeshreddy

All-Star

20155 Points

3328 Posts
Re: Javascript to obtain screen size working but...

Dec 18, 2012 05:42 AM|LINK
Hi,

To refer the ASP.NET server controls in JavaScript, you have to use "="!

Like this -
```
<asp:Label runat="server" ID="mylbl"></asp:Label>

//javascript
document.getElementById("<%=mylbl.ClientID%>").innerHTML = "your value...";
```
"#" is used for data binding! So i think, you will be using wrong stuff some where else. So, please check that!

http://forums.asp.net/t/1753521.aspx/1

Hope it helps u...
Thanks & Regards
Roopesh Reddy C
Roopesh's Space
- Reply
Madog

Member

65 Points

134 Posts
Re: Javascript to obtain screen size working but...

Dec 18, 2012 09:12 PM|LINK
I don't doubt what you are saying about the syntax, it's just that every time I use it I am receiving the error message "The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

I copied and psted your exact code, so I am bamboozled !
```
<script type="text/javascript" >
        function GetScreenSize()
            {
                document.getElementById("<%=mylbl.ClientID%>").innerHTML = screen.height + ',' + screen.width;
            }
    </script>
```
- Reply
roopeshreddy

All-Star

20155 Points

3328 Posts

Re: Javascript to obtain screen size working but...

Dec 19, 2012 03:58 AM|LINK

Hi,

In that case, you may have to show us the total code for the page! Also the MasterPage, if you have!

Thanks & Regards
Roopesh Reddy C
Roopesh's Space