Vídeo-Aula - Aumento do tamanho do Texto com JavaScript | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Vídeo-Aula – Aumento do tamanho do Texto com JavaScript

Publicado na categoria Vídeo Aulas, Vídeo Aulas - Javascript com 5.261 visualizações e 10 comentários

Fala pessoas!

Atendendo ao pedido do Márcio Vinicíus, bolei uma VA onde dou uns toques sobre como colocar um sistema de Aumento/Diminuição do tamanho do texto no site!

Isso é um assunto muito importante e atual, já que temos que nos valer de nossa Responsabilidade Social e Digital como Desenvolvedores!

Espero que além de ajudar os designers, sirva para ajudar também aqueles que tem uma certa deficiência visual!

Abraços a todos!

Aumento de Fonte usando JavaScript por André Buzzo no site Vimeo.

Voltar à página anterior!

  • André Luiz

    Agora que eu vi a função [javascript]javascript:this.location.reload();[/javascript] no post anterior kkkkk

    abs

  • Jacson Leite

    Muito boa essa dica.

  • sam

    fazer um curso de ajax múltiplo drop down dependente.
    Produto Categoria Subcategoria

  • Alexandre

    olá boa tarde!
    como que se faz para colocar um outro botão para voltar ao tamanho original da fonte?

    exemplo:
    http://www.diariosp.com.br/_conteudo/2011/01/23072-mistao+de+ney+franco+vence+equador+e+garante+a+lideranca.html

    pode ver que no canto superior direito tem 3 botões do tamanho da letra: A- A A+

    se puder me ajudar ficarei grato.
    abraço.

    • Fala Alexandre!

      Estudando o que o cara tem no site dele (entenda-se: fuçando no Código Fonte), ele utiliza um plugin em Jquery para realizar a alteração do tamanho das fontes:

      P.S.: Vou colocar apenas a linha do código que chama a função:

      [javascript]/**!
      * jQuery Plugin – fiveFontSize
      * By Jonathan Lamim <jantunes@fivecom.com.br>
      * Version: 0.1 2010-06-30
      * Copyright 2010, Fivecom
      **/
      (function($){
      $.fn.extend({
      fiveFontSize:function(settings){
      var config = {
      increase:’.fs-inc’,
      decrease:’.fs-dec’,
      natural: ‘.fs-nat’,
      runOn: ‘.texto’,
      natSize:13,
      maxSize:16,
      minSize:11
      };

      if(settings){ $.extend(config,settings); }

      return this.each(function(){
      var inc = $(this).find(config.increase);
      var dec = $(this).find(config.decrease);
      var nat = $(this).find(config.natural);
      var content = $(config.runOn);
      var fontSize = content.css(‘font-size’);
      var fontAtual = parseInt(fontSize.replace("px",""));

      inc.click(function(){
      if(fontAtual < config.maxSize){
      fontAtual++;
      content.css({‘font-size’ : fontAtual+’px’});
      return false;
      }
      });

      dec.click(function(){
      if(fontAtual > config.minSize){
      fontAtual–;
      content.css({‘font-size’ : fontAtual+’px’});
      return false;
      }
      });

      nat.click(function(){
      content.css({‘font-size’ : fontSize});
      return false;
      });

      });
      }
      });
      })(jQuery);

      /**!
      [/javascript]

      Após essa linha, ele coloca também um outro arquivo em JavaScript, onde ele chama a função pela classe da Div onde ele inseriu as imagens para o efeito:

      [javascript]// Starter
      $(document).ready(function(){

      var flashvars = {};
      var params = {wmode: ‘transparent’, bgcolor: ‘#D1152D’};
      var attributes = {};

      swfobject.embedSWF("includes/flash/flash.swf", "myContent", "310", "120", "9.0.0", "includes/flash/expressInstall.swf", flashvars, params, attributes);

      Ajax.init();
      $(‘.topMenu’).floatedMenu();
      $(‘.boxGallery’).fiveGallery();
      $(‘.viewGallery’).fiveCarousel();
      $(‘.carouselCapa’).fiveCarousel({
      contentItems: ‘.carouselCapaItens’,
      items: ‘li’,
      btNext: ‘.fcNext’,
      btPrev: ‘.fcPrev’,
      effect: ‘fade’,
      scroll:4,
      auto: false,
      time:10
      });
      $(‘.opcoes’).fiveFontSize();
      $(‘.relogio’).fiveClock();
      $(‘.fiveAbas’).fiveAbas();

      $(".print").click(function(){ $(".contentPrint").printArea(); return false; });

      $(‘.go_back’).click(function(){ history.back(); return false; });

      $(‘#openComent’).click(function(){ $(‘.frmComent’).slideToggle(‘fast’); return false; });

      $(function(){ $(‘form.rating’).rating(); });

      $("a[rel^=’prettyPhoto’]").prettyPhoto({theme:’facebook’});

      $(".ajaxTitle").click(function() {
      $(this).attr("value", "");
      });

      $(document).ready(function() {
      var title = $(".ajaxTitle");
      title.attr(‘value’,title.attr(‘title’));
      });

      $("a[href=’#’]").click(function() {
      return false;
      });

      });
      [/javascript]

      Feito esses dois passos, ele coloca na div a classe “opcoes” com seu link predefinido no código acima:

      [html]<div class="opcoes">
      <a href="#"><img src="/imagens/icon_opcoes_fontemenos.jpg" alt="social" class="fs-dec"/></a>
      <a href="#"><img src="/imagens/icon_opcoes_fontenormal.jpg" alt="social" class="fs-nat"/></a>
      <a href="#"><img src="/imagens/icon_opcoes_fontemais.jpg" alt="social" class="fs-inc"/></a>
      <br />
      Tamanho da letra
      </div>
      [/html]

      Qualquer coisa, acessa o site que me enviou como exemplo, e veja no código fonte onde se encontram os dois arquivos JavaScript que permitem esse tipo de ação.

      Fiz uma dessas em um site de um cliente, mas utilizei o “reload” em JavaScript…na realidade, eu mando atualizar a página:

      [javascript]javascript:this.location.reload();[/javascript]

      Espero que te ajude!

      Abraços!

  • Urbano

    aí tuco, é o seguinte, como não tem a opção para comentar o vídeo em que vc está cantando(gritando, como vc diz!!) voz e violão!! mermão tu canta bem hen!!! bacana, já pode postar umas video-aulas – voz e violão.rsrsr. Gostei da música.
    Valeu!!!!

  • Marcio Vinicius

    Opa Tuco, valeu por me ajudar mais nessa!! Ficou show a video aula, sem contar que o site que você indicou é muito bom, irei passar um pente fino nele!

    Com toda certeza irei incluir essa técnica em meus projetos, e caso o cliente não queria irei tentar convencê-lo do contrário.

    Abraços e fique com Deus!!

    • Valeu Márcio!

      Inclua sim. Das duas maneiras! rs

      Inclusão de mais um ferramenta nos seus projetos e inclusão de mais usuários na sua visitação!

      Abraços!