Javascript in all pages problem

Hello everyone!

So I wanted to add a simple thing, custom colors. Like in this tip here:
https://help.forumotion.com/t134603-personalize-the-color-palette-of-the-editor#906632

Yet I encounter a problem! When I choose for my Javacode to be active in all the pages it does not work! At all. And I tried that with some other codes as well - same thing. If option "in all pages" is chosen, then it doesn't work at all. However, choosing "In the Homepage" or any other option - works perfectly.

Where could be the problem?
The code or something else?
Forum version - phpBB2

Thank you in advance!


EDIT: I've tried code in here (to change texts in toolbar)
https://help.forumotion.com/t138190-how-to-personalize-my-toolbar?highlight=toolbar
And it worked with option "in all pages". So that makes me think, that the code I've mentioned before (custom colors) doesn't work because of it's structure or smth. Any ideas?

Hi @Kami-sama,

That is weird, I know sometimes that there can be problems with in all pages due to the minification of the script. Make sure that your current codes set to in all pages are properly closed by a semi-colon at the end. Like :

Code:

function testing() {

};

It worked for me, did you make sure the simple color palette is enabled and you added the CSS ?

Code:

/* Color palette icons */
.color-option {
  display: inline-block !important;
  width: 15px !important;  /* width of the icon */
  height: 15px !important;  /* height of the icon */
  border: 2px solid #fff !important;  /* white border around the icon */
  margin: 3px !important;  /* space between each icon */
  box-shadow: 0 0 2px #778899;  /* shadow */
  cursor: pointer !important;
}

.color-option span{
  display: block !important;
  width: 15px !important;  /* width of the icon */
  height: 15px !important;  /* height of the icon */
}

.color-option, .color-option span {
  border-radius: 2px;  /* roundness */ 
}

/* Whole palette - the width influences how many icons appear */
.sceditor-dropdown.sceditor-color-picker {
  width: 200px !important;  /* width of the palette */
  height: 100px !important;  /* height of the palette */
  padding: 5px !important;
  border-radius: 5px !important;
}

Aha! Think I found the little bastard!
The bracket } in line 4 doesn't have an end bracket. But where should it be?
After "// end list of colors"?

Code:

$(function() {
$(function() {
if ($("#text_editor_textarea").length < 1) return;
$.sceditor.command.get('color')._menu  = function (editor, caller, callback) {

Actually I think that one is fine since it's at the end of a function body with no code after it.

Code:

$(function() {
$(function() {
if ($("#text_editor_textarea").length < 1) return;
$.sceditor.command.get('color')._menu  = function (editor, caller, callback) {

}
// end of function body
})});

If there was a statement after it, then a semi-colon should be added.

Yes, I just noticed that myself -.-

But good news, found other one, that I accidentally deleted while editing colors.
My bad! I assume some syntax errors are in other codes as well

One more question about the color pallet, as we are talking about it.
How could I ad a title of the color next to it? (something like in the simple color palet with no styles or anything).

I was playing around, and ended up adding it inside instead. How is that ?


Script :

Code:

$(function(){$(function(){
  if ($("#text_editor_textarea").length < 1) return;
  $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
    var mColorBasic = [],
    html = $('<div />');
               
    // begin list of colors
             
    mColorBasic["Black"] = "#000000";
    mColorBasic["Dark Blue"] = "#00008B";
    mColorBasic["Teal"] = "#008080";
    mColorBasic["Dark Green"] = "#006400";
    mColorBasic["Indigo"] = "#4B0082";
    mColorBasic["Crimson"] = "#DC143C";
    mColorBasic["Orange"] = "#FF4500";
    mColorBasic["Brown"] = "#663300";
       
    mColorBasic["Dark Gray"] = "#666666";
    mColorBasic["Royal Blue"] = "#4169E1";
    mColorBasic["Dark Turquoise"] = "#00CED1";
    mColorBasic["Green"] = "#008000";
    mColorBasic["Purple"] = "#9400D3";
    mColorBasic["Red"] = "#FF0000";
    mColorBasic["Light Orange"] = "#FF9933";
    mColorBasic["Sienna"] = "#A0522D";
       
    mColorBasic["Light Gray"] = "#D3D3D3";
    mColorBasic["Sky Blue"] = "#87CEEB";
    mColorBasic["Cyan"] = "#00FFFF";
    mColorBasic["Green Apple"] = "#32CD32";
    mColorBasic["Mauve"] = "#DA70D6";
    mColorBasic["Salmon"] = "#FA8072";
    mColorBasic["Gold"] = "#FFD700";
    mColorBasic["Light Brown"] = "#CD853F";
       
    mColorBasic["White"] = "#FFFFFF";
    mColorBasic["Pale Turquoise"] = "#AFEEEE";
    mColorBasic["Blue Green"] = "#7FFFD4";
    mColorBasic["Pale Green"] = "#98FB98";
    mColorBasic["Pink"] = "#FFC0CB";
    mColorBasic["Peach"] = "#FFDAB9";
    mColorBasic["Yellow"] = "#FFFF00";
    mColorBasic["Wood"] = "#DEB887";
             
    // end list of colors
             
    for(key in mColorBasic) html.append('<div class="color-option" title="' + key + '"><span color="' + mColorBasic[key] + '" style="background-color: ' + mColorBasic[key] + ' !important;color:'+color(mColorBasic[key].replace(/#/,'0x') - 0x404040).replace(/-/,'')+'!important;">'+key+'</span></div>');
             
    html.find('span').click(function(e) {
      callback($(this).attr('color'));
      editor.closeDropDown(true);
      e.preventDefault();
    });
             
    editor.createDropDown(caller, "color-picker", html);
  };
  function color(d) {
    var c = Number(d).toString(16);
    return "#" + ( "000000".substr( 0, 6 - c.length ) + c.toUpperCase() );
  }
})});

CSS :

Code:

/* Color palette icons */
.color-option {
  display: inline-block !important;
  border: 2px solid #fff !important;  /* white border around the icon */
  margin: 3px !important;  /* space between each icon */
  box-shadow: 0 0 2px #778899;  /* shadow */
  cursor: pointer !important;
}

.color-option span{
  display: block !important;
  padding:3px;
}

.color-option, .color-option span {
  border-radius: 2px;  /* roundness */ 
}

/* Whole palette - the width influences how many icons appear */
.sceditor-dropdown.sceditor-color-picker {
  width: 200px !important;  /* width of the palette */
  padding: 5px !important;
  border-radius: 5px !important;
}

Hahaha! It's perfect!
Thank you very much

I really fancy your Java knowledge!!! ;D
Topic 150% solved

You're welcome ^^

This was the first time I tried something for subtracting hex colors, so some of them may end up with different colors because they ended up negative. I should actually study that closer when I get time.

Topic archived

Have a nice day.