Looking to create a page where a sentence can be written and displayed in a well-designed format on the right using Jquery live preview. However, currently the design only loads after writing and reloading the page. Any suggestions on how to generate the design directly upon writing?
Check out my current page here (to see the effect: write something and reload the page)
visit this updated JSFiddle by Pugazh
https://i.sstatic.net/9hkqc.jpg
Here is the JavaScript code:
$(function() {
$('textarea.source').livePreview({
previewElement: $('p#demo'),
allowedTags: ['p', 'strong', 'br', 'em', 'strike'],
interval: 20
});
});
window.onload = function wordsinblocks(self) {
var demo = document.getElementById("demo"),
initialText = demo.textContent,
wordTags = initialText.split(" ").map(function(word){
return '<span class="word">' + word + '</span>';
});
demo.innerHTML = wordTags.join('');
self.disabled = true;
fitWords();
window.addEventListener('resize', fitWords);
}
function fitWords(){
var demo = document.getElementById("demo"),
width = demo.offsetWidth,
sizes = [7.69230769230769,23.07692307692307,46.15384615384614, 100],
calculated = sizes.map(function(size){return width*size/100}),
node,
i,
nodeWidth,
match,
index;
for (i=0;i<demo.childNodes.length;i++){
node = demo.childNodes[i];
node.classList.remove('size-1','size-2','size-3','size-4');
nodeWidth = node.clientWidth;
match = calculated.filter(function(grid){
return grid >= nodeWidth;
})[0];
index = calculated.indexOf(match);
node.classList.add( 'size-' + (index+1));
}
}