We Keep Coding

How to stop infinite loop in subtle-slidershow.js?

how can I stop the infinite loop of the following Ken-Burns-Slider-script? I have 3 pictures and I would like to stop the slider after animation of the third picture. Try with stop() of slideRefresh did not work (or my coding was bad).
The full code of the script can be seen on GitHub. Thanks for your help.
(function($){
$.fn.slideshow = function(options){
var slides = $(this);
var settings = $.extend({
randomize: true,
slideDuration: 6000,
fadeDuration: 1000,
animate: true,
slideElementClass: 'slide',
slideshowId: 'slideshow'
}, options);
}
$('<div id="' + settings.slideshowId + '"></div>').insertBefore(slides);
var slideshow = $('#' + settings.slideshowId);
var slideTimeDelta = 0;
var resumeStartTime = 0;
var resumeTimer;
if(settings.animate == true){
var cssAnimationDuration = settings.slideDuration + settings.fadeDuration;
}else{
slides.find('.' + settings.slideElementClass + ' span.animate').removeClass('animate');
var cssAnimationDuration = 0;
}
console.log('Slideshow initialized.');
slides.find('.' + settings.slideElementClass + ':first span.animate').addClass('active').css('animation-duration', cssAnimationDuration + 'ms')
slides.find('.' + settings.slideElementClass + ':first').prependTo(slideshow);
var currentSlideStartTime = Date.now();
// Start interval loop
slidesInterval = setInterval(slideRefresh, settings.slideDuration);
console.log('Slideshow started.');
if(settings.pauseOnTabBlur == true){
$(window).focus(function() {
console.log('Window gained focus.');
if (paused == true) {
console.log('Resuming slideshow.');
resumeStartTime = Date.now();
paused = false;
$('#' + settings.slideshowId + ' span.active:last').removeClass('paused');
resumeTimer = setTimeout(function(){
slideTimeDelta = 0;
slideRefresh();
slidesInterval = setInterval(slideRefresh, settings.slideDuration);
}, settings.slideDuration - slideTimeDelta);
}
}).blur(function() {
paused = true;
console.log('Window lost focus, slideshow paused.');
if(slideTimeDelta != 0){
var timeSinceLastPause = Date.now() - resumeStartTime;
slideTimeDelta = slideTimeDelta + timeSinceLastPause;
console.log('Time since last pause within this slide: ' + timeSinceLastPause + ' ms');
}else{
slideTimeDelta = Date.now() - currentSlideStartTime;
}
console.log('Current slide at ' + slideTimeDelta + ' ms.');
$('#' + settings.slideshowId + ' span.active:first').addClass('paused');
clearInterval(slidesInterval);
clearTimeout(resumeTimer);
});
}
function slideRefresh() {
console.log('Slide refresh triggered.');
currentSlideStartTime = Date.now();
var slideshowDOM = slideshow[0];
if(slideshowDOM.children.length == 0) {
console.log('There are no slides in the slideshow.');
slides.find('.' + settings.slideElementClass + ':first').prependTo(slideshow);
}else{
slides.find('.' + settings.slideElementClass + ':first').prependTo(slideshow);
var slideElement = '#' + settings.slideshowId + ' .' + settings.slideElementClass;
$(slideElement + ':first span.animate').addClass('active').css('animation-duration', cssAnimationDuration + 'ms');
$(slideElement + ':last').fadeOut(settings.fadeDuration, function(){
$(slideElement + ':last span.animate').removeClass('active').css('animation-duration', '0ms');
$(slideElement + ':last').appendTo(slides);
slides.find('.' + settings.slideElementClass).show(0);
});
}
}
};
}( jQuery ));

Calculate font size based on characters in jquery

I'm trying to create method which will read the all characters in text box and return font size value.
my function is not working correct. Below is my code
function sizeInput(input) {
return shrinkToFill(input, 48, '', 'Impact');
}
function shrinkToFill(input, fontSize, fontWeight, fontFamily) {
var font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
var $input = $(input);
var maxWidth = $input.width() - 50;
// we're only concerned with the largest line of text.
var longestLine = $input.val().split('\n').sort(function (a, b) {
return measureText(a, font).width - measureText(b, font).width;
}).pop();
var textWidth = measureText(longestLine, font).width;
if (textWidth >= maxWidth) {
// if it's too big, calculate a new font size
// the extra .9 here makes up for some over-measures
fontSize = fontSize * maxWidth / textWidth * 0.9;
font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
// and set the style on the input
}
else {
font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
// and set the style on the input
}
$input.css({
'font-size': fontSize
});
return fontSize;
}
var measureText = function (str, font) {
str = str.replace(/ /g, ' ');
var id = 'text-width-tester';
var $tag = $('#' + id);
if (!$tag.length) {
$tag = $('<span id="' + id + '" style="display:none;font:' + font + ';">' + str + '</span>');
$('body').append($tag);
} else {
$tag.css({
font: font
}).html(str);
}
return {
width: $tag.width(),
height: $tag.height()
};
};
var topText = $('#topText');
var bottomText = $('#bottomText');
var textUpdated = function () {
var topFontSize = sizeInput(topText);
var bottomFontSize = sizeInput(bottomText);
};
It doesn't return any error but it doesn't work.

Here you go with the solution https://jsfiddle.net/5bdLomyp/2/
var sizeInput = function(input) {
return shrinkToFill(input, 48, '', 'Impact');
}
var shrinkToFill = function(input, fontSize, fontWeight, fontFamily) {
var font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
var $input = $(input);
var maxWidth = $input.width() - 50;
// we're only concerned with the largest line of text.
var longestLine = $input.val().split('\n').sort(function (a, b) {
return measureText(a, font).width - measureText(b, font).width;
}).pop();
var textWidth = measureText(longestLine, font).width;
if (textWidth >= maxWidth) {
// if it's too big, calculate a new font size
// the extra .9 here makes up for some over-measures
fontSize = fontSize * maxWidth / textWidth * 0.9;
font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
// and set the style on the input
}
else {
font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
// and set the style on the input
}
$input.css({
'font-size': fontSize
});
return fontSize;
}
var measureText = function (str, font) {
str = str.replace(/ /g, ' ');
var id = 'text-width-tester';
var $tag = $('#' + id);
if (!$tag.length) {
$tag = $('<span id="' + id + '" style="display:none;font:' + font + ';">' + str + '</span>');
$('body').append($tag);
} else {
$tag.css({
font: font
}).html(str);
}
return {
width: $tag.width(),
height: $tag.height()
};
};
var topText = $('#topText');
var bottomText = $('#bottomText');
$('#topText, #bottomText').keyup(function(){
var topFontSize = sizeInput(topText);
var bottomFontSize = sizeInput(bottomText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="topText" class="hide text-tool top-text" type="text" placeholder="Top Text" />
<input id="bottomText" class="hide text-tool bottom-text" type="text" placeholder="Bottom Text" />
I guess this is what you are looking for.
Instead of using onkeyup or onchange in HTML, I have used jQuery keyup feature.

Here is the Answer :
function getFontSize(targetInput) {
var input = $("<input>").css({ "width": "570px", "height": "52px", "text-align": "center", "font-size": "48px" })
.val($(targetInput).val());
var topFontSize = sizeInput(input);
return topFontSize;
}

Preview not display straight away

When I click on my button's at top of textarea it opens either a hyperlink modal or a image insert modal shown in codepen example below.
I can create and insert links and images fine.
How ever when I create the links or image and click save on modal the preview does not show straight away I have to press a key in textarea to see new changes in preview.
Question: When I add a new hyperlink or image from my bootstrap modal
and click save how can I make sure the changes show up in preview
straight away. Using showdown.js
CODEPEN EXAMPLE
Script
$("#message").on('keyup paste copy change', function() {
var text = document.getElementById('message').value,
target = document.getElementById('showdown'),
converter = new showdown.Converter({parseImgDimensions: true}),
html = converter.makeHtml(text);
target.innerHTML = html;
});
Full Script
$('#button-link').on('click', function() {
$('#myLink').modal('show');
});
$('#button-image').on('click', function() {
$('#myImage').modal('show');
});
$('#button-smile').on('click', function() {
$('#mySmile').modal('show');
});
$('#myLink').on('shown.bs.modal', function() {
var textarea = document.getElementById("message");
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var selectedText = textarea.value.substring(start, end);
$('#link_title').val(selectedText);
$('#link_url').val('http://');
});
$('#myImage').on('shown.bs.modal', function() {
$("#image_url").attr("placeholder", "http://www.example.com/image.png");
});
$("#save-image").on('click', function(e) {
var textarea = document.getElementById("message");
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var selectedText = textarea.value.substring(start, end);
var counter = findAvailableNumber(textarea);
var replace_word = '![enter image description here]' + '[' + counter + ']';
if (counter == 1) {
if ($('input#image_width').val().length > 0) {
var add_link = '\n\n' + ' [' + counter + ']: ' + $('#image_url').val() + ' =' + $('input#image_width').val() + 'x' + $('input#image_height').val();
} else {
var add_link = '\n\n' + ' [' + counter + ']: ' + $('#image_url').val();
}
} else {
var add_link = '\n' + ' [' + counter + ']: ' + $('#image_url').val();
}
textarea.value = textarea.value.substring(0, start) + replace_word + textarea.value.substring(end,len) + add_link;
});
$("#save-link").on('click', function(e) {
var textarea = document.getElementById("message");
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var selectedText = textarea.value.substring(start, end);
var counter = findAvailableNumber(textarea);
if ($('#link_title').val().length > 0) {
var replace_word = '[' + $('#link_title').val() + ']' + '[' + counter + ']';
} else {
var replace_word = '[enter link description here]' + '[' + counter + ']';
}
if (counter == 1) {
var add_link = '\n\n' + ' [' + counter + ']: ' + $('#link_url').val();
} else {
var add_link = '\n' + ' [' + counter + ']: ' + $('#link_url').val();
}
textarea.value = textarea.value.substring(0, start) + replace_word + textarea.value.substring(end,len) + add_link;
});
function findAvailableNumber(textarea){
var number = 1;
var a = textarea.value;
if(a.indexOf('[1]') > -1){
//Find lines with links
var matches = a.match(/(^|\n)\s*\[\d+\]:/g);
//Find corresponding numbers
var usedNumbers = matches.map(function(match){
return parseInt(match.match(/\d+/)[0]); }
);
//Find first unused number
var number = 1;
while(true){
if(usedNumbers.indexOf(number) === -1){
//Found unused number
return number;
}
number++;
}
}
return number;
}
$("#message").on('keyup paste copy change', function() {
var text = document.getElementById('message').value,
target = document.getElementById('showdown'),
converter = new showdown.Converter({parseImgDimensions: true}),
html = converter.makeHtml(text);
target.innerHTML = html;
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

Just trigger the keyup event at the end of the $("#save-link").on('click', function(e) {});
I assume as jQuery setting value doesn't trigger any of the related events set on $("#message")
$("#message").trigger('keyup');
Just tested on the codepen and works fine,
$("#save-link").on('click', function(e) {
//All your code
// ....
$("#message").trigger('keyup');
});
I hope this helps !!

for loop execute slow for large data

I have a for loop that take too long to execute large amount of data:
for (var itm = 0; itm < itmCount; itm++) {
var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[itm].name + ']');
var thisCell = $('#' + gridName + '_' + columnNames[itm].name + ' div');
$('#widthTest').html(thisCell.text()).css({
'font-family': thisCell.css('font-family'),
'font-size': thisCell.css('font-size'),
'font-weight': thisCell.css('font-weight')
});
var maxWidth = Width = $('#widthTest').elementRealWidth() + 17;
var itm2Count = curObj.length;
// Loop through Rows
for (var itm2 = 0; itm2 < itm2Count; itm2++) {
var thisCell = $(curObj[itm2]);
$('#widthTest').html(thisCell.html()).css({
'font-family': thisCell.css('font-family'),
'font-size': thisCell.css('font-size'),
'font-weight': thisCell.css('font-weight')
});
thisWidth = $('#widthTest').elementRealWidth();
if (thisWidth > maxWidth) {maxWidth = thisWidth+10;}
}
$('#' + gridName + ' .jqgfirstrow td:eq(' + itm + '), #' + gridName + '_' + columnNames[itm].name).width(maxWidth).css('min-width', maxWidth+17);
$('#' + gridName + ' .jqgfirstrow td:eq(' + 0 + '), #' + gridName + '_' + columnNames[0].name).width('30').css('min-width', '30px');
I get this issue from firefox:
A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.
and the Chrome kills the page. Any idea?
UPDATE:
Here is my code after doing chunk:
var itmCount = columnNames.length;
var numOfElements = itmCount;
var elementsPerChunk = 50;
var numOfChunks = numOfElements / elementsPerChunk; //divide it into chunks
for (var x = 0; x < numOfChunks; x++) {
setTimeout(function() {
for (var y = 0; y < elementsPerChunk; y++) {
var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[elementsPerChunk].name + ']');
var thisCell = $('#' + gridName + '_' + columnNames[elementsPerChunk].name + ' div');
$('#widthTest').html(thisCell.text()).css({
'font-family': thisCell.css('font-family'),
'font-size': thisCell.css('font-size'),
'font-weight': thisCell.css('font-weight')
});
var maxWidth = Width = $('#widthTest').elementRealWidth() + 17;
var itm2Count = curObj.length;
// Loop through Rows
for (var itm2 = 0; itm2 < itm2Count; itm2++) {
var thisCell = $(curObj[itm2]);
$('#widthTest').html(thisCell.html()).css({
'font-family': thisCell.css('font-family'),
'font-size': thisCell.css('font-size'),
'font-weight': thisCell.css('font-weight')
});
thisWidth = $('#widthTest').elementRealWidth();
if (thisWidth > maxWidth) {maxWidth = thisWidth+10;}
}
$('#' + gridName + ' .jqgfirstrow td:eq(' + elementsPerChunk + '), #' + gridName + '_' + columnNames[elementsPerChunk].name).width(maxWidth).css('min-width', maxWidth+17);
$('#' + gridName + ' .jqgfirstrow td:eq(' + 0 + '), #' + gridName + '_' + columnNames[0].name).width('30').css('min-width', '30px');
//grid.setRowData ( iids[itm], false, {height: 30} );
}
}, 0);
}

Try to keep in mind that JavaScript is entirely browser sided. Each browser will respond differently when it thinks your code times out. Furthermore, you can't bypass these errors. A great example would be chromes option to "stop this website from displaying anymore pop-ups." These features are added for the convenience of the end user and usually fix security holes or inform the user that the website is simply taking a while (which most users don't like)
One idea is to find a way to split up the amount of data you process. it seems like the issue, as you stated, is with large amounts of data. Is there a way to split the data up into "pages" and process, say, 50 items at a time?
If you can create stop points while it's updating that would work as well. The browser locks up while JavaScript runs which is a big part of the problem.
Finally, consider processing data on the server side and sending/receiving it with Ajax. This will let the browser/user work while your code is processed elsewhere and only stops to receive new data.
EDIT:
To address your comment:
Using math you could use nested for-loops to split the processing load into chunks of 50:
var numOfElements = /*how ever you count the records*/;
var elementsPerChunk = 50;
var numOfChunks = numOfElements / elementsPerChunk; //divide it into chunks
for (x = 0; x < numOfChunks; x++) {
//Set Time out
for (y = 0; y < elementsPerChunk; y++) {
//Rest of code
}
}
Note:
The above isn't perfect, for instance, you have to run the loop 1 more time to account for any sets of records that is not evenly divisible by 50 but you do not want to loop again if it is divisible by 50 (probably us mod operator to determine if there is a remainder and then add 1 if there is).

MultiSelect : Object expected. Jquery does not work in IE. Works well in Firefox

The following Jquery code works well in Firefox but throws exception in IE. Please help. The following code will render a multi select box where you can drag and drop values from one box to other. The code when run in IE throws an object expected expception. As it in inside a large page, the actual place of bug can not be identified.
$(document).ready(function() {
//adding combo box
$(".combo").each(function() {
var name = "to" + $(this).attr('name');
var $sel = $("<select>").addClass("multi_select");
$sel.addClass("combo2");
$sel.attr('id', $(this).attr('id') + "_rec");
$(this).after($sel);
});
$(".multi_select").hide();
var $tab;
var i = 0;
var temp = 0;
//creating different div's to accomodate different elements
$(".multi_select").each(function() {
var $cont = $("#container");
var $input;
if ($(this).hasClass("combo") || $(this).hasClass("combo2")) {
var $col = null;
if ($(this).hasClass("combo")) {
$tab = $("<table>");
$cont = ($tab).appendTo($cont);
var idT = $(this).attr('id');
var $row = $("<tr id='" + idT + "_row1'>").appendTo($tab);
$col = $("<td id='" + idT + "_col1'>").appendTo($row);
$input = $("<input class='searchOpt'></input><img src='images/add.png' class='arrow1'/> ");
$("<div>").addClass('ip_outer_container combo').attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($col);
($row).after("<tr><td></td><td><textarea name='" + $(this).attr("name") + "Text' id='" + $(this).attr("id") + "Text'></textarea> </td></tr>");
$cont = $tab;
} else {
var idTm = $(this).attr('id');
var $row2 = $("<tr id='" + idTm + "_row2'>").appendTo($tab);
var $col2 = $("<td id='" + idTm + "_col2'>").appendTo($row2);
$input = $("<input class='searchOpt'></input>");
$("<div>").addClass('ip_outer_container combo2').attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($col2);
}
} else {
$("<div>").addClass('ip_outer_container' + classSelect).attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($cont);
}
$("<div>").addClass('outer_container').attr('id', $(this).attr('id') + "_div").appendTo('#' + $(this).attr('id') + "out_div");
$($input).appendTo("#" + $(this).attr('id') + "out_div");
});
//adding options from select box to accomodate different //elements
$(".multi_select option").each(function() {
$(this).attr('id', $(this).parent().attr('id') + "option_" + i);
var val = $(this).val().replace("#comment#", "");
var $d = $("<div class='multi_select_div'>" + val + "</div>").attr('id', $(this).parent().attr('id') + 'option_div_' + i);
$d.appendTo("#" + $(this).parent().attr('id') + "_div");
i++;
});
//delete function
$(".delete").click(function() {
$(this).parent().remove();
});
//input
$(".searchOpt").keyup(function() {
$(this).prev().children().show();
var val = $(this).val();
if (val != "") {
var selId = $(this).prev().attr('id');
selId = selId.replace("_div", "option_div");
$(this).prev().children().not("div[id^=" + selId + "]:contains(" + val + ")").hide();
//var $d=$('div[id^="multi_select_senoption_div"]');
//$('div[id^="multi_select_senoption_div"]').not('div[id^="multi_select_senoption_div"]:contains("xls")').hide();
}
});
var optionId = 0;
$(".arrow1").click(function() {
var divId = $(this).parent().attr("id");
divId = divId.replace("out_div", "");
var textValue = "#comment#" + $("#" + divId + "Text").val();
var selToId = divId + "_rec";
$("#" + divId + " option[selected='selected']").each(function() {
var idOpt = $("#" + selToId).attr("id") + "option_" + optionId;
$opt = $("<option>");
$opt.attr("id", idOpt).attr("value", $(this).val() + textValue);
$("#" + selToId).append($opt);
var value = $(this).val().replace("#comment#", "");
var divId = $("#" + selToId).attr('id') + 'option_div_' + optionId;
var $de = $("<div class='multi_select_div'><img class='delete' src='images/delete.png'></img>" + value + "</div>").attr('id', divId);
$de.appendTo("#" + $("#" + selToId).attr('id') + "_div");
$("#" + divId).bind("click", handler);
var optId = divToOption($(this).attr("id"));
var optValue = $(optId).val();
var comment = optValue.substring(optValue.indexOf("#comment#") + 9);
$("#" + divId).attr("title", textValue.replace("#comment#", ""));
//$("#"+divId).bind("mouseenter",handler2);
//$("#"+divId).bind("mouseleave",handler3);
$(".delete").bind("click", handler1);
optionId++;
});
// function code
//
});
$(".multi_select_div").click(function() {
var id = divToOption($(this).attr('id'));
var selected = $(id + "[selected]");
if (selected.length > 0) {
$(id).attr('selected', false);
var cssObj = {
'background-color': 'black'
};
$(this).css(cssObj);
}
else {
$(id).attr('selected', 'selected');
var cssObj = {
'background-color': 'orange'
};
$(this).css(cssObj);
}
});
function handler(event) {
var id = divToOption($(this).attr('id'));
var selected = $(id + "[selected]");
if (selected.length > 0) {
$(id).attr('selected', false);
var cssObj = {
'background-color': 'black'
};
$(this).css(cssObj);
}
else {
$(id).attr('selected', 'selected');
var cssObj = {
'background-color': 'orange'
};
$(this).css(cssObj);
}
}
function handler1(event) {
$(this).parent().remove();
}
function handler2(event) {
var optId = divToOption($(this).attr("id"));
var optValue = $(optId).val();
var comment = optValue.substring(optValue.indexOf("#comment#") + 9);
var pos = $(this).position();
var cssObj = {
top: pos.top - 100,
left: pos.left + 200
};
var $divImg = $("<td>");
var $divCl = $("<div class='comment'>" + comment + "</div>").css(cssObj);
$divImg.append($divCl);
$(this).parent().parent().parent().parent().append($divImg);
}
function handler3(event) {
$(".comment").remove();
}
});
function optionToDiv(option) {
var id_div = option.replace('option_', 'option_div_');
id_div = "#" + id_div;
return id_div;
}
function divToOption(div) {
var id_opt = div.replace('div_', '');
id_opt = "#" + id_opt;
return id_opt;
}​

IE browsers do not support indexOf for an array, which arises issue with javascript.
Add the below javascript in the head of the page, it might resolve your issue:
//
// IE browsers do not support indexOf method for an Array. Hence
// we add it below after performing the check on the existence of
// the same.
//
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function (obj, start)
{
for (var i = (start || 0), j = this.length; i < j; i++)
{
if (this[i] === obj)
{
return i;
}
}
return -1;
};
}