Forums | MacLife

b_dubb · 2009-10-19 12:16 am

hello
i'm appending style sheets to the header to modify the text size within specific divs (the clients idea - not mine). my script is working in Firefox but is DOA in Chrome and throws an error in IE 6, 7, and (i think) 8.

why is this? is there an inherit security risk in allow .js to write to the HEAD tag? or is IE just being paranoid?

if you're wondering ...

Code:

function eraseCookie(name) {
    // alert("ERASING HEADER COOKIE");
    createCookie(name,"",-1);
}


function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function sizeText(sizeChange)
{
    var changeSize = sizeChange.id;
    // alert(changeSize);
    
    var fontCookie = readCookie('uncvascfont');
    fontCookie = parseFloat(fontCookie);
    // alert(fontCookie);
    
    var headerCookie = readCookie('uncvascheader');
    // alert(headerCookie);
    headerCookie = unescape(headerCookie);
    // alert(headerCookie);
    
    if ( changeSize == 'minus' )
    {
        if ( fontCookie >= 0 )
        {
            // alert("SIZE CHANGE = " + changeSize);
            fontCookie = parseFloat(fontCookie);
            // alert("FONT COOKIE SETTING = " + fontCookie);
            fontCookie = fontCookie - 1;
            if ( fontCookie < 0 ) { fontCookie = parseFloat(0); }
            // alert("FONT COOKIE SETTING MODIFIED = " + fontCookie);
            createCookie('uncvascfont',fontCookie,30);
        }
    }
    
    if ( changeSize == 'plus' )
    {
        // alert("SIZE CHANGE = " + changeSize);
        if ( fontCookie < 3 )
        {
            fontCookie = parseFloat(fontCookie);
            // alert("FONT COOKIE SETTING = " + fontCookie);
            fontCookie = fontCookie + 1;
            // alert("FONT COOKIE SETTING MODIFIED = " + fontCookie);
            createCookie('uncvascfont',fontCookie,30);    
        }
    }

    // alert((typeof fontCookie));
    if ( fontCookie == 1 ) 
    {
        sizeStyle = 'css/small_p.css';
        // alert("APPEND LINK TO HEADER = " + sizeStyle );
        var cssNode = document.createElement("link");
        cssNode.type = 'text/css';
        cssNode.rel = 'stylesheet';
        cssNode.href = sizeStyle;
        cssNode.media = 'screen';
        document.getElementsByTagName("head")[0].innerHTML = headerCookie;
        var headTag = document.getElementsByTagName("head")[0];
        headTag.appendChild(cssNode);
    }
    else if ( fontCookie == 2 ) {
        sizeStyle = 'css/regular_p.css';
        // alert("APPEND LINK TO HEADER = " + sizeStyle );
        var cssNode = document.createElement("link");
        cssNode.type = 'text/css';
        cssNode.rel = 'stylesheet';
        cssNode.href = sizeStyle;
        cssNode.media = 'screen';
        document.getElementsByTagName("head")[0].innerHTML = headerCookie;
        var headTag = document.getElementsByTagName("head")[0];
        headTag.appendChild(cssNode);
    }
    else if ( fontCookie == 3 ) {
        sizeStyle = 'css/large_p.css';
        // alert("APPEND LINK TO HEADER = " + sizeStyle );
        var cssNode = document.createElement("link");
        cssNode.type = 'text/css';
        cssNode.rel = 'stylesheet';
        cssNode.href = sizeStyle;
        cssNode.media = 'screen';
        document.getElementsByTagName("head")[0].innerHTML = headerCookie;
        var headTag = document.getElementsByTagName("head")[0];
        headTag.appendChild(cssNode);
    }
    else
    {
        //alert(typeOf(fontCookie));
        // alert("SET HEADER TO STORED COOKIE VALUE");
        // alert(headerCookie);
        document.getElementsByTagName("head")[0].innerHTML = headerCookie;
        return false;
    }
}

