Develop Reference

How to console.log multiple objects?

I am creating a javascript exercise, my idea was to create a function that would give me an icon return, I am using FontAwesome for this. I managed to make it show the icon and the message but I wanted to add my predefined styles for titles, emphasis .. etc through a function but I still can't think of a form. I even tried using Swith but it only copies css as any string
function icones(ico_name, text,style ){ // Capture icon name, style to be used and text
switch(ico_name) { //Check argument icon
case 'user':
ico_name = '%c ' //Icon will only be displayed after CSS declaration
font = 'font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 20px; content: "\f434";'
break
}
switch(style) { // Styling text
case 'title':
text = 'color: red'
break
}
console.log(ico_name,font,text)
}
icones('user','player', 'title') //Applying values to function

I'm not sure if this is what you are looking for, but you can use document.getElementById() to get an element in the webpage and then apply CSS styles.
For instance, if the element whose font you are trying to change has its id attribute set to "changeMyFont":
<span id="changeMyFont"></span>
you can change its CSS attributes using JavaScript as such:
var elem = document.getElementById("changeMyFont");
elem.style.fontFamily = "Font Awesome 5 Free";
elem.style.fontWeight = 900;
elem.style.fontSize = "20px";
To change the text color to red for a certain element, you can follow the same procedure. To change the content within a HTML tag, use innerHTML (do not allow user input here; it is an XSS threat):
document.getElementById("elementToChange").innerHTML = "HTML here";
You can use an HTML escape in there.

Well after a few hours between trial and error I was able to accomplish my feat.
The "secret" was to put 2 styles in just one console.log, the code may seem like a confusing drift and surely to improve it.
function icones(ico_nome,texto,style ){ // Captura o nome do icone, o estilo que sera utilizado e o texto
switch(ico_nome) { // Check argument icon
case 'user':
ico_nome = '%c ' // Icon will only be displayed after CSS declaration
font_icon = 'font-family:"Font Awesome 5 Free"; font-weight: 900; font-size: 20px;' //Declara a fonte para visualização
break
}
switch(style) { // Styling text
case 'titulo': // Set styles for titles
font_icon += 'color:red;' //Set the color Red to Icon
style_text = 'color:blue; font-family: Arial;' // Set styles for texts
break
default:
font_icon += 'color: black' // Set default color
}
console.log(ico_nome + ' ' + '%c' + texto,font_icon,style_text) //Join the 2 styles and reveal the output
}
icones('user','Usuario', 'titulo') //Applying values to function
Final result
---- Console Output
Still do not know how to insert the image directly into the post sorry :)

Use Jquery function .css() For example:
$("#element").css("font-size", "20pt")

CKEditor, mathematics and content filter

I have configured CKEditor to remove all margin, color and font styles.
Here's CKEditor config :
CKEDITOR.editorConfig = function( config ) {
// Add WIRIS to the plugin list
config.extraPlugins += (config.extraPlugins.length == 0 ? '' : ',') + 'ckeditor_wiris';
// Allow all elements
config.allowedContent = {
$1: {
// Use the ability to specify elements as an object.
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
// Disallow font, margin, color styles and span elements
config.disallowedContent = '*{font*}; *{margin*}; *{color*}; span;';
};
I'm using WIRIS plugin to create math equations. When I create a math equation with this plugin, I can see the equation in CKEditor and when I save it, it's saved as intended.
But when I want to edit, the equation is no longer a math equation but only simple text.
I think my config is removing math elements keeping only text. But I don't know what's wrong with my config since I allowed all HTML elements only disallowing element I don't want.
Any idea ?

Found a hacky way to do it by adding this to config.js :
config.extraAllowedContent = 'math[xmlns]; maction; maligngroup; malignmark; menclose; merror; mfenced; mfrac; mglyph; mi;' +
'mlabeledtr; mlogdiv; mmultiscripts; mn; mo; mover; mpadded; mphantom; mroot; mrow; ms; mscarries; mscarry;' +
'msgroup; mstack; msline; mspace; msqrt; msrow; mstack; mstyle; msub; msup; msubsup; mtable; mtd; mtext; mtr;' +
'munder; munderover; semantics; annotation; annotation-xml;';

How to apply css to only numbers in a text inside/or any <p><p> element?

I am Using a Regional language unicode font-face in my site but the numbers are not looking good.
So I want to apply new font-style or css to numbers only..
please help

This can be done using CSS's unicode-range property which exists within #font-face.
The numbers 0 to 9 exist in Unicode within the range U+0030 to U+0039. So what you'll need to do is include a font alongside your existing font which specifically targets this range:
#font-face {
font-family: 'My Pre-Existing Font';
...
}
#font-face {
font-family: 'My New Font Which Handles Numbers Correctly';
...
unicode-range: U+30-39;
}
The result of this will be that every instance of Unicode characters U+0030 (0) through to U+0039 (9) will be displayed in the font which specifically targets that range, and every other character will be in your current font.

You can wrap all numbers in p tags with a <span class="number">:
CSS
.number {
font-family: Verdana;
}
jQuery
$('p').html(function(i, v){
return v.replace(/(\d)/g, '<span class="number">$1</span>');
});
But personally, I would go with James suggestion ;)
http://jsfiddle.net/ZzBN9/

There is no way to apply CSS to all numbers specifically. In each number tag you could add the attribute class='number' and then in the CSS you could add
.number {
font-family: arial;
}

Better with this
$('p').html(function(i, v){
return v.replace(/(\d+)/g, '<span class="number">$1</span>');
});
With + you avoid one span per complete number (span for 321), not one per each number found (span for 3 for 2 and for 1)

You can use the regex replace and detect the numbers then add the class
following code:
$('p').html(function(i,c) {
return c.replace(/\d+/g, function(v){
return "<span class='numbers'>" + v + "</span>";
});
});
.numbers
{
color:red;
font-size:30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
View 11 new out of 11 message(s) in your inbox
</p>

CKEditor default style for styleCommand (format styles with buttons)

I have created a CKEditor plugin which does the base p, h2, h3, h4 formatting with custom buttons (instead of the stylescombo). It works great, but if I uncheck an element (ex. 'h2'), sets the 'div' tag as parent element for the row. I want to be the 'p' as the default element and also the 'p' button can't be unchecked (unless I clicking on another, ex. 'h2' button). How is this possible?
The plugin looks like:
CKEDITOR.plugins.add('stylesbuttons_custom',{
lang:'en',
icons:'p,h2,h3,h4',
init:function(editor){
var order=0;
var addButtonCommand=function(buttonName,buttonLabel,commandName,styleDefiniton){
if (!styleDefiniton)
return;
var style=new CKEDITOR.style(styleDefiniton);
editor.attachStyleStateChange(style,function(state){
!editor.readOnly && editor.getCommand(commandName).setState(state);
});
editor.addCommand(commandName,new CKEDITOR.styleCommand(style));
if (editor.ui.addButton){
editor.ui.addButton(buttonName,{
label:buttonLabel,
command:commandName,
toolbar:'basicstyles,'+(order+=10)
});
}
};
var lang=editor.lang.stylesbuttons_custom;
addButtonCommand('P',lang.p,'p',{element:'p'});
addButtonCommand('H2',lang.h2,'h2',{element:'h2'});
addButtonCommand('H3',lang.h3,'h3',{element:'h3'});
addButtonCommand('H4',lang.h4,'h4',{element:'h4'});
}
});
I load the plugin like:
config.extraPlugins='stylesbuttons_custom';
I put buttons to toolbar like:
config.toolbar:[['P','H2','H3','H4','Pre']];
Here is a screenshot about the problem:

Cross posting my answer from CKEditor forum.
I think that you need to write your own command instead of using CKEDITOR.styleCommand.
It should work exactly like CKEDITOR.styleCommand when style is not yet applied on current selection.
But when clicked again it should apply the paragraph style, not remove the previously applied style. E.g:
styleCommand.prototype.exec = function( editor ) {
editor.focus();
if ( this.state == CKEDITOR.TRISTATE_OFF )
editor.applyStyle( this.style );
else if ( this.state == CKEDITOR.TRISTATE_ON )
editor.applyStyle( paragraphStyle );
};
PS. I created a ticket: http://dev.ckeditor.com/ticket/10190 because I think that removing block style should revert back to paragraph (in enterMode=P). For now use the above workaround.

Yes, #Reinmar notifies that there is an error in the CKEditor's style.js where the this._.enterMode is not defined.
Doing this on style.js, resolve the problem:
this._ = {
definition: styleDefinition,
enterMode: CKEDITOR.config.enterMode
};
And from now on when a style button is unchecked the block changes to the default 'p' element.
Now my complete working plugin looks like:
(function(){
CKEDITOR.plugins.add('custombuttons',{
lang:'hu,en,de,ro',
init:function(editor){
var order=0,t=this,lang=editor.lang.custombuttons;
// addButtonCommand helper
var addButtonCommand=function(buttonName,buttonLabel,commandName,styleDefiniton){
var style=new CKEDITOR.style(styleDefiniton);
var styleCommand=function(style){
this.style=style;
this.allowedContent=style;
this.requiredContent=style;
this.contextSensitive=true;
};
styleCommand.prototype={
exec:function(editor){
editor.focus();
if (this.state==CKEDITOR.TRISTATE_OFF)
editor.applyStyle(this.style);
else if (this.state==CKEDITOR.TRISTATE_ON)
editor.removeStyle(this.style);
if(commandName!='fakecommand'){editor.execCommand('fakecommand');editor.execCommand('fakecommand');} /* hack to change button state properly */
},
refresh:function(editor,path){
this.setState(path&&this.style.checkApplicable(path)?(this.style.checkActive(path)?CKEDITOR.TRISTATE_ON:CKEDITOR.TRISTATE_OFF):CKEDITOR.TRISTATE_DISABLED);
}
};
editor.addCommand(commandName,new styleCommand(style));
if(editor.ui.addButton){editor.ui.addButton(buttonName,{label:buttonLabel,command:commandName,toolbar:'basicstyles,'+(order+=10),icon:t.path+'images/'+commandName+'.png'});}
};
// _fakebutton (hack)
addButtonCommand('_fakebutton','','fakecommand',{element:'span'});
// style buttons
addButtonCommand('P',lang.p,'p',{element:'p'});
addButtonCommand('H2',lang.h2,'h2',{element:'h2'});
addButtonCommand('H3',lang.h3,'h3',{element:'h3'});
addButtonCommand('H4',lang.h4,'h4',{element:'h4'});
addButtonCommand('Pre',lang.pre,'pre',{element:'pre'});
addButtonCommand('Mini',lang.mini,'mini',{element:'p',attributes:{class:'mini'}});
addButtonCommand('Important',lang.important,'important',{element:'span',attributes:{class:'important'}});
addButtonCommand('Comment',lang.comment,'comment',{element:'span',attributes:{class:'comment'}});
addButtonCommand('Mark',lang.mark,'mark',{element:'mark'});
addButtonCommand('ImgLeft',lang.imgLeft,'imgLeft',{element:'img',attributes:{class:'imgleft'}});
addButtonCommand('ImgRight',lang.imgRight,'imgRight',{element:'img',attributes:{class:'imgright'}});
addButtonCommand('ImgCenter',lang.imgCenter,'imgCenter',{element:'img',attributes:{class:'imgcenter'}});
// button shortcut keys
editor.setKeystroke(
[
[CKEDITOR.CTRL+48,'p'], // Ctrl+0
[CKEDITOR.CTRL+49,'h2'], // Ctrl+1
[CKEDITOR.CTRL+50,'h3'], // Ctrl+2
[CKEDITOR.CTRL+51,'h4'], // Ctrl+3
]);
}
});
})();
There is still a hack in the code. I needed to run a 'fakecommand' to really update (refilter?) the changed tags and all its parent tags. For example the 'p.mini' button caused problems (the state was not updated) when clicked multiple time. So there is still an unelegant solution. Any idea how to force to update or refilter the code after a style is applied?

How can I modify a CSS class using JavaScript?

I know how to apply css on a single tag (or changing class on it) but THIS IS NOT WHAT I AM ASKING!
I would like to modify an attribute within a CSS class without touching the element where the class is applied.
In other words if this is the css
.myclass {
font-size: 14px;
color: #aab5f0;
}
and this is the html
<span id="test" class="myclass"> foo bar </span>
to increase the font of the span tag I want to modify the content of the class and NOT doing something like
var fontsize = parseInt($('#test').css('font-size').replace(/[^-\d\.]/g, ''));
fontsize += 10;
$('#test').css('font-size', fontsize+'px');
I want that the class becomes
.myclass {
font-size: 18px;
color: #aab5f0;
}
Is there a way to change the actual class through Javascript?
My other solution would be to put the css in a container and refill the container each time, but I have the sensation that it is not a good idea...

I think ideally you should define a base font size on the html or body element. All of the other font sizes in your CSS should be relative to that "master" font size, like so:
Then, when you adjust the font-size of the body through jQuery.css(), the other elements will all automatically adjust their size relative to the parent.
$(body).css('font-size', '14px');
You don't have to use the body level, you could define base font-size a div or other container and use that as the parent instead.
Here is a contrived example of this in action:
$('#grow').click(function() {
$('body').css('font-size', '18px');
});
body {
font-size: 12px;
}
h3,
p {
font-size: 1.0em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Main Title</h3>
<p> Welcome to my website. </p>
<button id="grow" type="button">Grow</button>

My comment notwithstanding, look at this question: Setting CSS pseudo-class rules from JavaScript
Changing a class and "setting pseudo-class rules" are achieved in the same way.
#Box9's answer is probably the one you should actually use:
I threw together a small library for this since I do think there
are valid use cases for manipulating stylesheets in JS.

There is no need to change the class itself. To override the behaviour, simply add another class to the existing one or change it entirely. I'll show the first option:
.myclass {
font-size: 14px;
color: #aab5f0;
}
.myclass.override {
font-size: 12px;
}
And then all you need to do from javascript is to toggle the override class. This way it's also much better as all the presentation is done in CSS.

Since it's obvious you're using jQuery, please see the addClass and removeClass functions.
$('#test').removeClass('myClass').addClass('yourClass');

looking for same thing.
This was my solution
https://jsfiddle.net/sleekinteractive/0qgrz44x/2/
HTML
<p>The Ants in France stay mainly on the Plants</p>
CSS
p{
font-family:helvetica;
font-size:15px;
}
JAVASCRIPT (uses jQuery)
function overwrite_css(selector,properties){
// selector: String CSS Selector
// properties: Array of objects
var new_css = selector + '{';
for(i=0;i<properties.length;i++){
new_css += properties[i].prop + ':' + properties[i].value + ';';
}
new_css += '}';
$('body').append('<style>' + new_css + '</style>');
}
overwrite_css('p',Array({prop: 'font-size', value: '22px'}));
overwrite_css('p',Array({prop: 'font-size', value: '11px'}));
overwrite_css('p',Array({prop: 'font-size', value: '66px'}));
// ends on 66px after running all 3. comment out lines to see changes

Simply JQuery:
$('#test').attr('class','bigFont');
or native JS :
document.getElementById('test').className ='bigFont';
UPDATED
var size = [ 10 , 20 , 30 ] ;
var i =0;
$('#test').css('font-size',size[i]+'px');
i = (i+1)%size.length ;