www.webdeveloper.com
Results 1 to 7 of 7

Thread: Create cookie from class name change

  1. #1
    Join Date
    Jun 2011
    Posts
    10

    Create cookie from class name change

    Hi all,

    I'm employing a javascript function that adds a class name to a div, so I can alter the font size of the page... simple enough!

    However, I'm stumped as to creating a cookie that will remember this new classname and employ it sitewide, instead of resetting it as soon as I reload or navigate to another sitepage.

    I've hashed something together to try and get this to work... font increase is working fine, the cookie part is not.

    My (pretty ugly) code is as follows:


    HTML Code:
    <html>
    <head>
    
    <SCRIPT>
    
    var standard=(readCookie('my_cookie')==null)?11:readCookie('my_cookie');
    
    function changeClass1() {
    document.getElementById("pagecontainer").className = "bigtext";
    createCookie('my_cookie',bigtext);
    }
    function changeClass2() {
    document.getElementById("pagecontainer").className = "default";
    createCookie('my_cookie',bigtext);
    }
    
    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;
    } 
    </SCRIPT>
    
    <style>
    .default {font-size:100%;}
    .bigtext {font-size:150%;}
    </style>
    
    </head>
    
    <body>
    
    <div id="pagecontainer" class="default">My text to go here</div>
    
    <br>
    
    <a href="#" onclick="changeClass1();createCookie();">increase fontsize</a>
    <br><br>
    <a href="#" onclick="changeClass2();createCookie();">reset fontsize</a>
    
    </body>
    </html>
    Any help would be appreciated!

  2. #2
    Join Date
    Dec 2010
    Posts
    207
    Quote Originally Posted by pdwalker2 View Post
    Any help would be appreciated!
    Use the error console. GIYF


    Q: I found this code...
    A: Then find its author.

  3. #3
    Join Date
    Jun 2011
    Posts
    10
    okay, "bigtext" is not defined. As a non-js dev, this is where I'm stumped.

    Where do I define this, during onClick or am I completely missing a function?

  4. #4
    Join Date
    Dec 2010
    Posts
    207
    Quote Originally Posted by pdwalker2 View Post
    okay, "bigtext" is not defined. As a non-js dev, this is where I'm stumped.

    Where do I define this, during onClick or am I completely missing a function?
    You don't have to define it, just specify it as a string literal: "bigtext".


    Q: I found this code...
    A: Then find its author.

  5. #5
    Join Date
    Jun 2011
    Posts
    10
    right, so I was missing quotes?

    Tried searching similar scripts and have slightly amended my script, but still isn't remembering my font increase when I refresh the page.

    What else am I doing wrong below?:

    HTML Code:
    <html>
    <head>
    
    <SCRIPT>
    
    var standard=(readCookie('my_cookie')==null)?'bigtext':readCookie('my_cookie');
    
    function changeClass1() {
    document.getElementById("pagecontainer").className = "bigtext";
    createCookie('my_cookie','bigtext',5);
    }
    function changeClass2() {
    document.getElementById("pagecontainer").className = "default";
    createCookie('my_cookie','bigtext',5);
    }
    
    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;
    } 
    </SCRIPT>
    
    <style>
    .default {font-size:100%;}
    .bigtext {font-size:150%;}
    </style>
    
    </head>
    
    <body>
    
    <div id="pagecontainer" class="default">My text to go here</div>
    
    <br>
    
    <a href="#" onClick="changeClass1();createCookie();">increase fontsize</a>
    <br><br>
    <a href="#" onClick="changeClass2();createCookie();">reset fontsize</a>
    
    </body>
    </html>

  6. #6
    Join Date
    Jun 2011
    Posts
    10
    Anyone?

  7. #7
    Join Date
    Dec 2010
    Posts
    207
    Quote Originally Posted by pdwalker2 View Post

    Tried searching similar scripts and have slightly amended my script, but still isn't remembering my font increase when I refresh the page.
    You don't have any code that utilises the value read from the cookie.


    Q: I found this code...
    A: Then find its author.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles