ScottWilson Posted May 2, 2017 Share Posted May 2, 2017 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
ScottWilson Posted May 2, 2017 Author Share Posted May 2, 2017 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
ScottWilson Posted May 2, 2017 Author Share Posted May 2, 2017 RESOLVED - took out the empty hrefs and it works... Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.