• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4135
  • Last Modified:

Changing the font size of buttons and text.

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.

0
Richard Quadling
Asked:
Richard Quadling
  • 6
  • 5
  • 3
  • +3
1 Solution
 
Richard QuadlingSenior Software DeverloperAuthor Commented:
Ok.

Slight change.

I'm not differentiating styles for enabled/disabled.

So just 'KYBD_Button' style only.
0
 
RoonaanCommented:
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-
0
 
REA_ANDREWCommented:
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";
            }
      }
}

}
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
REA_ANDREWCommented:
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            }
      }
}

}
0
 
Michel PlungjanIT ExpertCommented:
Roonan: Is that crossbrowser?
0
 
Richard QuadlingSenior Software DeverloperAuthor 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.
0
 
REA_ANDREWCommented:
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.
0
 
RoonaanCommented:
Not sure about safari and netscape. I think it worked in IE6, FF and Opera.

-r-
0
 
REA_ANDREWCommented:
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
0
 
RoonaanCommented:
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-
0
 
REA_ANDREWCommented:
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';
}
0
 
Richard QuadlingSenior Software DeverloperAuthor 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?)
0
 
REA_ANDREWCommented:
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
0
 
Michel PlungjanIT ExpertCommented:
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>
0
 
Richard QuadlingSenior Software DeverloperAuthor 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.

0
 
nschaferCommented:
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.
0
 
Richard QuadlingSenior Software DeverloperAuthor 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.
0
 
nschaferCommented:
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>
0
 
thenebCommented:
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

0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 6
  • 5
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now