Jump to content

text resize buttons?

Recommended Posts

Good evening everyone, I'm trying to implement a jquery text resizer like on this site - http://gatewaytocare.ca/

It works fine on a local page but I can't get the code to function in Squarespace. I'm using the code injection block to insert the code.

One thing I've noticed.. hovering over the buttons local and the url 'foreshadow' doesn't appear on the browser... in Squarespace hovering over the button resize shows the url with the # attached..

Any help very much appreciated. Thanking you advance.


<style>
.jfontsize-button {
 font-weight: bold;
 padding: 3px;
 color: #000;
 border: solid 1px #ccc;
}

.jfontsize-button:hover {
 text-decoration: none;
 background: #333;
 color: #fff;
 border: solid 1px #333;
}

.jfontsize-disabled, .jfontsize-disabled:hover {
 color: #aaa;
 border: solid 1px #eee;
 background: #eee;
}

.some-class-name {
 margin: 20px 0 0 0;
}
</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript" language="javascript">
/*
* jQuery jFontSize Plugin
* Examples and documentation: http://jfontsize.com
* Author: Frederico Soares Vanelli
*         fredsvanelli@gmail.com
*         http://twitter.com/fredvanelli
*         http://facebook.com/fred.vanelli
*
* Copyright (c) 2011
* Version: 1.0 (2011-07-15)
* Dual licensed under the MIT and GPL licenses.
* http://jfontsize.com/license
* Requires: jQuery v1.2.6 or later
*/

(function($){
   $.fn.jfontsize = function(opcoes) {
       var $this=$(this);
       var defaults = {
           btnMinusClasseId: '#jfontsize-minus',
           btnDefaultClasseId: '#jfontsize-default',
           btnPlusClasseId: '#jfontsize-plus',
           btnMinusMaxHits: 10,
           btnPlusMaxHits: 10,
           sizeChange: 1
       };

       if (opcoes){opcoes = $.extend(defaults, opcoes)};

       var limite=new Array();
       var fontsize_padrao=new Array();

       $(this).each(function(i){
           limite[i]=0;
           fontsize_padrao[i];
       });

       $(opcoes.btnMinusClasseId+', '+opcoes.btnDefaultClasseId+', '+opcoes.btnPlusClasseId).removeAttr('href');
       $(opcoes.btnMinusClasseId+', '+opcoes.btnDefaultClasseId+', '+opcoes.btnPlusClasseId).css('cursor', 'pointer');

       /* A��o do Bot�o A- */
       $(opcoes.btnMinusClasseId).click(function(){
           $(opcoes.btnPlusClasseId).removeClass('jfontsize-disabled');
           $this.each(function(i){
               if (limite[i]>(-(opcoes.btnMinusMaxHits))){
                   fontsize_padrao[i]=$(this).css('font-size');
                   fontsize_padrao[i]=fontsize_padrao[i].replace('px', '');
                   fontsize=$(this).css('font-size');
                   fontsize=parseInt(fontsize.replace('px', ''));
                   fontsize=fontsize-(opcoes.sizeChange);
                   fontsize_padrao[i]=fontsize_padrao[i]-(limite[i]*opcoes.sizeChange);
                   limite[i]--;
                   $(this).css('font-size', fontsize+'px');
                   if (limite[i]==(-(opcoes.btnMinusMaxHits))){
                       $(opcoes.btnMinusClasseId).addClass('jfontsize-disabled');
                   }
               }
           })
       });

       /* A��o do Bot�o A */
       $(opcoes.btnDefaultClasseId).click(function(){
           $(opcoes.btnMinusClasseId).removeClass('jfontsize-disabled');
           $(opcoes.btnPlusClasseId).removeClass('jfontsize-disabled');
           $this.each(function(i){
               limite[i]=0;
               $(this).css('font-size', fontsize_padrao[i]+'px');
           })
       });

       /* A��o do Bot�o A+ */
       $(opcoes.btnPlusClasseId).click(function(){
           $(opcoes.btnMinusClasseId).removeClass('jfontsize-disabled');
           $this.each(function(i){
               if (limite[i]<opcoes.btnPlusMaxHits){
                   fontsize_padrao[i]=$(this).css('font-size');
                   fontsize_padrao[i]=fontsize_padrao[i].replace('px', '');
                   fontsize=$(this).css('font-size');
                   fontsize=parseInt(fontsize.replace('px', ''));
                   fontsize=fontsize+opcoes.sizeChange;
                   fontsize_padrao[i]=fontsize_padrao[i]-(limite[i]*opcoes.sizeChange);
                   limite[i]++;
                   $(this).css('font-size', fontsize+'px');
                   if (limite[i]==opcoes.btnPlusMaxHits){
                       $(opcoes.btnPlusClasseId).addClass('jfontsize-disabled');
                   }
               }
           })
       });
   };
})(jQuery);
</script>


