We Keep Coding

Partly editing inline style attribute of an element

It's currently working like such:
var ball = document.getElementById('ball');
//some code
let bml = parseInt(ball.style.marginLeft,10);
//if *conditional statement* is true, do:
ball.setAttribute("style","margin-left:"+(bml-4)+"px;");
But I'm trying to achieve it by writing this:
ball.style['marginLeft']=bml-4;
except the result isn't the same.
I've seen online examples of using this method to edit attribute values dynamically but they always seemed to use pre-calculated values like "400px" and never variables like my example, why is that?

Style properties must be set with string values, as it is documented in the following link: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style#setting_styles
So it is possible to dynamically set style values by using String Literals:
ball.style['marginLeft']=`${bml-4}px`;

jQuery rules add mask

Good day,
I am support an project that develop by other team.
I saw some jQuery code that I am not really understand what the code is doing, I plan to amend on it but at first I need to know what it want to do first.
Here is the code:
$(function(){
$(':input[name=country]').rules('add', {
required: true,
mask: /^[a-zA-Z0-9 ]+$/
});
});
I am suspecting it is mask method, for example which is:
$(':input[name=country]').mask("0000-0000"); // this is work
But I try to run it but it fail, hitting error:
Cannot read property 'call' of jquery.validate.min.js:16 undefined
Any one know what is the code trying to do?

The .rules() method is part of the jQuery Validate plugin and has absolutely nothing to do with the .mask() method which is part of another plugin. This code is trying to dynamically add form validation rules to an input element with name="country".
$(':input[name=country]').rules('add', {
required: true,
mask: /^[a-zA-Z0-9 ]+$/. // <- there is no such rule called 'mask': REMOVE THIS LINE
});
The error is because jQuery Validate is looking for a rule called mask where there is no "mask" rule in this plugin.
Your only options are:
remove all references to this nonexistent rule, OR
create a custom rule called mask using the .addMethod() method

That code appears to be using the jQuery Validate plugin to create a validation rule that the value is required and must consist of only letters, numbers or spaces.
The validation rule is applied to any input, textarea, select, or button element that has a name property with the value of country. I suspect the problem is that you don't have one of these fields in your document.

How to prevent Uglify un-escaping "</script" in strings?

I've got code like this:
var string = '<script src="' + src + '">\x3c/script>';
I've used \x3c instead of < to avoid having a closing script tag (which would end the script early if used as an inline script in a web browser, breaking everything).
But uglify unfortunately converts it back into a < character, breaking my page.
It looks like Uglify has an option called inline-scripts intended to fix this, but there are no docs on using this option with the API (I'm using it via gulp-uglify so I need to be able to pass this option in an options object, not via the CLI).
How do I do it? None of the following work:
{'inline-script': true}
{inlineScript: true}
{beautify: {inlineScript: true}}
{beautify: {'inline-script': true}}

I realize this is an old question, however, the answer given is not correct. You need to use the output object in uglifyjs.
.pipe(uglify({
output: {
'inline_script': true
}
}))

It should be specified with underscore, as this:
options: {{beautify: {'inline_script': true}}}

Highlight Text plugin breaks when using with array string

I am trying to use jQuery Based text highlight plugin, it works for single word highlight but breaks when i pass array, My syntax seems to be correct as the the documentation http://bartaz.github.io/sandbox.js/jquery.highlight.html
Example: http://jsfiddle.net/YyAXP/6/
//$('#article').highlight("me");
$("#article").highlight(["me","highlight","plugin"]);
I need to pass several keywords to this function so that it highlight all of them.
Solved:
It seems script had bug which was resolved use the following fiddle with complete script for array based search highlight script source
Fiddle: http://fiddle.jshell.net/ogyyvvog/2/

It gets error when running your code
pat.toUpperCase is not a function
pat should be array, maybe you can fix it in this way?
return this.length && pat && pat.length ? this.each(function () {
for(var i=0;i<pat.length;i++)
innerHighlight(this, pat[i].toUpperCase());
}) : this;
jsfiddle

Declaration syntax is correct
$("#article").highlight(["me","highlight","plugin"]);
You just need to correctly include the plugin in your jsfiddle. Do not include tag script, use instead "External Resources" menu... check updated demo

You can use my highlighting plugin jQuiteLight, that can easily work with both arrays and also regular expressions.
// for strings
$(".element").mark("query here");
// for RegExp
$(".element").mark(new RegExp(/query reg[a-zA-Z]+/));
// for array
$(".element").mark(["string query", new RegExp(/query arr[a-z]+/)]);

Javascript error while using teamplate in ExtJS combobox (IE only)

I am using ExtJs 4.1.1 & my application is having a combobox. I have added TPL to the combobox. Everything works fine expect when the data have special characters like single quote (apostrophe). If I remove TPL application does not throw any JS error. The error occurs only in IE. I am using IE 10.
How can I ensure there is no java script error even when data is having special character.
Here is a fiddle

In your template you're using the record data in the javascript code in the onclick attribute:
onClick="Ext.PA.getController(\'MyController\').ShowSharedQueryWindow(\'{Name}\');"
When the record contains a single quote the template will produce a syntax error in that javascript code:
Ext.PA.getController('MyController').ShowSharedQueryWindow('query's');
You'll need to escape the record's attribute to prevent that:
onClick="Ext.PA.getController(\'MyController\').ShowSharedQueryWindow(\'{Name:htmlEncode:htmlEncode}\');"
The :htmlEncode is a shorthand which can be used in XTemplates to invoke functions of Ext.util.Format.
Edit: You will need to double encode it, once for the template and once again for the generated JavaScript code (see updated code above).
Fwiw, using an onclick listener in HTML generated by a XTemplate does not seem like the best approach to me. Generally I'd like to avoid adding listener via HTML when I'm working with ExtJS.
You could use an itemclick listener on the combobox's bound list instead which calls the corresponding function if the link was clicked:
combo.getPicker().on({
'itemclick': function(view, record, node, index, e) {
if (e.getTarget().tagName == 'a') {
Ext.PA.getController('MyController').ShowSharedQueryWindow(record.get('Name'));
}
}
});
That way, you'll also avoid the escaping problem.