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


Tags: javascript,jquery,html,css

Problem :

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 = $('html').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



Solution :

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>

    CSS Howto..

    How to apply multiple CSS selectors to a paticular div?

    How to set a default location of a scrollbar

    How to make a div take the remaining height without knowing the height?

    CSS- how to give an object with scooped corners a border colour?

    Change image src for product “showoff”

    How to prevent mouseenter event action with jQuery

    How to stop all CSS overrides on a container DIV?

    How can I vertical align my
  • to the top of this box which uses `display: flex`?
  • How to change the background colour's opacity in CSS [duplicate]

    How can i make image size big using css?

    CSS How to erase the border from the image link?

    I made a webpage but have excess white space at the bottom, how do I get rid of this?

    How to scroll to bottom of div generated by ng-repeat Angular JS using JQuery?

    how to remove resize in text area tag

    How to make the float left and float right on the same line?

    Way of Determining How Many Style Rules I have

    How to remove the double scroll?

    How to rotate multiple words with CSS?

    how to add line break in HTML using jQuery

    How do I get the ID of a JQuery item mid-function?

    how to make the textarea's width fixed but keep the height flexible CSS

    How to wrap table cell at a maximum width in full width table

    Transition animation to show hidden content

    How to use resolution relative css files?

    How to create live event for css

    How to set auto-margin boxes in flexible-width design using CSS?

    How to make CSS zig-zag borders? [duplicate]

    How can I make inputs display inline?

    How can I arrange for a horizontal scroll bar on overflow with flexbox items?

    How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?