When I hover each span, the cursors are changed follow its title !
var cursors = [ "auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize", "s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize" ,"col-resize","row-resize","all-scroll","zoom-in","zoom-out","grab","grabbing" ];
var newHTML = [];
for (var i = 0; i < cursors.length; i++) {
newHTML.push('<span>' + cursors[i] + '</span>');
}
$("body").html(newHTML.join(""));
$("span").on( "mouseover", function() {
$(this).css( "cursor", cursors[4] );
});
html, body{
margin: 30px auto;
width: 90%;
text-align: center;
background: linear-gradient(top, green, lightblue);
}
h1{
color: #f49ba2;
}
span{
background-color: #ddd;
margin: 5px;
padding: 5px;
border: #abc 1px solid;
display: inline-block;
}
span:odd{
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="element"></p>
Do you mean this?
See https://api.jquery.com/index/
var cursors = [ "auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize", "s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize" ,"col-resize","row-resize","all-scroll","zoom-in","zoom-out","-webkit-grab", "-webkit-grabbing" ];
var newHTML = [];
for (var i = 0; i < cursors.length; i++) {
newHTML.push('<span>' + cursors[i] + '</span>');
}
$("body").html(newHTML.join(""));
$("span").on( "mouseover", function() {
$(this).css( "cursor", cursors[$(this).index()] );
});
html, body{
margin: 30px auto;
width: 90%;
text-align: center;
background: linear-gradient(top, green, lightblue);
}
h1{
color: #f49ba2;
}
span{
background-color: #ddd;
margin: 5px;
padding: 5px;
border: #abc 1px solid;
display: inline-block;
}
span:odd{
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>
Related
I'm looking to create a grid like this: Grid
I'm using this:
$(document).ready(function() {
for (var i = 0; i < 366; i++) {
$('#div-padre').append('<div class="dia" id="div'+ i +'" /> ');
}
});
to generate 365 divs, then, with CSS, create the 'grid' style.
.dia {
width: 45px;
height: 45px;
background: white;
outline: 2px solid;
float: left;
}
.div-padre {
width: 800px;
}
I tried to clearfix but the last div goes wrong, I don't care if they are divs, tr or whatever, but in the future i would like to select one square and change color, so div or tr or something, I need you to be able to do that later
This is a border/outline management issue, take a look at this:
$(document).ready(function() {
for (var i = 0; i < 366; i++) {
$('#div-padre').append('<div class="dia" id="div'+ i +'" /> ');
}
});
.dia {
width: 45px;
height: 45px;
background: white;
border: 2px solid;
float: left;
margin-top:-2px;
margin-left:-2px;
}
.div-padre {
width: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-padre"></div>
Use border: 2px solid; margin: -1px; instead of outline: 2px solid;
$(document).ready(function() {
for (var i = 0; i < 365; i++) {
$('#div-padre')
.append(
$('<div>', {
id: 'div-' + (i+1),
class: 'dia'
}));
}
});
.dia {
width: 45px;
height: 45px;
background: white;
border: 2px solid;
margin: -1px;
float: left;
}
.div-padre {
width: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-padre"></div>
When I click on the load more button, it should get the content from the divElements array and slice it correctly per page but it's not working like it should.
This entire HTML page including the JS function.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #f6f6f6;
width: 400px;
margin: 60px auto;
margin-top: 5px;
font: normal 13px/100% sans-serif;
color: #444;
}
img{
width:30px;
height:30px;
}
div {
display:none;
padding: 10px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
margin-bottom: 5px;
background-color: #f1f1f1;
}
.totop {
position: fixed;
bottom: 10px;
right: 20px;
}
.totop a {
display: none;
}
a, a:visited {
color: #33739E;
text-decoration: none;
display: block;
margin: 10px 0;
}
a:hover {
text-decoration: none;
}
#loadMore {
padding: 10px;
text-align: center;
background-color: #33739E;
color: #fff;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
}
#loadMore:hover {
background-color: #fff;
color: #33739E;
}
</style>
</head>
Load More
<script>
(function() {
var divElements = [
{ adName: "<div class=article-loop><img src=http://i.imgur.com/CmU3tnl.jpg></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/TDdxS9H.png></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/39rpmwB.jpg></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/1lBZQ1B.png></div>"},
{ adName: "<div class=article-loop><img src=https://i.imgur.com/Y5Ld4Qfh.jpg></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/8HumESY.jpg></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/CqCZBvk.png></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/wQVPRVp.png></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/CmU3tnl.jpg></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/CmU3tnl.jpg></div>"}
];
var loadMore = document.querySelector('#loadMore');
var divNumber = 2;
loadMore.addEventListener('click', function(e) {
e.preventDefault();
for (var i = 0; i < divNumber; i++) {
window.scrollTo(0,document.body.scrollHeight);
if (i < divElements.length) {
divElements[i].style.display = 'block';
}
if (i >= divElements.length) {
loadMore.innerHTML = "Load Completed";
return;
}
}
divElements.splice(0, divNumber);
});
})();
loadMore.click();
</script>
</body>
</html>
These lines seem to expect DOM elements but divElements is an array of objects containing HTML strings.
if (i < divElements.length) {
divElements[i].style.display = 'block';
}
if (i >= divElements.length) {
loadMore.innerHTML = "Load Completed";
return;
}
You need to insert these strings into the DOM using innerHTML and then select the resulting DOM elements for this to work.
You cannot just edit the display of a string. You have to create an element first. Then the element needs to be appended to the DOM.
Here is a way to do this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #f6f6f6;
width: 400px;
margin: 60px auto;
margin-top: 5px;
font: normal 13px/100% sans-serif;
color: #444;
}
img{
width:30px;
height:30px;
}
div {
padding: 10px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
margin-bottom: 5px;
background-color: #f1f1f1;
}
.totop {
position: fixed;
bottom: 10px;
right: 20px;
}
.totop a {
display: none;
}
a, a:visited {
color: #33739E;
text-decoration: none;
display: block;
margin: 10px 0;
}
a:hover {
text-decoration: none;
}
#loadMore {
padding: 10px;
text-align: center;
background-color: #33739E;
color: #fff;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
}
#loadMore:hover {
background-color: #fff;
color: #33739E;
}
</style>
</head>
<body>
<div id="container"></div>
Load More
<script>
(function() {
var divElements = [
{ imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
{ imgUrl: 'http://i.imgur.com/TDdxS9H.png'},
{ imgUrl: 'http://i.imgur.com/39rpmwB.jpg'},
{ imgUrl: 'http://i.imgur.com/39rpmwB.jpg'},
{ imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
{ imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
{ imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
{ imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
{ imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
{ imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'}
];
var loadMore = document.querySelector('#loadMore');
var divNumber = 2;
loadMore.addEventListener('click', function(e) {
e.preventDefault();
var container = document.getElementById('container');
for (var i = 0; i < divNumber; i++) {
window.scrollTo(0,document.body.scrollHeight);
if (i < divElements.length) {
var element = createElement(divElements[i].imgUrl);
container.appendChild(element);
}
if (i >= divElements.length) {
loadMore.innerHTML = "Load Completed";
return;
}
}
divElements.splice(0, divNumber);
});
})();
loadMore.click();
function createElement(url){
var container = document.createElement('div');
container.setAttribute('class', 'article-loop');
var image = document.createElement('img');
image.setAttribute('src', url);
container.appendChild(image);
return container;
}
</script>
</body>
</html>
always enclose attribute values into quotes, never leave them like this: class=article-loop. Correct will be class='article-loop'
I'm working on a project for freeCodeCamp and I'm running a for loop through an array of twitch.tv users. I've created a table and for each username in my array, it's supposed to add the new row, fill it with the data, and move onto the next element. The problem is that every time I run the code it seems to be choosing a random index in the array and running the loop through to equal the number of elements in the array. I think it's a display issue because it's connecting to the server for each individual call.
Hopefully someone can help me out.
var twitch = ['ESL_SC2', 'OgamingSC2', 'cretetion', 'freecodecamp', 'storbeck', 'habathcx', 'RobotCaleb', 'noobs2ninjas', 'ESL_LOL', 'wow_2', 'brunofin', 'comster404']
var streams = 'https://wind-bow.gomix.me/twitch-api/streams/';
var channels = 'https://wind-bow.gomix.me/twitch-api/channels/';
var users = 'https://wind-bow.gomix.me/twitch-api/users/';
var getStream = function(data) {
if (data.stream === null) {
$('.status').append('Offline');
} else {
var streamStatus = data.stream.channel.status;
var html = '<td class="stream">' + streamStatus + '</td>';
$('.stream').html(html);
}
}
var getChannels = function(data) {
var game = data.display_name;
var logoHtml = data.logo;
var channelUrl = data.url;
var gameHtml = '' + game + '';
var logoHtml = '<img class="image" src="' + logoHtml + '">';
$('.game').html(gameHtml);
$('.logo').html(logoHtml);
}
$(document).ready(function() {
$('.choice').on('click', function() {
$('.choice').removeClass('selected');
$(this).toggleClass('selected');
});
var table = $('<table id="twitch-table"></table>').appendTo('#content');
for (var i = 0; i < twitch.length; i++) {
var row = $('<tr></tr>').appendTo(table);
$('<td class="logo"></td>').appendTo(row);
$('<td class="game"></td>').appendTo(row);
$('<td class="stream"></td>').appendTo(row);
$.getJSON(streams + twitch[i], getStream, 'jsonp');
$.getJSON(channels + twitch[i], getChannels, 'jsonp');
}
});
body {
padding: 0;
margin: 0;
font-family: 'Oswald', sans-serif;
font-size: 100%;
}
a {
text-decoration: none;
}
#main {
width: 600px;
margin: 2% auto 0;
}
#header {
padding: 0;
margin: 0;
background: #116466;
color: #d1e8e2;
line-height: 100px;
width: 100%;
}
h1 {
margin: 0 0 0 5%;
font-size: 300%;
}
#row {
background: #285277;
width: 100%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
.choice {
position: relative;
text-align: center;
width: 33%;
background: #285277;
padding: 5px 10px;
display: inline-block;
color: #d1e8e2;
font-size: 150%;
}
.choice a {
/*padding: 5px 20px;*/
color: #d1e8e2;
}
#content {
width: 100%;
background: #efefef;
}
/*
.choice a:active {
background: #1E3D59;
}
*/
.selected {
background: #1E3D59;
}
.selected:after {
content: '';
position: absolute;
top: 100%;
right: 45%;
width: 0;
height: 0;
border-top: solid 10px #1E3D59;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
table {
width: 600px;
}
tr {
margin: 5px 0;
display: flex;
width: 100%;
justify-content: space-between;
}
td {
border-collapse: collapse;
box-sizing: border-box;
margin: 0;
padding: 0;
display: inline-block;
white-space: nowrap;
overflow: hidden;
}
.game {
padding-left: 10px;
width: 100px;
font-size: 120%;
line-height: 75px;
text-overflow: ellipsis;
}
.game a {
color: #111;
}
.image {
height: 75px;
width: 75px;
}
.logo {
padding: 3px 5px;
box-sizing: border-box;
}
.stream {
padding-right: 10px;
width: 350px;
display: inline-block;
text-overflow: ellipsis;
line-height: 75px;
}
<!DOCTYPE html>
<html>
<head>
<title>Twitch.tv JSON API</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script src="https://use.fontawesome.com/57c9bf8971.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id='main'>
<header id='header'>
<h1>Twitch Streamers</h1>
</header>
<div id='row'>
<ul>
<li class='choice selected'><a href='#'>All</a></li>
<li class='choice'><a href='#'>Online</a></li>
<li class='choice'><a href='#'>Offline</a></li>
</ul>
</div>
<div id='content'>
</div>
</div>
</body>
</html>
The problem is in these lines:
$('.game').html(gameHtml);
$('.logo').html(logoHtml);
$('.stream').html(html);
They select all lines with game class (or logo or stream) And change them all.
See here a fixed JSfiddle.
You need to use the callback function properly. Your getStreams and getChannels functions are applying data to all rows, instead of its own individual row.
Below are the modified callback functions declarations:
var getStream = function(url, idx) {
$.getJSON(url, function(data){
if (data.stream === null) {
$('.status').append('Offline');
} else {
var streamStatus = data.stream.channel.status;
var html = '<td class="stream">' + streamStatus + '</td>';
$('tr').eq(idx).find('.stream').html(html);
}
});
}
var getChannels = function(url, idx) {
$.getJSON(url, function(data){
var game = data.display_name;
var logoHtml = data.logo;
var channelUrl = data.url;
var gameHtml = '' + game + '';
var logoHtml = '<img class="image" src="' + logoHtml + '">';
$('tr').eq(idx).find('.game').html(gameHtml);
$('tr').eq(idx).find('.logo').html(logoHtml);
});
}
And, call them within your for loop as:
getStream(streams + twitch[i], i);
getChannels(channels + twitch[i], i);
JSFiddle for your reference: https://jsfiddle.net/yogesh214/yxLu9mwg/4/
I understand your problem now:
As #Shalom Peles said, you're using $('.stream') to select all the elements in the document with the class .stream instead of just the element within your row.
Instead use .find to select within an element. For example:
let row = $('<div class="my-row"></div>'); // creates a row
row.append(/* ... */);
let elementInsideRow = row.find('.my-column'); // this selects an element *inside* the row element.
Also: use let instead of var for all declarations
I edited your code to work for streams. Do the same for channels. Read the comments.
var twitch = ['ESL_SC2', 'OgamingSC2', 'cretetion', 'freecodecamp', 'storbeck', 'habathcx', 'RobotCaleb', 'noobs2ninjas', 'ESL_LOL', 'wow_2', 'brunofin', 'comster404']
var streams = 'https://wind-bow.gomix.me/twitch-api/streams/';
var channels = 'https://wind-bow.gomix.me/twitch-api/channels/';
var users = 'https://wind-bow.gomix.me/twitch-api/users/';
// refactor this like I did below
var getChannels = function(data) {
var game = data.display_name;
var logoHtml = data.logo;
var channelUrl = data.url;
var gameHtml = '' + game + '';
var logoHtml = '<img class="image" src="' + logoHtml + '">';
$('.game').html(gameHtml);
$('.logo').html(logoHtml);
}
$(document).ready(function() {
$('.choice').on('click', function() {
$('.choice').removeClass('selected');
$(this).toggleClass('selected');
});
var table = $('<table id="twitch-table"></table>').appendTo('#content');
// you need to use `let` here because you need block scope
// in general, use `let` instead of `var` everywhere.
// https://stackoverflow.com/questions/21906133/when-should-i-use-let-and-var
for (let i = 0; i < twitch.length; i++) {
let row = $('<tr></tr>');
$.getJSON(streams + twitch[i], function(data) {
$('<td class="logo"></td>').appendTo(row);
$('<td class="game"></td>').appendTo(row);
$('<td class="stream"></td>').appendTo(row);
if (data.stream === null) {
// instead of selecting all the elements with `.status`, use `find` to select *within* the `row` element
// $('.status').append('Offline');
row.find('.status').append('Offline');
} else {
var streamStatus = data.stream.channel.status;
var html = '<td class="stream">' + streamStatus + '</td>';
row.find('.stream').html(html);
}
// apend it when you're done
row.appendTo(table);
}, 'jsonp');
// make the same changes for channel
//$.getJSON(channels + twitch[i], getChannels, 'jsonp');
}
});
body {
padding: 0;
margin: 0;
font-family: 'Oswald', sans-serif;
font-size: 100%;
}
a {
text-decoration: none;
}
#main {
width: 600px;
margin: 2% auto 0;
}
#header {
padding: 0;
margin: 0;
background: #116466;
color: #d1e8e2;
line-height: 100px;
width: 100%;
}
h1 {
margin: 0 0 0 5%;
font-size: 300%;
}
#row {
background: #285277;
width: 100%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
.choice {
position: relative;
text-align: center;
width: 33%;
background: #285277;
padding: 5px 10px;
display: inline-block;
color: #d1e8e2;
font-size: 150%;
}
.choice a {
/*padding: 5px 20px;*/
color: #d1e8e2;
}
#content {
width: 100%;
background: #efefef;
}
/*
.choice a:active {
background: #1E3D59;
}
*/
.selected {
background: #1E3D59;
}
.selected:after {
content: '';
position: absolute;
top: 100%;
right: 45%;
width: 0;
height: 0;
border-top: solid 10px #1E3D59;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
table {
width: 600px;
}
tr {
margin: 5px 0;
display: flex;
width: 100%;
justify-content: space-between;
}
td {
border-collapse: collapse;
box-sizing: border-box;
margin: 0;
padding: 0;
display: inline-block;
white-space: nowrap;
overflow: hidden;
}
.game {
padding-left: 10px;
width: 100px;
font-size: 120%;
line-height: 75px;
text-overflow: ellipsis;
}
.game a {
color: #111;
}
.image {
height: 75px;
width: 75px;
}
.logo {
padding: 3px 5px;
box-sizing: border-box;
}
.stream {
padding-right: 10px;
width: 350px;
display: inline-block;
text-overflow: ellipsis;
line-height: 75px;
}
<!DOCTYPE html>
<html>
<head>
<title>Twitch.tv JSON API</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script src="https://use.fontawesome.com/57c9bf8971.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id='main'>
<header id='header'>
<h1>Twitch Streamers</h1>
</header>
<div id='row'>
<ul>
<li class='choice selected'><a href='#'>All</a></li>
<li class='choice'><a href='#'>Online</a></li>
<li class='choice'><a href='#'>Offline</a></li>
</ul>
</div>
<div id='content'>
</div>
</div>
</body>
</html>
Here is some pastebin (don't want to put my code in the internet for ever) to build a cool calendar :
var today = new Date(); // The current server date
var displayedMonth = new Date(today.getTime())
var mois = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre"];
var jour = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
function initialSetup(date){
addEventListener();
buildCalendar(date);
}
function buildCalendar(date){
$(".currentMonth").text(mois[date.getMonth()]);
$(".currentYear").text(date.getFullYear());
if($(".itemsCalendar").length == 0){
$(".calendar:first").append('<table class="itemsCalendar"><thead><tr></tr></thead>');
for(var cpt = 1; cpt <= jour.length-1;cpt++)
$(".calendar > table > thead > tr").append('<th>'+jour[cpt].substring(0,3)+'</th>');
$(".calendar > table > thead > tr").append('<th>'+jour[0].substring(0,3)+'</th>');
}
// Set the days in the calendar
return populateCalendar(date);
}
function populateCalendar(date){
var itsToday = null;
var appendLocation = null;
var sendResult = false;
if($(".itemsCalendar > tbody").length == 0){
$(".itemsCalendar").append('<tbody class="dates"></tbody>');
appendLocation = ".dates";
}else{
$(".calendar").append('<tbody class="tempCalendar"></tbody>');
appendLocation = ".tempCalendar";
sendResult = true;
}
if(date.getMonth() == today.getMonth() && date.getYear() == today.getYear() ){ // If is it the same day than today, buid as follow
itsToday = 'class="today"'
// date = today;
date.setDate(today.getDate()); // copy the date of today
}
$(appendLocation).append("<tr><td><span "+itsToday+">"+date.getDate()+"</span></td></tr>");
var currentDay = date.getDay();
for(var cpt = date.getDate()-1; cpt>=1;cpt--){ // For each day before
currentDay > 0 ? currentDay-- : currentDay = 6; // Negate 1 day
currentDay == 0 ? $(appendLocation).prepend("<tr></tr>"):null; // Add a line in needed
$(appendLocation+" > tr:first").prepend("<td><span>"+cpt+"</span></td>");
}
fillCalendar(date, currentDay, true, appendLocation);
currentDay = date.getDay();
for(var cpt = date.getDate()+1; cpt<=dayInMonth(date);cpt++){ // For each day after
currentDay < 6 ? currentDay++ : currentDay = 0;// Increase 1 day
currentDay == 1 ? $(appendLocation).append("<tr></tr>"):null; // Add a line if needed
$(appendLocation+" > tr:last").append("<td><span>"+cpt+"</span></td>");
}
fillCalendar(date, currentDay, false, appendLocation);
if(sendResult){
var ret = $(".tempCalendar").html();
$(".tempCalendar").remove();
return ret;
}
}
function dayInMonth(date){
if(date.getMonth() == 1) if(isBissextile(date.getYear())) return 29; else return 28;
if(date.getMonth()%2 == 0) if(date.getMonth() <= 6) return 31; else return 30; else if(date.getMonth() <= 6) return 30; else return 31;
}
function isBissextile(year){
if(year%4 != 0) return false; else if((year%100 == 0) && (year%400 != 0)) return false; else return true;
}
function fillCalendar(date, day, isBefore, where){
var complete;
if(isBefore){
if(day == 1) return; else complete = false;
date.setMonth(date.getMonth()-1);
var cpt = dayInMonth(date);
do{
day != 0 ? day-- : day = 6; // Negate 1 day
$(where+" > tr:first").prepend("<td><span class='notInTheMonth'>"+cpt+"</span></td>");
cpt--;
day == 1 ? complete = true : null;
}while(!complete);
date.setMonth(date.getMonth()+1);
}else{
if(day == 0) return; else complete = false;
var cpt = 1;
do{
day == 6 ? day = 0 : day++; // Increase 1 day
$(where+" > tr:last").append("<td><span class='notInTheMonth'>"+cpt+"</span></td>");
cpt++;
day == 0 ? complete = true : null;
}while(!complete);
}
}
function addEventListener(){
$(".previousMonth").click(function(e){
e.stopPropagation();
displayedMonth.setMonth(displayedMonth.getMonth()-1);
displayedMonth.setDate(15);
var updated = buildCalendar(displayedMonth);
updateCalendar(updated);
});
$(".nextMonth").click(function(e){
e.stopPropagation();
displayedMonth.setMonth(displayedMonth.getMonth()+1);
displayedMonth.setDate(15);
var updated = buildCalendar(displayedMonth);
updateCalendar(updated);
});
$(".previousYear").click(function(e){
e.stopPropagation();
displayedMonth.setFullYear(displayedMonth.getFullYear()-1);
displayedMonth.setDate(15);
var updated = buildCalendar(displayedMonth);
updateCalendar(updated);
});
$(".nextYear").click(function(e){
e.stopPropagation();
displayedMonth.setFullYear(displayedMonth.getFullYear()+1);
displayedMonth.setDate(15);
var updated = buildCalendar(displayedMonth);
updateCalendar(updated);
});
}
function addDayEventListener(){
$(".dates").on('click', '.notInTheMonth', function() {
var selected = parseInt($(this).text());
if(selected > 15)
displayedMonth.setMonth(displayedMonth.getMonth()-1);
else
displayedMonth.setMonth(displayedMonth.getMonth()+1);
displayedMonth.setDate(selected);
var updated = buildCalendar(displayedMonth);
updateCalendar(updated);
$(".dates > tr > td > span:not(.notInTheMonth)").filter(function() {
return parseInt($(this).text()) === selected;
}).addClass("today")
});
/*$(".notInTheMonth").each(function(){
$(this).click(function(e){
e.stopPropagation();
});
});*/
}
function updateCalendar(updated){
$('.dates').animate({
opacity: 0,
transform: "scale(2,1)"
},250, function(){
updated = $(updated);
$(this).empty();
$(this).html(updated);
addDayEventListener();
$('.dates').animate({opacity: 100}, 250);
});
//$(".itemsCalendar > tbody").remove();
}
function colorize(colors){
/*background: #ff3232;
background: -moz-linear-gradient(-45deg, #ff3232 0%, #ff2828 21%, #2989d8 21%, #2989d8 48%, #5aa85e 48%, #5aa85e 73%, #ffac4f 73%, #ffac4f 100%);
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#ff2828 20%,#2989d8 20%,#2989d8 40%,#5aa85e 40%,#5aa85e 60%,#ffac4f 60%,#ffac4f 80%, yellow 80%,yellow 100%);
background: linear-gradient(135deg, #ff3232 0%,#ff2828 21%,#2989d8 21%,#2989d8 48%,#5aa85e 48%,#5aa85e 73%,#ffac4f 73%,#ffac4f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ffac4f',GradientType=1 );*/
}
initialSetup(today);
* {
font-family: 'Open Sans', sans-serif;
}
div,
ul,
li {
list-style-type: none;
}
.planner {
width: 66%;
margin: 100px auto;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
border-radius: 5px;
overflow: hidden;
min-width: 280px;
}
.calendar {
padding: 10px;
background-color: #333333;
min-width: 260px;
transition: 250ms;
}
.calendar-header {
color: #a7a7a7;
margin: 0;
padding: 0;
text-align: justify;
line-height: 0px;
font-size: 0px;
}
.calendar-header span,
.calendar-header a {
display: inline-block;
font-size: 36px;
font-weight: 200;
text-align: center;
line-height: 36px;
}
.calendar-header a:hover {
color: #98cd60;
cursor: pointer;
}
.calendar-header::after {
content: '';
display: inline-block;
width: 100%;
}
table {
width: 100%;
padding: 10px;
color: #9d9d9d;
min-width: 240px;
}
tbody{
overflow: hidden;
max-height: 180px;
}
th {
font-weight: normal;
font-size: 14px;
color: #5b5b5b;
}
td {
font-weight: normal;
font-size: 12px;
text-align: center;
}
td > span {
display: inline-block;
text-align: center;
padding: 3px;
margin: 0px;
width: 20px;
height: 20px;
line-height: 20px;
}
td > span:hover {
font-weight: bold;
}
td > span.active {
border: 2px solid #98cd60;
border-radius: 30px;
}
.schedule {
margin: 0;
}
.tabs {
margin: 0;
padding: 0;
text-align: justify;
line-height: 0px;
font-size: 0px;
background-color: #6b6b6b;
}
.tabs .tab {
display: inline-block;
width: 33.3333%;
background-color: #6b6b6b;
text-align: center;
color: #333333;
margin: 0;
padding: 0;
border: 0px none;
line-height: 38px;
font-size: 14px;
transition: background 0.2s;
}
.tabs .tab.active {
background-color: #999999;
color: #ffffff;
font-weight: 600;
}
.tabs .tab.active:hover {
background-color: #999999;
}
.tabs .tab:hover {
background-color: #777777;
}
.tabs .tab a {
color: inherit;
text-decoration: none;
}
.tabs::after {
content: '';
width: 100%;
display: inline-block;
}
.schedule-list {
padding: 20px;
margin-left: 37px;
border-left: 2px solid #cccccc;
display: block;
}
.schedule-item {
display: block;
margin-bottom: 50px;
padding: 0;
clear: both;
min-height: 100px;
overflow: visible;
}
.schedule-item:last-child {
margin-bottom: 10px;
min-height: 30px;
}
.schedule-item .time {
display: block;
float: left;
margin-left: -41px;
width: 36px;
height: 36px;
border: 2px solid #cccccc;
background-color: #ffffff;
color: #cccccc;
border-radius: 40px;
text-align: center;
padding: 0px;
line-height: 25px;
}
.schedule-item .time span {
font-size: 12px;
height: 10px;
margin: auto;
display: block;
}
.schedule-item .description {
display: block;
float: left;
width: 305px;
margin-top: 10px;
margin-left: 10px;
color: #fd9a4a;
font-size: 14px;
overflow: visible;
}
.schedule-item .description .description-content {
margin-top: 5px;
}
.schedule-item .description .description-content p {
font-size: 12px;
margin: 0;
color: #c5c5c5;
}
.schedule-item .description .description-content .contact-list {
margin: 0;
margin-top: 10px;
padding: 0;
}
.schedule-item .description .description-content .contact-list .contact {
overflow: hidden;
display: block;
float: left;
margin: 0;
padding: 0;
border: 2px solid rgba(152, 205, 96, 0.25);
border-radius: 60px;
width: 56px;
height: 56px;
text-decoration: none;
text-align: center;
margin-right: 10px;
transition: all 0.2s;
}
.schedule-item .description .description-content .contact-list .contact img {
width: 60px;
height: 60px;
}
.schedule-item .description .description-content .contact-list .contact:hover {
border: 2px solid #98cd60;
}
.schedule-item .description .description-content .contact-list .contact.add-contact {
color: #98cd60;
font-size: 20px;
line-height: 60px;
}
.schedule-item .description .description-content .contact-list .contact.add-contact a {
color: inherit;
text-decoration: none;
}
.schedule-item .description .description-content .contact-list .contact.add-contact:hover {
background-color: rgba(152, 205, 96, 0.25);
}
.schedule-item.free .time {
border: 2px solid #98cd60;
}
.schedule-item.free .description .description-header {
background-color: #ffffff;
color: #c5c5c5;
display: block;
float: left;
}
.schedule-item.free .description .description-content {
margin-left: 5px;
margin-top: 0;
content: '';
width: 215px;
display: block;
float: right;
background-image: url(https://dl.dropboxusercontent.com/u/2915418/filler.png);
background-repeat: no-repeat;
background-position: right center;
}
footer {
margin-top: 30px;
color: #c5c5c5;
display: block;
text-align: center;
}
footer a {
color: #98cd60;
text-decoration: none;
}
.today{
background-color: #7D7D7D;
color: #98CD60;
border-radius: 30px;
width: 20px;
height: 20px;
}
.notInTheMonth{
background-color: #272727;
border-radius: 30px;
color: #444444;
}
.headerWrapper{
color: #a7a7a7;
border-bottom: 1px solid #484848;
margin: 0;
padding: 0;
text-align: justify;
line-height: 0px;
font-size: 0px;
padding: 10px 0px;
}
.headerWrapper::after {
content: '';
display: inline-block;
width: 100%;
}
.itemsCalendar{
display: block;
max-height: 225px;
}
.itemsCalendar thead, .dates tr, .tempCalendar tr{
display: table;
width: 100%;
table-layout: fixed;
}
.tempCalendar{
display: none;
}
<html>
<head>
<title>Calendrier</title>
<meta charset="utf-8" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div class="planner">
<div class="calendar">
<div class="calendar-header">
<div class="headerWrapper">
<a class="btn btn-prev previousYear">
<i class="icon-angle-left"></i>
</a>
<span class="currentYear">July</span>
<a class="btn btn-next nextYear">
<i class="icon-angle-right"></i>
</a>
</div>
<div class="headerWrapper">
<a class="btn btn-prev previousMonth">
<i class="icon-angle-left"></i>
</a>
<span class="currentMonth"></span>
<a class="btn btn-next nextMonth">
<i class="icon-angle-right"></i>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
js/calendar.js
index.html
css/style.css
When clicking on notInTheMonth classed elements, there will be problems (too much day in the output, more than one month passed etc...)
To trigger the first time the click event listener, you have to pass one month or one year before. After that, it will enable the click event on the notInTheMonth day (element with background dark grey and text grey, who refer to a non-in-month day.
Frequently, the problem occurs on the second or third time we click in a notInTheMonth element.
I can't correct my trouble, so can you please help me ?
So I have recently been playing around with styling the html range slider.
I came across a pen on CodePen that has some really great designs.
This is the source code from one.
HTML:
<input type="range" data-idx="1">
CSS:
html {
background: #393939;
}
input[type='range'] {
display: block;
margin: 2.5em auto;
border: solid .5em transparent;
padding: 0;
width: 15.5em;
height: 1em;
border-radius: .25em;
background: transparent;
font-size: 1em;
cursor: pointer;
}
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
.js input[type='range']::-webkit-slider-runnable-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-moz-range-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
.js input[type='range']::-moz-range-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-ms-track {
border: none;
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
color: transparent;
}
input[type='range']::-ms-fill-lower {
border-radius: 0.25em;
background: #e44e4f;
}
input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track {
background-size: 50% 100%;
}
input[type='range']:nth-of-type(1)::-moz-range-track {
background-size: 50% 100%;
}
input[type='range']:nth-of-type(1)::-webkit-slider-thumb {
margin-top: -0.125em;
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']:nth-of-type(1)::-moz-range-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']:nth-of-type(1)::-ms-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']:nth-of-type(1)::-ms-tooltip {
display: none;
}
input[type='range']:focus {
outline: none;
box-shadow: 0 0 0.25em #e44e4f;
}
Javascript:
var s = document.createElement('style'),
r = document.querySelectorAll('input[type=range]'),
prefs = ['webkit-slider-runnable', 'moz-range'],
styles = [],
l = prefs.length
n = r.length;
document.body.appendChild(s);
var getTrackStyleStr = function(el) {
var str = '',
j = el.dataset.idx,
min = el.min || 0,
perc = (el.max) ? ~~(100*(el.value - min)/(el.max - min)) : el.value,
val = perc + '% 100%';
for(var i = 0; i < l; i++) {
str += '.js input[type=range]:nth-of-type(' + j + ')::-' + prefs[i] + '-track{background-size:' + val + '}';
}
return str;
};
var getTipStyleStr = function(el) {
var str = '.js input[type=range]:nth-of-type(' + el.dataset.idx + ') /deep/ #thumb:after{content:"' + el.value + '%"}';
return str;
};
for(var i = 0; i < n; i++) {
styles.push('');
r[i].addEventListener('input', function() {
styles[this.dataset.idx] = getTrackStyleStr(this);
if(this.classList.contains('tip')) {
styles[this.dataset.idx] += getTipStyleStr(this);
}
s.textContent = styles.join('');
}, false);
}
This works great for one range element but if I try adding more range elements on the same page, and change the data attribute to data-idx="2" it will not work, the first range will control them all.
How can I adjust the code to make each range work independently?
Here is a JSFiddle of the code I'm using, for some reason the javascript isn't working on there at all, but it's works fine on codepen? Hmm...
Here is the original Codepen
SOLUTION
var r = document.querySelectorAll('input[type=range]'),
prefs = ['webkit-slider-runnable', 'moz-range'],
styles = [],
l = prefs.length,
n = r.length;
var getTrackStyleStr = function(el, j) {
var str = '',
min = el.min || 0,
perc = (el.max) ? ~~(100*(el.value - min)/(el.max - min)) : el.value,
val = perc + '% 100%';
el.previousElementSibling.textContent = el.value;
for(var i = 0; i < l; i++) {
str += "input[type=range][data-rangeId='" + j + "']::-" + prefs[i] + '-track{background-size:' + val + '} ';
}
return str;
};
var setDragStyleStr = function(evt) {
var trackStyle = getTrackStyleStr(evt.target, this);
styles[this].textContent = trackStyle;
};
for(var i = 0; i < n; i++) {
var s = document.createElement('style');
document.body.appendChild(s);
styles.push(s);
r[i].setAttribute('data-rangeId', i);
r[i].addEventListener('input', setDragStyleStr.bind(i));
}
html {
background: #393939;
}
div {
margin: 2.5em auto;
}
input[type='range'] {
display: block;
margin: 0.2em auto;
border: solid .5em transparent;
padding: 0;
width: 15.5em;
height: 1em;
border-radius: .25em;
background: transparent;
font-size: 1em;
cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
input[type='range']::-webkit-slider-runnable-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-moz-range-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
input[type='range']::-moz-range-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-ms-track {
border: none;
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
color: transparent;
}
input[type='range']::-ms-fill-lower {
border-radius: 0.25em;
background: #e44e4f;
}
input[type='range']::-webkit-slider-runnable-track {
background-size: 0% 100%;
}
input[type='range']::-moz-range-track {
background-size: 0% 100%;
}
input[type='range']::-webkit-slider-thumb {
margin-top: -0.125em;
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-moz-range-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-ms-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-ms-tooltip {
display: none;
}
input[type='range']:focus {
outline: none;
box-shadow: 0 0 0.25em #e44e4f;
}
output[for='range'] {
font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
font-size: 13px;
color: white;
display: block;
text-align: center;
}
<div>
<output for="range">0</output>
<input type="range" value="0">
</div>
<div>
<output for="range">0</output>
<input type="range" value="0">
</div>
<div>
<output for="range">0</output>
<input type="range" value="0">
</div>
Jquery UI offers some functional sliders that can be used in multiple instances on a page. You don't have to write or modify as much code to use them as above. Unless you are trying to avoid jquery, this may be a better option for you.
Here is a link to the multiple sliders demo.
The approach used for multiple sliders relies of course on jquery, but given markup such as:
<div id="eq">
<span>88</span>
<span>77</span>
<span>55</span>
<span>33</span>
<span>40</span>
<span>45</span>
<span>70</span>
</div>
A simple .each statement handles setting them all up.
$( "#eq > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
Edit: As per comments below, if you want to add tool-tips / hints, you have to roll your own. Here's a brief example from some code I wrote last year. It has some specific behaviors that fit the needs of my users, but this should give you an idea. The id "hintrow" refers to a table row on a grid that contained my slider. Through experimentation, you can probably find the best place relative to your various sliders to append this. It will get positioned so you only want a dom node to append it to.
function drawExtCues(){
z = 200;
$('#hintrow').append('<div id="hintContainer" style="position:relative"></div>');
for(h in rowobjects){
z++;
$('#hintContainer').append('<div title="' + rowobject[h].property1 + '" class="' + rowobject[h].property2+ ' ui-slider-range hint" style="z-index:' + z +';">' + rowobject[h].property1+ '</div>');
}
$('.hint').mouseover(function(){
hintMouseOver();
});
}
function hintMouseOver(){
$('.hint').addClass('hintInspect',500);
$('.hint').unbind('mouseover');
$('.hint').click(function(){
$J('.hint').removeClass('hintInspect',500);
$J('.hint').mouseover(function(){hintMouseOver();})
});
}
Note the z++. This was used to ensure my tool-tips would stack. Since we made them click to dismiss in our case, this worked well. You don't have to do this, but if you don't use a click to dismiss, you might want to bind a timeout to clear the tool tip for you.
The hintMouseOver function does some house cleaning, like unbinding itself to prevent repeat calls. It is rebound after the click event to dismiss the tool tip is fired. This is just the behavior my client wanted. You could do a lot of things here. The class hintInspect is basically the style rules for how your tool-tip will appear. You can make it look any way you like. I think I just used a simple black outline with grey background.