SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to change CSS text size using JavaScript

    Hello All,

    I would like to know how i would go about changing my CSS text size by selecting a value form a select list.

    I was told it would be pretty easy with DOM? but i dont know enough about JavaScript or DOM to figure it out.

    Could anyone help me out with this?

    heres an example www.styrofirm.com/css/textsize.html

    Thanks alot

    bobjones
    Last edited by bobjones; Apr 1, 2002 at 17:57.

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thats a fairly simple one. Just use the code below.

    <select onchange="body.style.fontSize=this.options[this.selectedIndex].value;">
    <option value="10px">10px</option>
    <option value="10px">20px</option>
    <option value="10px">30px</option>
    <option value="10px">40px</option>
    </select>

    What that does is when the currently selected option is change, it changes the font size (in the CSS styling of the object) to the value of the current option.

    If you wanna learn more about javascript from a great tutorial site that is easy to learn from, go to:

    http://www.html4me.com

    -joekarbakuitz

  3. #3
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. Now if i wanted to increase / decrease the text with a link how would i do it?

    i assume it would be something like this:

    <a href="#" onclick="document.getElementById('content').style.fontSize={+1 or something?};">+</a>

    Thanks for your help.

    bobjones

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    almost but +1 is a html value, we're dealing with css here.

    So replace this ={+1 or something?};">+

    with a vales thats css can understand, such as ="10px" or whatever size you want.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You cant really increase or decrease the size, unless you get into more javascript coding.

    Hopefully I got what your were saying right.

    If you do want to increase or decrease the size, you could use this:

    In your javascript coding:

    size=10;
    function increase() {
    size++;
    document.body.style.fontSize=size;
    }

    function decrease() {
    size--;
    document.body.style.fontSize=size;
    }

    In your HTML coding:

    <body style="font-size:10;">
    <input type="button" value="Increase" onclick="increase();">
    <input type="button" value="Decrease" onclick="decrease();">

    As you can see, this is a bit more tricky. If you use this, you must be sure that if you change the starting font size (in the style of the body tag), you must change the size variable to the same amount.

  6. #6
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey,

    yeah i tried using "10px", "11px" etc but then i'd have to have a link for each size.

    What i want is to be able to click the link and each time it increases 1px. So if the default fornt size is 10px when i click the link it would then increase to 11px and so on.

    an example of what i want is here http://www.smokinggun.com/demos/sg_layout.php.

    thanks

    bobjones

  7. #7
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sweet, that last bit of code did the trick.

    heres the link just incase you all want to see it http://www.styrofirm.com/css/onclickresize.html

    now id just need to keep the font size when you go to another page. any suggestions? would that be done using cookies or is there an easier way?

    cheers

    bobjones

  8. #8
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats a cool effect. Yes, the only way that I know of to 'remember' a font size would be with cookies. Server side or client side.

  9. #9
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah....pass a variable with PHP or ASP or something is how I would do it. If you really want to kill the fly with a shotgun, you could make your CSS file writable (security issues here of course) and "write" a new value to the font size. Not completely sure how to do it, but I know it can be done. It would be overkill nonetheless.

    Sketch
    Aaron Brazell
    Technosailor



  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats cool.

  11. #11
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok does anyone know how to pass the variables to PHP?

    I noticed in that code that you get a JS error when you click decrease more than 10 times?

    any ideas why it does that?

    cheers

    bobjones

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know nothing on PHP, but that script I gave you should only create an error when the size is less than 1. A way to fix that is to modify it to this:

    function decrease() {
    if (size>0) size--;
    document.body.style.fontSize=size;
    }

  13. #13
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why would you want to pass variables from JS to PHP? I know how you could integrate the two languages to share data and execute certain actions with either language, but I'm not sure how you would want to carry the JS actions into PHP.

    Email me about this - I might not see this thread again.

    Gregory C.

  14. #14
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is that what you want andpass the values to different pages?

    Im not sure if thats what you want as i havent read the full thread
    PHP Code:
    <script>

    function 
    validate()
    {
        
    document.Contact;

        if (
    x.Site.value=='' || x.URL.value=='' || x.RequestType.value=='a1')
        {
            
    Contact.action 'phpform1.php';
            
    Contact.submit();        
        }
        else
        {    
            
    Contact.action 'phpform2.php';
            
    Contact.submit();
        }
    }

    </script> 


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
  •