function cookieChecker()
{
    /* small_p.css - regular_p.css -large_p.css || mod p font size css docs */ 
    var fontCookie = readCookie('uncvascfont');
    fontCookie = parseFloat(fontCookie);
    
    var headerCookie = readCookie('uncvascheader');
    if ( !headerCookie ) 
    {
        var headContent = document.getElementsByTagName("head")[0].innerHTML;
        // alert("SET HEADERCOOKIE = " + headContent);
        headContent = escape(headContent);
        createCookie('uncvascheader',headContent,'');        
    }
    
    // alert(fontCookie);
    if ( fontCookie ) 
    {
         if ( fontCookie == 1 )
        {
            var sizeStyle = 'css/small_p.css';
        }
        else if ( fontCookie == 2 )
        {
            var sizeStyle = 'css/regular_p.css';
        }
        else if ( fontCookie == 3 )
        {
            var sizeStyle = 'css/large_p.css';
        } else if ( fontCookie == 0 ) 
        {
            var headerCookie = readCookie('uncvascheader');
            headerCookie = unescape(headerCookie);
            document.getElementsByTagName("head")[0].innerHTML = headerCookie;
            return false;
            exit;
        }
        //alert("COOKIE SET STYLE" + sizeStyle);
        var cssNode = document.createElement("link");
        cssNode.type = 'text/css';
        cssNode.rel = 'stylesheet';
        cssNode.href = sizeStyle;
        cssNode.media = 'screen';
        headerCookie = readCookie('uncvascheader');
        headerCookie = unescape(headerCookie);
        // alert("RETRIEVED HEADER COOKIE = " + headerCookie);
        document.getElementsByTagName("head")[0].innerHTML = headerCookie;
        var headTag = document.getElementsByTagName("head")[0];
        headTag.appendChild(cssNode);
    }
    else 
    {
        fontCookie = parseFloat('0');
        createCookie('uncvascfont',fontCookie,30);
    }
}

the script stores the default HEAD contents in a cookie when page loads and another cookie for the font size value. then when the resize buttons are clicked the stored cookie font size value is retrieved and modified and the corresponding css link is appended to the header. to prevent multiple <link> tags cluttering the header ... the HEAD tag is filled in with the header cookie value (the HEAD innerHTML that was stored when the page was loaded). and then the new <link> for the corrseponding style tag is appended. if the modified value (for font cookie) is 0, the script just pops the original header contents into the HEAD to unset any appended <link> tags.

so i realize that CONTROL + / CONTROL - will modify the text size of the text on a page. i've told the client this. they want the resize buttons so that the computer illiterate will have the ability to resize text. a lot of work to do very little if you ask me.

i'm interested to hear any suggestions you might have. or ideas.

Basseq · 2009-10-19 7:43 pm

This seems like a better approach. Cheers.

b_dubb · 2009-10-19 9:54 pm

thanks for that link. the designer who's "in charge" at the client insists on pixel values for fontSize but maybe i can use this anyway.

Code:

    for ( i=0; i<linkTags.length; i++ )
    {
        if ( document.getElementsByTagName("link")[i].type == 'text/css' )
        {
            var styleLink = document.getElementsByTagName("link")[i].href;
            if ( styleLink.search("small_p.css") > 0 || styleLink.search("regular_p.css") > 0  || styleLink.search("large_p.css") > 0  )
            {
                //alert ( "SEARCH HREF SUCCESSFUL ");
                var reMove = document.getElementsByTagName("link")[i];
                alert ( reMove.href );
                alert ( (typeof reMove) );
                var thisHead = document.getElementsByTagName("head")[0];
                alert ( (typeof thisHead) );
                alert ( thisHead.tagName );
                // thisHead.removeChild(reMove);
                thisHead.removeChild(reMove);
            }
        }
    }

i used the above code to clean up the HEAD tag of any <LINK>'s that had been appended to it. so now my script is working in IE 8, Firefox, and Safari

i guess using innerHTML was the equivalent of a 10 pound sledgehammer when what i needed was .. um smaller ... less blunt force method

thanks again Basseq. you always bring the wisdom

Basseq · 2009-10-19 10:05 pm

Em values are relative to text size. So specifying a font-size of 2em will double the font size on the page. 1.5 em, by contrast, will be 1.5x the font-size. So you can specify the font-sizes in pixels and specify the multiplication factor via font-size in ems. Just so you know. Check out the example on the page I linked.

But it seems like you got it working, so you're all set.

Last edited by Basseq (2009-10-19 10:06 pm)

b_dubb · 2009-10-20 1:31 pm

all right so my solution works in everything but IE 6. surprise. can anyone spot the IE 6 DOM bomb?

Gipetto · 2009-10-21 1:33 am

Boy, that's a long way around a short bush.
http://www.alistapart.com/articles/alternate/

Change that JS to be in jQuery and it reduces down to about 15-20 lines of script.

Basseq · 2009-10-22 8:00 am

Gipetto wrote:
Boy, that's a long way around a short bush.

That's what she said.

Forums | MacLife

#1 2009-10-19 12:16 am

innerHTML HEAD tag problems

Code:

#2 2009-10-19 7:43 pm

Re: innerHTML HEAD tag problems

#3 2009-10-19 9:54 pm

Re: innerHTML HEAD tag problems

Code:

#4 2009-10-19 10:05 pm

Re: innerHTML HEAD tag problems

#5 2009-10-20 1:31 pm

Re: innerHTML HEAD tag problems

#6 2009-10-21 1:33 am

Re: innerHTML HEAD tag problems

#7 2009-10-22 8:00 am

Re: innerHTML HEAD tag problems

Gipetto wrote:

Board footer