SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do you allow user to change font size for all pages?

    I can create buttons that allow a user to change the font, font size, and font color/background color for a page through JS. However, he would have to make those changes all over again for the next page.

    What coding is involved to allow a user to change a CSS setting that applies to all pages during that session? I am talking about an offline app, so we can't use PHP/MySQL and similar technologies. HTML/CSS/JS is the best for this project, though localStorage can be used too.
    Steve Husting

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    MarkBrown4,

    Cookies are unreliable in iOS, and it looks like the link you gave works for a single page.

    Thanks for responding!
    Steve Husting

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So you don't think it's possible to manipulate the CSS via JS or localStorage?
    Steve Husting

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Right now I can change the CSS of the <p> on a page by simply writing the style on the page in a span's innerHTML. When that happens, it overwrites the external style sheet settings because of the rule of same-page style location over external style location.

    This button to change the size of the font:
    HTML Code:
    <input type='button' class='buttonFormat' value='Enlarge Font +4' onclick='changeSize4()'>
    It will activate this:
    Code:
    function changeSize4()
    { document.getElementById('changeSize').innerHTML="<style type='text/css'>p\{font-size:2.6em;line-height:1.2em;\}</style>";}
    Which will be written to the span tag's innerHTML at the top of the page:
    HTML Code:
    <span id="changeSize"></span>
    This works perfectly in my project. But it doesn't work across pages. So I'm trying it out in localStorage, which all the pages should have access to. OnClick, this should write the chosen style for the font size innerHTML into storage (compare to script above):

    Code:
    function changeSize4()
    { var changeSize = document.getElementById('changeSize').innerHTML="<style type='text/css'>p\{font-size:2.6em;line-height:1.2em;\}</style>";
    localStorage.setItem('changeSize', changeSize.value);}
    Then this should write the value into the innerHTML onBodyLoad:

    Code:
    function loadData() { 
    var changeSize = localStorage.getItem('changeSize'); 
    document.getElementById('changeSize').innerHTML.value = changeSize; 
    }
    However, I don't know why it is not persisting across pages that are accessing the same external JS file. Is there something wrong with this theory? Google Tools shows the fields in localstorage, but with value of undefined in each.
    Steve Husting

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've added the 3 files of the project so you can see how I'm changing font size, font family, and font color/background so far (not in localStorage).
    Attached Files Attached Files
    Steve Husting

  7. #7
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    localStorage.setItem('changeSize', changeSize.value)
    changeSize is a string and has no value property.
    Tab-indentation is a crime against humanity.

  8. #8
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That helped get the string into localStorage! Thanks!

    Do you know why this doesn't load the data into the span ID's "changeSize" innerHTML when body onLoad is LoadData()? When it loads, it should change the size of the <p> elements on the page, but the sizes stay the same.

    function loadData() {
    var changeSize = localStorage.getItem('changeSize');
    document.getElementById('changeSize').innerHTML.value = changeSize;
    }
    Steve Husting

  9. #9
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    This issue has been resolved.

    Code:
    function loadData() { 
    var changeSize = localStorage.getItem('changeSize'); 
    document.getElementById('changeSize').innerHTML = changeSize;
    }
    Steve Husting


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
  •