How do you add a font size changer button(s)

by villageexample February 26th 2012, 11:43 am

Hi
How do you create a font size button?
For example: In the admin control panel at the top right there are these buttons:
How do you add a font size changer button(s) Fontsize

How do you add a font size changer button(s) Fontsize

One to make font size bigger and one to make it smaller.
Is there any way of adding these buttons to my forum?

Thanks

by midoweb96 February 26th 2012, 12:19 pm

hi
May help you
https://help.forumotion.com/t100644-i-want-this-code#653482

by villageexample February 26th 2012, 1:16 pm

Ok so from what i have gathered I am supposed to include... (source: https://help.forumotion.com/t100644-i-want-this-code#653482)
This in the CSS Stylesheet:

CSS Code:

But where abouts in it? As i just get an error saying too many incorrect { } etc when i paste it in different locations
Also as I am using phpbb2 when it says to add this to Display > generalities: "place where you want" I don't understand where in display > generalities im supposed to even put the following HTML code...

HTML Code:

Please help

by LGforum February 26th 2012, 3:38 pm

Te CSS just goes at the top or bottom of your CSS sheet.
The HTML, put it in an announcement or widget.

by villageexample February 27th 2012, 9:31 pm

Ok so this is nearly solved!

I have the HTML code in a widget and it displays the two buttons on my forum
However when i click them nothing happens, a part from at the end of the URL it adds either :#bigger or #smaller

I have added the CSS to stylesheetand added the javascript to the manager, any ideas?

by LGforum February 27th 2012, 10:03 pm

All you should need to is add this in a widget:

Code:: <script type="text/javascript"> /*********************************************** * Fluid Text Resizer- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ var mytextsizer=new fluidtextresizer({ controlsdiv: "sizecontroldiv", //id of special div containing your resize controls. Enter "" if not defined targets: ["body"], //target elements to resize text within: ["selector1", "selector2", etc] levels: 3, //number of levels users can magnify (or shrink) text persist: "session", //enter "session" or "none" animate: 200 //animation duration of text resize. Enter 0 to disable }) </script> <div id="sizecontroldiv" class="controlstyle">  <center>Mareste/micsoreaza fontul!<br> <a href="#smaller"><img src="http://i23.servimg.com/u/f23/14/63/88/66/font_d10.png" /></a> <a href="#bigger"><img src="http://i23.servimg.com/u/f23/14/63/88/66/font_a10.png" /></a> <a href="javascript:mytextsizer.setFontLevel(0)">Fontul de baza al paginii!</a> </center>  </div>

You don't need the first line, because all it is is jQuery, which you already have as forumotion includes it.
So ALL you need to is put the code above in a widget and the CSS in the CSS stylesheet. You don't need to go to JS management at all.

by villageexample February 27th 2012, 11:16 pm

Thanks for your reply,
I have done exactly what you said, the CSS is at the bottom of my css stylesheet and i have that exact code in a widget on my forum, however the buttons are still not responding on being pressed :S
My URL is: Here

Also im not sure whether this route would be easier or more difficult but
Would it somehow be possible to add 2 buttons in the navigation and header bar. One that loads the page again but in a font size which is increased by 1 (zoom in) and then a button which loads the page again but this time in a font size decreased by 1 (zoom out). Is this a possibility? Or should I stick to trying to solve the widget? :S

by LGforum February 28th 2012, 3:37 am

Remove this from your javascript management:

Code:: jQuery.noConflict()

Its not needed and causing errors.

by villageexample February 28th 2012, 10:36 am

I have done this and the buttons are still not responding, again apart from the #bigger and #smaller on the URL

by LGforum February 28th 2012, 6:03 pm

The javascript has LOADS of errors in it.
Now I don't know if this is down to FM's auto compiling or if the actualy javascript has errors in it originally.
If you can show me the javascript which you have put in JS management please.

by villageexample February 28th 2012, 6:21 pm

Here it is:

Code:: /*Fluid Text Resizer (June 27th, 2010) * This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ function fluidtextresizer(setting){ fluidtextresizer.count=(fluidtextresizer.count)? ++fluidtextresizer.count : 1 this.cookiename="fluidtextsizer"+fluidtextresizer.count //name of cookie to use to store persistence for this text resizer instance this.setting=setting this.selectors=[] //array translating setting.targets into array of jquery selectors this.$controls=null this.defaultfontsizes=[] this.curfontlevel=0 var thisobj=this jQuery(function($){ //on document.ready var els=setting.targets for (var i=0; i<els.length; i++){ if ($(els[i]).length==0){ //if selector doesn't yield any matched elements els.splice(i, 1) //delete it from setting.targets[] i-=1 continue } var curfontsize=$(els[i]).css('fontSize') thisobj.defaultfontsizes.push({val:parseFloat(curfontsize), unit:curfontsize.slice(-2)}) //remember default font sizes of target elements thisobj.selectors.push($(els[i])) //cache selector } if (setting.controlsdiv){ //if special container for resize controls defined thisobj.$controls=$('#'+setting.controlsdiv).find('a[href^=#fontsize], a[href=#bigger], a[href=#smaller]') thisobj.$controls.each(function(){ var $target=$(this) $target.data('level', $target.attr('href').replace(/(#)|(fontsize)/ig, '')) //remove "#" and "fontsize" from href to derive level $target.click(function(){ thisobj.setFontLevel($target.data('level')) return false }) }) } if (setting.persisttype!="none"){ var curfontlevel=fluidtextresizer.routines.getCookie(thisobj.cookiename) || 0 //get persisted font level, or 0 to indicate no change in font size curfontlevel=parseInt(curfontlevel) if (curfontlevel>=-setting.levels && curfontlevel<=setting.levels){ //if font level within range thisobj.setFontLevel(curfontlevel, true) } } }) } fluidtextresizer.prototype={ setFontLevel:function(level, disableanim){ var s=this.setting var $els=this.selectors var level=(level=="bigger")? this.curfontlevel+1 : (level=="smaller")? this.curfontlevel-1 : parseInt(level) //calculate new font size level if (s.controlsdiv){ //if special container for resize controls defined this.$controls.filter('.selectedcontrol').removeClass('selectedcontrol').end() //deselect previously selected control .filter('[href=#fontsize'+level+']').addClass('selectedcontrol') //apply "selectedcontrol" CSS class to corresponding control } if (level<-s.levels || level>s.levels || level==this.curfontlevel) //if target level is out or range (range is int from -s.levels to +s.levels) or is current level already return for (var i=0; i<$els.length; i++){ var abslevel=Math.abs(level) var valchange=Math.pow(1.2, abslevel) //calculate fontlevel^1.2 //calculate new font size, which is default font size multiply or divided by valchange: var newfontsize=this.defaultfontsizes[i].val * (level<0? 1/valchange : level>0? valchange : 1) + this.defaultfontsizes[i].unit $els[i].animate({fontSize: newfontsize}, disableanim? 0 : this.setting.animate) } if (s.persist=="session"){ fluidtextresizer.routines.setCookie(this.cookiename, level) } this.curfontlevel=level } } fluidtextresizer.routines={ getCookie:function(Name){ var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair return (document·cookie.match(re))? document·cookie.match(re)[0].split("=")[1] : null //return cookie value if found or null }, setCookie:function(name, value, days){ var expirestr='' if (typeof days!="undefined") //if set persistent cookie expirestr="; expires="+expireDate.setDate(new Date().getDate()+days).toGMTString() document·cookie = name+"="+value+"; path=/"+expirestr } }

by LGforum February 29th 2012, 1:08 am

Okay yeah its got lots of errors in due to FMs compiler, use this:

Code:: /*Fluid Text Resizer (June 27th, 2010) * This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ function fluidtextresizer(setting){ fluidtextresizer.count=(fluidtextresizer.count)? ++fluidtextresizer.count : 1; this.cookiename="fluidtextsizer"+fluidtextresizer.count; //name of cookie to use to store persistence for this text resizer instance this.setting=setting; this.selectors=[]; //array translating setting.targets into array of jquery selectors this.$controls=null; this.defaultfontsizes=[]; this.curfontlevel=0; var thisobj=this; jQuery(function($){ //on document.ready var els=setting.targets; for (var i=0; i<els.length; i++){ if ($(els[i]).length==0){ //if selector doesn't yield any matched elements els.splice(i, 1); //delete it from setting.targets[] i-=1; continue; } var curfontsize=$(els[i]).css('fontSize'); thisobj.defaultfontsizes.push({val:parseFloat(curfontsize), unit:curfontsize.slice(-2)}); //remember default font sizes of target elements thisobj.selectors.push($(els[i])); //cache selector } if (setting.controlsdiv){ //if special container for resize controls defined thisobj.$controls=$('#'+setting.controlsdiv).find('a[href^=#fontsize], a[href=#bigger], a[href=#smaller]'); thisobj.$controls.each(function(){ var $target=$(this); $target.data('level', $target.attr('href').replace(/(#)|(fontsize)/ig, '')); //remove "#" and "fontsize" from href to derive level $target.click(function(){ thisobj.setFontLevel($target.data('level')); return false; }) }) } if (setting.persisttype!="none"){ var curfontlevel=fluidtextresizer.routines.getCookie(thisobj.cookiename) || 0; //get persisted font level, or 0 to indicate no change in font size curfontlevel=parseInt(curfontlevel); if (curfontlevel>=-setting.levels && curfontlevel<=setting.levels){ //if font level within range thisobj.setFontLevel(curfontlevel, true); } } }) } fluidtextresizer.prototype={ setFontLevel:function(level, disableanim){ var s=this.setting; var $els=this.selectors; var level=(level=="bigger")? this.curfontlevel+1 : (level=="smaller")? this.curfontlevel-1 : parseInt(level); //calculate new font size level if (s.controlsdiv){ //if special container for resize controls defined this.$controls.filter('.selectedcontrol').removeClass('selectedcontrol').end() //deselect previously selected control .filter('[href=#fontsize'+level+']').addClass('selectedcontrol'); //apply "selectedcontrol" CSS class to corresponding control } if (level<-s.levels || level>s.levels || level==this.curfontlevel) //if target level is out or range (range is int from -s.levels to +s.levels) or is current level already return; for (var i=0; i<$els.length; i++){ var abslevel=Math.abs(level); var valchange=Math.pow(1.2, abslevel) ;//calculate fontlevel^1.2 //calculate new font size, which is default font size multiply or divided by valchange: var newfontsize=this.defaultfontsizes[i].val * (level<0? 1/valchange : level>0? valchange : 1) + this.defaultfontsizes[i].unit $els[i].animate({fontSize: newfontsize}, disableanim? 0 : this.setting.animate); } if (s.persist=="session"){ fluidtextresizer.routines.setCookie(this.cookiename, level); } this.curfontlevel=level; } } fluidtextresizer.routines={ getCookie:function(Name){ var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair return (document.cookie.match(re))? document.cookie.match(re)[0].split("=")[1] : null; //return cookie value if found or null }, setCookie:function(name, value, days){ var expirestr=''; if (typeof days!="undefined") //if set persistent cookie expirestr="; expires="+expireDate.setDate(new Date().getDate()+days).toGMTString(); document.cookie = name+"="+value+"; path=/"+expirestr; } }

However, your going to have to do something first.
You see the forumotion has this weird censoring thing in javascript, where you can't put document[dot]cookie, which is a piece of javascript.
So when i send this message the dots between document and cookie will be removed from the script above. So you need to find in the script above all the bits which say 'document cookie' and there shouldn't be a space inbetween, it should be a dot/period.
I think there are only 3 bits, near the end.

EDIT: It looks like its kept the dots in. so you may be okay.

by villageexample February 29th 2012, 10:55 am

Thanks again,

However having put your code into the JavaScript manager it still only adds #bigger and #smaller to the URL without changing the font size of any part of the forum.

Would this be due to the HTML and JavaScript not communicating?

Code:: <script type="text/javascript"> /*********************************************** * Fluid Text Resizer- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ var mytextsizer=new fluidtextresizer({ controlsdiv: "sizecontroldiv", //id of special div containing your resize controls. Enter "" if not defined targets: ["body"], //target elements to resize text within: ["selector1", "selector2", etc] levels: 3, //number of levels users can magnify (or shrink) text persist: "session", //enter "session" or "none" animate: 200 //animation duration of text resize. Enter 0 to disable }) </script><div id="sizecontroldiv" class="controlstyle">  <center>FONT SIZE<br> <a href="#smaller"><img src="http://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/format-font-size-less.png" /></a> <a href="#bigger"><img src="http://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/format-font-size-more.png" /></a> <a href="javascript:mytextsizer.setFontLevel(0)"></a> </center>  </div>

This is the code I have inside a widget, is it calling the javacript correctly?

by LGforum February 29th 2012, 4:05 pm

There was still an error in the script, try this now:

Code:: function fluidtextresizer(setting){fluidtextresizer.count=(fluidtextresizer.count)?++fluidtextresizer.count:1; this.cookiename="fluidtextsizer"+fluidtextresizer.count; this.setting=setting;this.selectors=[];this.$controls=null;this.defaultfontsizes=[]; this.curfontlevel=0;var thisobj=this;jQuery(function($){var els=setting.targets;for(var i=0;i<els.length;i++){if($(els[i]).length==0){els.splice(i,1);i-=1;continue}var curfontsize=$(els[i]).css('fontSize');thisobj.defaultfontsizes.push({val:parseFloat(curfontsize),unit:curfontsize.slice(-2)});thisobj.selectors.push($(els[i]))} if(setting.controlsdiv){thisobj.$controls=$('#'+setting.controlsdiv).find('a[href^=#fontsize], a[href=#bigger], a[href=#smaller]'); thisobj.$controls.each(function(){var $target=$(this);$target.data('level',$target.attr('href').replace(/(#)|(fontsize)/ig,''));$target.click(function(){thisobj.setFontLevel($target.data('level'));return false})})} if(setting.persisttype!="none"){var curfontlevel=fluidtextresizer.routines.getCookie(thisobj.cookiename)||0;curfontlevel=parseInt(curfontlevel);if(curfontlevel>=-setting.levels&&curfontlevel<=setting.levels){thisobj.setFontLevel(curfontlevel,true)}}})}fluidtextresizer.prototype={setFontLevel:function(level,disableanim){var s=this.setting;var $els=this.selectors;var level=(level=="bigger")?this.curfontlevel+1:(level=="smaller")?this.curfontlevel-1:parseInt(level);if(s.controlsdiv){this.$controls.filter('.selectedcontrol').removeClass('selectedcontrol').end().filter('[href=#fontsize'+level+']').addClass('selectedcontrol')} if(level<-s.levels||level>s.levels||level==this.curfontlevel)return; for(var i=0;i<$els.length;i++){var abslevel=Math.abs(level);var valchange=Math.pow(1.2,abslevel);var newfontsize=this.defaultfontsizes[i].val*(level<0?1/valchange:level>0?valchange:1)+this.defaultfontsizes[i].unit; $els[i].animate({fontSize:newfontsize},disableanim?0:this.setting.animate)}if(s.persist=="session"){fluidtextresizer.routines.setCookie(this.cookiename,level)}this.curfontlevel=level}};fluidtextresizer.routines={getCookie:function(Name){var re=new RegExp(Name+"=[^;]*","i");return(document.cookie.match(re))?document.cookie.match(re)[0].split("=")[1]:null},setCookie:function(name,value,days){var expirestr='';if(typeof days!="undefined")expirestr="; expires="+expireDate.setDate(new Date().getDate()+days).toGMTString();document.cookie=name+"="+value+"; path=/"+expirestr}}

We'll get it eventually.
It seems it was written by someone with bad javascript practise.

OKAY, apparently these new codeboxes suck more than I originally thought. I'm gonna leave that there so whoever installed them on this forum can see how bad they are and hopefully get rid of them...
Don't copy from above copy this: (fingers crossed)

Code:: function fluidtextresizer(setting){fluidtextresizer.count=(fluidtextresizer.count)?++fluidtextresizer.count:1;this.cookiename="fluidtextsizer"+fluidtextresizer.count;this.setting=setting;this.selectors=[];this.$controls=null;this.defaultfontsizes=[];this.curfontlevel=0;var thisobj=this;jQuery(function($){var els=setting.targets;for(var i=0;i<els.length;i++){if($(els[i]).length==0){els.splice(i,1);i-=1;continue}var curfontsize=$(els[i]).css('fontSize');thisobj.defaultfontsizes.push({val:parseFloat(curfontsize),unit:curfontsize.slice(-2)});thisobj.selectors.push($(els[i]))}if(setting.controlsdiv){thisobj.$controls=$('#'+setting.controlsdiv).find('a[href^=#fontsize], a[href=#bigger], a[href=#smaller]'); thisobj.$controls.each(function(){var $target=$(this);$target.data('level',$target.attr('href').replace(/(#)|(fontsize)/ig,''));$target.click(function(){thisobj.setFontLevel($target.data('level'));return false})})}if(setting.persisttype!="none"){var curfontlevel=fluidtextresizer.routines.getCookie(thisobj.cookiename)||0;curfontlevel=parseInt(curfontlevel);if(curfontlevel>=-setting.levels&&curfontlevel<=setting.levels){thisobj.setFontLevel(curfontlevel,true)}}})}fluidtextresizer.prototype={setFontLevel:function(level,disableanim){var s=this.setting;var $els=this.selectors;var level=(level=="bigger")?this.curfontlevel+1:(level=="smaller")?this.curfontlevel-1:parseInt(level);if(s.controlsdiv){this.$controls.filter('.selectedcontrol').removeClass('selectedcontrol').end().filter('[href=#fontsize'+level+']').addClass('selectedcontrol')}if(level<-s.levels||level>s.levels||level==this.curfontlevel)return;for(var i=0;i<$els.length;i++){var abslevel=Math.abs(level);var valchange=Math.pow(1.2,abslevel);var newfontsize=this.defaultfontsizes[i].val*(level<0?1/valchange:level>0?valchange:1)+this.defaultfontsizes[i].unit; $els[i].animate({fontSize:newfontsize},disableanim?0:this.setting.animate)}if(s.persist=="session"){fluidtextresizer.routines.setCookie(this.cookiename,level)}this.curfontlevel=level}};fluidtextresizer.routines={getCookie:function(Name){var re=new RegExp(Name+"=[^;]*","i");return(document.cookie.match(re))?document.cookie.match(re)[0].split("=")[1]:null},setCookie:function(name,value,days){var expirestr='';if(typeof days!="undefined")expirestr="; expires="+expireDate.setDate(new Date().getDate()+days).toGMTString();document.cookie=name+"="+value+"; path=/"+expirestr}}

If that codebox messes up, you just have to hope they get rid of these rubbish code boxes soon Razz

by villageexample March 1st 2012, 1:58 pm

were almost there!!!

Now when I click the buttons - SOMETHING HAPPENS!!!

But it only changes the size of that specific widget, so the buttons get bigger and the title of the widget also increases.

So close, but how do we change it to edit the entire body?

by LGforum March 4th 2012, 3:45 am

Sorry, i forgot about this.

Try changing this line: targets: ["body"]
to this: targets:["#min-width"];

That is in the html in your widget by the way.

by villageexample March 4th 2012, 12:21 pm

The code: ["#min-width"]; doesnt work, it only edits the URL with #smaller #bigger etc

However the code: ["#min-width"], does the same as ["body"] did in only changing the size of the buttons

Confused

by LGforum March 4th 2012, 2:47 pm

Well The script had tons of errors in it, and doesnt seem great. So at this point if it still doesn't work I'd go find another one Razz

by villageexample March 4th 2012, 3:11 pm

i was worried you mite say that.
Do u mean get a new HTML script or java or both? :S

by LGforum March 4th 2012, 3:41 pm

Both lol. Just do another google search.

There was a great tutorial made for forumotion forums on making a font-sizer, its a shame that forum is now shutting down.

by villageexample March 4th 2012, 3:48 pm

Ugh that sucks!

The only problem is that it is only editing the html within the widget rather than the entire page.

So i was wondering whether it would be possible to put the html code into somewhere like Display>Template>General>Overall_header

Do you think that approach would be any use?