<div class="main-content"> just some text</div>

<div class="box"> <a class="jfontsize-button" id="jfontsize-m" href="#">A-</a> 
<a class="jfontsize-button" id="jfontsize-d" href="#">A</a>
<a class="jfontsize-button" id="jfontsize-p" href="#">A+</a>
<script type="text/javascript" language="javascript">
                       $('.main-content').jfontsize({
                           btnMinusClasseId: '#jfontsize-m',
                           btnDefaultClasseId: '#jfontsize-d',
                           btnPlusClasseId: '#jfontsize-p'
                       });
                   </script>       
</div>





Link to comment
  • Replies 2
  • Views 1k
  • Created
  • Last Reply

I was able to integrate resize links by injecting to to the headers but now the page refreshes all the time and resets the text size.. #$%^&


<style>
.jfontsize-button {
 font-weight: bold;
 color: #fff;
 border: solid 1px #ccc;
 font-size:100%;
}

.jfontsize-button:hover {
 text-decoration: none;
 background: #333;
 color: #fff;
 border: solid 1px #333;
 font-size:125%;
}

.jfontsize-disabled, .jfontsize-disabled:hover {
 color: #aaa;
 border: solid 1px #eee;
 background: #eee;
}

.page {
 margin: 20px 0 0 0;
}
</style>
<script>
 function makeSmallest() {
 //alert("in makeSmallest");
 document.getElementById("content").style.fontSize = "xx-small";
    document.getElementByTag("h1").style.fontSize = "xx-small";
   document.getElementByTag("h2").style.fontSize = "xx-small";
   document.getElementByTag("H1").style.fontSize = "xx-small";
   document.getElementByTag("H1").style.fontSize = "xx-small";
   document.getElementById('^[yui].').style.fontSize = "xx-small";
}
 function makeSmaller() {
 //alert("in makeSmaller");
 document.getElementById("content").style.fontSize = "small";
   document.getElementByTag("h1").style.fontSize = "small";
   document.getElementByTag("h2").style.fontSize = "small";
   document.getElementByTag("H1").style.fontSize = "small";
   document.getElementByTag("H1").style.fontSize = "small";
   document.getElementById('^[yui].').style.fontSize = "small";
}

 function makeReset() { 
 //alert("In makeReset");
 document.getElementById("content").style.fontSize = "100%";
   document.getElementByTag("h1").style.fontSize = "100%";
   document.getElementByTag("h2").style.fontSize = "100%";
   document.getElementByTag("H1").style.fontSize = "100%";
   document.getElementByTag("H1").style.fontSize = "100%";
   document.getElementById('^[yui].').style.fontSize = "100%";
}

 function makeLarger() {
 //alert("in makeLarger");
 document.getElementById("content").style.fontSize = "large";
   document.getElementByTag("h1").style.fontSize = "large";
   document.getElementByTag("h2").style.fontSize = "large";
   document.getElementByTag("H1").style.fontSize = "large";
   document.getElementByTag("H1").style.fontSize = "large";
   document.getElementById('^[yui].').style.fontSize = "large";
}

 function makeLargest() {
 //alert("in makeLargest");
 document.getElementById("content").style.fontSize = "xx-large";
   document.getElementByTag("strong").style.fontSize = "xx-large";
   document.getElementByTag("h1").style.fontSize = "xx-large";
   document.getElementByTag("h2").style.fontSize = "xx-large";
   document.getElementByTag("H1").style.fontSize = "xx-large";
   document.getElementByTag("H1").style.fontSize = "xx-large";
   document.getElementById('^[yui].').style.fontSize = "xx-large";
}
</script>

<div class="box"> 
 <a class="jfontsize-button" id="jfontsize-m" onClick="makeSmallest()" href="" title="click for smallest text size"> --A </a> 
 <a class="jfontsize-button" id="jfontsize-m" onClick="makeSmaller()" href="" title="click for smaller text size"> -A </a> 
 <a class="jfontsize-button" id="jfontsize-m" onClick="makeReset()" href="" title="click to reset the text size"> A </a> 
<a class="jfontsize-button" id="jfontsize-m" onClick="makeLarger()" href="" title="click for larger text size"> A+ </a>
  <a class="jfontsize-button" id="jfontsize-m" onClick="makeLargest()" href="" title="click for the largest text size"> A++ </a>
</div>

very frustrating... any suggesting will be gladly accepted...

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.