function a(response) {
setTimeout(function () {
for (i = 0; i < response.length; i++) {
if (response[i].hasOwnProperty("text")) {
var b = '<img class="img" src="path of my pic"/><p class="someclass">' + response[i].text + '</p><div class="something"></div>';
$(b).appendTo(".chatwindow").hide().fadeIn(1000);
} } } }
How do I use appendTo/append the content one after the other with a time delay? Instead it is displaying all at once, which I dont want like that.Please help me if i have to change anything?
You can use the delay() method for this:
function appendWithDelay() {
for (i = 0; i < 10; i++) {
var template = '<img class="img" src="https://picsum.photos/100"/>';
$(template).hide().appendTo(".chatwindow").delay(i * 1000).fadeIn(1000);
}
}
appendWithDelay();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chatwindow"></div>
Place your settimeout function inside the loop and condition
function a(response) {
for (i = 0; i < response.length; i++) {
if (response[i].hasOwnProperty("text")) {
setTimeout(function () {
var b = '<img class="img" src="path of my pic"/><p class="someclass">' + response[i].text + '</p><div class="something"></div>';
$(b).appendTo(".chatwindow").hide().fadeIn(1000);
}, 1000)
}
}
}
Related
I add infinite scroll in my angularjs project.
I have an issue i want to keep visible few last elements of my infinite scroll list till I reach them. I guess I need to have a variable with the last elements but after that I don't know what I have to do. Do you know how can I achieve that ?
this is my infinite scroll service
tabs.factory('chat', function ($http, $timeout, $q) {
return {
data: [],
dataScroll: [],
init: function (data) {
if (this.data.length == 0) {
for (var i = 0; i < data.length; i++) {
this.data[i] = data[i]
}
} else {
var tailleDataSaved = this.data.length
var dataAAjouter = data.slice(tailleDataSaved)
for (var i = 0; i < dataAAjouter.length; i++) {
this.data.push(dataAAjouter[i])
}
}
},
request: function (showAll) {
var self = this;
var deferred = $q.defer();
var index = this.dataScroll.length
var start = index;
var end = index + 6;
$timeout(function () {
if (!showAll) {
var item = []
if (start < end) {
for (var i = start; i < end; i++) {
console.log(start)
console.log(end)
console.log(self.data[i])
if (item = self.data[i]) {
self.dataScroll.push(item);
}
}
}
} else {
self.dataScroll = self.data
}
deferred.resolve(self.dataScroll);
}, 0);
return deferred.promise;
}
}
})
my js file with my list and the trigger of the scroll
$scope.listChat= function () {
$scope.isActionLoaded = false;
$http.get(apiurl).then(function (response) {
chat.init(response.data)
$scope.isActionLoaded = true
})
}
$scope.listChatInfiniteScroll = function () {
$scope.isScrollDataLoaded = false
ticketListeActionScroll.request(false).then(function (response) {
$scope.actionsInfiniteScroll = response
$scope.isScrollDataLoaded = true
})
}
my html file
<div ng-if="isActionLoaded" infinite-scroll='listChatInfiniteScroll ()' infinite-scroll-distance='1'>
<div ng-repeat="chat in actionsInfiniteScroll">
{{chat.text}}
</div>
</div>
I have a jQuery function to fade text in and out one by one. However the function is not working correctly due to I place the text from jQuery. When I try to run it, it is only showing 0. 1 to 4 is not shown.
var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '<div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
var $elem = $('#main .trip'),
l = $elem.length,
i = 0;
function go() {
$elem.eq(i % l).fadeIn(700, function() {
$elem.eq(i % l).fadeOut(700, go);
i++;
})
}
go()
.trip {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>
Fiddle.
var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '</div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
function go($list, i) {
var l = $list.length, $trip = $list.eq(i % l);
$trip.show().fadeIn(700, function(){
$trip.fadeOut(700, function(){
$trip.hide();
if ( ++i < l ) go($list, i);
});
})
}
go($('#main .trip'), 0)
.trip {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>
var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '</div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
function go($list, i) {
var l = $list.length, $trip = $list.eq(i);
$trip.show().fadeIn(700, function(){
$trip.fadeOut(700, function(){
$trip.hide();
go($list, (++i) % l);
});
})
}
go($('#main .trip'), 0)
.trip {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>
I'm working on a game named Factory Tycoon and have spotted a bug which I can't resolve myself. Every second you get plus what your items per second is on your items but it is failing to do so. Feel free to test the code. Code:
<!DOCTYPE html>
<html>
<head>
<title>Factory Tycoon</title>
<script type="text/javascript">
var money = 1000;
var items = 0;
var itemsps = 1;
var dropper1Cost = 100;
var dropper1Audio = new Audio('Audio/dropper1Sound.mp3');
function addDropper() {
if (money <= dropper1Cost - 1) {
alert('Not Enough Money.')
}
if (money >= dropper1Cost) {
dropper1Audio.play()
itemsps += 1;
money -= dropper1Cost;
dropper1Cost += 100;
}
}
setInterval(function renderMoney() {
document.getElementById('money').innerHTML = "Money:" + money;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('items').innerHTML = "Items Processed:" + items;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('itemsps').innerHTML = "Items Processed Per Second:" + itemsps;
}, 1000)
</script>
</head>
<h4 id="money"></h4>
<h4 id="items"></h4>
<h4 id="itemsps"></h4>
<body>
<img src="Images/dropper1IMG.png" onclick="addDropper()">
</html>
There isn't much code as I've only just started to develop it tonight :).
There is a few issues in the code:
<h4> elements need to be inside the <body> element
the </body> end tag is missing
the setInterval is called before all elements had a chance to load, which will make it error, so I wrapped them in an init function and called that on body load
Side note, this code can be optimized with addEventListener for the load event etc., but here you have a start
<!DOCTYPE html>
<html>
<head>
<title>Factory Tycoon</title>
<style>
span { display: inline-block; padding: 5px; background: #ddd; }
</style>
<script type="text/javascript">
var money = 1000;
var items = 0;
var itemsps = 1;
var dropper1Cost = 100;
var dropper1Audio = new Audio('Audio/dropper1Sound.mp3');
function addDropper() {
if (money <= dropper1Cost - 1) {
alert('Not Enough Money.')
}
if (money >= dropper1Cost) {
dropper1Audio.play()
itemsps += 1;
money -= dropper1Cost;
dropper1Cost += 100;
}
}
function init() {
setInterval(function renderMoney() {
document.getElementById('money').innerHTML = "Money:" + money;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('items').innerHTML = "Items Processed:" + items;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('itemsps').innerHTML = "Items Processed Per Second:" + itemsps;
}, 1000)
}
</script>
</head>
<body onload="init();">
<h4 id="money"></h4>
<h4 id="items"></h4>
<h4 id="itemsps"></h4>
<span onclick="addDropper()">Click Me</span>
</body>
</html>
I want to close autocomplete component of inputtextarea by clicking anywhere in the inputtextarea.
Now it is working with 'Esc' button.
You can try
<p:inputTextarea ... onclick="pressClick();" onkeydown="presskey();"/>
function pressClick() {
alert("testClick");
var divsToHide = document.getElementsByClassName("ui-autocomplete-panel");
for(var i = 0; i < divsToHide.length; i++)
{
divsToHide[i].style.visibility="hidden";
}
}
function presskey() {
var divsToShow = document.getElementsByClassName("ui-autocomplete-panel");
for(var i = 0; i < divsToShow.length; i++)
{
divsToShow[i].style.visibility="hidden";
}
}
I have a button called add to profile, all I need to know is how do I make it so its only on the last jQuery div, after the last next.
Like question 1, then next, question 2 back and next, question 3, back and add button.
So if you can really help me out here quick I'd really appreciate it.
Here's my code:
<script>
$(document).ready(function () {
var oldOption;
var counter = 1;
var maxThings = 4;
var minThings = 1;
$("#2").hide();
$("#3").hide();
$("#4").hide();
$('#back').hide();
$("#forward").click(function () {
$("#1").hide();
$("#2").hide();
$("#3").hide();
$("#4").hide();
if (!(counter >= maxThings)) {
counter++;
}
$("#" + counter).show();
$('#back').show();
if (counter === maxThings) {
$('#forward').hide();
}
});
$("#back").click(function () {
$("#1").hide();
$("#2").hide();
$("#3").hide();
$("#4").hide();
if (!(counter <= 1)) {
counter--;
}
$("#" + counter).show();
$('#forward').show();
if (counter === minThings) {
$('#back').hide();
}
});
});
</script>
...
if (counter === maxThings) {
$('#forward').hide();
$("#AddToProfile").show();
} else {
$("#AddToProfile").hide();
}
...
And I really don't like youre coding :) You'll have to change code every time you'll add new div.
I would do something like that:
- Every div would have class question
- Every div's START visibility attribute would be defined in html (every div except first would have in style something like visibility:hidden)
<script>
$(document).ready(function () {
var oldOption;
var counter = 1;
var maxThings = 4;
var minThings = 1;
$('#back').hide();
$("#forward").click(function () {
$("div.question").hide();
if (!(counter >= maxThings)) {
counter++;
}
$("#" + counter).show();
$('#back').show();
if (counter === maxThings) {
$('#forward').hide();
}
});
$("#back").click(function () {
$("div.question").hide();
if (!(counter <= 1)) {
counter--;
}
$("#" + counter).show();
$('#forward').show();
if (counter === minThings) {
$('#back').hide();
}
});
});
</script>