Wait for end of resize event (jQuery)

Published on September 20, 2018 by admin Category: jQuery

ref – https://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-ac?noredirect=1

function resizedw(){

// Haven't resized in 100ms!

}

var doit;

window.onresize = function(){

clearTimeout(doit);

doit = setTimeout(resizedw, 100);

};

num of lines v2

Published on September 20, 2018September 20, 2018 by admin Category: Uncategorized

todo –

given a that a previous space exists:

usually when we pass the limit with a letter, we shift down to the next line, and keep going with the word after the ‘previous space’.

“abcde fghijk”(‘l’ passed limit)

becomes

“abcde
fghijklmn”

However, there is a case where if the offending letter that went passed the limit has a space for the next value….

for example, given “abc def ghi jkl mno”…

abc def ghi (‘i’ passed limit)

then in this particular situation..

1) we include the offending letter as the previous string
2) break line
3) start next line with space

“abc def ghi”
” jkl mno”

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

$(document).ready(function() {

// test cases

//var TEXT = 'abcdefghijklmnopqrstuvwxyz';

//var TEXT = 'abcdefghijklm abcdefghijklmnopqrstuvwxyz nop';

//var TEXT = 'abc defghijklmnop';

//var TEXT = 'abc defghijklm nop';

//var TEXT = 'abc def ghi jkl mama nop';

//var TEXT = 'def ghi jkl';

//var TEXT = 'lll lll lll lll ll';

//var TEXT = 'lll lll lll lll lll';

//var TEXT = 'a b c d e f g h i j k l m n o p q r s t u v w x y z';

//var TEXT = 'T1_00000001 / 020 - 000 0 0 / haha / lin';

var TEXT = 'T1_00000001 / 020 - 000000 / welcome to your doooom!! / haha 0 001';

// jQuery func

$(window).resize(function() {

$("#para a").text(TEXT);

var para = document.querySelector("#para a");

var font = window.getComputedStyle(para).getPropertyValue('font-family');

font = font.replace(/"/g, ''); // remove all quotes

var fontSize = window.getComputedStyle(para).getPropertyValue('font-size');

fontSize = fontSize.replace(/"/g, ''); // remove all quotes

var styleWidth = $("#para").css("width");

styleWidth = styleWidth.slice(0, styleWidth.length-2);

var temp = new DblLineWithEllipsis(TEXT, $.fn.textWidth, styleWidth, font, fontSize);

var num = temp.calcNumOfLines(font, fontSize);

});

$.fn.textWidth = function(text, font, fontSize) {

if (!$.fn.textWidth.placeholderEl) $.fn.textWidth.placeholderEl

= $('<span>').appendTo(document.body);

var validText = text || this.val() || this.text();

font = font.replace(/"/g, '');

$.fn.textWidth.placeholderEl.text(validText).css({'font-family': font, 'font-size': fontSize});

return $.fn.textWidth.placeholderEl.width();

};

// DblLineWithEllipsis

function DblLineWithEllipsis(newParagraph, calcTextWidthFunc, width, newFont, newFontSize) {

this._paragraph = newParagraph;

this._textWidthFunc = calcTextWidthFunc;

this._font = newFont;

this._fontSize = newFontSize;

this.LIMIT = width

this._paragraphFormat = [];

this._paragraphFormatCur = 0;

this._totalTextWidth = 0;

this._placeHolderInDOM;

}

DblLineWithEllipsis.prototype.getCharWidth = function (str, callback) {

if (str == ' ') {callback(0, true);}

else {callback(this._textWidthFunc(str, this._font, this._fontSize), false);}

}

DblLineWithEllipsis.prototype.textWidthPastLimit = function() {return (this._totalTextWidth >= this.LIMIT);}

DblLineWithEllipsis.prototype.storeString = function(strHolder) {this._paragraphFormat[this._paragraphFormatCur++] = strHolder;}

DblLineWithEllipsis.prototype.charIsSpace = function(ch) {return (ch == ' ');}

DblLineWithEllipsis.prototype.splitHoldStringByLastSpace = function(offendingChar, strHolder) {

var indexOfLastSpace = strHolder.lastIndexOf(' ');

var prev = strHolder.slice(0, indexOfLastSpace+1);

console.log('prev is: ' + prev);

this.storeString(prev);

console.log(this._paragraphFormat);

var next = strHolder.slice(indexOfLastSpace+1, strHolder.length);

console.log('next is: ' + next);

return next;

}

DblLineWithEllipsis.prototype.calculateWidthOfSpace = function(before, after) {

var a = $.fn.textWidth(before, this._font, this._fontSize);

var b = $.fn.textWidth(after, this._font, this._fontSize);

var together = before + ' ' + after;

var c = $.fn.textWidth(together, this._font, this._fontSize);

return (c-b-a);

}

DblLineWithEllipsis.prototype.calcNumOfLines = function() {

console.log('limit: ' + this.LIMIT);

var characterArray = this._paragraph.split('');

var holder = "";

var previousSpaceExists;

var self = this;

for (var i = 0; i < characterArray.length; i++) {

this.getCharWidth(characterArray[i], function(width, isSpace) {

if (isSpace && width==0) {

previousSpaceExists = true;

width = self.calculateWidthOfSpace(self._paragraph[i-1], self._paragraph[i+1]);

}

self._totalTextWidth += width;

console.log("adding " + characterArray[i] + " width of " + width + ", total is: " + self._totalTextWidth);

});

holder += characterArray[i];

if (this.textWidthPastLimit()) {

console.log('past limit with char |' + characterArray[i]+'|');

if (this.charIsSpace(characterArray[i])) {

this.storeString(holder);

holder = '';

this._totalTextWidth = 0;

} else if (previousSpaceExists) {

previousSpaceExists = false;

console.log("|"+holder+"|");

holder = this.splitHoldStringByLastSpace(characterArray[i], holder);

this._totalTextWidth = this._textWidthFunc(holder, this._font, this._fontSize);

console.log('continuing on with width: ' + this._totalTextWidth);

}

this.storeString(holder);

console.log(this._paragraphFormat);

return this._paragraphFormat.length;

}

$("#para a").text(TEXT);

var para = document.querySelector("#para a");

var font = window.getComputedStyle(para).getPropertyValue('font-family');

font = font.replace(/"/g, ''); // remove all quotes

var fontSize = window.getComputedStyle(para).getPropertyValue('font-size');

fontSize = fontSize.replace(/"/g, ''); // remove all quotes

var styleWidth = $("#para").css("width");

styleWidth = styleWidth.slice(0, styleWidth.length-2);

var temp = new DblLineWithEllipsis(TEXT, $.fn.textWidth, styleWidth, font, fontSize);

var num = temp.calcNumOfLines(font, fontSize);

});

html

<!DOCTYPE html>

<head>

<title>Number of lines in a paragraph when squished into an element</title>

<style>

#para {width: 20%;}

</style>

<body>

</div>

</body>

</html>

try it: using height

Published on September 19, 2018September 19, 2018 by admin Category: Uncategorized

function numOfLines(textInEle, eleSel) {

var para = win.document.querySelector(eleSel);

var font = win.getComputedStyle(para).getPropertyValue('font-family');

var fontSize = win.getComputedStyle(para).getPropertyValue('font-size');

font = font.replace(/"/g, '');

var HEIGHT_OF_LINE = $.fn.textHeight('LoReM iPsUm', eleSel, font, fontSize);

var b = $.fn.textHeight(textInEle, eleSel, font, fontSize);

return (b/HEIGHT_OF_LINE);

}

font-family: ‘FSElliotPro’
font-size: 14px

Number of Lines

Published on September 18, 2018September 19, 2018 by admin Category: javascript, jQuery

github source

What does it do

Calculate how many lines are there when you put a long string into a div/span that has a width.

Getting Started

First, let’s set it up. We create a div with id para. We limit it to 68px so we can see the effects of the word break.

html

<!DOCTYPE html>

<head>

<title>Number of lines in a paragraph when squished into an element</title>

<style>

#para {width: 68px; border: 1px solid red;}

</style>

<body>

</body>

</html>

1 2	$(document).ready(function() { });

Getting the width of a string involves first putting test text into your div #para. Then,

1) We need to the get element object of #para first. It will contain all the information you need about this element object. We will be using it in the next step to get font and font size info.

1	var para = document.querySelector("#para");

2) By using the global window object, we use getComputedStyle of an element object to get style information such as font-size, font-family, background-color…etc.
We do this by calling getPropertyValue on the style object that’s returned. We specify which style attribute we want to get by inserting the style name.

1	var font = window.getComputedStyle(para).getPropertyValue('font-family');

3) then the font size

1	var fontSize = window.getComputedStyle(para).getPropertyValue('font-size');

4) Using JQuery, create a span in your DOM.
Using jQuery, insert your text, apply the font and font size, and call width on it.
It will give you the pixel width on it.

The $.fn is an alias for jQuery.prototype which allows you to extend jQuery with your own functions.
We create our own function textWidth. It takes a paragraph, font, and a fontSize. Then it returns you
the width in pixels.

We first check to see if there’s a property placeholderEl. If it doesn’t exist, we attach the property
to our function. We then create a span element object and append it to the document’s body. We attach the
property placeholderEl to that span object.

We then insert the text into the span, and apply the font and font size to the text using css function.
then we call width on the span object to get the pixel.

$.fn.textWidth = function(text, font, fontSize) {

if (!$.fn.textWidth.placeholderEl) $.fn.textWidth.placeholderEl

= $('<span>').appendTo(document.body);

var validText = text || this.val() || this.text();

font = font.replace(/"/g, '');

$.fn.textWidth.placeholderEl.text(validText).css({'font-family': font, 'font-size': fontSize});

return $.fn.textWidth.placeholderEl.width();

};

thus, so far, you should have something like this in your JS file:

$(document).ready(function() {

// jQuery func

$.fn.textWidth = function(text, font, fontSize) {

if (!$.fn.textWidth.placeholderEl) $.fn.textWidth.placeholderEl

= $('<span>').appendTo(document.body);

var validText = text || this.val() || this.text();

font = font.replace(/"/g, '');

$.fn.textWidth.placeholderEl.text(validText).css({'font-family': font, 'font-size': fontSize});

return $.fn.textWidth.placeholderEl.width();

};

var TEXT = 'abc';

$("#para").text(TEXT);

var para = document.querySelector("#para");

var font = window.getComputedStyle(para).getPropertyValue('font-family');

font = font.replace(/"/g, ''); // remove all quotes

var fontSize = window.getComputedStyle(para).getPropertyValue('font-size');

fontSize = fontSize.replace(/"/g, ''); // remove all quotes

Logic

Now that we can get an accurate width of a paragraph with applied font, let’s take a look at how we’re going to tackle the issue.
note: limit means the end of the width.

A) no-space long word past limit

In the first basic situation, the long word will stay as is. This is because the browser do not break a word. It will only break a sentence, when it detects a space, but will never break a word in half.

B) long word past limit, then space

The second situation is that our long word goes past the limit. Then it has a space. In this case, we have two parts.
– The string left of the space.
– The string right of the space.

The right part of the space then gets broken and starts at the next line. The space is the last character of the first line.

C) long word past limit, with a previous space

When we reach the limit, but there was a previous space. Thus, we have two parts again.
– The string left of the space.
– The string right of the space.

The string to the right of the space gets broken and start at line two. The string left of the space, remains at line 1.

D) long word past limit, with previous multiple spaces

Sometimes, there will be multiple spaces previously. So when we hit the limit, how do we break it? The answer is that we find the last space. We don’t care any previous spaces. All we care about is the last space because we need to see how to break the substring that just went past the limit.

Implementation

We’ll do this in es5.

We first create a function to be new-ed later. It will contain the object’s property and data. We need the basic things such as:
– text (string)
– the width function we’re going to use to calculate string widths on the browser (function)
– font (string)
– fontSize (string)

We also pass in the div element’s id so that we can get the width.

function DblLineWithEllipsis(newParagraph, calcTextWidthFunc, eleSelector, newFont, newFontSize) {

this._paragraph = newParagraph;

this._textWidthFunc = calcTextWidthFunc;

this.LIMIT = $(eleSelector).width();

this._font = newFont;

this._fontSize = newFontSize;

}

var TEXT = 'abcdefghijklmnopqrstuvwxyz';

var temp = new DblLineWithEllipsis(TEXT, $.fn.textWidth, "#para", font, fontSize);

Then, let’s implement a function in the prototype so that all instances will use it.

We can easily get the width of the text by using our textWidth function. However, when you use space ‘ ‘, you’ll get 0. So we do a workaround by giving the strings ‘a’. Then a space a, (‘a a’). That way, we know the width of a. And then, can calculate the width of space.

DblLineWithEllipsis.prototype.calculateWidthOfSpace = function() {

var a = this._textWidthFunc('a', this._font, this._fontSize);

var a_space_a = this._textWidthFunc('a a', this._font, this._fontSize);

return a_space_a - (2 * a);

}

We calculate the width of the string. If the string is a space, then we simply give it the width of space, which we pass in.
However, if not a space, then we calculate it by passing our text, our font, and font size. We then pass the result into a callback to be processed by others.

DblLineWithEllipsis.prototype.getCharWidth = function (str, widthOfSpace, callback) {

if (str == ' ') {callback(widthOfSpace, true);}

else {callback(this._textWidthFunc(str, this._font, this._fontSize), false);}

}

The Logic

Given a long text, we run through each character.

1) get width of the char
2) append the width onto a total width.

for (var i = 0; i < characterArray.length; i++) {

// get width of character

// totalTextWidth += width of character

}

For every add of a width, we check to see if our total text has passed the limit.

1	DblLineWithEllipsis.prototype.textWidthPastLimit = function() {return (this._totalTextWidth > this.LIMIT);}

Thus,

for (var i = 0; i < characterArray.length; i++) {

// get width of character

// totalTextWidth += width of character

if (this.textWidthPastLimit()) {

// if current char is a space

// if previous space exists

}

using our prototype function getCharWidth. Also, notice “holder”. Holder basically holds the added character so far.
Another thing to notice is that there is a bool to check to see if a previous space exist.

...

var holder = "";

var previousSpaceExists;

...

for (var i = 0; i < characterArray.length; i++) {

this.getCharWidth(characterArray[i], SPACE_WIDTH, function(width, isSpace) {

if (isSpace) previousSpaceExists = true;

self._totalTextWidth += width;

});

holder += characterArray[i];

if (this.textWidthPastLimit()) {

}

The key is to check for situations when we hit past the limit.
If after passing the limit, and we detect a space, then we gotta save the left side of the string.

In order to do this, we use a ‘holder’ string to hold everything. Also, notice we have calculated the width of the space also.

– passed the limit
– no previous space was detected
– current char is a space

Thus, we save the everything that was held up to now. But where do we save it to?

We simply save it into an array that will represent the formatting of our paragraph.
First sentence is array[0], second array[1]…etc.

Thus, in our constructor function:

function DblLineWithEllipsis(newParagraph, calcTextWidthFunc, eleSelector, newFont, newFontSize) {

...

this._paragraphFormat = [];

this._paragraphFormatCur = 0;

}

now..back to our calcNumOfLines.

DblLineWithEllipsis.prototype.calcNumOfLines = function() {

var SPACE_WIDTH = this.calculateWidthOfSpace(this._font, this._fontSize);

var characterArray = this._paragraph.split('');

var holder = "";

holder += characterArray[i];

for (var i = 0; i < characterArray.length; i++) {

this.getCharWidth(characterArray[i], SPACE_WIDTH, function(width, isSpace) {

...

self._totalTextWidth += width;

});

holder += characterArray[i];

if (this.textWidthPastLimit()) {

if (this.charIsSpace(characterArray[i])) {

this.storeString(holder);

holder = '';

this._totalTextWidth = 0;

}

this.storeString(holder);

return this._paragraphFormat.length;

}

where

1	DblLineWithEllipsis.prototype.storeString = function(strHolder) {this._paragraphFormat[this._paragraphFormatCur++] = strHolder;}

Basically, if we pass the limit, but no space is found, we just save it. This will satisfy A).
As each additional character is processed, and we find that the current processed character is a space (assuming no previous space), then we simply store it.
This resolves B).

else if we’re past the limit and the character is NOT a space, and there was a previous space, then we resolve cases
C) and D)

for (var i = 0; i < characterArray.length; i++) {

this.getCharWidth(characterArray[i], SPACE_WIDTH, function(width, isSpace) {

if (isSpace) previousSpaceExists = true;

self._totalTextWidth += width;

});

holder += characterArray[i];

if (this.textWidthPastLimit()) {

if (this.charIsSpace(characterArray[i])) {

this.storeString(holder);

holder = '';

this._totalTextWidth = 0;

} else if (previousSpaceExists) {

previousSpaceExists = false;

holder = this.splitHoldStringByLastSpace(holder);

}

full source
https://github.com/redmacdev1988/NumberOfLines

double line with ellipsis

Published on September 18, 2018September 18, 2018 by admin Category: Uncategorized

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

$(document).ready(function() {

function calculateWidthOfSpace(font, fontSize) {

var a = $.fn.textWidth('a', font, fontSize);

var a_space_a = $.fn.textWidth('a a', font, fontSize);

return a_space_a - (2 * a);

}

function getCharWidth(str, font, fontSize, widthOfSpace, callback) {

if (str == ' ') {

callback(widthOfSpace, true);

} else {

callback($.fn.textWidth(str, font, fontSize), false);

}

function storeChar(tempStorage, ch) {

tempStorage += ch;

}

$.fn.textHeight = function(paragraph, font, fontSize) {

if (!$.fn.textHeight.placeholderEl) $.fn.textHeight.placeholderEl = $('<span>').hide().appendTo(document.body);

font = font.replace(/"/g, '');

var SPACE_WIDTH = calculateWidthOfSpace(font, fontSize);

var characterArray = paragraph.split('');

var paragraphFormat = [];

var holder = "";

var LIMIT = $("#para").width();

var totalTextWidth = 0;

var paragraphFormatCur = 0;

var previousSpaceExists = false;

for (var i = 0; i < characterArray.length; i++) {

getCharWidth(characterArray[i], font, fontSize, SPACE_WIDTH, function(width, isSpace) {

if (isSpace) previousSpaceExists = true;

totalTextWidth += width;

});

holder += characterArray[i];

if (totalTextWidth > LIMIT) {

// over limit, no space previously. But currently, there's space

if (characterArray[i] == ' ') {

textWidth = SPACE_WIDTH;

paragraphFormat[paragraphFormatCur++] = holder;

holder = '';

totalTextWidth = 0;

}

// over limit, previously was space

else if (previousSpaceExists) {

previousSpaceExists = false;

var indexOfLastSpace = holder.lastIndexOf(' ');

var prev = holder.slice(0, indexOfLastSpace);

paragraphFormat[paragraphFormatCur++] = prev;

var next = holder.slice(indexOfLastSpace+1, holder.length);

totalTextWidth = $.fn.textWidth(next, font, fontSize);

holder = next;

}

paragraphFormat[paragraphFormatCur++] = holder;

console.log(paragraphFormat);

return paragraphFormat.length;

};

$.fn.textWidth = function(text, font, fontSize) {

if (!$.fn.textWidth.placeholderEl) $.fn.textWidth.placeholderEl

= $('<span>').hide().appendTo(document.body);

var validText = text || this.val() || this.text();

font = font.replace(/"/g, '');

$.fn.textWidth.placeholderEl.text(validText).css({'font-family': font, 'font-size': fontSize});

return $.fn.textWidth.placeholderEl.width();

};

function numOfLines(textInEle, eleSel) {

var para = document.querySelector(eleSel);

var font = window.getComputedStyle(para).getPropertyValue('font-family');

var fontSize = window.getComputedStyle(para).getPropertyValue('font-size');

var fullHeight = $.fn.textHeight(textInEle, eleSel, font, fontSize);

return (fullHeight);

}

// test cases

//var TEXT = 'abcdefghijklmnopqrstuvwxyz';

//var TEXT = 'abcdefghijklm nop';

//var TEXT = 'abc defghijklmnop';

//var TEXT = 'abc defghijklm nop';

//var TEXT = 'abc def ghi jkl mama nop';

//var TEXT = 'def ghi jkl';

//var TEXT = 'lll lll lll lll ll';

//var TEXT = 'lll lll lll lll lll';

var TEXT = 'a b c d e f g h i j k l m n o p q r s t u v w x y z';

console.log('There are current '+numOfLines(TEXT, "#para") + ' number of lines');

$('#para').text(TEXT);

console.log('NOTE: width of div is '+$('#para').width()); // 68

});

Chaining Promises

Published on September 17, 2018September 17, 2018 by admin Category: Uncategorized

function getDataFromURL(url) {

return new Promise(function(resolve, reject){

setTimeout(function() {

console.log('data received from: ' + url);

resolve(url);

}, 2000);

});

}

getDataFromURL("www.giggle.com")

.then(function(msg){

return getDataFromURL("1s time: " + msg);

}).then(function(script){

return getDataFromURL("2nd time: " + script);

});

console.log('enter script');

function queryBasicData(url) {

console.log("queryBasicData - querying endpoint: " + url + " √");

return new Promise(function(resolve, reject) {

setTimeout(function() {

console.log("√ Success! Basic Data received!");

resolve(2);

}, 2000);

});

}

function queryAdvancedData(url) {

console.log("queryAdvancedData - querying endpoint: " + url + " √");

return new Promise(function(resolve, reject) {

setTimeout(function() {

console.log("√ Success! Advanced Data received!");

resolve(6);

}, 2000);

});

}

function double(x) {

return 2 * x;

}

queryBasicData("bin/rtsao/secrets/basic")

.then(function(result){

console.log("result: "+result);

return queryAdvancedData("bin/rtsao/secrets/advanced");

}).then(function(result){

console.log("result: "+result);

return result;

}).then(function(result){

return double(result);

}).then(function(result){

console.log('final reuslt is: ' + result);

})

tooltip using css and html

Published on September 12, 2018September 12, 2018 by admin Category: CSS, HTML

css

.tooltip {

position: relative;

display: inline-block;

border: 1px dotted red;

padding: 10px;

}

.tooltip .tooltiptext {

visibility: hidden;

width: 128px;

height: 28px;

background-color: black;

border: 1px solid red;

color: #fff;

text-align: center;

border-radius: 8px;

padding: 5px 0;

/* Position the tooltip */

position: absolute;

z-index: 1;

}

.tooltip:hover .tooltiptext {

visibility: visible;

top: -0px;

right: 115%;

}

.tooltip .tooltiptext::after {

content: " ";

position: absolute;

top: 50%;

left: 100%; /* To the right of the tooltip */

margin-top: -5px;

border-width: 5px;

border-style: solid;

border-color: transparent transparent transparent black;

}

.tooltip .tooltiptext {

opacity: 0;

transition: opacity 1s;

}

.tooltip:hover .tooltiptext {

opacity: 1;

}

html

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

Mustache templating for displaying data (JS)

Published on August 18, 2018September 3, 2018 by admin Category: javascript

ref –
https://github.com/janl/mustache.js/
https://medium.com/@koalamango/javascript-templating-with-mustache-js-b50919cb4f57
https://www.elated.com/articles/easy-html-templates-with-mustache/

Templates are a great way to separate your website’s code from its design.

Mustache is a logic-less template syntax. It can be used for HTML, config files, source code – anything.

It works by expanding tags in a template using values provided in a hash or object

One of Mustache’s big plus points is that is logic-less, which means it keeps your templates very neat and tidy. There are no messy if … then or looping constructs embedded within a Mustache template; it’s all just markup and simple Mustache tags. All the logic is hidden away inside your data objects (and the code that creates or fetches them).

A mustache template is a string that contains any number of mustache tags.

Tags are indicated by the double mustaches that surround them.
{{person}} is a tag, as is {{#person}}

Using mustache basics

First, we’ll include mustache js file
Second, we’ll create a template with tags
Then, we’ll use a object’s values provided by its properties
Finally, we’ll see the output from the template + object by using Mustache.render

include the mustache js file in your header

<title>basic mustache</title>

...

Create the template

The template is a string.
For example: “{{name}} is a {{occupation}}”

The tags are:
{{name}}
{{occupation}}

It expands the tags by using object view.
It looks inside this object for properties name and occupation. Then it would expand the tags with the values occupied at properties name, and occupation.

// object

var view = {

name : "Joe",

occupation : "Web Developer"

};

function loadtemp(){

let tagName = "{{name}}";

let tagOccupation = "{{occupation}}";

let template = `${tagName} is a ${tagOccupation}`;

// render the output using a given mustache template, and tags.

var output = Mustache.render(template, view);

// insert output into html

document.getElementById('person').innerHTML = output;

}

</script>

Load the template

Then, simply execute our tags, templates, objects, and render them.
Id person for paragraph p is to hold the result.

...

</body>

Another Example

This time, we introduce the concept of sections.

Sections render blocks of text one or more times, depending on the value of the key in the current context. A section begins with a hashtag and ends with a slash:

template:

My name is Pinocchio!

The behavior of the section is determined by the value of the key:

object:

{

"Robot": true

}

Since the object property is true, we display what’s between Robot tags.

My name is Pinocchio!

<!DOCTYPE html>

<head>

<title>Slide Show</title>

...

var ex2_view = {

"name": "Pinocchio",

"place": "woods",

"Robot": true, // controls the visibility of its inner content

"creature": "animals"

};

var ex2_template = `Hello {{name}}. You live in the {{place}}!

Well, you are friends with {{creature}}

{{ /Robot }}`;

function ex2_loadtemp() {

var output = Mustache.render(ex2_template, ex2_view);

document.getElementById('ex2').innerHTML = output;

}

</script>

</head>

</body>

</html>

Your output when you run the web file is:

Hello Pinocchio You live in the woods! Well, you are friends with animals

Inverted Sections

An inverted section begins with a caret (hat) and ends with a slash.

Inverted section means when its false, it displays. When true, it won’t display.

template:

No content!

object:

{

"Robot": false

}

Since Robot is false, let’s display what’s in between the Robot tags because this is an inverted section.

No content!

Another Example

In this next example, we’ll first use textarea to hold strings that can represent our templates and data objects. You can specify the strings in your html code, or simply have the user enter them via the web page.

In html, you can put the contents of the textarea in between textarea tags. Thus, that is the text that will be appear when the textarea tags are rendered on the web page. In our case, we put the template string inside the textarea with id template.

<h4>Product Info: {{name}}</h4>

<ul>

<li>Product: {{name}}</li>

<li>Colour: {{colour}}</li>

<li>Price: ${{price}}</li>

</ul>

</textarea>

When we’re processing the code, we need to get whatever the input is from the textarea “template”. Thus, we get the string from the textarea via javascript like so:

1 2	let template = document.getElementById("template"); let templateStr = template.textContent;

In, Mustache.Render(template, object), the template parameter needed is a string. Thus, our templateStr can simply be passed in.

The string we pass into the textarea “data” is the object. However, the object must be a code evaluation. In other words, we have to convert the string into code. We can use javascript’s eval function.

Remember that whatever variable you decide to use for the object in dataStr must be used in code.

var hadoken = {

"name": "SuperWidget",

"colour": "Green",

"price": "19.99"

}

In our case, it is “hadoken”.

In our js, we basically get the data from the textareas. Then pass them into Mustache.render function. It returns the result that we need.

And we finally throw that result into the html.

var hadoken = {

"name": "SuperWidget",

"colour": "Green",

"price": "19.99"

}

...

let data = document.getElementById("data"); // get the htmlElement object

let dataStr = data.textContent; // get the string

eval(dataStr); // changes string into usable code

// insert the string, and object parameters

let htmlOutput = Mustache.render(templateStr, hadoken);

// now we simply throw the output into a tag

let resultDiv = document.getElementById("result");

resultDiv.innerHTML = htmlOutput;

Source Code

html

<!DOCTYPE html>

<head>

<title>Slide Show</title>

<style>

/* enter styles code here */

</style>

// enter your js code here

</script>

<h1>A Simple Mustache Demo</h1>

<h3>Mustache Template:</h3>

<h4>Product Info: {{name}}</h4>

<ul>

<li>Product: {{name}}</li>

<li>Colour: {{colour}}</li>

<li>Price: ${{price}}</li>

</ul>

</textarea>

</div>

<h3>Data Object:</h3>

var hadoken = {

"name": "SuperWidget",

"colour": "Green",

"price": "19.99"

}

</textarea>

</div>

<div class="process"><button onclick="process()">Process Template</button></div>

<h3>How It Looks:</h3>

</div>

</div>

</body>

</html>

css

<style>

body {

font-family: "Georgia", serif;

line-height: 1.8em;

}

#wrap {

width: 57em;

}

textarea, .result div {

font-size: .8em;

width: 29em;

height: 15em;

margin: 1em 2em 2em 2em;

padding: 1em;

}

textarea {

font-family: Courier, fixed;

}

.template, .html, .data, .result {

float: left;

}

.result div {

border: 1px solid #333;

}

h3 {

display: block;

margin: 2em 0 0 1.5em;

}

.process {

display: block;

clear: both;

margin: 1em 0;

width: 56em;

text-align: center;

}

button {

font-size: 1.5em; margin-top: 1em;

}

</style>

function process() {

console.log("process it!");

let template = document.getElementById("template");

let templateStr = template.textContent;

console.log(templateStr);

// The argument of the eval() function is a string. If the string represents an expression, eval() evaluates the expression.

// evaluate the string into code to be used

let data = document.getElementById("data");

let dataStr = data.textContent;

console.log(dataStr);

eval(dataStr); // changes string into usable code

console.log(hadoken); // call the code

let htmlOutput = Mustache.render(templateStr, hadoken);

console.log(htmlOutput);

let resultDiv = document.getElementById("result");

resultDiv.innerHTML = htmlOutput;

}

</script>

Running JS files on VS Code

Published on August 18, 2018August 18, 2018 by admin Category: Uncategorized

View > Extensions

Search for “Code Runner”

make sure you install, then reload to activate the extension

in your js file, right click, then choose “Run Code”

selecting ranges with nth-child

Published on August 16, 2018August 16, 2018 by admin Category: CSS

https://stackoverflow.com/questions/15639247/css-selector-for-nth-range

Say we have a list.

<li>applebees</li>

<li>buccaneers</li>

<li>camille</li>

<li>doloris</li>

<li>elliot</li>

<li>fudge</li>

</ul>

We want to select all the list items and border it red.

ul.ex1 li {

border: 1px solid red;

}

We want to select all the odd

n index

0 1

1 3

2 5

...so index 1, 3, 5 would be colored in yellow

ul.ex1 li:nth-child(2n+1) {

background-color:yellow;

}

we want to seelct all the evens

n index

0 0

1 2

2 4

...so index 2, 4, 6 would be colored in white

ul.ex1 li:nth-child(2n) {

background-color:white;

}

We want to select ranges.

html

</ul>

css

:nth-child(n+X)

all children from the Xth position onward

:nth-child(-n+x)

all children up to the Xth position

ul.ex2 li:nth-child(n+2):nth-child(-n+3) {

border: 1px solid purple;

}

<code> blog

learning is fun!

Wait for end of resize event (jQuery)

num of lines v2

try it: using height

Number of Lines

What does it do

Getting Started

Logic

A) no-space long word past limit

B) long word past limit, then space

C) long word past limit, with a previous space

D) long word past limit, with previous multiple spaces

Implementation

The Logic

double line with ellipsis

Chaining Promises

tooltip using css and html

Mustache templating for displaying data (JS)

Using mustache basics

include the mustache js file in your header

Create the template

Load the template

Another Example

Inverted Sections

Another Example

Source Code

Running JS files on VS Code

selecting ranges with nth-child