I am trying to show <Candidate></Candidate> in Rutland County with only votes higher than 0. Right now it shows them all just in Rutland County.
https://jsfiddle.net/jeffd/yqbwaxts/3/
https://99centbeats.com/ResultsData.xml
So Far:
$(document).ready(function() {
$.ajax({
type: 'GET',
url: 'https://99centbeats.com/ResultsData.xml',
//url: 'https://vtelectionresults.sec.state.vt.us/rss/2713/ResultsData.xml',
crossDomain: true,
success: parseXml
});
});
function parseXml(xml) {
$(xml).find('Town').each(function() {
var county = $(this).find('County').text(); //change to county for 'County'
window.votes = $(this).find('Votes').text();
if (county == 'RUTLAND') { // change to 'RUTLAND' for Rutland County
if (votes !== '0'){
window.townname = $(this).find('TownName').text();
window.officename = $(this).find('OfficeName, Name, Votes');
var newItems = $.map(officename, function(i) {
$(i).filter('0')
return $(i).text();
});
newItems2 = ("" + newItems).replace(/,/g, " - ");
$(".marquee").append(' - <strong>' + townname + '</strong>' + ' - ' + newItems2);
}
}
});
$('.marquee').marquee({
duration: 5000 // Speed of the counter (Lower = Faster)
});
}
setTimeout(function() {
window.location.reload(1);
}, 300000); // Refresh Results Every 5 Minutes
It seems like you're going at this rather haphazardly, just grabbing elements and stringing them together. It's better to methodically get the offices within a town, then their candidates, then filter those candidates by votes, etc.
The following should work, though it seems that there's currently only one candidate in one Rutland town that has any votes:
//Must have Allow-Control-Allow-Origin chrome plugin installed to work
$(document).ready(function() {
$.ajax({
type: 'GET',
url: 'https://99centbeats.com/ResultsData.xml',
//url: 'https://vtelectionresults.sec.state.vt.us/rss/2713/ResultsData.xml',
crossDomain: true,
success: parseXml
});
});
function textForOffice(office) {
var candidates = $(office).find('Candidate').filter(function(i, el) {
return $(el).find('Votes').text() > 0;
});
if (candidates.length === 0) {
return '';
}
var officeName = $(office).find('OfficeName').text();
var candidateValues = candidates.toArray().map(function (el) {
return $(el).find('Name').text() + ' - ' + $(el).find('Votes').text();
});
return ' - ' + officeName + ' - ' + candidateValues.join(' - ');
}
function parseXml(xml) {
$(xml).find('Town').each(function() {
var town = $(this);
var county = town.find('County').text(); //change to county for 'County'
if (county == 'RUTLAND') { // change to 'RUTLAND' for Rutland County
var townname = town.find('TownName').text();
var offices = town.find('Office');
var textForOffices = offices.toArray().map(textForOffice);
$(".marquee").append(' - <strong>' + townname + '</strong>' + textForOffices.join(''));
}
});
$('.marquee').marquee({
duration: 5000 // Speed of the counter (Lower = Faster)
});
}
setTimeout(function() {
window.location.reload(1);
}, 300000); // Refresh Results Every 5 Minutes
.rssfeed {
background-color: black;
color: white;
bottom: 0;
font-family: Gotham, Helvetica Neue, Helvetica, Arial, " sans-serif";
height: 150px;
line-height: 150px;
font-size: 32px;
}
.marquee {
overflow: hidden;
width: 100%;
white-space: nowrap;
}
.description {
width: 100%;
height: 50px;
background: red;
color: white;
line-height: 50px;
text-align: center;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
}
<div class="description">Rutland City - Vote Count Per Ward</div>
<div class="rssfeed">
<div class="marquee"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
Related
I have a problem sorting the users based on their karma. Can you guys please help? (site: here) I want to sort the div elements of the users according to totalKarma. Also is there a good method for refreshing the data in the background so it doesn't have to load the whole page (like the user icons).
var leaderboard = document.getElementById('leaderboard');
var commentKarma;
var postKarma;
var userName;
var userIcon;
var userUrl;
var usersloaded = [];
var userskarma = [];
var usersIcon = [];
var users = ['sloth_on_meth','filiptronicek','cigarkovic','gallowboob','tooshiftyforyou','actually_crazy_irl','haxpress'];
function updateStats() {
leaderboard.innerHTML = '';
users.forEach(mainfunc);
}
updateStats();
function mainfunc(user) {
$.getJSON('https://www.reddit.com/user/' + user + '/about.json', function(data) {
commentKarma = data.data.comment_karma;
postKarma = data.data.link_karma;
totalKarma = commentKarma + postKarma;
userName = user;
userIcon = data.data.icon_img;
userUrl = 'https://reddit.com/u/' + userName;
leaderboard.innerHTML +=
"<div class='usr' id='" +
userName +
"'><br><br><img src='" +
userIcon +
"'><br><a href='" +
userUrl +
"'> u/" +
userName +
'</a><br>' +
totalKarma.toLocaleString() +
' karma';
usersloaded.push(user);
userskarma.push(totalKarma);
usersIcon.push(userIcon);
// console.log(user);
// console.log(usersIcon);
userskarma.sort(function(a, b) {
return a - b;
});
// console.log(userskarma);
})
.done(function() {
return;
})
.fail(function() {
console.log('error loading ' + user);
})
.always(function() {
// console.log('completed loading ' + user);
});
}
#import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin: 0;
padding: 0;
}
.usr {
width: 150px;
height: 35px;
padding: 4.5em;
padding-bottom: 250px;
}
#leaderboard {
width: 95%;
height: 35px;
padding: 0.5em;
}
#leaderboard>div {
float: left;
}
img {
border-radius: 10px;
}
a {
text-decoration: none;
color: #ff4500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="leaderboard">
</div>
</body>
You could do something like this. Create an array usersloaded with user objects with userName, userIcon, userUrl etc properties. Then, it'll be easier for you sort the objects based on the totalKarma property and create the HTML as you're doing before.
var leaderboard = document.getElementById('leaderboard');
var commentKarma;
var postKarma;
var userName;
var userIcon;
var userUrl;
var usersloaded = [];
users = [
'sloth_on_meth',
'filiptronicek',
'cigarkovic',
'gallowboob',
'tooshiftyforyou',
'actually_crazy_irl',
'haxpress'
];
function updateStats() {
leaderboard.innerHTML = '';
users.forEach(mainfunc);
}
updateStats();
function mainfunc(user) {
$.getJSON('https://www.reddit.com/user/' + user + '/about.json', function(data) {
commentKarma = data.data.comment_karma;
postKarma = data.data.link_karma;
totalKarma = commentKarma + postKarma;
userName = user;
userIcon = data.data.icon_img;
userUrl = 'https://reddit.com/u/' + userName;
usersloaded.push({
user,
userName,
userIcon,
userUrl,
totalKarma
});
loadData(usersloaded);
})
.done(function() {
return;
})
.fail(function() {
console.log('error loading ' + user);
})
.always(function() {
//console.log('completed loading ' + user);
});
}
function loadData(usersloaded) {
leaderboard.innerHTML = ''
usersloaded.sort((a, b) => a.totalKarma - b.totalKarma)
.forEach(u => {
leaderboard.innerHTML +=
"<div class='usr' id='" +
u.userName +
"'><br><br><img src='" +
u.userIcon +
"'><br><a href='" +
u.userUrl +
"'> u/" +
u.userName +
'</a><br>' +
u.totalKarma.toLocaleString() +
' karma';
})
}
#import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin: 0;
padding: 0;
}
.usr {
width: 150px;
height: 35px;
padding: 4.5em;
padding-bottom: 250px;
}
#leaderboard {
width: 95%;
height: 35px;
padding: 0.5em;
}
#leaderboard>div {
float: left;
}
img {
border-radius: 10px;
}
a {
text-decoration: none;
color: #ff4500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="leaderboard">
</div>
Your code is not attempting to rearrange the divs, it's just appending to the body as the requests come back. At a high level, you need to create an array of objects, sort them and print them after they have been sorted.
Note that I have made minimal changes to your code to get it working, but you would benefit from a code review
var leaderboard = document.getElementById('leaderboard');
var commentKarma;
var postKarma;
var userName;
var userIcon;
var userUrl;
var usersloaded = [];
var userskarma = [];
var usersIcon = [];
users = [
'sloth_on_meth',
'filiptronicek',
'cigarkovic',
'gallowboob',
'tooshiftyforyou',
'actually_crazy_irl',
'haxpress'
];
var userObjs = [];
function updateStats() {
leaderboard.innerHTML = '';
users.forEach(mainfunc);
}
updateStats();
function mainfunc(user) {
$.getJSON('https://www.reddit.com/user/' + user + '/about.json', function(data) {
commentKarma = data.data.comment_karma;
postKarma = data.data.link_karma;
totalKarma = commentKarma + postKarma;
userName = user;
userIcon = data.data.icon_img;
userUrl = 'https://reddit.com/u/' + userName;
userObjs.push({
commentKarma,
postKarma,
totalKarma,
userName,
userIcon,
userUrl
});
if (userObjs.length == users.length) {
userObjs.sort((a, b) => a.totalKarma - b.totalKarma);
leaderboard.innerHTML = userObjs.map(user => {
return "<div class='usr' id='" +
user.userName +
"'><br><br><img src='" +
user.userIcon +
"'><br><a href='" +
user.userUrl +
"'> u/" +
user.userName +
'</a><br>' +
user.totalKarma.toLocaleString() +
' karma';
}).join("");
}
leaderboard.innerHTML +=
"<div class='usr' id='" +
userName +
"'><br><br><img src='" +
userIcon +
"'><br><a href='" +
userUrl +
"'> u/" +
userName +
'</a><br>' +
totalKarma.toLocaleString() +
' karma';
usersloaded.push(user);
userskarma.push(totalKarma);
usersIcon.push(userIcon);
console.log(user);
console.log(usersIcon);
userskarma.sort(function(a, b) {
return a - b;
});
console.log(userskarma);
//setTimeout(function(){ updateStats(); }, 10000);
})
.done(function() {
return;
})
.fail(function() {
console.log('error loading ' + user);
})
.always(function() {
console.log('completed loading ' + user);
});
}
#import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin: 0;
padding: 0;
}
body {
background: black;
color: white;
font-family: Roboto;
font-weight: bold;
text-transform: uppercase;
font-size: 2vh;
}
.usr {
width: 150px;
height: 35px;
padding: 4.5em;
padding-bottom: 250px;
}
#leaderboard {
width: 95%;
height: 35px;
padding: 0.5em;
}
#leaderboard>div {
float: left;
}
img {
border-radius: 10px;
}
a {
text-decoration: none;
color: #ff4500;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Reddit karma</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="leaderboard">
</div>
</body>
</html>
I am trying to fetch programs by search of query (name of show) through the Gracenote API.
For reference:
http://developer.tmsapi.com/io-docs (v1.1/programs/search)
Using the example (to fetch movies) listed on their website, it works fine.
http://developer.tmsapi.com/Sample_Code
<html>
<head>
<style type="text/css">
.tile {
display: inline-block;
border: 2px;
padding: 4px;
text-align: left;
font-size: 15px;
width:250px;
font-family: Avenir;
color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// construct the url with parameter values
var apikey = "xxxxx";
var baseUrl = "http://data.tmsapi.com/v1.1";
var showtimesUrl = baseUrl + '/movies/showings';
var zipCode = "78701";
var d = new Date();
var today = d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate();
$(document).ready(function() {
// send off the query
$.ajax({
url: showtimesUrl,
data: { startDate: today,
zip: zipCode,
jsonp: "dataHandler",
api_key: apikey
},
dataType: "jsonp",
});
});
// callback to handle the results
function dataHandler(data) {
$(document.body).append('<h2>Found ' + data.length + ' movies showing within 5 miles of ' + zipCode+'</h2>');
$.each(data, function(index, movie) {
var movieData = '<div class="tile"><img src="http://fanc.tmsimg.com/' + movie.preferredImage.uri + '?api_key='+apikey+'"><br/>';
movieData += 'Title:' + movie.title + '<br>';
movieData += 'ID: ' + movie.tmsId + '<br>';
if (movie.ratings) {movieData += 'Rating: ' + movie.ratings[0].code;}
else {movieData += 'Rating: ' + 'N/A';}
$(document.body).append(movieData);
});
}
</script>
</head>
<body>
</body>
</html>
When I am trying to modify it (to fetch programs), I fail to retrieve any data, all returned as undefined.
<html>
<head>
<style type="text/css">
.tile {
display: inline-block;
border: 2px;
padding: 4px;
text-align: left;
font-size: 15px;
width:250px;
font-family: Avenir;
color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// construct the url with parameter values
var apikey = "xxxxx";
var baseUrl = "http://data.tmsapi.com/v1.1";
var showtimesUrl = baseUrl + '/programs/search';
var zipCode = "78701";
var showName = 'Friends';
$(document).ready(function() {
// send off the query
$.ajax({
url: showtimesUrl,
data: { q: showName,
jsonp: "dataHandler",
api_key: apikey
},
dataType: "jsonp",
});
});
// callback to handle the results
function dataHandler(data) {
$(document.body).append('<h2>Found ' + data.length + ' movies showing within 5 miles of ' + zipCode+'</h2>');
var programs = data.hits;
$.each(data, function(index, program) {
var programData = '<div class="tile">' + program.entityType + '<br/>';
programData += 'Title:' + program.title + '<br>';
programData += 'ID: ' + program.tmsId + '<br>';
$(document.body).append(programData);
});
}
</script>
</head>
<body>
</body>
</html>
Actual result: (Response Status: 200)
undefined
Title: undefined
ID: undefined
Expected result: (Response Status: 200)
Show
Title: Friends
ID: SH001151270000
I was able to sort it out by looking at the array.
For the Movies sample code provided by the website the array returned a property path as [""0""].entityType but for Program it is returned as hits[""0""].program.entityType.
So I replaced data with data.hits and program.entityType with program.program.entityType etc.
function dataHandler(data) {
$(document.body).append('<h2>Found ' + data.hits.length + ' shows.</h2>');
$.each(data.hits, function(index, program) {
var programData = '<div class="tile">' + program.program.entityType + '<br/>';
programData += 'Title:' + program.program.title + '<br>';
programData += 'ID: ' + program.program.tmsId + '<br>';
$(document.body).append(programData);
});
}
I'm currently working on a project that will display the amount of time left in a certain time period based on the users current time. Here is the code.
var periods = [
[ '07:45' , '08:34' ],
[ '08:38' , '09:30' ],
[ '09:34' , '10:23' ],
[ '10:27' , '11:16' ],
[ '11:20' , '12:38' ],
[ '12:42' , '15:55' ],
[ '07:00' , ]
];
updateTimePeriods();
setInterval(updateTimePeriods, 1000); // Update every second
function updateTimePeriods() {
var listEl = document.getElementById('periods');
var now = new Date();
var count = periods.length;
listEl.innerHTML='';
for (var i = 0; i < count; i++) {
if(formatTimeRemaining(timeLeft(now, periods[i][1])).charAt(0)!='–') {
child=listEl.appendChild(document.createElement('LI'));
child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
+ ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
+ ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
}
}
}
function duration(start, end) {
var startTime = parseTime(start);
var endTime = parseTime(end);
return endTime.getTime() - startTime.getTime();
}
function timeLeft(now, end) {
var nowTime = parseTime(formatTime(now));
var endTime = parseTime(end);
return endTime.getTime() - nowTime.getTime();
}
function parseTime(timeStr) {
var tokens = timeStr.split(':');
return new Date(1970, 0, 1, parseInt(tokens[0], 10), parseInt(tokens[1], 10));
}
function formatUTCTime(time) {
var date = new Date(time);
return padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes());
}
function formatTime(time) {
var date = new Date(time);
return padZero(date.getHours()) + ':' + padZero(date.getMinutes());
}
function formatTimeRemaining(time) {
var sign = '+';
if (time < 0) { time *= -1; sign = '–'; }
var date = new Date(time);
return sign + padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes()) + ':' + padZero(date.getUTCSeconds());
}
function padZero(n) { return ('00' + n).substr(-2); }
body {
background-color: #A00000;
background-size: cover;
margin: 0;
padding: 0;
}
.outer-box {
border: 3px solid black;
height: true;
width: 75%;
padding: 10px;
margin: 10px auto 10px auto;
border-radius: 10px;
background-color: white;
text-align:center;
}
#periods {
border-radius: 5px;
margin: 20px auto 20px auto;
padding: 5px;
font-weight: bold;
text-align: center;
list-style-type: none;
}
<div class="outer-box">
<ul id="periods"></ul>
</div>
My goal is only display to the user the amount of time left in the current time period instead of all of them. And if its in between a time period it shows the amount of time until the next one occurs. The issue is once all the times occur I need to tell him much time until the start of the next time which occurs on a different day. To elaborate, currently if all the time periods occur it displays a blank space because there is nothing to display and all the times are negative. I want to display the amount of time until the next days starting time.
You should break the for loop as you create the new LI element. This way it should only show the actual time period.
for (var i = 0; i < count; i++) {
if(formatTimeRemaining(timeLeft(now, periods[i][1])).charAt(0)!='–') {
child=listEl.appendChild(document.createElement('LI'));
child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
+ ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
+ ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
break;
}
}
My goal is to display to the user ONLY the time left in there current period. Currently it displays all of the periods duration and time reaming, I only want to display one, which is the time frame they are currently in.
var periods = [
[ '07:45' , '08:34' ],
[ '08:38' , '09:30' ],
[ '09:34' , '10:23' ],
[ '10:27' , '11:16' ],
[ '11:20' , '12:38' ],
[ '12:42' , '13:31' ],
[ '13:35' , '14:25' ]
];
generatePeriods();
updateTimePeriods();
setTimeout(updateTimePeriods, 1000); // Update every second
function generatePeriods() {
var listEl = document.getElementById('periods');
periods.forEach(function(period) {
listEl.appendChild(document.createElement('LI'));
});
}
function updateTimePeriods() {
var now = new Date();
var children = document.getElementById('periods').childNodes;
var i = 0;
for (var i = 0; i < children.length; i++) {
var child = children[i];
child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
+ ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
+ ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
}
}
function duration(start, end) {
var startTime = parseTime(start);
var endTime = parseTime(end);
return endTime.getTime() - startTime.getTime();
}
function timeLeft(now, end) {
var nowTime = parseTime(formatTime(now));
var endTime = parseTime(end);
return endTime.getTime() - nowTime.getTime();
}
function parseTime(timeStr) {
var tokens = timeStr.split(':');
return new Date(1970, 0, 1, parseInt(tokens[0], 10), parseInt(tokens[1], 10));
}
function formatUTCTime(time) {
var date = new Date(time);
return padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes());
}
function formatTime(time) {
var date = new Date(time);
return padZero(date.getHours()) + ':' + padZero(date.getMinutes());
}
function formatTimeRemaining(time) {
var sign = '+';
if (time < 0) { time *= -1; sign = '–'; }
var date = new Date(time);
return sign + padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes()) + ':' + padZero(date.getUTCSeconds());
}
function padZero(n) { return ('00' + n).substr(-2); }
body {
background-color: #A00000;
background-size: cover;
margin: 0;
padding: 0;
}
.outer-box {
border: 3px solid black;
height: true;
width: 75%;
padding: 10px;
margin: 10px auto 10px auto;
border-radius: 10px;
background-color: white;
text-align:center;
}
#periods {
border-radius: 5px;
margin: 20px auto 20px auto;
padding: 5px;
font-weight: bold;
text-align: center;
}
<div class="outer-box">
<div id="periods"></div>
</div>
You can check the time using the following snippet :
for (var i = 0; i < children.length; i++) {
var child = children[i];
var now = new Date();
var nowHour = now.getHours();
if(periods[i][0] > nowHour) {
child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
+ ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
+ ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
}
}
First, i have slightly changed your HTML, li should be child of ul.
Then i've removed your generatePeriods() function.
If you don't want to show all periods (just positive) - you don't need empty li elements.
Then i slightly modified your updateTimePeriods() function:
function updateTimePeriods() {
var listEl = document.getElementById('periods');
var now = new Date();
var count = periods.length;
listEl.innerHTML='';
for (var i = 0; i < count; i++) {
if(formatTimeRemaining(timeLeft(now, periods[i][1])).charAt(0)!='–') { // check if negative
child=listEl.appendChild(document.createElement('LI'));
child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
+ ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
+ ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
}
}
}
So, now it should work like this:
var periods = [
[ '07:45' , '08:34' ],
[ '08:38' , '09:30' ],
[ '09:34' , '10:23' ],
[ '10:27' , '11:16' ],
[ '11:20' , '12:38' ],
[ '12:42' , '15:55' ],
[ '13:35' , '15:56' ]
];
updateTimePeriods();
setInterval(updateTimePeriods, 1000); // Update every second
function updateTimePeriods() {
var listEl = document.getElementById('periods');
var now = new Date();
var count = periods.length;
listEl.innerHTML='';
for (var i = 0; i < count; i++) {
if(formatTimeRemaining(timeLeft(now, periods[i][1])).charAt(0)!='–') {
child=listEl.appendChild(document.createElement('LI'));
child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
+ ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
+ ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
}
}
}
function duration(start, end) {
var startTime = parseTime(start);
var endTime = parseTime(end);
return endTime.getTime() - startTime.getTime();
}
function timeLeft(now, end) {
var nowTime = parseTime(formatTime(now));
var endTime = parseTime(end);
return endTime.getTime() - nowTime.getTime();
}
function parseTime(timeStr) {
var tokens = timeStr.split(':');
return new Date(1970, 0, 1, parseInt(tokens[0], 10), parseInt(tokens[1], 10));
}
function formatUTCTime(time) {
var date = new Date(time);
return padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes());
}
function formatTime(time) {
var date = new Date(time);
return padZero(date.getHours()) + ':' + padZero(date.getMinutes());
}
function formatTimeRemaining(time) {
var sign = '+';
if (time < 0) { time *= -1; sign = '–'; }
var date = new Date(time);
return sign + padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes()) + ':' + padZero(date.getUTCSeconds());
}
function padZero(n) { return ('00' + n).substr(-2); }
body {
background-color: #A00000;
background-size: cover;
margin: 0;
padding: 0;
}
.outer-box {
border: 3px solid black;
height: true;
width: 75%;
padding: 10px;
margin: 10px auto 10px auto;
border-radius: 10px;
background-color: white;
text-align:center;
}
#periods {
border-radius: 5px;
margin: 20px auto 20px auto;
padding: 5px;
font-weight: bold;
text-align: center;
}
<div class="outer-box">
<ul id="periods"></ul>
</div>
P.S. I've updated periods array because of testing.
In this coding I showed progress bar on the text box. but i need loading indicator in span tag when searching for something. I added two images to better understand about it. please answer me the question.
this is flat progress in text box:
but i need the progress on span
CSS:
<style type="text/css">
.loader
{
background: url(resources/images/loader.gif);
background-repeat: no-repeat;
background-position: right;
}
</style>
JS:
try {
console.log('connections url ' , urlHolder.getconnectedusersByName);
$("#auto-complete-tag").autocomplete({
source: function(request, respond) {
$("#auto-complete-tag").addClass('loader');
var givenUserName = $("#auto-complete-tag").val();
$.post(urlHolder.getconnectedusersByName, {
userId : signedUserId,
username : givenUserName
}, function(response) {
$('#auto-complete-tag').removeClass('loader');
if(!response){
respond([]);
length = 0;
}
this.connectionsList = new Array();
for (var counter = 0; counter < response.users.length; counter++) {
var getConnectedUsers = new Object();
getConnectedUsers = {
value : response.users[counter].name,
//profileId : "onclick=return false",
image : response.users[counter].defaultImageFileName,
id:response.users[counter].id
}
this.connectionsList.push(getConnectedUsers);
}
respond (this.connectionsList);
});
},
delay: 0 ,
search: function (e, u) {
},
select : function(event, ui) {
return false;
},
response: function(event, ui) {
length = ui.content.length;
console.log('length',length );
if(length === 0) {
var noResult = {label:"No results found for you" };
ui.content.push(noResult);
}
},
}) .data('ui-autocomplete')._renderItem = function(ul, item) {
if(length !== 0){
return $('<li>')
.data( "ui-autocomplete-item", item)
.append(
'<a style="background-color: #E0F0EF; color:#0d78a3; margin-bottom: 3px; margin-top: 3px; margin-left: 3px; margin-right: 3px; font-weight: bold;">' +
'<span style="color:#86BBC9; font-weight: normal;">' +
item.label + '</span>' + '<br>'+'<span>Text message</span>'+
'<button style="margin-bottom:14px; margin-right:5px;" class=\"yellow-btn apply-btn\" id=\"apply-user-' + item.id + '\" onclick=\"openDFAChatWithUser(\'' + item.id + '\')\">Chat</button>'
+ '<span class="ui-autocomplete-icon pull-right"></span>' +
'</a>'
)
.appendTo(ul);}else{
return $('<li>')
.data( "ui-autocomplete-item", item)
.append('<a>' +
'<span class="ui-autocomplete-user">' +
item.label + '</span>' +
'<span class="ui-autocomplete-divider"></span>' +
'<span class="ui-autocomplete-icon pull-right"></span>' +
'</a>')
.appendTo(ul);
}
};
//console.log(' this.connectionsList >>> ', this.connectionsList);
} catch (e) {
console.log('getAllConnections error >>> ', e);
}