SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Code to enlarge webpage content font size

    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

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,338
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    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
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for that r937 i didnt realise this option was so dated lol

  4. #4
    SitePoint Member
    Join Date
    Nov 2010
    Location
    florida
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    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>

  5. #5
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that!!

  6. #6
    SitePoint Member
    Join Date
    Nov 2010
    Location
    florida
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome. ;D

  7. #7
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Member
    Join Date
    Nov 2010
    Location
    florida
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    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?

  9. #9
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by GulloRichard View Post
    What do you mean by pop-up note?
    a pop up div using css.

    Quote Originally Posted by GulloRichard View Post
    How would that change the font-size of your web page dynamically?
    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.

  10. #10
    SitePoint Member
    Join Date
    Nov 2010
    Location
    florida
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    a pop up div using css.



    I didn't say it would.

    I said
    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?

  11. #11
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by GulloRichard View Post
    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.
    nope

    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.

  12. #12
    SitePoint Member
    Join Date
    Nov 2010
    Location
    florida
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    another option is to put a pop-up note (using css) on your page instead of buttons to change font sizes
    Quote Originally Posted by Kalon View Post
    nope

    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?
    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.

  13. #13
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    SitePoint Member
    Join Date
    Nov 2010
    Location
    florida
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    I'm not a human
    Join Date
    Aug 2006
    Location
    India
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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..

    @GulloRichard

    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..
    Regards,
    Vijay
    Follow me on twitter @vijaycbe
    World Holiday Calander || My Cricket Blog


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •