[TUTORIAL] Seletor de tamanho da fonte do fórum

Instalação do javascript

Painel de Controle Módulos HTML e Javascript Gestão das páginas Javascript Criar um novo javascript

(clique na imagem para aumentar)

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Nos tópicos.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

Código:

$(function() {
          'DEVELOPED BY ANGE TUTEUR';
          'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
          'ORIGIN : http://fmdesign.forumotion.com/t571-forum-font-size-selector#8979';
       
          // font sizes
          var sizes = [
            8,
            9,
            10,
            11,
            12,
            13,
            14,
            15,
            16,
            17,
            18,
            19,
            20,
            21,
            22,
            23,
            24
          ],
       
          // posição do seletor
          // 0 = topo
          // 1 = fundo
          position = 0,
          attachTo = '#page-body, #ipbwrapper #content-container', // element(s) where the selector will be attached
       
          // language config
          lang = {
            Default : 'Nenhum',
            FontSize : 'Tamanho da fonte: '
          },
       
       
          cookie = my_getcookie('fa_fontsize'), // selected font size
       
          selector = $('<select id="fa_fontsize" />')[0], // font size selector
          container = $('<div id="fa_fontsize_container"><span id="fa_fontsize_label" style="font-size:12px">' + lang.FontSize + '</span></div>')[0], // selector container
       
          // options string
          html = '<option value="default:' + window.getComputedStyle(document.body, null).getPropertyValue('font-size') + '" ' + ( /default/i.test(cookie) ? 'selected' : '' ) + '>' + lang.Default + '</option>',
       
          // loop variables
          i = 0, j = sizes.length,
       
          // function for changing the font size
          change = function(init, val) {
            var value = init === true ? val : this.value;
       
            my_setcookie('fa_fontsize', value);
       
            document.body.style.fontSize = /default/i.test(value) ? value.replace(/default:/, '') : value + 'px';
          };
       
          // loop through the sizes array to create an options list for the selector
          for (; i < j; i++) {
            html += '<option value="' + sizes[i] + '" ' + (cookie == sizes[i] ? 'selected' : '') + '>' + sizes[i] + '</option>';
          }
       
          // apply the html and event handler to the selector
          selector.innerHTML = html;
          selector.onchange = change;
       
          // apply the chosen font size if any was selected
          if (cookie) {
            change(true, cookie);
          }
       
          // add the selector to the container and finally the document
          container.appendChild(selector);
          $(attachTo)[['prepend', 'append'][position]](container);
        });

• Resultado do tutorial: