Develop Reference

usage of spread syntax code with map function

I have some familiarity with the ... operatorspread syntax
and recently I saw a developer use the spread syntax (as attached in snippet as ) [...document.querySelectorAll('#wrapper button')].map((button)=> button.addEventListener('click',Add));
the above ... spread syntax with the map function looks tough for me to understand, can someone help me understand it in simple terms conceptually..thanks for your time
document.addEventListener('DOMContentLoaded', () => {
var temp = [];
var arrayOfStrings = [];
console.log(document.querySelectorAll('#wrapper button')) //choose button only in the wrapper div and not the others like CLR
//listen to only button events(other than the CLR)
document.querySelectorAll('#wrapper button').forEach(button => button.addEventListener('click', Calculat));
//listen to CLR button events
document.getElementById('clear1').addEventListener('click', () => {
temp = [];
arrayOfStrings = [];
document.querySelector('.my_flex').textContent = ('');
});
function Calculat(e) {
z = e.target.innerText;
// console.log(z);
document.querySelector('.my_flex').append(z); //append to the flex object
if (z == '=') {
document.querySelector('.my_flex').append(eval(arrayOfStrings));
return false;
}
temp.push(z);
arrayOfStrings = temp.join("");
}
});
div {
width: 7cm;
}
button {
border: 0;
line-height: 3.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
/*align the text f the button to the center*/
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(220, 0, 0, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
background-color: green;
}
button {
border: 0;
line-height: 3.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(220, 0, 0, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
background-color: green;
}
.my_flex {
display: flex;
background-color: tomato;
margin: 8px;
padding: 20px;
font-size: 30px;
}
<a>Calculations(Simple Mathematics only, example: 1+7,2*8 etc):--</a>
<div id="wrapper">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<br>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>0</button>
<button>(</button>
<button>)</button>
<button>/</button>
<button>=</button>
<button>.</button>
</div>
<div><button id="clear1">CLEAR</button></div>
<div class="my_flex">
<!--just to get nice output on flex canvas -->
</div>

It's not just pointless to use the array spread syntax here, it's also pointless (and indeed confusing) to use map. This should rather use the forEach method:
document.querySelectorAll('#wrapper button').forEach(button => {
button.addEventListener('click', calculate);
});
or even better just a simple for loop:
for (const button of document.querySelectorAll('#wrapper button')) {
button.addEventListener('click', calculate);
}

It's because that the result returned by querySelector is not an instance of Array.In other words the result has no map method and destructuring it inside of array will let you to use Array.prototype.map method on newly created array.

object contents lost when opening new page within window

I am making the transition over from Desktop .NET development to Web Development and I have just run into something that I don't understand. I was under the impression that when defining global variables if you opened a new webpage in the sane session the variable would still be accessible in memory to prevent the need to reload it. Can someone please clarify this matter?
I am loading a JSON database into memory as an array of objects var PlayerDatabase. I created an intelligent search bar to select a player and open a page with information about them. When opening the new page the PlayerDatabase is undefined.
Initial Search Bar page:
/*
window.fn = {};
var playerDatabase = [];
var count = 0;
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var menu = document.getElementById('menu');
var navi = document.getElementById('navi');
menu.close();
navi.resetToPage(page, { animation: 'fade' });
};
// Data Load Event
function showModal() {
var modal = document.querySelector('ons-modal');
modal.show();
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
playerDatabase = JSON.parse(this.responseText);
count = $(playerDatabase).toArray().length;
modal.hide();
console.log(count);
}
};
var requestURL = 'dataURL';
xmlhttp.open("GET", requestURL, true);
xmlhttp.send();
}
*/
// Search Bar Filter Logic
function searchPlayers() {
var input, filter, ul, li, a, i;
input = document.getElementById("searchBarInput");
filter = input.value.toUpperCase();
div = document.getElementById("dropdownItems");
li = div.getElementsByTagName("li");
// remove all current items
for (i = li.length - 1; i > -1; i--) {
div.removeChild(li[i]);
}
// check for min length
if (filter.length < 3) {
$('#dropdownItems').append("<li><a>Please input at least 3 characters.</a></li>");
} else {
// Here I add filtered items to the drop dwon
$('#dropdownItems').append("<li><a href='playerPage.html?playerID=" + "playerID" + "'>" + "Player Name" + " - " + "Player Position" + "</a></li>");
}
}
// Search Bar focus lost
$(document).on("focusout", "#searchBarInput input", function() {
var div = document.getElementById("dropdownItems");
var li = div.getElementsByTagName("li");
// remove all current items
for (i = li.length - 1; i > -1; i--) {
div.removeChild(li[i]);
}
});
/* * Copyright (c) 2012 Thibaut Courouble
* Licensed under the MIT License
================================================== */
a {
color: #1e7ad3;
text-decoration: none;
font-size: 12px;
}
a:hover {
text-decoration: underline
}
input {
font-size: 13px;
color: #555860;
}
.search {
position: relative;
margin: 0 auto;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat;
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus+.results,
.search .results:hover {
display: block
}
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li {
display: block;
}
.search .results li:first-child {
margin-top: -1px
}
.search .results li:first-child:before,
.search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
display: none
}
.search .results li:last-child {
margin-bottom: -1px
}
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
text-color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span {
font-weight: 200
}
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat;
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input {
line-height: 26px
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<!-- Page Content -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img class="w3-image w3-black" src="http://www.sportssabermetrics.net/html/images/header_image.jpg" alt="Header Image" width="100%">
<div class="w3-display-middle w3-center" style="width:60%;">
<!-- Search Bar -->
<section class="main">
<div id="myDropdown" style="margin: auto; font-size: 14px;">
<form class="search" method="post"><input type="text" id="searchBarInput" placeholder="Search for NFL Player" onkeyup="searchPlayers()" />
<ul id="dropdownItems" class="results">
</ul>
</div>
</section>
</div>
</header>
</body>
Seperate Javascript file to handle New Page
// Load full HTML page prior to making calls
$(function() {
// check to see if data has loaded
if (count > 0) {
// query URL parameters
var url_string = window.location.href;
var url = new URL(url_string);
var c = url.searchParams.get("playerID");
var player;
for (i=0; i < count; i++) {
if (playerDatabase[i].playerID = c) {
player = playerDatabase[i];
{ break; }
}
}
} else {
// Load Data
showModal();
console.log(count);
}
});

Here I'll do it since he originally beat me by a couple seconds (I upvoted) and expand. Variables do not persist in the browser from session to session. you need cookies or localStorage for that.
HOWEVER, note there are differences between the two. If you are planning to support a wide variety of browsers and users, you'll need to check that local storage is available or else your user will be toast. If you are planning on sending this data ever back to the server, then cookies is still the preferred method if you really need it to persist.
I, like you, moved from ASP .Net into the web, and something to consider is, do you really need the front end to remember and store this data? For some things that is a security issue as well. Many times it can actually be preferable to pass the data you need back and forth, and when you are done it's disposed rather than physically caching it. I would argue in full web you should be polling for data every page load from the server even if it's redundant. That way you control what the user has, the front end is dumb, and you are sure the data is not tampered with which becomes very important...
I would say, tread lightly with storage outside of session tokens etc on the front end, it can get to be a mess very quickly and is very un-webby. How are you going to insure that the data is not stale, what if modifications are made? How long are you going to have the data persist without a refresh, when you get a large number of users, if they don't wipe their cache and you let them store something for x-length of time, you're going to run into this and it's a fundamental design flaw. Even if you refresh the data every few minutes, when you get to scale that is an eternity and you will get data conflicts. Decide if you really, really, really need this stored on the (and each) user's machine.

How to make a progress bar that fills every time a textbox is filled

Today i'm trying to put a progress bar that fills every time the user fills a textbox, like this : let's say i have 10 textbox on the screen if none is filled i want the progress bar to be at 0% but if the user fills 5 of them i want it to be 50%. I found how to make the progress bar but can't figure how to make this condition to work with a TextBoxFor
If someone could help

Lets say yours textbox (input type=text ?).
<input type="text" class="check-fill">
You can add the jQuery keyup event on each input field, to check the number of input fields already done.
$(function(){ //When document is ready
$(".check-fill").keyup(function(){ //Prefer keyup so you check after, in case the user delete his entry.
var $fields = $(".check-fill");
var count = 0;
$fields.each(function(){
if($(this).val().length > 0)
count++;
});
});
var percentage = Math.floor(count * 100 / $fields.length);
//Here you have your percentage;
});
You can replace the keyup event by the "focusout" one, to reduce the numbers of verifitcations, but it will only check when the user click out of the input field.

If you are using JQuery you could use Progressbar. Then you can apply a certain class to all inputs OR a selector that apply to all of them, and finally attach an event to capture when they are not empty.
Example:
The form can be something like this:
<form class="progessform" ...>
<input type="text" ..../>
<input type="text" ..../>
</form>
And you can select these by using .progressform input[type=text] in a jquery script:
$('.progressform input[type=text]').on('change', function (e) {
var total = count all .progressform input[type=text] within the same form
var filled = count all .progressform input[type=text] values that are not empty
modify your progressbar according to the count: filled * 100 / total
}
This event is attached to every input text inside your form with class progressform, and it is called anytime the input text is changed.
Note that you might need to do extra things on this to distinguish if the input is validated correctly or not (ie, not to count some input in the progressbar if the value is not correct, like an invalid email or alphab characters in a numerical phone input)

** **PROGRESS BAR FILLUP ACCORDING TO TIME SET IN SECOUNDS ** **
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 100); // set time ex: 100 as 10s & 1000 as 1min
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
return false;
}
<style>
<body>
#label {
text-align: center;
line-height: 22px;
color: white;
}
.meter {
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
width:1%;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) );
background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
-webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) );
background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 1s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
</style>
<body onload="move()">
<div id="myProgress" class="meter">
<span id="myBar">
<center><div id="label">1%</div></center>
</span>
</div>
<br>
</body>

