[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Increase and decrease text size and color on website? User controls? Is this even necessary??

Posted on 2011-04-28
6
Medium Priority
?
266 Views
Last Modified: 2012-05-11
Is there a way to increase and decrease text size on my clients website for the user without them using computer controls - this was my clients question to me, but I think the zoom feature in browsers is sufficient? He also wants to be able to let the user change the color and size - not reliant on computer controls he said.. HELP???
0
Comment
Question by:angelic_webmaster
6 Comments
 
LVL 4

Expert Comment

by:tycoot
ID: 35485833
If you are doing full css then everything will flow smoothly however I agree the zoom, and browser text size is fine. I think its a Pain in the *** to have the text controls like joomla has. There is many scripts available for free that offer what you are looking to do, however I do not like to do it. To each his own.
0
 

Author Comment

by:angelic_webmaster
ID: 35485943
I agree, but how do I tell him it is unnecessary? or do I just search for it online? help !
0
 

Author Comment

by:angelic_webmaster
ID: 35485963
the website is this - www.propertyonemanagement.com =do we need to add the text zoom? or is the browser sufficient? If not how do I do this simply?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 38

Accepted Solution

by:
Tom Beck earned 1000 total points
ID: 35485971
I just had to solve this problem recently. Here's what I did. It works best if cookies are enabled so as the users navigate around the site, the browser can recall their choice of font size. Aside from your main stylesheet, have two additional style sheets that contain definitions for all the text areas you want to affect by the font size increase, one that makes the font large and one that makes it normal (default). Have two links for the user to click, one for large font, one for normal. Include the js file attached for writing the cookie and swapping between the two stylesheets. Your references in the head of each page would then look something like this:

    <link href="stylesheets/mainStyles.css" rel="stylesheet" type="text/css" />
    <link href="stylesheets/small.css" rel="stylesheet" type="text/css" title="A-" />
    <link href="stylesheets/large.css" rel="stylesheet" type="text/css" title="A+" />
    <script src="./newFont.js" type="text/javascript"></script>

Notice the title in the alternate stylesheets (A- and A+). This is important to the script.

Your links to change the font size would look like this:

<a href="javascript:fontsizedown();" style="text-decoration:none;">
                <span style="font-size:10pt; color:#eee;text-decoration:underline;">&nbsp;A&nbsp;</span></a>
            <a href="javascript:fontsizeup();" style="text-decoration:none;">
                <span style="font-size:14pt; color:#eee;text-decoration:underline;">&nbsp;A&nbsp;</span></a>&nbsp;&nbsp;

I know the minute I post this, someone will suggest a jquery plugin that takes care of it all in two steps.
//newFont.js

function fontsizeup() {
  active = getActiveStyleSheet();
  if(active == 'A-') { 
      setActiveStyleSheet('A+');      
  }
}
function fontsizedown() {
  active = getActiveStyleSheet();
  if(active == 'A+') {
    setActiveStyleSheet('A-');
  }
}
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;
    }
  }
}
function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) {
        return a.getAttribute("title");
    }
  }
  return null;
}
function getPreferredStyleSheet() {
  return ('A-');
}
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = ""; 
    expires=date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(name + "=");
        if (c_start!=-1){
    c_start=c_start + name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}
window.onload = function(e) { 
  var cookie = readCookie("style");
  if(cookie.startsWith('A')) {
    title = cookie.substring(0,2);
  }else{
    title = getPreferredStyleSheet();
  }
  setActiveStyleSheet(title);
}
window.onunload = function(e) { 
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}
String.prototype.startsWith = function(str) {return (this.match("^"+str)==str)}
var cookie = readCookie("style");
if(cookie.startsWith('A')) {
    title = cookie.substring(0,2);
}else{
    title = getPreferredStyleSheet();
}
if (title == 'null') {
  title = getPreferredStyleSheet();
}
setActiveStyleSheet(title);

Open in new window

0
 
LVL 27

Assisted Solution

by:Lukasz Chmielewski
Lukasz Chmielewski earned 1000 total points
ID: 35486435
Or you can use some less code for that:
I have created one - take a look at it
http://jsfiddle.net/yzEd3/1/
0
 

Author Comment

by:angelic_webmaster
ID: 35488161
Nice I will try these tonight. I guess it is worth it. I will try those. THANKS!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question