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..

    Using CSS, how can I change the alignment of a click-to-open UL menu?

    How to call the event of one element in another element in JQuery

    How to force css borders to display on layered page?

    How to apply color to all element between the first and the last without giving a number to nth-child()?

    How to print multiple elements in a page individually using css?

    how to change the background color of the holder of an image using jquery cycle

    Javascript how to use external Css sheet

    How to actually center (vertical and horizontal) text inside a nested div

    How to wrap content around an image with CSS?

    How to use body horizontal scrollbar in free jqgrid

    How to replace cycle('float: left', 'float: right') to use pure css?

    how create triangle using css [duplicate]

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

    How to make link unclickable using CSS or jquery? [duplicate]

    Japanese Text not showing correctly

    How to make the side bar active?

    How to make a hidden border side inherit border properties in CSS

    how to move 2 divs on hover with css

    How to get Owl Carousel Owl-Page (dots) Responsive

    HTML4 strict: border=“0” is deprecated, how to replace it

    css-how to set a three parallel DIV?

    How to make this working Java-script more efficient

    How to change scrollbar in textarea input?

    How To Get Circle Image Between
    Tag Like Tumblr In HTML? [closed]

    How to make a div hide properly on hover while trying to make a gif also start on hover

    How to center my navigation using .css

    Some doubts about how make an image clickable using CSS

    css How can I make the page body stay the same size even if I add element to it?

    How to create 10 CSS classes, each having 10% darker gray background with LESS?

    How to set the text absolutely (CSS) in the middle of a div despite a changing width div behind him?