Tạo tiện ích tăng giảm kích thước font chữ, chuyển đổi màu nền trắng đen cho trang web

Đăng Ngày: tháng 12 04, 2018

Ngô Duy Kiên✔

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Vào trang chỉnh sửa HTML và thêm đoạn code này lên trên thẻ </body>

<div class='acess-container'>
<div id='jbbutton' title='Accessibility'><img src='https://i.imgur.com/lf5zKhF.png'/></div>
<div id='acess-icons'>
<div class='acess-icon'><img id='contrast' src='https://i.imgur.com/QjRc6jC.png' title='Contrast'/></div>
<div class='acess-icon'><img id='increaseFont' src='https://i.imgur.com/7VMeLu2.png.png' title='Increase Font'/></div>
<div class='acess-icon'><img id='decreaseFont' src='https://i.imgur.com/7JcurCW.png.png' title='Decrease Font'/></div>
</div>
</div>

Bước 2: Thêm đoạn js này lên trên thẻ </head> (bước này dành cho ai chưa thêm jquery vào blog, nếu thêm rồi thì bỏ qua bước này nhé)

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Bước 3: Tìm </body> và dán đoạn js này lên trên nó

<script type='text/javascript'>
//<![CDATA[
/**
*   jBility
* jBility is a free set of accessibility functions that uses JQuery.
* By: Uriel CairĂª Balan Calvi 
* Available on: https://github.com/urielcaire/jBility
*/
jQuery(document).ready(function( $ ){
 /*===================================================================
 * jBility uses JsCookie to manager cookies.
 * JsCookie is available on: https://github.com/urielcaire/jscookie
 *====================================================================*/
 function createCookie(name, value, days){
  var expires = "";
  if(days){
   var time = new Date();
   time.setTime(time.getTime()+(days*24*60*60*1000));
  }
  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 "";
 }

 function deleteCookie(name) {
  createCookie(name,"",-1);
 }

 function checkCookie(name){
  var check = getCookie(name);
  if(check != "")
   return true;
  return false;
 }

 /*======================================
 *  jBility functions
 *======================================*/
 function addConstrast(){
        console.log('addConstrast');
        $('*').addClass('pagina-acessivel');
        $('.acess-container').addClass('f-transparent');
        $('#botao').addClass('f-transparent');
        $('#acess-icons').addClass('f-transparent');
        $('.acess-icon').addClass('f-transparent');
        $('img').addClass('f-transparent');
        $('#jbbutton').addClass('f-transparent');
    }

    function removeConstrast(){
        console.log('removeConstrast');
        $('*').removeClass('pagina-acessivel');
        $('.acess-container').removeClass('f-transparent');
        $('#botao').removeClass('f-transparent');
        $('#acess-icons').removeClass('f-transparent');
        $('.acess-icon').removeClass('f-transparent');
        $('img').removeClass('f-transparent');
        $('#jbbutton').removeClass('f-transparent');
    }

    if(checkCookie('ccontrast')){
     addConstrast();
    }

    $('#contrast').click(function(){
     var ck = checkCookie('ccontrast');
        if(ck){
         deleteCookie('ccontrast');
            removeConstrast();
        }else{
            createCookie('ccontrast', 'cookieContrast');
            addConstrast();
        }
    });

 var $cElements = $("body").find("*");
 var fonts = [];

 function getFontSize() {
  for (var i = 0; i < $cElements.length; i++) {
      fonts.push(parseFloat($cElements.eq(i).css('font-size')));
    }
 }
 getFontSize();
 $("#increaseFont").on('click', function() {
  for (var i = 0; i < $cElements.length; i++) {
      ++fonts[i];
      $cElements.eq(i).css('font-size', fonts[i]);
    }
 });

 $("#decreaseFont").on('click', function() {
  for (var i = 0; i < $cElements.length; i++) {
   --fonts[i];
   $cElements.eq(i).css('font-size', fonts[i]);
  }
 });

 $('#jbbutton').click(function(){
        $('#acess-icons').toggle(150);
    });

});
//]]>
</script>

Bước 4: Thêm css cho code trên bằng cách dán đoạn css bên dưới lên trên thẻ ]]></b:skin>

.acess-container{position:fixed;float:left;z-index:9;bottom:10px;left:10px}
.pagina-acessivel{background-color:#000!important;color:#FFF}

Chúc các bạn thành công!