Code to refresh this script

I am not very good with javascript or anything. What can I add to make this minecraft server query update every 10 seconds? At the moment it is a bit slow so it takes awhile to recognise players that are leaving or joining. Also how can I make this script show a list of player names that are currently in-game on each server?
CODE:
<link type="text/css" rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"></link>
<style type="text/css">
/*Bootstrap styles*/
#-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
#keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
.progress {
overflow: hidden;
height: 20px;
margin-bottom: 20px;
background-color: #333;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #ffffff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.progress-striped .progress-bar {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-striped .progress-bar-info {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-danger {
background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.label[href]:hover,
.label[href]:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.label:empty {
display: none;
}
.btn .label {
position: relative;
top: -1px;
}
.label-default {
background-color: #999999;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #808080;
}
.label-primary {
background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #3071a9;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}
/*End Bootstrap styles*/
/*Our labels for the online/offline stats*/
.serverdata .label{
float:right;
}
/*The container for all of the data*/
.servercontainer{
width:250px;
background-color:#555;
overflow:hidden;
color:white;
}
/*Main title*/
.servercontainer h1{
margin-bottom:15px;
color:white !important;
background-color:black;
width:100%;
padding:10px;
font-size:16px;
}
/*Padding for all of our server data, so they don't touch sides of container*/
.serverdata{
padding:6px;
}
/*Style for our loading text*/
.loading{
font-size:14px;
color:white;
padding:20px;
}
/*Each Server Title*/
.serverdata h2{
margin-bottom:10px;
color:white;
font-size:16px !important;
}
/*The text that displays player counts in progress bar*/
.progress h4{
position:absolute
}
/*Hide running total, used for keeping player total without reset*/
.runningtotal{
display:none;
}
/*visible player total*/
.total-players{
padding:5px;
color:white;
background-color:#222;
}
.servercontainer i{
color:white;
}
</style>
<script>
$( document ).ready(function() {
/*jslint browser: true, devel: true */
/*globals MinecraftAPI: true */
(function (servers) {
'use strict';
var head = document.getElementsByTagName('head')[0],
script = document.createElement('script'),
currentServer = 0,
totalPlayers = [],
allDone,
buildServerStatusContainer,
loadServerStatus,
stringifyServer,
buildStatusObject,
buildOfflineStatusObject,
buildErrorStatusObject;
allDone = function (items, fn, done) {
var completed = 0,
len = items.length,
i,
callback;
if (len === 0) {
return done();
}
callback = function () {
completed += 1;
if (completed === len) {
done();
}
};
for (i = 0; i < len; i += 1) {
fn(items[i], callback);
}
};
stringifyServer = function (server) {
return server.name;
};
buildServerStatusContainer = function (server, index) {
var serverData,
loading,
loadingtext,
playerhead;
serverData = document.createElement('div');
serverData.classList.add('serverdata', 'server-' + currentServer);
loading = document.createElement('i');
loading.classList.add('fa', 'fa-spinner', 'fa-spin');
loading.classList.add('loading-server', 'server-loading-' + currentServer);
playerhead = document.createElement('div');
playerhead.classList.add('playerhead', 'server-playerhead-' + currentServer);
loadingtext = document.createElement('span');
loadingtext.innerHTML = ' Loading...';
serverData.appendChild(loading);
serverData.appendChild(loadingtext);
serverData.appendChild(playerhead);
document.querySelector('.servercontainer').appendChild(serverData);
servers[index].id = currentServer;
currentServer += 1;
};
buildErrorStatusObject = function (server, status) {
var container,
ip,
online;
container = document.createElement('div');
ip = document.createElement('h2');
ip.innerHTML = stringifyServer(server);
online = document.createElement('span');
online.classList.add('label', 'label-danger');
online.innerHTML = 'Error!';
online.style.display = 'block';
container.appendChild(ip);
ip.appendChild(online);
document.querySelector('.servercontainer .server-' + server.id).innerHTML = '';
document.querySelector('.servercontainer .server-' + server.id).appendChild(container);
};
buildOfflineStatusObject = function (server, status) {
var container,
ip,
online;
container = document.createElement('div');
ip = document.createElement('h2');
ip.innerHTML = stringifyServer(server);
online = document.createElement('span');
online.classList.add('label', 'label-warning');
online.innerHTML = 'Offline';
online.style.display = 'block';
container.appendChild(ip);
ip.appendChild(online);
document.querySelector('.servercontainer .server-' + server.id).innerHTML = '';
document.querySelector('.servercontainer .server-' + server.id).appendChild(container);
};
buildStatusObject = function (server, status, lobby) {
var item = document.querySelector('.servercontainer .server-' + server.id),
progresswidth,
container,
ip,
online,
progress,
progressbar,
players;
progresswidth = Math.floor((status.players.now / (lobby === undefined ? status.players.max : lobby)) * 100) + '%';
container = document.createElement('div');
ip = document.createElement('h2');
ip.innerHTML = stringifyServer(server);
online = document.createElement('span');
online.classList.add('label', 'label-success');
online.innerHTML = 'Online';
online.style.display = 'block';
online.style.marginBottom = '5px';
progress = document.createElement('div');
progress.classList.add('progress','progress-striped','active');
progressbar = document.createElement('div');
progressbar.classList.add('progress-bar', 'progress-bar-success');
progressbar.style.width = progresswidth;
progress.appendChild(progressbar);
players = document.createElement('h4');
players.innerHTML = status.players.now + ' / ' + (lobby === undefined ? status.players.max : lobby) + ' Players Online';
container.appendChild(ip);
ip.appendChild(online);
container.appendChild(progress);
progress.appendChild(players);
item.innerHTML = '';
item.appendChild(container);
totalPlayers.push(status.players.now);
};
loadServerStatus = function (server, done) {
MinecraftAPI.getServerStatus(server.ip, {
port: server.port
}, function (err, status) {
if (err) {
buildErrorStatusObject(server, status);
done();
return;
}
if (!status.online) {
buildOfflineStatusObject(server, status);
done();
return;
}
if (status.players.max === 1) {
buildStatusObject(server, status, server.lobby);
done();
return;
}
buildStatusObject(server, status);
done();
});
};
script.addEventListener('load', function () {
servers.forEach(buildServerStatusContainer);
var totalplayers = document.createElement('h2');
totalplayers.classList.add('total-players');
document.querySelector('.servercontainer').appendChild(totalplayers);
setInterval(function () {
totalPlayers = [];
allDone(servers, loadServerStatus, function () {
document.querySelector('.total-players').innerHTML = totalPlayers.reduce(function (a, b) { return a + b; }) + ' Total Players';
});
}, 1000);
allDone(servers, loadServerStatus, function () {
document.querySelector('.total-players').innerHTML = totalPlayers.reduce(function (a, b) { return a + b; }) + ' Total Players';
});
});
script.type = 'text/javascript';
script.src = '//mcapi.us/scripts/minecraft.min.js';
head.appendChild(script);
}([{
ip: '46.105.88.222',
port: 25565,
name: 'Promeion'
},{
ip: '46.105.88.222',
port: 25570,
name: 'Hub',
lobby: 252
}]));
});
</script>
<div class="servercontainer">
<h1>Promeion Network</h1>
</div>
Thanks in advance!

to let it run every 10 seconds put the script in a function and give it a name. Then you could use setTimeout() and wait a while. Put the setTimeout at the end of the function and call the function again from inside itself.
How to display players is more specific to the script you have there. Perhaps there is some documentation where you have it from?
Cheers

In the following bit of code, 1000 stands for 1 second interval of checking players amount. Try to modify it, and see if it changes anything.
setInterval(function () {
totalPlayers = [];
allDone(servers, loadServerStatus, function () {
document.querySelector('.total-players').innerHTML = totalPlayers.reduce(function (a, b) { return a + b; }) + ' Total Players';
});
}, 1000);

If you manage both web server use websocket this will enable the server to push the updated results back to client.
If server is out of your control,
a. Pull the results and append only the results (data) not entire html section.
b. Append only modified information not entire information
c. Use pagination or chunk if data you are loading is huge
d. Ensure the objects and listeners initiated or destroyed if you are creating new on every changes.
Thanks.

Dropdown menu with jQuery and nth-child

I just made a dropdown menu with jQuery and a little bit
special html structure.
This is how my structure looks like.
And this is the jsFiddle, which was created: https://jsfiddle.net/rxLg0bo4/10/
But I want it to work like a proper dropdown menu. So that means it should show the submenu_link when you hover over the menu. f.e. if you hover over the menu_link q, the the submenu_link 1-5 should dropdown.
This is the jQuery:
$(document).ready(function () {
$('.menu_link').ready(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
});
$('[id$=pnlSubmenu]').mouseenter( function () {
$(this).show();
});
$('[id$=pnlSubmenu]').mouseleave(function () {
$(this).hide();
});
$('.menu_link').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
});
And this is my ASP.NET code:
<nav id="menu">
<asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
<asp:Panel ID="pnlSubmenu" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</asp:Panel>
</nav>
Can i do this with the nth-child anyhow?
I would also like the have the links in a list style how can I do that?

Here is a solution i found with your markup.
Used CSS to beautify it.
Jquery:
What did you do?
when .menu_link is hovered i find what index it has.
The index finds if its the first child or second etc.
When we have this magic index number var nthNumber
we can use it to find its corresponding .submenu_panel (I'm guessing here since i cant see all your code) and hide or show this panel
Eg. when we hover the first .menu_link,
we will show the first .submenu_panel
And we do the same for the second and third etc.
$(".menu_link, .submenu_panel").hover(function() {
//Hover inn function
var nthNumber = $(this).index() + 1;
$("[id$=Submenu]").show();
$("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").show();
}, function() {
//Hover out function
$("[id$=Submenu]").hide();
var nthNumber = $(this).index() + 1;
$("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").hide();
});
#menu [id$=Menu] {
border: 2px solid #2980b9;
border-radius: 5px;
background-color: #3498db;
}
#menu [id$=Menu] .menu_link {
padding: 10px 10px;
display: inline-block;
font-size: 1.2em;
}
#menu [id$=Menu] .menu_link:hover {
background-color: #45a9ec;
//border: 2px solid #2980b9;
border-radius: 2px;
cursor: pointer; //Visual only (REMOVE)!
}
#menu [id$=Submenu] {
display: none;
}
#menu [id$=Submenu] .submenu_panel {
display: none;
background-color: #45a9ec;
border: 2px solid #2980b9;
border-top: none;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
#menu [id$=Submenu] .submenu_panel .submenu_link {
position: relative;
display: block;
text-indent: 15px;
font-size: 1.1em;
padding: 4px 0px;
border-bottom: 1px solid #2980b9;
}
#menu [id$=Submenu] .submenu_panel .submenu_link:hover {
background-color: #56bafd;
cursor: pointer; //ONLY FOR VISUAL(REMOVE)!
}
#menu [id$=Submenu] .submenu_panel .submenu_link:first-child {
border-top: 1px solid #2980b9;
margin-top: -5px;
padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
<div id="pn1Menu">
<a class="menu_link">Lorem</a>
<a class="menu_link">Ipsum</a>
<a class="menu_link">Dollar</a>
<a class="menu_link">Si</a>
<a class="menu_link">Amet</a>
</div>
<div id="pn1Submenu">
<div class="submenu_panel">
<a class="submenu_link">100</a>
<a class="submenu_link">200</a>
<a class="submenu_link">300</a>
<a class="submenu_link">400</a>
<a class="submenu_link">500</a>
<a class="submenu_link">600</a>
</div>
<div class="submenu_panel">
<a class="submenu_link">010</a>
<a class="submenu_link">020</a>
<a class="submenu_link">030</a>
<a class="submenu_link">040</a>
<a class="submenu_link">050</a>
<a class="submenu_link">060</a>
</div>
<div class="submenu_panel">
<a class="submenu_link">1001</a>
<a class="submenu_link">2002</a>
<a class="submenu_link">3003</a>
<a class="submenu_link">4004</a>
<a class="submenu_link">5005</a>
<a class="submenu_link">6006</a>
</div>
</div>
</nav>

i tweaked quite a bit https://jsfiddle.net/rxLg0bo4/19/ You will have to try it out with a real page to know for sure.
$(document).ready(function () {
$('.menu_link').ready(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link1').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "0px");
});
$('.menu_link2').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "12%");
});
$('.menu_link3').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "25%");
});
$('.menu_link4').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "37%");
});
$('.menu_link5').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "50%");
});
$('[id$=pnlSubmenu]').mouseenter(function () {
$(this).show();
});
$('[id$=pnlSubmenu]').mouseleave(function () {
$(this).hide();
});
$('.menu_link1').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link2').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link3').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link4').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link5').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
});
#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
height:50px;
display:block;
}
#wrapper_menu {
margin-bottom: 50px;
position: relative;
z-index: 1;
}
#menuicon {
margin: 0 auto;
width: 27px;
display: none;
}
.menubar {
background: #001155;
height: 4px;
width: 27px;
margin-bottom: 5px;
border-radius: 2px;
position: relative;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#menuicon:hover #menubar-top {
transform: translate(0px, 9px) rotate(45deg);
}
#menuicon:hover #menubar-mid {
opacity: 0;
}
#menuicon:hover #menubar-bottom {
transform: translate(0px, -9px) rotate(-45deg);
}
#menu {
height: 44px;
width: 980px;
margin: 0 auto;
border-radius: 5px;
background: rgb(229, 229, 229);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(229, 229, 229, 0.95)), color-stop(100%, rgba(193, 192, 194, 0.95)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#c1c0c2', GradientType=0);
/* IE6-9 */
-webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
}
#pnlMenu {
width: 100%;
height: auto;
}
.menu_link1, .menu_link2, .menu_link3, .menu_link4, .menu_link5, .menu_link6 {
position:relative;
font-size: 15px;
line-height: 44px;
padding: 0 40px;
text-align:left;
}
.menu_link1:active, .menu_link2:active, .menu_link3:active, .menu_link4:active, .menu_link5:active, .menu_link6:active, .menu_link1:focus, .menu_link2:focus, .menu_link3:focus, .menu_link4:focus, .menu_link5:focus, .menu_link6:focus, {
color: #2d98e5;
border-radius: 5px;
background: rgb(229, 229, 229);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(193, 192, 194, 0.95)), color-stop(100%, rgba(229, 229, 229, 0.95)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(193, 192, 194, 0.95)) 0%, rgba(229, 229, 229, 0.95) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(endColorstr='#c1c0c2', startColorstr='#e5e5e5', GradientType=0);
/* IE6-9 */
-webkit-box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
}
.last_menu_link {
float: right;
}
.submenu_link {
}
.submenu_panel {
width: 15%;
height: auto;
background: gray;
position:relative;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper_menu">
<div id="menuicon">
<div class="menubar" id="menubar-top"></div>
<div class="menubar" id="menubar-mid"></div>
<div class="menubar" id="menubar-bottom"></div>
</div>
<nav id="menu">
<div id="pnlMenu"> <a class="menu_link1" href="Index.aspx?category=1">menu1</a><a class="menu_link2" href="Index.aspx?category=2">menu2</a><a class="menu_link3" href="Index.aspx?category=4">menu3</a><a class="menu_link4" href="Index.aspx?category=5">menu4</a><a class="menu_link5" href="Index.aspx?category=6">menu5</a><a class="menu_link6 last_menu_link" href="Index.aspx?category=8">menu6</a>
</div>
<div id="pnlSubmenu" style="display:none">
<div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=7">submenu1</a><a class="submenu_link" href="Pages/Chart.aspx?id=8">submenu2</a>
</div>
<div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=4">Link1</a>
<a class="submenu_link" href="Pages/Chart.aspx?id=11">Link2</a>
</div>
</div>
</nav>
</div>

I think this is what you are asking for?
Use CSS rather than jquery. This should get you started.
https://jsfiddle.net/cshanno/bgryLLwo/
HTML
<ul class="menu">
<li>Link
<ul class="submenu">
<li>Example 1</li>
<li>Example 2</li>
</ul>
</li>
<li> Link 2</li>
</ul>
CSS
.menu {
border:1px solid black;
}
.menu, .menu li {
padding:0;
margin:0 10px;
display:inline-block;
list-style:none;
}
.menu ul {
display:none;
}
.menu li:hover ul {
display:block;
position:absolute;
padding:0;
}
.menu li:hover ul li {
margin:0 0;
display:block;
border: 1px solid black;
}
.menu li ul li:hover {
background-color:skyblue;
}