Latest topics
» Dark Theme Help
by Haggis Yesterday at 21:25

» Forumactif Edge - Greek Translation
by Van-Helsing Yesterday at 18:34

» Auto-suggest Plugin execute Javascript
by MiyakeDev Yesterday at 16:42

» Forumactif Edge - Releases
by Ange Tuteur Yesterday at 15:12

» Forumactif Edge - Arabic Translation
by Ange Tuteur Yesterday at 12:48

» bug in update color
by Ange Tuteur Yesterday at 12:20

» Gateway to Role-Play
by JerriLeah7 Sun 26 Mar 2017, 15:40

» [GAME] Count to One Million!
by brandon_g Sun 26 Mar 2017, 11:51

» Happy Birthday Thread
by brandon_g Sun 26 Mar 2017, 11:50

» Forumactif Edge Web Page - Translations
by Ange Tuteur Sat 25 Mar 2017, 18:06

» Quick Reply Bug
by Ange Tuteur Sat 25 Mar 2017, 17:44

» Forumactif Edge - Portuguese Translation (Brazilian)
by Ange Tuteur Sat 25 Mar 2017, 17:40

» Adding text to reputation counter
by Ange Tuteur Thu 23 Mar 2017, 17:19

» Forumactif Edge - Spanish Translation
by Ange Tuteur Thu 23 Mar 2017, 16:24

» How do I add hover examine feature?
by dr.kran Thu 23 Mar 2017, 06:18

Recent Tutorials
Who is online?
In total there are 2 users online :: 1 Registered, 0 Hidden and 1 Guest :: 1 Bot

STBW

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Forum Font Size Selector

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9046
Reputation : 2187
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 13 May 2016, 12:55

First topic message reminder :

This plugin installs a small selector for the font size of the forum which allows you to adjust the size of the font to what you prefer.

Click to view demo

This plugin is optimized for the following forum versions :

  • PhpBB3
  • PunBB
  • Invision

Note : This selector changes the global font size of the document and will not effect elements that have specified an absolute font size, such as text inside [size] tags.


Installation

To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Font Size Selector
Placement : In all the pages
Code:
$(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
  ],

  // position of the selector
  // 0 = top
  // 1 = bottom
  position = 0,
  attachTo = '#page-body, #ipbwrapper #content-container', // element(s) where the selector will be attached

  // language config
  lang = {
    Default : 'Default',
    FontSize : 'Font Size : '
  },


  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);
});

When you're finished and have saved the script, the font size selector should be available at the top of your forum. If not, please see the modifications section to find out how to modify this plugin. Wink


Modifications

Below is a list of modifications that can be made to this plugin.


1. Sizes
At the top of the script you should see a variable named sizes. This variables contains an array of the font sizes available in the select drop down. Feel free to add more sizes or remove existing ones.
Code:
  var sizes = [
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23,
    24
  ],
Note : Please make sure to separate each number by a COMMA : , ( e.g. 1, 2, 3, 4 )


2. Position
Below the sizes array you should see the position variable. This variable takes two(2) values ; 0 and 1, and determines the position of the selector.
0 = The selector is placed at the top of the selected element
1 = The selector is placed at the bottom of the selected element
Code:
  // position of the selector
  // 0 = top
  // 1 = bottom
  position = 0,
Modify this variable to change the position of the font size selector.


3. Placement
Below the position variable you should see the attachTo variable. This takes a string of CSS selectors which determine WHERE the font size selector will be placed. By default its placed inside the forum body, however if you want it to display somewhere else, such as in a widget :
Code:
<div id="font_size_div"></div>

all you need to do is change the string so that it matches your element's id or class :
Code:
  attachTo = '#font_size_div', // element(s) where the selector will be attached


4. Language
Last but certainly not least is the lang object. You can use this object to change or translate the existing texts.
Code:
  // language config
  lang = {
    Default : 'Default',
    FontSize : 'Font Size : '
  },


That's all the modifications ! Clean glasses

If you have any questions, comments, or find a bug feel free to leave a reply below. Enjoy ! Party


Notice
Tutorial written by Ange Tuteur.
Special thanks to the Beta Testers for testing this plugin.
Reproduction not permitted without consent from the author.

avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2090
Points : 2634
Reputation : 74
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Mon 03 Oct 2016, 18:16

Um, did you by chance keep both the original and the one I gave you?

That would be the only reason it comes up twice.
avatar
skouliki

Title :
Gender : Female
Posts : 304
Points : 986
Reputation : 122
Language : english,greek
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://iconskouliki.forumgreek.com https://www.facebook.com/iconskouliki https://twitter.com/iconskouliki

Postskouliki on Tue 04 Oct 2016, 02:44

no , this original had happened when i add Ange's code from the start also

the red arrow is the active one - your code - .... the other one is there but its not working 


--------

avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2090
Points : 2634
Reputation : 74
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Tue 04 Oct 2016, 07:06

Oh okay.

Use this Javascript:

Code:
$(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
  ],
 
  // position of the selector
  // 0 = top
  // 1 = bottom
  position = 0,
  attachTo = '#ipbwrapper #content-container', // element(s) where the selector will be attached
 
  // language config
  lang = {
    Default : 'Default',
    FontSize : 'Font Size : '
  },
 
 
  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);
 
    // forces font-size
    document.body.style.setProperty('font-size', /default/i.test(value) ? value.replace(/default:/, '') : value + 'px', 'important')
  };
 
  // 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);
});

And make sure you're using the CSS style that Andrei gave you.
avatar
skouliki

Title :
Gender : Female
Posts : 304
Points : 986
Reputation : 122
Language : english,greek
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://iconskouliki.forumgreek.com https://www.facebook.com/iconskouliki https://twitter.com/iconskouliki

Postskouliki on Tue 04 Oct 2016, 09:18

now it worked only with your code but is this normal ? these parts with the red arrow are not getting larger 


--------

avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2090
Points : 2634
Reputation : 74
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Tue 04 Oct 2016, 14:26

This code isn't a sure fire way to do it, but it clears the important style set to the font-size of all of your forum titles.

Code:
$(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
  ],
 
  // position of the selector
  // 0 = top
  // 1 = bottom
  position = 0,
  attachTo = '#ipbwrapper #content-container', // element(s) where the selector will be attached
 
  // language config
  lang = {
    Default : 'Default',
    FontSize : 'Font Size : '
  },
 
 
  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);
 
    // forces font-size
    document.body.style.setProperty('font-size', /default/i.test(value) ? value.replace(/default:/, '') : value + 'px', 'important')
  };
 
  // 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);

  if ( window.location.pathname == '/' ) {
    $('h3.hierarchy').html($('h3.hierarchy').html().replace('!important', '').replace(/font-size:\s\d+px/, ''));
  }
});

Sadly, the code still doesn't fix the forum titles, seeing as though you have this selector in your index_body template:

Code:
.pun h3 { font-size: 14px; }

And these in your stylesheet:

Code:
.hierarchy { font-size: 10px; }

.pun tbody.statused td.tcl { font-size: 12px; }

They shouldn't be affecting it, but they are for some reason. I'm going to look into this some more.
avatar
skouliki

Title :
Gender : Female
Posts : 304
Points : 986
Reputation : 122
Language : english,greek
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://iconskouliki.forumgreek.com https://www.facebook.com/iconskouliki https://twitter.com/iconskouliki

Postskouliki on Tue 04 Oct 2016, 16:49

thanks for all your help 
yes with the modified templates something you win something you lose 
this java code isnt so important to me as a feature so maybe i will not include it in the end
again thanks for taking the time to investigate my page

--------

avatar
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 2090
Points : 2634
Reputation : 74
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Tue 04 Oct 2016, 20:02

No problem, skou.
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2277
Points : 4328
Reputation : 271
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Sun 18 Dec 2016, 15:07

Does text in posts change with this, too? I just noticed on my forum with Edge post text is not changing.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4393
Points : 9046
Reputation : 2187
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 19 Dec 2016, 12:00

At the moment this isn't compatible with FA Edge, mostly because it's using absolute font-sizes which was kind of a dumb move on my part. Dx
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2277
Points : 4328
Reputation : 271
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Mon 19 Dec 2016, 16:02

Ok. Thanks for the reply.

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum