Font Size (more options)

Hello,

Can i add numbers of font-size: 19.20.21.22.23 to the editor font-size button?
Is there a way to do that?

MrMind

Hello MrMind,

Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In all the pages

Code:

$(function(){$(function() {
  $('.sceditor-button-size').click(function() {
    addSize(8, 'before');
    addSize(6, 'before');
    
    addSize(26, 'after');
    addSize(28, 'after');
    addSize(30, 'after');
  
    $('.sceditor-fontsize-option.new-size').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[size='+$(this).attr('data-size')+']','[/size]');$('.sceditor-fontsize-picker').remove();e.preventDefault()})
  });
  function addSize(size, position){
    var data = '<a unselectable="on" class="sceditor-fontsize-option new-size" href="#" data-size="'+size+'"><span unselectable="on" style="font-size:'+size+'px;">'+size+'</span></a>';
    if (position == 'after' || position == null) $('.sceditor-fontsize-picker div').append(data);
    if (position == 'before') $('.sceditor-fontsize-picker div').prepend(data);
  }
})});

To add sizes write : addSize(number, position);

number : the size of the font e.g. 1, 2, 3..
position : where the option will be placed e.g. before, after..
- before places the option before all current fonts
- after places the option after all current fonts

There are already example sizes added.

I want between numbers 18 and 24 to add the 19.20.21.22.23. How will i do that because i didn't understand the after and before thing..

Replace your script with this instead :

Code:

$(function(){$(function() {
  $('.sceditor-button-size').click(function() {
    addSize(23, 'after', 18);
    addSize(22, 'after', 18);
    addSize(21, 'after', 18);
    addSize(20, 'after', 18);
    addSize(19, 'after', 18);
 
    $('.sceditor-fontsize-option.new-size').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[size='+$(this).attr('data-size')+']','[/size]');$('.sceditor-fontsize-picker').remove();e.preventDefault()})
  });
  function addSize(size, position, dataSize){
    var data = '<a unselectable="on" class="sceditor-fontsize-option new-size" href="#" data-size="'+size+'"><span unselectable="on" style="font-size:'+size+'px;">'+size+'</span></a>';
    if (typeof dataSize === 'undefined') {
      if (position == 'after') $('.sceditor-fontsize-picker div').append(data);
      if (position == 'before') $('.sceditor-fontsize-picker div').prepend(data);
    }
    if (typeof dataSize != 'undefined') {
      if (position == 'after') $('.sceditor-fontsize-picker div a[data-size="'+dataSize+'"]').after(data);
      if (position == 'before') $('.sceditor-fontsize-picker div a[data-size="'+dataSize+'"]').before(data);
    }
  }
})});

I added dataSize to the args, so you have to write : addSize(size, position, dataSize);

Example : addSize(19, 'after', 18);
Literally : The size option '19' is added in after the size option '18'

dataSize is optional, if for example you want to add an option to the end of the list you'll write : addSize(100, 'after');
Literally : Add the size option '100' after all size options


If you have a lot of font-sizes you can add a scroll bar to the drop down by adding this to your CSS :

Code:

.sceditor-fontsize-picker {
  overflow-y:auto;
  overflow-x:hidden;
  height:200px;
}

This makes the perfixes and the bbcodes not working. Why is that? As soon as i set it in the posts it is all ok but it is only working on the fast editor.

What do you mean by prefixes ? Have you made sure to tick "In all the pages" for the script ?

