ASP.NET changing style in DIV tag

Question

Hello, I am working on a web site for an optical company. The company works with people that have minor visual impairment up through major impairment, some requiring special equipment in order to view web pages.

Because of the diverse client requirements, we are planning to make available, an option which allows the client, at the time of viewing, to select (stored in a cookie, option hooked to an ASP.NET checkbox) that will make the text size on the page larger and remove some of the pictures that are not required.

The text size is set in the DIV tag, Style "font-size: ##". What I want to do is when the checkbox is unchecked the page will use a normal size and when it's checked the ASP.NET page will change to a larger font. I am not sure how to change a DIV tag (client-side) with a server-side call.

Any ideas on how to do this?

One person elsewhere recommended that I dynamically create the div tag server-side (Response.Write()) but I don't want to use that if there is another way. Just seems like it will be more overhead when whats needed.

Thanks,

Answer 1

You could set the div to runat="server" assign an ID and interact with it on the server side. Or you could change the size immediately on the client side via javascript and wait for the post to record the option.

Answer 2

Why would you need to do that server side ? I would do a client side call, trap the check change and use javascript and jQuery to change the font size in the div element.

You can use jQuery to make it really easy as well.

<div><input type="checkbox" onclick="toggleFontSize(this)" /> Change Font Size</div>

<div id="myDiv" style="font-size: 10px;">
Testing my new font size
</div>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>     
<script type="text/javascript">
    function toggleFontSize(obj){ 
       if(obj.checked){
          $('myDiv').css('font-size', '20px'); // jQuery selector here
       }else{
          $('myDiv').css('font-size', '10px'); // jQuery selector here
       }
    }
</script>