We Keep Coding

Push older text while fading in new text

I would like new text, as it is fading in, to push the older text down instead of having new text appear after old text. Is this possible? Have been having a lot of difficulty figuring this out.
Here is the javascript:
var $el= $('.fader').map(function() {
return this;
}).get();
$el.forEach(function (eachdiv){
var text = $(eachdiv).text(),
words = text.split(".");
var html = "";
for (var i = 0; i < words.length; i++) {
html += "<span>" + words[i] + " </span>" + '<br/>';
$(eachdiv).html(html).children().hide().each(function(i){
return $(this).delay(i*200).fadeIn(200);
});
}
});
The solution does seem to involve the use of prepend, but I'm not sure where to place prepend within the code.

Try For loop like this instead of yours. Just Giving you an idea. give fadeIn effect as per your data arrives.
for (var i = 0; i < words.length; i++) {
html.prepend("<span>" + words[i] + " </span>" + '<br/>');
$(eachdiv).html(html).children().hide().each(function(i){
return $(this).fadeIn(200);
});
}

This seemed to work in the return line:
return $(this).delay(i*200).prependTo(eachdiv).fadeIn(200);
Thanks for introducing me to prepend, Sindhoor!

Issue when trying to use jQuery's window.open function in combination with a for-loop to iterate through an array

Let's say I have an array of links like this:
var playlist = [
"",
"https://www.youtube.com",
"https://www.google.com",
"https://www.facebook.com",
"https://www.instagram.com"
];
And a bunch of boxes generated in the following way:
for(var i = 1; i < 5; i++) {
$(".container").append("<div class='luke luke-" + i + "'>" + "<h3 class='nummer'>Luke " + i + "</h3> " + "</div>");
}
I then want to iterate through this array to open a specific link when a box is clicked.
for(var i = 1; i < 5; i++) {
$(".luke-" + i).click(function(){
window.open(playlist[i], "_blank");
})
}
That doesn't seem to work at all, however the example below does exactly what I want.
$(".luke-1").click(function(){
window.open(playlist[1], "_blank");
})
$(".luke-2").click(function(){
window.open(playlist[2], "_blank");
})
$(".luke-3").click(function(){
window.open(playlist[3], "_blank");
})
$(".luke-4").click(function(){
window.open(playlist[4], "_blank");
})
$(".luke-5").click(function(){
window.open(playlist[5], "_blank");
})
So this works, but it's a pain in the ass to setup as I want to have 25 boxes in total and this solution offers little to no flexibility if I want to increase or decrease that amount at a later time. What am I doing wrong with the for-loop that's causing issues here?
If I use
console.log(playlist[i]);
inside of the for-loop, it simply returns "undefined" regardless of what box I click in case that helps.

You can do this much easier and simpler using a data attribute.
HTML
<div class="container"></div>
Javascript/jQuery
var playlist = [
"",
"https://www.youtube.com",
"https://www.google.com",
"https://www.facebook.com",
"https://www.instagram.com"
];
for(var i = 1; i < 5; i++) {
$(".container").append("<div class='luke' data-url='" + playlist[i] + "'>" + "<h3 class='nummer'>Luke " + i + "</h3> " + "</div>");
}
$('.luke').click(function() {
window.open($(this).data('url'));
});
Demo Here

You are not doing right.
EXAMPLE FIDDLE
var playlist = [
"https://www.youtube.com",
"https://www.google.com",
"https://www.facebook.com",
"https://www.instagram.com"
];
var container = $("#container");
for(var i = 1; i < 5; i++) {
container.append('<div class="luke" db-id="'+ i + '"><h3 class="nummer">Luke ' + i + '</h3></div>');
}
$(".luke").click(function(i){
window.open(playlist[$(this).attr('db-id')], "_blank");
});

for(var i = 1; i < 5; i++) {
$(".luke-" + i).click(function(i){
window.open(playlist[i], "_blank");
})
}
The click event will launch your function only inside the scope of the loop. This means that once the loop have finished, ( and counting from 0 to 5 is insanely fast for your computer ) there's no more function attached to your click event. In other terms, as long as i < 5, your click function will work as you expect, but after that, the click event will no longer call the function you created.
One solution could to be attach a function to the onclick attribute in the HTML like this :
for(var i = 1; i < 5; i++) {
$('<div/>', {
'class': 'luke luke-' + i,
'click': yourFunction(i)
}).appendTo(${'.container'});
$('<h3/>', {
'class':'nummer',
'html': 'Luke' + i
}).appendTo(${'.luke-'+i})
}
and then write a function like this :
function yourFunction(index){
window.open(playlist[index], "_blank");
}

Simple way by using Hyperlink
hyperlinks
Demo Here

change class if value greater then defined value

I want to change the class of an element depending on the value. Is it possible to do this inside the loop?
Javascript:
$.post(url, filteredObject, function (data2) {
for (i = 0; i < 7; i++) {
$('#ty' + (i + 1).toString()).text(numberWithCommas(data2[i].TY));
$('#sdly' + (i + 1).toString()).text(numberWithCommas(data2[i].SDLY));
$('#fcst' + (i + 1).toString()).text(numberWithCommas(data2[i].FCSTYTD));
}
});
I tried something like this but didn't work.
var textvalue = parseInt($('#ty' + (i + 1).toString()).text)
if (textvalue < 0) {
$('#ty' + (i + 1).toString()).toggleClass("fa fa-level-down");
}
else {
$('#ty' + (i + 1).toString()).toggleClass("fa fa-level-up");
}
Can anyone help me.

you should not use "toggleClass"
.toggleClass( className )
Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence [...]
it removes the class if it is present and adds it if it is not, so achieve that you only have one of fa-level-down and fa-level-up you should use .addClass( className ) and .removeClass( className )
var textvalue = parseInt($('#ty' + (i + 1).toString()).text)
if (textvalue < 0) {
$('#ty' + (i + 1).toString()).addClass("fa-level-down");
$('#ty' + (i + 1).toString()).removeClass("fa-level-up");
}
else {
$('#ty' + (i + 1).toString()).addClass("fa-level-up");
$('#ty' + (i + 1).toString()).removeClass("fa-level-down");
}

You are missing brackets after .text on the line:
var textvalue = parseInt($('#ty' + (i + 1).toString()).text)
You should use .text() to get the text of a jQuery object.
var textvalue = parseInt($('#ty' + (i + 1).toString()).text())

Add javascript condition inside text variable

I have code working fine but I wanna simplify:
<script type="text/javascript">
function RenderPager(items) {
for (var i = 0; i < items.length; i++) {
var li = "<li";
if(i == 0){
li += " class='first'";
}
li +=">" + i + "</li>";
// do something else
}
}
</script>
I would like to have condition inline something like this:
for (var i = 0; i < items.length; i++) {
var li = "<li" + if(i == 0){ li += " class='first'" }; + ">" + i + "</li>";
// do something else
}
But this is not working and I tried everything but I don't know how to combine javascript condition in text variable. Is it possible?

You can use the conditional operator (?..:), also known as the ternary operator:
var li = "<li" + (i == 0 ? " class='first'" : "") + ">" + i + "</li>";
Also note, this could probably also be done using a little CSS with the :fist-child pseudo-class, but it's not supported by older versions of IE. See this compatibility chart:
li:first-child {
/* applies only to the first <li> element in a list */
}

Jquery help needed- infinite loop?

i have a problem with this code:
var par = [];
$('a[name]').each(function() {
if (($(this).attr('name')).indexOf("searchword") == -1) {
par.push($(this).attr('name'));
$('.content').empty();
for (var i = 0; i < par.length; i++) {
$(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />');
}
}
});
It causes ie and firefox to popup the warning window "Stop running this script". But it happens only when there is a very very large amount of data on page. Any ideas how to fix it?

Your code should look like this:
var par = [];
$('a[name]').each(function() {
if (($(this).attr('name')).indexOf("searchword") == -1) {
par.push($(this).attr('name'));
}
});
$('.content').empty();
for (var i = 0; i < par.length; i++) {
$(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />');
}
There is no reason for the second loop to be inside the first - that will just cause a lot of unneeded work.
You can make this code a bit simpler by removing the par array and the second loop, and just creating the content inside the first loop:
$('.content').empty();
$('a[name]').each(function() {
var name = $(this).attr('name');
if (name.indexOf("searchword") == -1) {
$(".content").append('<a id="par" href="#' + name + '">' + name + '</a><br />');
}
});

Browsers run all javascript (and most page interaction) on a single thread. When you run a long loop like this with no interruptions, the UI is totally frozen. You should try to make your algorithm have to do less, but in case that's not possible you can use this trick where you do a bit of work, then pause and give the browser control of the UI thread for a bit, then do more work.
var $targets = $('a[name]');
var current = 0;
var i = 0;
function doSomeWork() {
if (i == $targets.length) return;
var $t = $targets[i];
if (($t.attr('name')).indexOf("searchword") == -1) {
par.push($t.attr('name'));
$('.content').empty();
for (var i = 0; i < par.length; i++) {
$(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />');
}
}
i++;
window.setTimeout(arguments.callee, 0);
}
This does one iteration of your loop in a function before yielding. It might be a good idea to do more than just one in a function call, but you can experiment with that. An article on this idea: http://www.julienlecomte.net/blog/2007/10/28/