Hi all,
I was wondering what code is used to enhance or decrease webpage content font size? Ideally I would like to add 3 different text size icons giving the user an option to decrease, default or enlarge font size which is something that seems to be on quite a few sites. Can anyone suggest any sites that provide tutorials or scripts on this?
Thanks
Kyle
size font size widgets are typically only found on web sites build back in the stone age
nowadays any user who need to change font size will use the browser zoom feature for this purpose
leave that stuff out, and make your page design cleaner
thanks for that r937 i didnt realise this option was so dated lol
I don’t have your code, but I’m going to assume that you would like to change the font size of your content through a button onclick event. Here is the code:
<html>
<head>
</head>
<body>
<p id = "content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<input type = "button" value = "small" id = "small"/> <input type = "button" value = "normal" id = "normal"/> <input type = "button" value = "Large" id = "large"/>
<script>
var content = document.getElementById("content");
var smallButton = document.getElementById("small");
var normalButton = document.getElementById("normal");
var largeButton = document.getElementById("large");
smallButton.onclick = function(e){
content.style.fontSize = "10px";
}
normalButton.onclick = function(e){
content.style.fontSize = "14px";
}
largeButton.onclick = function(e){
content.style.fontSize = "20px";
}
</script>
</body>
</html>
Thanks for that!!
You’re welcome. ;D
I wouldn’t use javascript to increase font sizes anymore. The browsers’ zoom feature works very well and besides, your code would not be available to those that have javascript turned off in their browser for whatever reason.
If you want to make sure your users can increase the font size, another option is to put a pop-up note (using css) on your page instead of buttons to change font sizes, explaining how to use the browser zoom feature.
What do you mean by pop-up note? How would that change the font-size of your web page dynamically?
a pop up div using css.
I didn’t say it would.
I said
If you want to make sure your users can increase the font size, another option is to put a pop-up note (using css) on your page instead of buttons to change font sizes, explaining how to use the browser zoom feature.
I’m not saying that you’re idea is wrong. I was just a little skeptical on how it would really be presented on a web page. So what you are trying to say is that you would assign a class to lets say a ‘div’ element through CSS and when hovered through the pseudo hover it would change the font size of the page, kind of like a mouseover effect.
wouldn’t that lead to too many accidental font changes? wouldn’t a click event be a better route seeing as how the user would have more preferential control over the page? And also couldn’t you use your option as an alternative if JavaScript were to be disabled?
nope :looko:
I am not saying that at all.
If you read my post more closely you will see that I essentially agree with r937 in suggesting to use the browsers’ zoom feature instead of javascript.
I said
…explaining how to use the browser zoom feature.
My post is in plain English and I don’t know how to make it clearer than what I already have. Do you understand what the above means?
You also asked
wouldn’t a click event be a better route seeing as how the user would have more preferential control over the page?
Imho - no
I believe the browsers’ zoom feature is the best option for the reasons I posted earlier.
another option is to put a pop-up note (using css) on your page instead of buttons to change font sizes
Your post was not in plain English.
So now what you are saying is to pop up with a tool tip explaining to your users to increase the font size on the page through the zoom feature within the browser.
I honestly thought you were trying to perform a hover effect on a div tag, which I was kind of dumb founded by. In addition, I was also thinking that if you were going to perform anything dynamic, JavaScript should be your first choice, because that is what it was meant for. If the user so happens to disable JavaScript, then you should try to go for the alternative, CSS or PHP.
And if you look at your post closely, you will notice that it was kind of hard to understand.
another option is to put a pop-up note (using css) on your page instead of buttons TO CHANGE FONT SIZES
I guess this was all just a misunderstanding then.
My post was in plain English.
What I said was
If you want to make sure your users can increase the font size, another option is to put a pop-up note (using css) on your page instead of buttons to change font sizes, explaining how to use the browser zoom feature.
Which part of that single sentence is not plain English and which part did you not understand?
edit: removed error
I see that you’ve noticed your error finally.
But I guess I’ll still break it down for you:
is to put a pop-up note (using css) on your page instead of buttons
The above statement says to put a popup not instead of a button. K, now look at the bottom statement.
to change font sizes
How would a person not get confused? The statement above would mean that you are suggesting to use CSS to change the font size instead of JavaScript. Am I not right? This is a JavaScript section, so it is implied that the person asking a question relevant to JavaScript would like something dynamic.
My post is in plain English.
You are taking bits and pieces out separately and quoting them out of context thus changing the meaning of the overall sentence I posted and so no wonder you are confused and not understanding what I posted.
What I posted, in its entirety, is this simple and single sentence:
If you want to make sure your users can increase the font size, another option is to put a pop-up note (using css) on your page instead of buttons to change font sizes, explaining how to use the browser zoom feature.
If you read it in its entirety and don’t selectively pick out bits and pieces to change the meaning then you should understand what the purpose of the pop up note is.
Afaik you are the only one so far who doesn’t understand what I posted and so I am convinced the message I am sending is clear to the overwhelming majority of people who have read it.
@Kalon
i think there is no need for you to explain further and further again than spending that time in a snippet of code on your system… I understood your context at first read… I think its professional to leave out something unexplained/unanswered… 
You mistook the context of what he said and its not good to post again even after he explained bits n pieces and also his answers…
@hawk
i think this kind of threads are better to be closed after getting answers…