SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need this to be more efficient... Ideas?

    I tried to use "getChildNodes" on the following code (and yes, it's ugly), but I couldn't get it to work. But anyway, the following method gets fired when someone clicks on it inside a link and what it does is simply increase font size. Unfortunately, it's only being applied to paragraph and anchor tags. I need anything inside the passed parameter and I'm unsure about how to do this... Ideas?

    Here's the code:
    Code:
    function increaseFontSize(n){
        if(!n){
            var p = document.getElementsByTagName('p');
            var a = document.getElementsByTagName('a');
        }else{
            var p = document.getElementById(n).getElementsByTagName('p');
            var a = document.getElementById(n).getElementsByTagName('a');
        }
    
        for(i=0;i<p.length;i++) {
            if(p[i].style.fontSize) {
                var s = parseInt(p[i].style.fontSize.replace("px",""));
                var z = parseInt(p[i].style.lineHeight.replace("px",""));
            }else{
                var s = 100;
                var z = 100;
            }
            if(s!=max){
                s += 10;
                z += 10;
            }
        p[i].style.fontSize = s+"%";
        p[i].style.lineHeight = z+"%";
        }
    
        for(i=0;i<a.length;i++) {
            if(a[i].style.fontSize) {
                var b = parseInt(a[i].style.fontSize.replace("px",""));
                var d = parseInt(a[i].style.lineHeight.replace("px",""));
            }else{
                var b = 100;
                var d = 100;
            }
            if(b!=max){
                b += 10;
                d += 10;
            }
        a[i].style.fontSize = b+"%";
        a[i].style.lineHeight = d+"%";
        }
    
    }

  2. #2
    SitePoint Guru hifigrafix's Avatar
    Join Date
    Oct 2005
    Location
    Nashville, TN
    Posts
    628
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jQuery may be a good option in this case. Would certainly reduce the amount of code here.

    $(document).ready(function() {

    $(".reactive").click(function() {
    var size = $(this).css('font-size');
    var sizeNum = parseFloat(size, 10);
    var newSize = (sizeNum * 1.2);
    $(this).css('font-size', newSize);
    });

    });

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hifigrafix View Post
    jQuery may be a good option in this case. Would certainly reduce the amount of code here.
    jQuery could work I guess, but I feel like I'm taking a sledgehammer to an ant hill with doing that. I mean, yeah, that initializing call or whatever is tiny, sure, but the jQuery library itself is massive.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    If all the font sizes were specified using em instead of px then you'd only need to update the size on the outermost container that you want affected in order to automatically change all the enclosed elements. With px it is a lot harder than it needs to be because you need to update each element individually.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •