We help IT Professionals succeed at work.

Changing the font size of buttons and text.

Medium Priority
4,244 Views
Last Modified: 2013-12-03
Hi.

I'm creating a series of controls which will be for an internal touch screen application.

I want to allow the operator to increase/decrease the font size (just like you can with CTRL+ScrollMouse in FF and to a limited degree IE).

I have 2 buttons on the screen (Font< and Font>).

They both have an onClick event handler of ...

onClick="ChangeFontSize(-1);"

and

onClick="ChangeFontSize(+1);"

This font size will be submitted as part of all the forms, so I know what size the user liked when they logon again in the morning.

What I can't quite work out is how to alter the font size for buttons whose class is 'KYBD_Button_Enabled' or 'KYBD_Button_Disabled'

Oh. The buttons are created at runtime.

Comment
Watch Question

Richard QuadlingSenior Software Developer

Author

Commented:
Ok.

Slight change.

I'm not differentiating styles for enabled/disabled.

So just 'KYBD_Button' style only.
CERTIFIED EXPERT
Top Expert 2006

Commented:
Hi you can like multiple stylesheets:

<link rel="alternate stylesheet" type="text/css" href="css/large.css"     title="A++" />
<link rel="alternate stylesheet" type="text/css" href="css/medium.css" title="A+" />
<link rel="alternate stylesheet" type="text/css" href="css/small.css"     title="A" />
<link rel="alternate stylesheet" type="text/css" href="css/x-small.css"  title="A-" />
<link rel="alternate stylesheet" type="text/css" href="css/xx-small.css" title="A--" />

Then set one active, and all the others inactive with:

<script type="text/javascript>
function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
</script>
<body onload="setActiveStyleSheet('A');'>
</body>

You could even install a cookie script to store the stylesheet.

Then use the different stylesheets to toggle your layout.

-r-
function ChangeFontSize(){


for(i = 0; i <document.forms.length; i++){
      for(j=0;j<document.forms[i].elements.length;j++){
                  if(document.forms[i].elements[j].type=="button"){
                  document.forms[i].elements[j].style.fontSize="18";
            }
      }
}

}
or you said you were storing the variable in asp so

