Looking for a second set of eyes here...
I am calling this function:
customPanel(map, "map2", dirn, document.getElementById("path2"), 1);
In customPanel, I am then building html, then trying to assign it to the page:
Here is the function, the innerHTML is near the very bottom. If I throw an alert before I try to assign the html to the innerHTML of div, it alerts correctly:
<script type="text/javascript">
var map = "";
function customPanel(map, mapname, dirn, div) {
var html = "";
function waypoint(point, type, address) {
var target = '"' + mapname + ".showMapBlowup(new GLatLng(" + point.toUrlValue(6) + "))" + '"';
html += '<table style="border: 1px solid silver; margin: 10px 0px; background-color: rgb(238, 238, 238); border-collapse: collapse; color: rgb(0, 0, 0);">';
html += ' <tr style="cursor: pointer;" onclick=' + target + '>';
html += ' <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px;">';
html += ' <img src="http://maps.gstatic.com/intl/en_us/mapfiles/marker_green' + type + '.png">'
html += ' <\/td>';
html += ' <td style="vertical-align: middle; width: 100%;">';
html += address;
html += ' <\/td>';
html += ' <\/tr>';
html += '<\/table>';
}
function routeDistance(dist) {
html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '<\/div>';
}
function detail(point, num, description, dist) {
var target = '"' + mapname + ".showMapBlowup(new GLatLng(" + point.toUrlValue(6) + "))" + '"';
html += '<table style="margin: 0px; padding: 0px; border-collapse: collapse;">';
html += ' <tr style="cursor: pointer;" onclick=' + target + '>';
html += ' <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; text-align: right;">';
html += ' <a href="javascript:void(0)"> ' + num + '. <\/a>';
html += ' <\/td>';
html += ' <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; width: 100%;">';
html += description;
html += ' <\/td>';
html += ' <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px 0.3em 0.5em; vertical-align: top; text-align: right;">';
html += dist;
html += ' <\/td>';
html += ' <\/tr>';
html += '<\/table>';
}
function copyright(text) {
html += '<div style="font-size: 0.86em;">' + text + "<\/div>";
}
// === read through the GRoutes and GSteps ===
for (var i = 0; i < dirn.getNumRoutes(); i++) {
if (i == 0) {
var type = "A";
} else {
var type = "B";
}
var route = dirn.getRoute(i);
var geocode = route.getStartGeocode();
var point = route.getStep(0).getLatLng();
// === Waypoint at the start of each GRoute
waypoint(point, type, geocode.address);
routeDistance(route.getDistance().html + " (about " + route.getDuration().html + ")");
for (var j = 0; j < route.getNumSteps(); j++) {
var step = route.getStep(j);
// === detail lines for each step ===
detail(step.getLatLng(), j + 1, step.getDescriptionHtml(), step.getDistance().html);
}
}
// === the final destination waypoint ===
var geocode = route.getEndGeocode();
var point = route.getEndLatLng();
waypoint(point, "B", geocode.address);
// === the copyright text ===
copyright(dirn.getCopyrightsHtml());
// === drop the whole thing into the target div
div.innerHTML = html;
}
</script>
EDIT:
Here is the HTML as requested. It's just two divs:
<div class="mapWrapper">
<div id="path2"> </div>
<div id="map2"> </div>
</div>
To clarify, the path2 and map2 are being generated dynamically by looping through $_POST values in PHP. Here is a snippit:
foreach($post_entries as $e){
echo "
<div class=\"mapWrapper\">
<div id=\"path" . $increased_counter ."\"> </div>
<div id=\"map" . $increased_counter ."\"> </div>
</div>";
}
EDIT #2
As requested by #user1090190, a public version of the page:
http://qxxiv6yc.myutilitydomain.com/trip-planned
I suspect that path2 has not already been loaded when you call that function. It doesn't matter that you're generating it via PHP. You have to wait for the DOM to load in the browser first before you can reference specific elements. There are two solutions to this:
Call the function after page load. I.e.
<body onload="customPanel(map, "map2", dirn, document.getElementById("path2"), 1);">
Put all your Javascript at the bottom
Related
I would like to create a table that will prompt you to add your name and occupation and add them in a row in the table. The values are supposed to go into an array. The delete button will delete them from the array and remove the row. There is supposed to be a counter as well.
At the moment I tried to do it only for the array peopleArray[]. I encounter the issue that the remove button will not work outside the function for "add" and executes many times, deleting everything in the array with just one click. I am misplacing something.
* {
font-family: verdana;
}
.table-container {
border-radius: 10px;
overflow: hidden;
display: inline-block;
}
.table {
border-collapse: collapse;
border-spacing: 0;
}
.table tr {
text-align: center;
}
.table tr:nth-child(2n) {
background-color: #eeeeee;
}
.table tr:nth-child(2n-1) {
background-color: #fcfafa;
}
.table th {
padding: 0 10px;
font-size: 12px;
width: 150px;
background-color: #A9BABA;
color: #000;
}
.table th:first-child,
.table th:nth-child(4) {
width: 15px;
}
.counter {
font-size: 12px;
font-weight: bold;
padding: 5px;
}
.btn_img {
width: 20px;
}
.button_style {
border: none;
background: none;
transition: all 0.5s;
padding: 5px;
}
.button_style:hover {
transform: scale(1.2);
}
.button_style:focus {
transform: rotateY(180deg);
outline: none;
}
table td {
padding: 0 10px;
border: 1px solid white;
font-size: 15px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="table-container">
<table class="table">
<tr>
<th class="">No.</th>
<th class="">Name</th>
<th class="">Occupation</th>
<th class="">
<button id="btn_add_people" class="button_style"><img class="btn_img" src="https://i.imgur.com/6FXVi7B.png" alt="options">
</button></th>
</tr>
<tr>
<td id="counter" class="counter" colspan="4"></td>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
var peopleArray = [];
var occupArray = [];
var countP = 0;
$("#btn_add_people").click(function() {
var personName = prompt("Enter a name please!");
var personOccup = prompt("Enter an occupation please!");
peopleArray.push(personName);
occupArray.push(personOccup);
countP = peopleArray.length
var addedRow = '<tr id=""><td colspan="1" >' + peopleArray.length + '</td><td id="name' + peopleArray.length + '" colspan="1">' + peopleArray[peopleArray.length - 1] + '</td><td colspan="1">' + occupArray[occupArray.length - 1] + '</td><td colspan="1"><button id="' + peopleArray.length + '" class="button_style btn_remove_person"><img src="https://i.imgur.com/eiyNHjs.png" alt="close" class="btn_img" /></button></td></tr>';
$(".table").append(addedRow);
$("#counter").text("People added: " + countP);
$("tr").on('click', '.btn_remove_person', (function() {
$(this).parents("tr").remove()
var exitN = $(this).attr("id");
peopleArray.splice(exitN - 1, 1);
// get ID from button and connect with ID to splice name and occupation !!!
$("#counter").text("People added: " + countP);
}));
});
});
</script>
</body>
</html>
You could remove the $(document).ready(function() { }); as you are not really making great use of it. If you wanted to keep it to prevent users from entering information, then hide the add button first, then in the .ready display the button to indicate it is ready to use.
Keep the JQuery for adding entries but when creating the delete button add a onclick function to delete the entry.
I leave your counter calculations up to you as I do not know how you want to make the counters..people added being a total number to include deleted entries? People added being a count of entries in the table? Number next to entry being row number or could be 23 and 22 before it were deleted, etc...
var peopleArray = [];
var occupArray = [];
var countP = 0;
$("#btn_add_people").click(function() {
var personName = prompt("Enter a name please!");
var personOccup = prompt("Enter an occupation please!");
peopleArray.push(personName);
occupArray.push(personOccup);
countP = peopleArray.length
var addedRow = '<tr id=""><td colspan="1" >' + peopleArray.length + '</td><td id="name' + peopleArray.length + '" colspan="1">' + peopleArray[peopleArray.length - 1] + '</td><td colspan="1">' + occupArray[occupArray.length - 1] + '</td><td colspan="1"><button id="' + peopleArray.length + '" class="button_style btn_remove_person" onclick="_removeEntry(this)">Delete</button></td></tr>';
$(".table").append(addedRow);
$("#counter").text("People added: " + countP);
});
function _removeEntry(e) {
$(e).parents("tr").remove()
var exitN = $(e).attr("id");
peopleArray.splice(exitN - 1, 1);
$("#counter").text("People added: " + countP);
};
I have small piece of code written in JavaScript and CSS.
The problem is that the 'div column' is not affected by the CSS code. The border and background should appear and their color should be red.
What am I missing?
Here is the code:
https://codepen.io/orc2000/pen/VdEXVY
var text = "";
text += '<div class="row">';
text += '<div class="wrapper-elem"';
text += '<div class="column">';
text += '<h4> Column 1' + '</h4>';
text += '<img src="SomePicture 1"' + 'width="100" height="100" align = "center" > ';
text += '<p>' + 'Price 20' + '</p>';
text += '<p>' + 'DryFood' + '</p>';
text += '</div>';
text += '</div>';
text += '<div class="wrapper-elem"';
text += '<div class="column">';
text += '<h4> Column 2' + '</h4>';
text += '<img src = "SomePicture 2"' + 'width="100" height="100" align = "center" > ';
text += '<p>' + 'Pret 10' + '</p>';
text += '<p>' + 'DryFood' + '</p>';
text += '</div>';
text += '</div>';
text += '</div>';
document.getElementById("delta").innerHTML = text;
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.wrapper-elem {
float: left;
width: 50 %;
background-color: white;
padding: 10px;
border: 2px solid blue;
}
.column {
border: 5px solid red;
background-color: red;
}
/* Clear floats after the columns */
.row: after {
content: "";
display: table;
clear: both;
}
<div id="delta"></div>
You had:
some missing HTML tag parts (2 closing >), when you constructed the HTML using JavaScript
a space in the CSS (width: 50_%)
var text = `
<div class="row">
<div class="wrapper-elem">
<div class="column">
<h4>Column 1</h4>
<img src="SomePicture 1" width="100" height="100" align="center">
<p>Price 20</p>
<p>DryFood</p>
</div>
</div>
<div class="wrapper-elem">
<div class="column">
<h4>Column2</h4>
<img src="SomePicture 2"width="100" height="100" align="center">
<p>Pret 10</p>
<p>DryFood</p>
</div>
</div>
`;
document.getElementById("delta").innerHTML = text;
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.wrapper-elem {
float: left;
width: 50%;
background-color: white;
padding: 10px;
border: 2px solid blue;
}
.column {
border: 5px solid red;
background-color: red;
}
/* Clear floats after the columns */
.row: after {
content: "";
display: table;
clear: both;
}
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="delta"> </div>
<script src="test.js"></script>
</body>
</html>
It's better to call your js, after DOM will be ready:)
Small refactoring
"use strict"
function generateText() {
var text = "";
text += '<div class="row">';
text += '<div class="wrapper-elem"';
text += '<div class="column">';
text += '<h4> Column 1' + '</h4>';
text += '<img src="SomePicture 1"' + 'width="100" height="100" align="center">';
text += '<p>' + 'Price 20' + '</p>';
text += '<p>' + 'DryFood' + '</p>';
text += '</div>';
text += '</div>';
text += '<div class="wrapper-elem"';
text += '<div class="column">';
text += '<h4> Column 2' + '</h4>';
text += '<img src = "SomePicture 2"' + 'width="100" height="100" align="center">';
text += '<p>' + 'Pret 10' + '</p>';
text += '<p>' + 'DryFood' + '</p>';
text += '</div>';
text += '</div>';
text += '</div>';
return text;
}
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("delta").innerHTML = generateText();
});
I create via a String some DOM-Elements and assign it via innerHTML to a div.
Now I need a flexible width of the span element (span_homebase). What I experience is that sometimes (for me it looks randomly) it returns other width than expected. I need the width of this span element because after this in the same line there is an Information Button but the width of the span could be different. So I use the width of span element as margin for the information button. Code is as follows. I searched for a async handler of innerHTML but in another post somebody said that it is not required because it is assigned instantly.
Are there any thoughts what to try? Because the information is now sometimes on the right place and sometimes not.
string = string + "<span id ='span_homebase'>" + homebaseCity + "</span>";
string = string + "<div class='section-end'></div>";
element.innerHTML = string;
var marginInfoHomebase = document.getElementById('span_homebase').offsetWidth + 20;
document.getElementById("information_button_homebase").style.margin = "5px 0 0 " + marginInfoHomebase + "px";
Now if I open the respective site for me sometimes the marginInfoHomebase sometimes returns 108 and sometimes 183 even if the same value is assigned to span element. Very strange. Any thoughts?
EDIT:
Working Example:
function createHomeSettingsView(settingsA){
var element = document.getElementById("table-settings");
var string = "";
for(var i = 0; i < settingsA.length; i++){
for(var z = 0; z < settingsA[i].length; z++){
if(i == 1){
//Notification buttons
if(z == 1){
//homebase setting
if(window.localStorage.getItem("switch_homebase") == 1){
//homebase on
var homebaseCity = settingsA[i][z] + ": " + window.localStorage.getItem("homebase_loc");
string = string + " \
<div class='row' style='height:100px;' id='settings-sec-"+ i +"-row-" + z +"'> \
<div class='text'> \
<span id='span_homebase'>" + homebaseCity + "</span> \
</div> \
<div onClick='homebaseInfoClick();' class='information_button' id='information_button_homebase'></div>\
<div id='handleAutoSwitcherHomebase'></div>\
<div id='showRadiusRangeHomebase'>Radius: 30km</div>\
<input class='sliders' id='changeRadiusRangeHomebase' type='range' min='5' max='100' step='5' oninput='handleChangeHomebase(this.value)' onchange='handleInputHomebase(this.value)' >\
</div>";
}
else{
//homebase off
string = string + " \
<div class='row' id='settings-sec-"+ i +"-row-" + z +"'> \
<div class='text'>\
<span id='span_homebase'>" + settingsA[i][z] + "</span> \
</div> \
<div onClick='homebaseInfoClick();' class='information_button' id='information_button_homebase'></div>\
<div id='handleAutoSwitcherHomebase'></div>\
</div>";
}
}
}
}
}
element.innerHTML = string;
var marginInfoHomebase = document.getElementById("span_homebase").offsetWidth + 25;
var marginText = "5px 0 0 " + marginInfoHomebase + "px";
console.log("Span: " + marginInfoHomebase);
document.getElementById("information_button_homebase").style.margin = marginText;
}
CSS:
.container .table-settings{
top: 64px;
position: absolute;
padding:0;
left: 0;
right: 0;
bottom:0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background-color: #ECEBF3;
}
.container .table-settings .row{
background-color: white;
padding-top: 14px;
height:50px;
border-bottom: 1px solid LightGray;
}
.container .table-settings .row .text{
margin-left: 15px;
color: black;
float: left;
}
#span_homebase{
display: inline-block;
}
To get an inline element's width use getBoundingClientRect method:
var mySpan = document.getElementById("mySpan");
var spanWidth = mySpan.getBoundingClientRect().width;
var spanHeight = mySpan.getBoundingClientRect().height;
By default a span element has no dimension because its CSS display property is inline.
If you want to give it a width, you should change that property to inline-block.
<style>
span {
display: inline-block ;
}
</style>
Now you can play with its dimensions.
I am building a demo of a lotto site where a user is presented with one section full of the balls and a second section that will fill up with his/her selections.
What I am trying to do is create a jQuery function that will run when a user clicks on a ball, this function must retrieve the number of the ball that was clicked as well as the color of the ball (background-image) and then set the number and the background-image to the next available ball.
Here is a jsFiddle: http://jsfiddle.net/8kq5p6gb/1/
This is my jQuery function, it stores the number and background of the clicked ball and then tries to find the next available ball open and applies that text and background to it but it currently does not work. When I click on a ball I get this error :
Uncaught Error: Syntax error, unrecognized expression: [object Object] a:nth-child(1)
For Code :
$(document).ready(function () {
var line_counter = 1;
var number_counter = 1;
$('.draw-selection-wrapper.choice .draw-number').click(function (e) {
event.preventDefault(e);
var number = $(this).text(); ;
var background = $(this).css('background-image');
var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');
var link = $(row + ' a:nth-child(' + number_counter + ')');
link.text(number);
link.css('background-image', background);
number_counter = number_counter + 1;
if (number_counter == 8) {
line_counter = line_counter + 1;
number_counter = 1;
}
});
});
Here is my HTML:
<div class="draw-numbers-outer-wrapper">
<div class="draw-selection-wrapper choice">
<div class="draw-number-row one">
1
2
3
4
5
6
7
</div>
<div class="draw-number-row two">
8
9
10
11
12
13
14
</div>
</div>
<div class="draw-selection-wrapper selections">
<div class="draw-number-row">
</div>
<div class="draw-number-row">
</div>
</div>
</div>
And my CSS:
.draw-selection-wrapper {
width: 50%;
float: left;
}
.draw-number-row {
height: 36px;
border: 1px solid #C6C4C5;
padding-left: 10px;
}
.line-number {
float: left;
height: 100%;
width: 12px;
}
.draw-number {
width: 9%;
float: left;
height: 100%;
line-height: 36px;
margin: 0px 2.5% 0px 2.5%;
color: #000;
text-align: center;
background-color: green;
}
.draw-selection-wrapper.selections .draw-number {
margin: 0px 2% 0px 2%;
}
.draw-number-row.one .draw-number {
background-color: red;
}
.draw-number-row.two .draw-number {
background-color: teal;
}
row is a jQuery object, not a string, and as such you end up with [Object, object] when you try to concantenate the object into a string.
You could use the context selector instead
var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');
var link = $('a:nth-child(' + number_counter + ')', row);
FIDDLE
var link = row.find('a:nth-child(' + number_counter + ')');
Fiddle
replace this
var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');
var link = $(row + ' a:nth-child(' + number_counter + ')');
by
var row = '.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')';
var link = $(row + ' a:nth-child(' + number_counter + ')');
I'm working on a calendar for a webpage that is dynamically generated via javascript. However, I cannot seem to get the cells to all be the same height, unless they're all empty. I've put div's in each cell, set the width and height to fixed, set max-heights and max-widths, and no matter what, the table seems to ignore the CSS entirely and resize itself as it pleases. What makes the issue even more infuriating is that the difference between a filled table cell and an empty one is a mere 7 pixels.
My most recent idea was to write a javascript/jquery function that goes through the cells, finds the largest cell, and resizes all the other cells to be the same size as that one (I don't particularly care how big the cells are provided they are all the same width and height). However, I've discovered that jquery's height and width functions, when parsed to ints, simply return the CSS value set for height and width, or if no value was set (or the value was set as auto) return 0. Is there a function that will give me the absolute width and height of a table cell? Alternatively, is there a way to keep the dimensions of a table cell completely fixed (where regardless of content, they will not resize).
HTML:
<div id="calroot" hidden>
<table id="calendar">
<tr>
<th class="day_spaces">Sunday</th>
<th class="day_spaces">Monday</th>
<th class="day_spaces">Tuesday</th>
<th class="day_spaces">Wednesday</th>
<th class="day_spaces">Thursday</th>
<th class="day_spaces">Friday</th>
<th class="day_spaces">Saturday</th>
</tr>
<tr id="wk1"></tr>
<tr id="wk2"></tr>
<tr id="wk3"></tr>
<tr id="wk4"></tr>
<tr id="wk5"></tr>
<tr id="wk6"></tr>
</table>
</div>
CSS:
table {
padding: 15px;
border-radius: 2px;
background-color:#fff;
}
.list_spaces {
border: 1px solid #e1e1e1;
text-align: center;
}
.day_spaces {
background-image: url("../../Content/linen.png");
text-align: center;
width: 100px;
overflow: hidden;
}
.cal_spaces {
width: auto;
height: auto;
vertical-align: 50px;
border: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
overflow: hidden;
}
.cal_date_nums {
text-align: right;
position: relative;
font-size: 16px;
color: #999999;
opacity: 0.58;
right: 12px;
top: 12px;
}
.cal_event_links {
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.cal_actual_links {
text-align: left;
font-size: 12px;
}
.fix_cells {
width: 100px;
height: 114px;
}
Javascript that generates the table:
function loadCalendar(cd) {
document.getElementById("my_disp").innerText = findMonthandYear(cd.getMonth(), cd.getFullYear());
document.getElementById("my_disp").setAttribute("data-month", cd.getMonth());
document.getElementById("my_disp").setAttribute("data-year", cd.getFullYear());
var sd = findMonthStart(cd.getMonth(), cd.getFullYear());
for (var i = 0; i < sd; i++) {
document.getElementById("wk1").innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'></div></td>" : "<td class='cal_spaces'><div class='fix_cells'></div></td>");
}
var dc = 1;
for (var i = sd; i < 7; i++) {
document.getElementById("wk1").innerHTML += (((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'><p class='cal_date_nums' style='color: #BC7777;'>" : "<td class='cal_spaces'><div class='fix_cells'><p class='cal_date_nums'>") + dc + "</p><div class='cal_event_links' id='" + cd.getFullYear() + "-" + parseM(cd.getMonth()) + "-" + parseD(dc) + "'></div></div></td>");
dc++;
}
var dim = getDaysInMonth(cd);
for (var w = 2; w <= 6; w++) {
for (var i = 0; i < 7; i++) {
if (dc <= dim) document.getElementById("wk" + w).innerHTML += (((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'><p class='cal_date_nums' style='color: #BC7777;'>" : "<td class='cal_spaces'><div class='fix_cells'><p class='cal_date_nums'>") + dc + "</p><div class='cal_event_links' id='" + cd.getFullYear() + "-" + parseM(cd.getMonth()) + "-" + parseD(dc) + "'></div></div></td>");
else document.getElementById("wk" + w).innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'></td>" : "<td class='cal_spaces'></td>");
dc++;
}
if (dc > dim) {
if (w !== 6) {
for (var i = 0; i < 7; i++)
document.getElementById("wk6").innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'></div></td>" : "<td class='cal_spaces'><div class='fix_cells'></div></td>");
}
break;
}
}
for (var i = 0; i < evntsInfo.evntsCount; i++) {
var dtid = removeTimeFromDates(evntsInfo.evntsDates[i]);
if (document.getElementById(dtid) != null)
document.getElementById(dtid).innerHTML += "<a class='cal_actual_links' title='Submitted By: " + evntsInfo.evntsHosts[i] + "\nLocation: " + evntsInfo.evntsLocs[i] + "\nWhen: " + formatDate(evntsInfo.evntsDates[i]) + "\nTickets: " + evntsInfo.evntsTC[i] + "' href=/Home/viewTicketRequests?id=" + evntsInfo.evntsIDs[i] + ">" + evntsInfo.evntsTitles[i] + "</a>\n";
}
currentDayColoring();
fixSizes();
}
function currentDayColoring() {
var cd = new Date();
var dtid = (cd.getFullYear().toString() + "-" + parseM(cd.getMonth()).toString() + "-" + parseD(cd.getDate()).toString());
if (document.getElementById(dtid) != null) {
document.getElementById(dtid).parentElement.parentElement.style.backgroundColor = "#D7E4EA";
document.getElementById(dtid).parentElement.firstChild.style.fontSize = "x-large";
}
}
function fixSizes() {
var mheight = 0;
var spaces = document.getElementsByClassName("cal_spaces");
for (var i = 0; i < spaces.length; i++) {
if (spaces[i].offsetHeight > mheight)
mheight = spaces[i].offsetHeight;
console.log("mheight: " + mheight);
}
for (var i = 0; i < spaces.length; i++) {
spaces[i].offsetHeight = mheight;
}
}