how to increase/decrease font-size from external css [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

I am working on a project and having trouble to increase or decrease font size of the site. I am using wordpress, Genesis framework but unable to increase/decrease font size via javascript.

Please kindly help me to solve this.

i use the following code;

genesis_after Hook This hook executes immediately before the closing tag.

<script type="text/javascript" language="javascript">
$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $('htm开发者_高级运维l').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});
</script>

genesis_before_content Hook This hook executes immediately before the content column (outside the #content div).

<a href="#" class="increaseFont">Increase</a>
<a href="#" class="decreaseFont">Decrease</a>
<a href="#" class="resetFont">Reset</a>

my project link is

http://174.121.86.229/~rghlifts/

please help me to resolve the issue

thank you all

---

In Wordpress jQuery is default with noConflict. You must change in your script all "$" to "jQuery".

<script type="text/javascript" language="javascript">
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 getCookie(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;
}

jQuery(document).ready(function(){
    var fontSizeCookie = getCookie('font_size');
    if (typeof fontSizeCookie !== 'undefined' && fontSizeCookie != null) {
        jQuery('html').css('font-size', fontSizeCookie+'px');
    }

    // Reset Font Size
    var originalFontSize = 10;
    jQuery(".resetFont").click(function(){
        jQuery('html').css('font-size', originalFontSize);
        createCookie('font_size', originalFontSize, 365);
    });
    // Increase Font Size
    jQuery(".increaseFont").click(function(){
        var currentFontSize = jQuery('html').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*1.2;
        jQuery('html').css('fontSize', newFontSize+'px');
        createCookie('font_size', newFontSize, 365);
        return false;
    });
    // Decrease Font Size
    jQuery(".decreaseFont").click(function(){
        var currentFontSize = jQuery('html').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*0.8;
        jQuery('html').css('fontSize', newFontSize);
        createCookie('font_size', newFontSize, 365);
        return false;
    });
});
</script>

---

Change $('html').css('font-size', newFontSize); to $('html').css('fontSize', newFontSize);

and also change other occurances of font-sıze to fontSize too..

---

Are your events being executed (try using Firebug to check), if not..

Instead of using

$({classname}).click...

try

$({classname}).live('click', function(evt){..})

See if that works better for you. Could be a timing issue regarding your dom and your JS.

If your events are being run, then there's an issue somewhere else in your code.