function ChangeFontSize(){


for(i = 0; i <document.forms.length; i++){
      for(j=0;j<document.forms[i].elements.length;j++){
                  if(document.forms[i].elements[j].type=="button"){
                  document.forms[i].elements[j].style.fontSize="<%=fontsize%>"; //<-----------Put it in            }
      }
}

}
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Roonan: Is that crossbrowser?
Richard QuadlingSenior Software Developer

Author

Commented:
REA_ANDREW,

Surely I can talk to the stylesheet rather than each button?

And the buttons are not necessarily on forms (AJAX and all that).

The idea here is that the CSS is generated by the server based upon the users last selected size. The size is saved with their user details in the DB.

User Persistence!

Roonaan,

Only 1 stylesheet with 1 particular setting being changed.
then if you want to change the size of your buttons I am assuming you also change the font size of your textboxes, as this CSS would do

input{
 font-size:18; /*or whatever, input will handle buttons, textboxes etc.....*/
}

have you got that in your CSS?

Then use Server Side to right out the style tag on load.
CERTIFIED EXPERT
Top Expert 2006

Commented:
Not sure about safari and netscape. I think it worked in IE6, FF and Opera.

-r-
OR if you want to access the actual style sheet Cross Browser you use this notation

document.styleSheets[0].cssRules[0] //access the first rule in first stylesheet in Firefox
document.styleSheets[0].rules[0] //access the first rule in first stylesheet in IE Win
CERTIFIED EXPERT
Top Expert 2006

Commented:
RQuadling, then I would go with:

HTML:
<body>
<div id="mainwrapper" class="fontsize1">

JS for changing fontsize:
document.getElementById('mainwrapper').className = 'fontsize2';
document.getElementById('mainwrapper').className = 'fontsize3';
document.getElementById('mainwrapper').className = 'fontsize4';

CSS:

#mainwrapper.fontsize1 KYBD_Button_Enabled {height:100px;}
#mainwrapper.fontsize2 KYBD_Button_Enabled {height:200px;}
#mainwrapper.fontsize3 KYBD_Button_Enabled {height:300px;}
#mainwrapper.fontsize4 KYBD_Button_Enabled {height:400px;}

-r-
Mine Cross Browser Accessing the font size

function changeIt()
{
      if (!document.styleSheets) return;
      var theRules = new Array();
      if (document.styleSheets[1].cssRules)
            theRules = document.styleSheets[0].cssRules
      else if (document.styleSheets[1].rules)
            theRules = document.styleSheets[0].rules
      else return;
      theRules[theRules.length-1].style.fontSize = '18';
}
Richard QuadlingSenior Software Developer

Author

Commented:
I'm trying to get the user on a TOUCH SCREEN SYSTEM (no keyboard or mouse) and running in Kiosk mode (no toolbars/menus/rightclick) to set the size of the text on the buttons to something they are happy with.

Each user will have a different font size as some have better eye sight than others or the screen needs to be read from further away.

The two buttons on the screen alter the size in real time and when a form an action is taken that requires communication with the server, the current size is sent and integrated into the style sheet for that user.

My problem is trying to set the font size on the BUTTON within the style sheet in memory at the time.

How do I address the stylesheets in JavaScript? (Is that a better question?)
I Posted before, this is how you address the stylesheets and more importantly the rules within the style sheet in javascript

document.styleSheets[0].cssRules[0] //access the first rule in first stylesheet in Firefox
document.styleSheets[0].rules[0] //access the first rule in first stylesheet in IE Win
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
You need to incorporate the comment from Roonan or REA_ANDREW in your
ChangeFontSize() function

<html>
<head>
      <title>Untitled</title>
<style>
.KYBD_Button {font-size:10px}
</style>  
<script>
fs = 10;
function changeIt(sz) {
     if (!document.styleSheets) return;
     var theRules = new Array();
     if (document.styleSheets[0].cssRules)
          theRules = document.styleSheets[0].cssRules
     else if (document.styleSheets[0].rules)
          theRules = document.styleSheets[0].rules
     else return;
     if (fs+sz < 10) return;
     if (fs+sz > 36) return;
     fs += sz;
     theRules[theRules.length-1].style.fontSize = (fs)+'px';
}
</script>
 
</head>

<body>
<button class="KYBD_Button" onClick="changeIt(-1)">&lt;&lt;Font</button>
<button class="KYBD_Button" onClick="changeIt(1)">Font&gt;&gt;</button>
</body>
</html>
Richard QuadlingSenior Software Developer

Author

Commented:
But how do I know WHICH rule to access? I don't want to have to hardcode this as when I let it go, the maintainers of the site may not realise the that the third rule on the fifth sheet MUST NEVER BE MOVED EVER EVER EVER!!!!

Ideally I want to say something like ...

function ChangeFontSize(i_adjust_fontsize)
{
with (getStyleFor('KYBD_BUTTON').style)
 {
 fontsize = fontsize + i_adjust_fontsize;
 }
}

The with line is what I am having trouble with.

Commented:
Hi RQuadling,

You could try something like this.  The functions in this code: getClassProperty and changeClassProperty will get or change the values of any property setup in a CSS rule.  It does not matter if this is from a linked style sheet or an internal sheet and will check all style sheets for the appropriate class.  

-------------------------------------------------------------
<html>
<head>
<title>Change Font Size</title>
<script type=text/javascript>
function ChangeFontSize(amt) {
  var minSize = 8;
  var maxSize = 24;
  var currentSize = getClassProperty("KYBD_Button","fontSize");
  currentSize = currentSize.replace("pt","");
  var newSize = parseInt(currentSize) + amt;
  if (newSize >= minSize && newSize <= maxSize) {
    changeClassProperty("KYBD_Button","fontSize",newSize + "pt");
  }
}
 
// get the value of a property of a CSS Rule
function getClassProperty(sClassName,sProperty) {
  sClassName="."+sClassName;
  var sheets = document.styleSheets;
  var rules;
  var styleObj;
  for (i=0;i< sheets.length; i++) {
    rules=sheets[i].cssRules || sheets[i].rules;
    for (var j=0; j<rules.length; j++) {
      if (rules[j].selectorText && rules[j].selectorText==sClassName) {
        styleObj=rules[j].style;

        return styleObj[sProperty];
      }
    }
  }
}

// set the value of a property of a CSS Rule
function changeClassProperty(sClassName,sProperty,sValue) {
  sClassName="."+sClassName;
  var sheets = document.styleSheets;
  var rules;
  var styleObj;
  for (i=0;i< sheets.length; i++) {
    rules=sheets[i].cssRules || sheets[i].rules;
    for (var j=0; j<rules.length; j++) {
      if (rules[j].selectorText && rules[j].selectorText==sClassName) {
        styleObj=rules[j].style;
        styleObj[sProperty]=sValue;
        break;
      }
    }
  }
}

</script>
<style type=text/css>
.KYBD_Button {font-size:12pt;}
</style>
</head>
<body>
<input type=button value="Font -" onclick="ChangeFontSize(-1);" />
<input type=button value="Font +" onclick="ChangeFontSize(+1);" /><br />
<span class="KYBD_Button">This font should change size when the buttons are clicked</span><br />
This font should remain static.
</body>
</html>


Hope this helps,
Neal.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Richard QuadlingSenior Software Developer

Author

Commented:
Neal, thanks for that. That looks EXACTLY what I want.

It is interesting to see that the CSS object model doesn't have the same sort of named access as the DOM.

e.g.

I CAN say

document.some_object_id.property

or

document.getElementById('some_object_id').property



To finalise this, how do I talk to the default style? Say I have a page with NO CSS at all, but I want to, at run time, set (and then maybe alter), the style rules for BUTTON or TABLE?

Richard.

Commented:
I could not find a good cross-browser way to add a style sheet to a page.  One may exist, and if so I'd love for anyone out there that knows how to post it here, but the following example will show you how to modify the style for objects on your page.  I only used the buttons in this page, however it should be clear how you would make this work for other items as well.

I'm using the getElementsByTagName to get the elements to change.  This will modify all elements of the type specified.  If you want to only change specific elements, then you must include a way to specify them.  You could have the ID for the elements you want to change set and then use getElementByID rather than getElementsByTagName, or you could set a class for those elements, even though the class is not used in the document, it could be used by the javascript to work only on those specified elements.

Hope this helps,

Neal.

---------------------------------------------------
<html>
<head>
 <title>Untitled Page</title>
 <script type="text/javascript">
   function setButtonStyle(values) {
     var inputs = document.getElementsByTagName("input");
     for (i=0;i<inputs.length;i++) {
       if (inputs[i].type == "button") {
         var properties = values.split(";")
         for (z=0;z<properties.length;z++) {
           var val = properties[z].split(":")
           inputs[i].style[val[0]] = val[1];
         }
       }
     }
   }
 </script>
 </head>
<body>
<input type="button" value="Big Bold Buttons" onclick="setButtonStyle('fontWeight:bold;width:150px;height:50px;');" />
<input type="button" value="Small Bold Buttons" onclick="setButtonStyle('fontWeight:bold;width:100px;height:20px;');" />
<input type="button" value="Normal Buttons" onclick="setButtonStyle('fontWeight:normal;width:;height:;');" />

</body>
</html>

Commented:
Re: nschafer's solution
Just to note to beware that the function won't find css properties if the css class is defined twice.

It will only read from the first .myLink, and if you're trying to change display in the code below it will fail.


.myLink{
background-color:red;
}
 
.myLink{
 display:none;
}

Open in new window

Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.