If i tick all pages, the perfixes (https://i.imgur.com/UIONjBx.png) and the bbcodes don't work. If i click in the topics, then its all ok.

Okay, replace the script by this :

Code:

$(function(){$(function() {
  if (!document.getElementById('text_editor_textarea')) return;
  $('.sceditor-button-size').click(function() {
    addSize(23, 'after', 18);
    addSize(22, 'after', 18);
    addSize(21, 'after', 18);
    addSize(20, 'after', 18);
    addSize(19, 'after', 18);
 
    $('.sceditor-fontsize-option.new-size').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[size='+$(this).attr('data-size')+']','[/size]');$('.sceditor-fontsize-picker').remove();e.preventDefault()})
  });
  function addSize(size, position, dataSize){
    var data = '<a unselectable="on" class="sceditor-fontsize-option new-size" href="#" data-size="'+size+'"><span unselectable="on" style="font-size:'+size+'px;">'+size+'</span></a>';
    if (typeof dataSize === 'undefined') {
      if (position == 'after') $('.sceditor-fontsize-picker div').append(data);
      if (position == 'before') $('.sceditor-fontsize-picker div').prepend(data);
    }
    if (typeof dataSize != 'undefined') {
      if (position == 'after') $('.sceditor-fontsize-picker div a[data-size="'+dataSize+'"]').after(data);
      if (position == 'before') $('.sceditor-fontsize-picker div a[data-size="'+dataSize+'"]').before(data);
    }
  }
})});

It'll only run if the editor is on the page. I have no idea why it's stopping those scripts from working as it's only triggered on click of the size button.

Sorry man,

Still stops those the javascripts. Now stops, bbcodes, perfixes and the navbar scroll. I cannot help anyways. Sorry.

p.s. i had to put it to All the pages right? Because after i see that it is not working i set it to the topics only so the others don't have any affect.

Currently I am running it on my test forum without any problems. Could you provide the two scripts that are having problems, so I may see what the cause is ?

OFC

Perfixes (all the pages):

BBcodes (all the pages):

nav bar scroll (all the pages):

Βump!

i got a problem here after i did my thoughts its showed wrong list
10 - 12 -11 - 13 - 15 -14 -16 - 18 - 19 - 20 - 21 - 22 - 23 -24 - 35 - 34 - 33 - 32 - 31 - 30 - 29 - 28 - 27 - 26 - 25
here the script after changes i made

Code:

    $(function(){$(function() {
      $('.sceditor-button-size').click(function() {
        addSize(23, 'after', 18);
        addSize(22, 'after', 18);
        addSize(21, 'after', 18);
        addSize(20, 'after', 18);
        addSize(19, 'after', 18);
        addSize(11, 'after', 10);
        addSize(12, 'after', 10);
        addSize(14, 'after', 13);
        addSize(15, 'after', 13);
        addSize(25, 'after', 24);
        addSize(26, 'after', 24);
        addSize(27, 'after', 24);
        addSize(28, 'after', 24);
        addSize(29, 'after', 24);
        addSize(30, 'after', 24);
        addSize(31, 'after', 24);
        addSize(32, 'after', 24);
        addSize(33, 'after', 24);
        addSize(34, 'after', 24);
        addSize(35, 'after', 24);
   
        $('.sceditor-fontsize-option.new-size').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[size='+$(this).attr('data-size')+']','[/size]');$('.sceditor-fontsize-picker').remove();e.preventDefault()})
      });
      function addSize(size, position, dataSize){
        var data = '<a unselectable="on" class="sceditor-fontsize-option new-size" href="#" data-size="'+size+'"><span unselectable="on" style="font-size:'+size+'px;">'+size+'</span></a>';
        if (typeof dataSize === 'undefined') {
          if (position == 'after') $('.sceditor-fontsize-picker div').append(data);
          if (position == 'before') $('.sceditor-fontsize-picker div').prepend(data);
        }
        if (typeof dataSize != 'undefined') {
          if (position == 'after') $('.sceditor-fontsize-picker div a[data-size="'+dataSize+'"]').after(data);
          if (position == 'before') $('.sceditor-fontsize-picker div a[data-size="'+dataSize+'"]').before(data);
        }
      }
    })});

@MrMind I installed all scripts, but have not encountered any errors. I'm not sure what the problem could be. Have you made any modifications to the size script ?

@Michael The option that you want to be first must be the last. For example instead of adding 50, 51, 52, we would add 52, 51, 50.

Try now :

Code:

    $(function(){$(function() {
      $('.sceditor-button-size').click(function() {
        addSize(23, 'after', 18);
        addSize(22, 'after', 18);
        addSize(21, 'after', 18);
        addSize(20, 'after', 18);
        addSize(19, 'after', 18);
        addSize(12, 'after', 10);
        addSize(11, 'after', 10);
        addSize(15, 'after', 13);
        addSize(14, 'after', 13);
        addSize(35, 'after', 24);
        addSize(34, 'after', 24);
        addSize(33, 'after', 24);
        addSize(32, 'after', 24);
        addSize(31, 'after', 24);
        addSize(30, 'after', 24);
        addSize(29, 'after', 24);
        addSize(28, 'after', 24);
        addSize(27, 'after', 24);
        addSize(26, 'after', 24);
        addSize(25, 'after', 24);
 
        $('.sceditor-fontsize-option.new-size').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[size='+$(this).attr('data-size')+']','[/size]');$('.sceditor-fontsize-picker').remove();e.preventDefault()})
      });
      function addSize(size, position, dataSize){
        var data = '<a unselectable="on" class="sceditor-fontsize-option new-size" href="#" data-size="'+size+'"><span unselectable="on" style="font-size:'+size+'px;">'+size+'</span></a>';
        if (typeof dataSize === 'undefined') {
          if (position == 'after') $('.sceditor-fontsize-picker div').append(data);
          if (position == 'before') $('.sceditor-fontsize-picker div').prepend(data);
        }
        if (typeof dataSize != 'undefined') {
          if (position == 'after') $('.sceditor-fontsize-picker div a[data-size="'+dataSize+'"]').after(data);
          if (position == 'before') $('.sceditor-fontsize-picker div a[data-size="'+dataSize+'"]').before(data);
        }
      }
    })});

Oops! Posted in the wrong topic.

I used the first code without a problem to any of my systems i had this some time a go thanks to Ange Tuteur

Ange
thanks a lot i think im getting dumber these days
may be its the cold
i also added the number 17 you have missed
worked like a charm for me now

@Ange, i didn't make any modifications to anything! If you want i can send you via pm a test account information to check it out in the admin panel.

Ange i think there something in my forum not right
while posting posts i find this
starting from font 30 to 35 not working
can that be fixed or ill just have to make it 29 max ?
sorry for too much asking

Hi ya @Michael_vx

Just to confirm anything after 29 will not work as FM systems Do not have font sizes bigger then 29 on there servers  I had the same problem.

APE

MrMind wrote:@Ange, i didn't make any modifications to anything! If you want i can send you via pm a test account information to check it out in the admin panel.

I am sending you the information of a Test Account as an Admin so you can access the Admin Panel and check out the problem. If you set the font sizes to all the pages it deactivates the three javascripts and keeps that. Check it and please inform me with your suggestions if possible.

Thanks in advance.

Thanks for the info. I inspected your forum and found a syntax error. This script was missing a semi-colon( ; ) at the end.

Code:

$(document).ready(function() {
    $.getScript('https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js');
});
$(function () {
        $('input[name="description"]').change(function () {
            var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF', 'bmp','BMP'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), ValidFileExtension) == -1) {
            alert("Το πεδίο υποστηρίζει μόνο αρχεία μορφής: '.jpeg','.jpg', '.png', '.gif', '.bmp'");
        }
    })
})

I corrected it, and everything should be okay.

APE wrote:Hi ya @Michael_vx

Just to confirm anything after 29 will not work as FM systems Do not have font sizes bigger then 29 on there servers  I had the same problem.

APE

so that wont be changed i mean there is no way to fix it am i right ?

Ange Tuteur wrote:Thanks for the info. I inspected your forum and found a syntax error. This script was missing a semi-colon( ; ) at the end.

Code:

$(document).ready(function() {
    $.getScript('https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js');
});
$(function () {
        $('input[name="description"]').change(function () {
            var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF', 'bmp','BMP'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), ValidFileExtension) == -1) {
            alert("Το πεδίο υποστηρίζει μόνο αρχεία μορφής: '.jpeg','.jpg', '.png', '.gif', '.bmp'");
        }
    })
})

I corrected it, and everything should be okay.

should i change the old with the new one ? or its no problem
im just asking only

@Michael_vx, the new js is not for you. And it is not for this topic. It is just a mistake that a js had in my forum.

Edit: My question-problem is now solved. Moderators may close this and if wanted you can close it after the others questions are solved.

 
if its not for me then i see no problem
ill just wait for Ange will say

There is no plan on upping the text size on the servers as far as i know so there is no other way to add them as it has to be done server side.