How to implement this Javascript to Blogger? - javascript

Please help, I can't implement this javascript to my Blogger...
(function() {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>';
}
}
})();
You can see this Javascript work fine here : http://jsfiddle.net/tovic/AbpRD/1/

If you are seeing that following type of error when you try to add this JavaScript snippet in your theme code -
Error parsing XML: The content of elements must consist of well-formed character data or markup.
Then to resolve this error, use any of the following methods -
1. Wrap the code within a CDATA directive in the script tag. The code will look like -
<script>
//<![CDATA[
(function() {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>';
}
}
})();
//]]>
</script>
The only downside of this approach being that Blogger XML parser will ignore any data layout tags (like for example <data:blog.homepageUrl/>) within the CDATA directive. Rather than replacing them with their actual values, it will not interpret them and show them as is.
2. Escape the following characters in your code -
" is replaced with "
& is replaced with &
< is replaced with <
> is replaced with >
After escaping, the code should look like -
<script>
(function() {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i & lt; pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j & lt; num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>';
}
}
})();
</script>
The data layout tags will remain functional when following this method. Remember to not escape <> surrounding the data layout tag (aka <data:blog.homepageUrl/> will work but not <data:blog.homepageUrl/>)
3. If no data layout tags have to be included in the JavaScript. Then you can add it in an HTML/JavaScript gadget via the Layout tab instead of directly including it in the theme code.

Related

Displaying times table using javascript

As I am new to JavaScript, I am a bit confused of using the for loops in JavaScript. I have tried the times table using the below JavaScript code, but I was unsuccessful in creating the times table for 1 to 9, as displayed in the image.
var display = ""; // The table output HTML
for (i = 1; i <= 9; i++) {
var multiplier = 1;
var result = i * 1;
display += multiplier + " * " + i + " = " + result + "\xa0\xa0\xa0\xa0\xa0\xa0\xa0 " ;
}
document.getElementById("outputDiv").innerHTML = display;
I tried using nested for loops, but it left me with an error
This is where I have done with a single for loop
https://codepen.io/vbudithi/pen/LgEPwx
I tried to get the output in the below form
THANKS IN ADVANCE
Use nested loop with break line. "< br >"
Working example: https://codepen.io/anon/pen/yRyLje
var display = "";
for( i = 1; i < 10; i++){
for (j = i; j < 10; j++) {
display += i + " * " + j + " = " + j * i+ "\xa0\xa0\xa0\xa0\xa0" ;
}
display +="<br>";
}
document.getElementById("outputDiv").innerHTML = display;
just like NicolasB said, wrapping the loop in another loop
var display = ""; // The table output HTML
for(j = 1; j <= 9; j++) {
for (i = j; i <= 9; i++) {
var result = i * j;
display += j + " * " + i + " = " + result + "\xa0\xa0\xa0\xa0\xa0\xa0\xa0 " ;
}
display += "<br>";
}
document.getElementById("outputDiv").innerHTML = display;

Hide Empty Elements From Array

I have a datatable that is using standard features (pagination, sorting, searching, date range, etc.), but I also have a portion at the bottom of the table that displays the total by office. What I would like to implement, however, is a means of hiding any search results that would display as "0" for an office. For instance, if you search my table for "assistant" then Edinburgh, London, Singapore and Tokyo all display a result of "0" (since there are no assistants for any of those offices). Instead of showing those empty results how could I instead hide them?
Here is a link to my jsfiddle: https://jsfiddle.net/l337method/vhoupanz/
Here is my script:
var offices = api.column(2).data().sort().unique().toArray();
var totals = [];
for (var i = 0; i < offices.length; i++) totals.push(0);
api.rows({filter:'applied'}).every(function() {
var data = this.data();
totals[offices.indexOf(data[2])] += intVal(data[5]);
});
html = '';
for (var i = 0; i < offices.length; i++) {
html += '<br>' + offices[i] + ': ' + totals[i];
}
html += '<br'
$(api.column(4).footer()).html(html);
Try this:
html = '';
for (var i = 0; i < offices.length; i++) {
if(totals[i] > 0){
html += '<br>' + offices[i] + ': ' + totals[i];
}
}
html += '<br'
How about this:
html = [];
for (var i = 0; i < offices.length; i++) {
if (totals[i] > 0) html.push(offices[i] + ': ' + totals[i]);
}
$(api.column(4).footer()).html(html.length == 0?"":html.join('</br>'));

In a js regexp should i escape angle brackets? [duplicate]

I am trying to get a regex expression to accept < and > as my outside delimiters to grab all the content in between them.
so content like such
< tfdsfa >
should be grabbed.
Do I have to escape the < and > characters or something?
Regex generated by my script:
/<[^(>)]*>/g
Code from file:
data.method.highlight = function() {
var x = data.syntax,
text = data.$.span.html();
for (var i=0, len = x.length; i < len; i++) {
var rx;
if (x[i].range) {
rx = new RegExp(x[i].tag[0] + "[^(" + x[i].tag[1] + ")]*" + x[i].tag[1], "g");
console.log(rx);
}
else {
var temprx = x[i].tag[0];
for (var z = 1; z < x[i].tag.length; z++) {
temprx += "|" + x[i].tag[z];
}
rx = new RegExp(temprx, "g");
}
text = text.replace(rx,function (match) {
console.log("looping - range");
return '<span class="' + x[i].class.default + '">' + match + '</span>';
});
data.$.span.html(text);
}
};
Neither < nor > are metacharacters inside a regular expression.
This works for me:
'<foo> and <bar>'.match(/<[^>]*>/g); // ["<foo>", "<bar>"]
You could be having a problem when you try to insert the result into HTML and the browser thinks that it is not a valid HTML tag, like <blablabla>.

javascript printing to previous line

I have a bit of code that requires printing underscores but to the line above it, how would i do this? I'm not sure how to print the underscore to the previous line, not much experience with javascript. thanks!
var landscape = function() {
var result = "";
var flat = function(size) {
for (var count = 0; count < size; count++)
result += "_";
};
var hill = function(size) {
result += " /";
for (var count = 0; count < size; count++)
result += ""+
"_";
result += " \\";
};
//BUILD SCRIPT
flat(3)
hill(4);
flat(6);
hill(1);
flat(1);
//END SCRIPT
return result;
it makes this ___ /____ \______ /_ \_`enter code here`enter code here`
and i want this
_____ ___
___/ \__/ \____/\_
You can keep track of the two lines separately and then concatenate them just before returning the result.
JS:
function landscape() {
var resultTop = '';
var resultBottom = '';
function hill(size) {
resultTop += ' ';
resultBottom += '/';
for (var i = 0; i < size; i++) {
resultTop += '_';
resultBottom += ' ';
}
resultTop += ' ';
resultBottom += '\\';
}
function flat(size) {
for (var i = 0; i < size; i++) {
resultTop += ' ';
resultBottom += '_';
}
}
flat(3);
hill(4);
flat(6);
hill(1);
flat(1);
var result = resultTop + '<br/>' + resultBottom;
return result;
}
Here's a fiddle.
One workaround is to print a unicode character that draws a line on top. Turns out there is such a character: the Upper One-eighth Block
It's "\u2594" in unicode escape or ▔ as HTML entity or you can simply copy/paste the literal character from the example below:
____/▔▔▔▔\____/▔▔\___

Fiddle works - actual web page does not - <code> <pre>

http://jsfiddle.net/tovic/AbpRD/
Fiddle has JavaScript, HTML, CSS
When code is placed in web page and rendered it does not
behave as the fiddle does (i.e. no line numbers)
(function () {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>';
}
}
})();

Categories

Resources