Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Detect the current font size ?

    I have a button (in html) and I want the center of the button to be on the center of the line I'm typing on... I was just putting it inside a span and then using this code to move it down.
    Code:
    <span style="position:relative; bottom:-10;">
    It worked great!
    But... once I started allowing my users to change the font sizes the buttons got bigger and they needed to be moved down further...

    if the font size was +1:
    Code:
    <font size="+1"><span style="position:relative; bottom:-10;">
    if the font size was +6:
    Code:
    <font size="+6"><span style="position:relative; bottom:-27.5;">
    So is there a way in javascript to detect the current font size and then adjust the span position based off of that?
    If I can just get the number of the current font size I can do all the rest of the coding, I just need a way to figure out the current font size and put it in a variable... I was thinking of using something like 1.0em so that it stays the same but then we have a basis of measuring off of but I have no clue.. I'm fairly new to javascript.

    Thanks!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #tst {
      font-Size:21px;
    }
    
    /*]]>*/
    </style></head>
    <body>
    <span id="tst" >TEXT</span>
    <script  type="text/javascript">
    /*<![CDATA[*/
    function zxcSV(obj,par){
     if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
     return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
    }
    
    function zxcSVInt(obj,par){
     if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
     return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
    }
    
    
    obj=document.getElementById('tst');
    
    alert(zxcSV(obj,'font-Size'));
    alert(zxcSVInt(obj,'font-Size'));
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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