Set dynamic button size according screen resolution

Question

0.00/5 (No votes)

See more:

Hye.

I would like to set dynamically-created button size according screen resolution. However, I never get the screen resolution before server side as I need to get the value from Javascript first and assign the value to HiddenField.

1. Since page_load executes first before javascript, how can I get screen resolution before everything is loaded into the page?
2. Or is there any way I can do to set dynamic button size from javascript?

Thank you.

Posted 21-Aug-13 17:13pm

snamyna

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dholakiya Ankit · Answer 1 · 2013-08-21T17:24:00

Solution 1

Snamyna

take a look at this links

http://www.javascriptkit.com/howto/newtech3.shtml[^]

http://stackoverflow.com/questions/6264126/how-to-set-width-and-height-of-a-panel-according-to-the-resolution-of-the-user-s[^]

http://stackoverflow.com/questions/2330889/set-image-size-with-respect-to-the-screen-resolution[^]

http://stackoverflow.com/questions/15857077/change-css-class-height-and-width-in-javascript-depending-on-screen-res[^]

regards...:)

Posted 21-Aug-13 17:24pm

Dholakiya Ankit

Comments

snamyna 21-Aug-13 23:45pm

Hye. Thanks for your reply.
I already got some idea on how to resize the controls inside my aspx page according screen resolution. But, my problem is, my controls are dynamically created. How can I access all dynamic controls inside javascipt?

Dholakiya Ankit 21-Aug-13 23:50pm

you have id of that controls so use window.onload method in javascript then access it this will help you

snamyna 22-Aug-13 0:19am

how to use window.onload to find dynamic controls?
I've tried my page's innerHTML and get the dynamic controls' id.
However when I use this code : var d = document.getElementById('<%= pnlCabPP1.ClientID %>');
the error occurred is
'pnlCabPP1' is not declared. It may be inaccessible due to its protection level.

Dholakiya Ankit 22-Aug-13 0:34am

can you put some code you have posted diff q but nw you are going to diff way i need some code to help you

snamyna 22-Aug-13 1:17am

One of the methods that I used:

in aspx page:

<script>
function getScrHeight() {

var d = document.documentElement.clientHeight;
return d;

}
</script>

in code behind:

Dim scriptKey As String = "ScreenHeight"
Dim getScrHeight As String = "<script type='text/javascript'>getScrHeight();</script>"

Dim scrHeight As String = "javascript:getScrHeight();"
ScriptManager.RegisterStartupScript(Me, Me.GetType, scriptKey, "alert(getScrHeight());",True)

How can I assign javascript value into scrHeight variable? because I succeed to get the value in alert method.

Dholakiya Ankit 22-Aug-13 2:00am

give me element you have declared so i can give you exact solution......

snamyna 22-Aug-13 2:32am

i just want to get the screen width so no other element need to be declared i guess.
this is what I intend to do:
1) get screen height & width in code behind
2) do some calculation to set button size (using percentage)
3) set dynamic button size according to calculation

walterhevedeich · Answer 2 · 2013-08-21T17:34:00

Solution 2

You can try setting the height[^] and width[^] of the button on your Javascript code.

As for the screen resolution, it would not make sense to base your button sizes on that one because browsers already have the functionality that allows you to zoom pages. You can check the current zoom level of your browser though in Javascript but seems that almost each browser has a their own solution. See here[^] for a more detailed explanation.

Posted 21-Aug-13 17:34pm

walterhevedeich

Comments

snamyna 21-Aug-13 23:48pm

Yes it is possible. I just need to include some calculation to set the button size. I've already succeed resize the static controls according screen resolution, but I never found the way to find dynamic controls inside javascript.

walterhevedeich 22-Aug-13 0:19am

I guess the problem with dynamic controls is that they tend to have a different ID when they are rendered on the browser. So the getElementById() function of Javascript may not be useful since you have to provide the exact ID of the control you want to manipulate. Unless you can confirm that the control ID is always the same when rendered on the browser, you can just use the said function in getting the control. Otherwise, I think you may want to implement Jquery on your application since it has more flexible DOM selectors.

snamyna 22-Aug-13 0:27am

If that is the case, i've got another way to set the dynamic button size. From page_Load function, I need to get the screen width so that I can calculate the suitable button size from code behind. I've tried many methods to achieve that but never succeed.

By assigning screen width into hidden field, the first page_load would make the hidden field value as empty because javascript is not executed yet. How can I get the screen width at first page load before javascript is executed?

walterhevedeich 22-Aug-13 0:56am

I'm not sure if that's possible, but if it is, it will not be a nice trick because basically, you will be doing a POST on the server for the screen resolution while executing the GET (Page_Load event). Why not do the button sizes on JS instead of doing it on the code behind? Are those dynamic controls buttons that will have the same size? If yes, there's a function in JS called getElementByClassName(). What you can do is create a CSS class that is exclusive only to those dynamic buttons and then calling that function will give you an array of those elements.

snamyna 22-Aug-13 1:03am

Nice suggestion. I will give it a try. Thanks for your time.