Develop Reference

How do i exclude labels from a sitemap generator in javascript for Blogger

So I have this script that shows a sitemap of my blog just like this:
And when its clicked shows like this:
Basically I want to exclude some tags from showing in the site, and Display the posts of the first label when loaded like the second image.
I tried using cat_remove = ['Label12', 'Label13']; to remove labels but didn't work.
And tried using show_post (cat [0] .term, 1,0); to display post of the first label when loaded but that didn't work either.
I hope I've documented everything. Thanks in advance.
var cat_home = 'https://myblog.blogspot.com';
cat_numb = 4;
cat_pre = '< Anterior';
cat_nex = 'Siguiente >';
var cat_name;
var cat_start;
var cat_class;
function show_post2(a) {
var tt = a.feed.openSearch$totalResults.$t;
dw = '';
dw += '<ul>';
for (var i = 0; i < cat_numb && i < a.feed.entry.length; i++) {
var entry = a.feed.entry[i];
cat_title = entry.title.$t;
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
var cat_url = entry.link[j].href
}
}
dw += '<li>';
dw += (cat_start + i) + '. ' + cat_title + '';
dw += '</li>'
}
dw += '</ul>';
dw += '<div id="navi-cat">';
if (cat_start > 1) {
dw += '' + cat_pre + ''
}
if ((cat_start + cat_numb - 1) < tt) {
dw += '' + cat_nex + ''
}
dw += '<span>' + cat_start;
if (cat_start != tt) {
dw += ' – ' + (cat_start + i - 1)
}
dw += ' / ' + tt + '</span>';
dw += '</div>';
document.getElementById('show-post').innerHTML = dw + '<style type="text/css">.cat-' + cat_class + ' a{background:#bbb!important;color:#fff!important}<\/style>'
}
function show_post(a, b, c) {
var d = document.getElementsByTagName('head')[0];
e = document.createElement('script');
e.type = 'text/javascript';
e.setAttribute('src', cat_home + '/feeds/posts/default/-/' + a + '?alt=json-in-script&start-index=' + b + '&max-results=' + cat_numb + '&callback=show_post2');
d.appendChild(e);
cat_name = a;
cat_start = parseInt(b), cat_class = c
}
function show_cat(a) {
var cat = a.feed.category;
dw = '';
dw += '<ul>';
for (var i = 0; i < cat.length - 1; i++) {
for (var j = i + 1; j < cat.length; j++) {
if (cat[i].term > cat[j].term) {
cat_hv = cat[i].term;
cat[i].term = cat[j].term;
cat[j].term = cat_hv
}
}
}
for (var i = 0; i < cat.length; i++) {
dw += '<li class="cat-' + i + '">';
dw += '<a href="" onclick="show_post(\'' + cat[i].term + '\',\'1\',\'' + i + '\');return false" title="';
dw += cat[i].term;
dw += '">';
dw += cat[i].term;
dw += '</a>';
dw += '</li>'
}
dw += '</ul>';
document.getElementById('show-cat').innerHTML = dw
}
document.write('<script type="text/javascript" src="' + cat_home + '/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
#show-cat {
float: left;
margin-right: 33px;
width: 165px;
height: 310px;
overflow-x: hidden;
overflow-y: auto;
line-height: 18px
}
#show-cat ul {
margin: 0;
border-top: 0 solid rgba(0, 0, 0, 0.1);
padding: 0
}
#show-post ul li {
list-style-type: none;
margin: 0 0 0 -25px;
padding: 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
#show-post ul li:hover {
margin-right: 10px;
border-color: #fcd3d3
}
#show-cat ul li a {
display: block;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
transition: initial
}
#navi-cat a:hover {
color: #fff!important
}
#show-cat ul li:last-child a {
border-bottom: none
}
#show-cat ul li a,
#navi-cat a {
background: #fff;
color: #555;
font-weight: bold;
text-decoration: none
}
#show-cat ul li a,
#navi-cat a,
#navi-cat span {
font-size: 13px
}
#show-cat ul li a:hover,
#navi-cat a:hover {
background: #666;
color: #fff
}
#show-post {
float: left;
width: 69%;
line-height: 1.6em
}
#show-post a {
color: #333;
font-size: 14px
}
#show-post a:hover {
color: #f14b4b
}
#navi-cat {
padding: 20px 0
}
#navi-cat a {
padding: 5px 10px;
background: rgba(0, 0, 0, 0.7);
margin: 0 5px 0 0;
color: #fff;
border-radius: 3px;
}
#navi-cat a:nth-child(2) {
background: #f14b4b;
margin: 0 10px 0 0;
color: #fff
}
#navi-cat span {
float: right;
padding: 5px 0;
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
font-weight: 700
}
#show-cat::-webkit-scrollbar {
width: 8px;
height: 8px
}
#show-cat::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .1);
}
#show-cat::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .6)
}
#show-cat::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .4);
transition: all 400ms ease-in-out
}
#media screen and (max-width:768px) {
#show-cat {
width: 35%
}
#show-post {
width: 59%
}
}
#media screen and (max-width:480px) {
#show-cat {
width: 100%;
margin: 20px 0
}
#show-post {
width: 100%
}
}
<div id='show-cat'></div>
<div id='show-post'>
<div style='clear:both'></div>

Here is how to exclude labels
cat = cat.filter(i => !["Label12","Label13"].includes(i.term));
Place it after this variable var cat = a.feed.category;
To display posts of the first label when loading, use this show_post(cat[0].term, 1) after sorting.
var cat_home = 'https://myblog.blogspot.com';
cat_numb = 4;
cat_pre = '< Anterior';
cat_nex = 'Siguiente >';
var cat_name;
var cat_start;
var cat_class;
function show_post2(a) {
var tt = a.feed.openSearch$totalResults.$t;
dw = '';
dw += '<ul>';
for (var i = 0; i < cat_numb && i < a.feed.entry.length; i++) {
var entry = a.feed.entry[i];
cat_title = entry.title.$t;
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
var cat_url = entry.link[j].href
}
}
dw += '<li>';
dw += (cat_start + i) + '. ' + cat_title + '';
dw += '</li>'
}
dw += '</ul>';
dw += '<div id="navi-cat">';
if (cat_start > 1) {
dw += '' + cat_pre + ''
}
if ((cat_start + cat_numb - 1) < tt) {
dw += '' + cat_nex + ''
}
dw += '<span>' + cat_start;
if (cat_start != tt) {
dw += ' – ' + (cat_start + i - 1)
}
dw += ' / ' + tt + '</span>';
dw += '</div>';
document.getElementById('show-post').innerHTML = dw + '<style type="text/css">.cat-' + cat_class + ' a{background:#bbb!important;color:#fff!important}<\/style>'
}
function show_post(a, b, c) {
var d = document.getElementsByTagName('head')[0];
e = document.createElement('script');
e.type = 'text/javascript';
e.setAttribute('src', cat_home + '/feeds/posts/default/-/' + a + '?alt=json-in-script&start-index=' + b + '&max-results=' + cat_numb + '&callback=show_post2');
d.appendChild(e);
cat_name = a;
cat_start = parseInt(b), cat_class = c
}
function show_cat(a) {
var cat = a.feed.category;
cat = cat.filter(i => !["Label12","Label13"].includes(i.term));
dw = '';
dw += '<ul>';
for (var i = 0; i < cat.length - 1; i++) {
for (var j = i + 1; j < cat.length; j++) {
if (cat[i].term > cat[j].term) {
cat_hv = cat[i].term;
cat[i].term = cat[j].term;
cat[j].term = cat_hv
}
}
}
for (var i = 0; i < cat.length; i++) {
dw += '<li class="cat-' + i + '">';
dw += '<a href="" onclick="show_post(\'' + cat[i].term + '\',\'1\',\'' + i + '\');return false" title="';
dw += cat[i].term;
dw += '">';
dw += cat[i].term;
dw += '</a>';
dw += '</li>'
}
dw += '</ul>';
document.getElementById('show-cat').innerHTML = dw;
show_post(cat[0].term, 1);
}
document.write('<script type="text/javascript" src="' + cat_home + '/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');

How to storage values in local storage using jquery?

How can dynamic values be stored in the local storage?
I have a seat layout. How i can store only the selected seat numbers in the local storage, but not reserved seats?
My code can be seen below:
$(function() {
var settings = {
rows: 6,
cols: 10,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function(reservedSeat) {
var str = [],
seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
var SeatNo = document.getElementById('place').value;
localStorage.setItem('SeatNum', SeatNo);
};
//case I: Show from starting
//init();
//Case II: If already booked
var bookedSeats = [5, 10, 25];
init(bookedSeats);
$('.' + settings.seatCss).click(function() {
if ($(this).hasClass(settings.selectedSeatCss)) {
alert('This seat is already reserved');
} else {
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function() {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function() {
var str = [],
item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
<div>
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="">
<ul id="seatDescription">
<li style="background:url('available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="width:100%">
<input type="button" id="btnShowNew" value="Show Selected Seats" />
<input type="button" id="btnShow" value="Show All" />
</div>
</div>

localStorage is an object within the global 'window' object, and therefore will normally be available throughout your javascript code. It pretty much behaves like a dictionary, you create, retrieve, edit and remove key:value pairs. jQuery will not be necessary.
It is also imporant to remember that localStorage only support string values, and simply saving an array would not work.
// When modifying bookedSeats:
var bookedSeatsCacheString = JSON.stringify(bookedSeats);
localStorage.setItem('bookedSeats', bookedSeatsCacheString);
// Init code:
var bookedSeatsCache = localStorage.getItem('bookedSeats');
var bookedSeats = JSON.parse(bookedSeatsCache);
if(!Array.isArray(bookSeats))
bookedSeats = [];
init(bookedSeats);
EDIT: I edited your code to make this work with localStorage
$(function () {
var settings = {
rows: 6,
cols: 10,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function (reservedSeat) {
var str = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
};
// Init code
var bookedSeatsCache = localStorage.getItem('bookedSeats'),
bookedSeats;
if(typeof bookedSeatsCache === 'string' && bookedSeatsCache.length > 0)
bookedSeats = JSON.parse(bookedSeatsCache);
else
bookedSeats = [];
init(bookedSeats);
$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
alert('This seat is already reserved');
}
else{
var seatNum = $(this).attr('title');
bookedSeats.push(seatNum);
localStorage.setItem('bookedSeats', JSON.stringify(bookedSeats));
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function () {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function () {
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
#holder{
height:225px;
width:365px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
list-style: none outside none;
position: absolute;
}
#place li:hover
{
background-color:yellow;
}
#place .seat{
background:url("available_seat_img.gif") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;
padding:5px;
}
#place .selectedSeat
{
background-image:url("booked_seat_img.gif");
}
#place .selectingSeat
{
background-image:url("selected_seat_img.gif");
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#seatDescription li{
vertical-align: middle;
list-style: none outside none;
color:white;
font-family:'LatoWeb', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
font-size:13px;
padding-left:28px;
padding-top:14px;
height:35px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="">
<ul id="seatDescription">
<li style="background:url('available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="width:100%">
<input type="button" id="btnShowNew" value="Show Selected Seats" />
<input type="button" id="btnShow" value="Show All" />
</div>
</div>

How to print the array values in html dom using java script? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have created a bus seat layout dynamically ....
and i have selected seats are pushed to array...
and how to print the array values in html DOM.....
below is my html code
<div>
<h2> Choose seats by clicking the corresponding seat in the layout below:</h2>
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="">
<ul id="seatDescription">
<li style="background:url('available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="width:100%">
<input type="button" id="btnShowNew" value="Show Selected Seats" />
<input type="button" id="btnShow" value="Show All" />
</div>
</div>
below is my css
#holder{
height:225px;
width:365px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
list-style: none outside none;
position: absolute;
}
#place li:hover
{
background-color:yellow;
}
#place .seat{
background:url("available_seat_img.gif") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;
padding:5px;
}
#place .selectedSeat
{
background-image:url("booked_seat_img.gif");
}
#place .selectingSeat
{
background-image:url("selected_seat_img.gif");
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#seatDescription li{
verticle-align:middle;
list-style: none outside none;
padding-left:35px;
height:35px;
float:left;
}
below is my js
$(function () {
var settings = {
rows: 6,
cols: 10,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function (reservedSeat) {
var str = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
// Add already reserved seats
localStorage.setItem('SeatNum', JSON.stringify(reservedSeat));
};
//case I: Show from starting
//init();
//Case II: If already booked
var bookedSeats = [5, 10, 25];
init(bookedSeats);
$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
alert('This seat is already reserved');
}
else{
$(this).toggleClass(settings.selectingSeatCss);
var selectedSeat = JSON.parse(localStorage.getItem('SeatNum'));
if($(this).hasClass(settings.selectingSeatCss)){
// Add seat in local storage
selectedSeat.push(parseInt($(this).find('a').text()));
localStorage.setItem('SeatNum', JSON.stringify(selectedSeat));
}
else{
// Remove seat from local storage
selectedSeat.splice(selectedSeat.indexOf(parseInt($(this).find('a').text())), 1);
localStorage.setItem('SeatNum', JSON.stringify(selectedSeat));
}
}
// Logging
console.log('Reserved and selecting seats : ' + JSON.parse(localStorage.getItem('SeatNum')));
});
$('#btnShow').click(function myFunction() {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function () {
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
how to print the array values in html DOM....
i put an alert..
i tried code but that does't work..
i created bus seat layout dynamically i am putting an alert to show the selected seats and all seats but i want to print the selected seat in html Dom....

Take a div in the end of your html
and then put that line where you set the alert
$('#showSit').text(JSON.parse(localStorage.getItem('SeatNum')));

IE11 and a Javascript-based Modal Form Acting Funny

I have a WordPress plugin called Easy Age Verifier in the WordPress repository and got a support request that has me flat-out baffled. Here's his message:
On Explorer 11 on Windows 10, the fields can't be filled in. Clicking in a field seems to activate a blinking text line somewhere way below the fields and typing numbers in does nothing. I can't include a link because the site is in development.
I installed Easy Beer Lister onto my test environment, and whudduya know? I get the same exact problem.
The code that runs this plugin can be seen in the repository, but I'll go ahead and put a copy of the code that creates the form here as well.
Has anyone else experienced this issue? If so, can you point me in the direction on what causes it, and how I can fix it? Thank you!
//For the max value of the input in the age form
taseavCurrDate = new Date();
if(taseavData.debug == true){
var taseavDebugLog = [];
}
function taseavDebug(log){
if(taseavData.debug == true){
console.log(log);
taseavDebugLog.push(log);
}
return
}
//Gets the cookie that was just stored
function taseavGetCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return false;
}
//The actual form
function taseavAgeForm(){
var result;
result = "<div id='taseav-age-verify' class='" + taseavData.wrapperClass + "'>";
result += "<form class='" + taseavData.formClass + "'>";
result += "<h2>" + taseavData.formTitle + "</h2>";
result += "<div class='taseav-month'>";
result += "<label>Month</label>";
result += "<input name='month' type='number' min='1' max='12' required>";
result += "</div>";
result += "<div class='taseav-day'>";
result += "<label>Day</label>";
result += "<input name='day' type='number' min='1' max='31' required>";
result += "</div>";
result += "<div class='taseav-year'>";
result += "<label>Year</label>";
result += "<input name='year' type='number' min='1900' max='"+ taseavCurrDate.getFullYear() +"' required>";
result += "</div>";
result += "<input type='submit' value='submit'>";
result += "</form>";
result += "</div>";
return result;
}
//Stores the age into a cookie
function taseavStoreAge(){
var month = jQuery('#taseav-age-verify input[name="month"]').val();
var day = jQuery('#taseav-age-verify input[name="day"]').val();
var year = jQuery('#taseav-age-verify input[name="year"]').val();
if(month < 10){
month = "0" + month;
}
if(day < 10){
day = "0" + day;
}
var result = "taseavdob=" + year + "-" + month + "-" + day;
document.cookie = result;
taseavDebug('Age stored as a cookie. Value = ' + result);
}
function taseavGetAge() {
taseavDebug('Evaluated Date of Birth: ' +taseavGetCookie('taseavdob'));
var birthday = new Date(taseavGetCookie('taseavdob'));
var ageDifMs = Date.now() - birthday.getTime();
var ageDate = new Date(ageDifMs);
return Math.abs(ageDate.getUTCFullYear() - 1970);
}
function taseavIsAboveAge(ageToCheck){
if(!ageToCheck){
taseavDebug('Getting minimum age to check...')
ageToCheck = taseavData.minAge;
taseavDebug('Age to check: ' + taseavData.minAge);
};
taseavDebug('Getting evaluated age to check against...')
var age = taseavGetAge();
taseavDebug('Age checked: ' + age);
if(age < ageToCheck){
return false;
}
else{
return true;
}
}
function confirmAge(){
if(taseavIsAboveAge() == false){
taseavDebug('User is underage. Displaying message "' + taseavData.underageMessage + '"');
alert(taseavData.underageMessage);
if(taseavData.debug == true){
alert(taseavDebugLog.join('\n \n'));
}
history.back();
}
else{
taseavDebug('User is older than the min age of ' + taseavData.minAge +'. Removing age verify overlay.');
jQuery('#taseav-age-verify').remove();
}
}
jQuery(document).ready(function(){
jQuery("html").append(taseavAgeForm());
jQuery("#taseav-age-verify form").submit(function(e) {
e.preventDefault();
});
//Disables mouse-wheel when gallery is open
jQuery("#taseav-age-verify").bind("mousewheel", function() {
return false;
});
jQuery('#taseav-age-verify').submit(function(){
taseavStoreAge();
confirmAge();
taseavDebug(taseavData);
});
})
.taseav-age-verify {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
z-index:9999;
}
.taseav-age-verify form {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width:600px;
width:90%;
}
.taseav-age-verify input{
width:calc(100% - 24px);
padding:10px;
border-radius:5px;
}
.taseav-age-verify div{
margin-bottom:20px;
max-width:100%;
float:left;
}
.taseav-age-verify .taseav-month{
width:24%;
}
.taseav-age-verify .taseav-day{
width:24%;
}
.taseav-age-verify .taseav-year{
width:50%;
}
.taseav-age-verify div:nth-of-type(2){
margin-left:1%;
margin-right:1%;
}
.taseav-age-verify input[type="submit"]{
clear:both;
width:100%;
}
.taseav-age-verify{
color:white;
}
.taseav-age-verify label{
color:white;
}
.taseav-age-verify h2{
font-size:30px;
text-align:center;
color:white;
}

Please either wrap your label around your input, or give the input an id and use the "for" property on your label, where the value is the id of the input.
This will help you with your focus issues and make your form accessible.

Solved. The problem was I appended code after the 'html' tag, instead of the 'body' tag.
Here's what I originally had:
jQuery("html").append(taseavAgeForm());
Here's what I had to change it to:
jQuery("body").append(taseavAgeForm());

Moving Javascript variables into Html Table

i found this guide to create a stock ticker.
I tried to change it into an html table, but i'm stuck.
So, i created the table, but i have big problems to divide each variable.
What i want to accomplish is a table with this columns order:
Symbol: CompName
Price: Price
Change: PriceIcon + ChnageInPrice
%: PercentChnageInPrice
What i've accomplished for now it's just this, all the content in one column (because of the variable StockTickerHTML i guess)
Full Code Link
Can you please help me?
var CNames = "^FTSE,FTSEMIB.MI,^IXIC,^N225,^HSI,EURUSD=X";
var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys";
var StockTickerHTML = "";
var StockTickerXML = $.get(flickerAPI, function(xml) {
$(xml).find("quote").each(function () {
Symbol = $(this).attr("symbol");
$(this).find("Name").each(function () {
CompName = $(this).text();
});
$(this).find("LastTradePriceOnly").each(function () {
Price = $(this).text();
});
$(this).find("Change").each(function () {
ChnageInPrice = $(this).text();
});
$(this).find("PercentChange").each(function () {
PercentChnageInPrice = $(this).text();
});
var PriceClass = "GreenText", PriceIcon="up_green";
if(parseFloat(ChnageInPrice) < 0) { PriceClass = "RedText"; PriceIcon="down_red"; }
StockTickerHTML = StockTickerHTML + "<span class='" + PriceClass + "'>";
StockTickerHTML = StockTickerHTML + "<span class='quote'>" + CompName + " </span> ";
StockTickerHTML = StockTickerHTML + parseFloat(Price).toFixed(2) + " ";
StockTickerHTML = StockTickerHTML + "<span class='" + PriceIcon + "'></span>" + parseFloat(Math.abs(ChnageInPrice)).toFixed(2) + " (";
StockTickerHTML = StockTickerHTML + parseFloat( Math.abs(PercentChnageInPrice.split('%')[0])).toFixed(2) + "%)</span> </br>";
});
$("#dvStockTicker").html(StockTickerHTML);
$("#dvStockTicker").jStockTicker({interval: 30, speed: 2});
});
}

One solution could be this :
(see comments in code)
$(window).load(function() {
StockPriceTicker();
setInterval(function() {
StockPriceTicker();
}, 2 * 1000); // <------ we refresh each 2 seconds
});
// we get the table's body where
// the lines will be inserted.
var $body = $('table tbody');
/*
this will be the cache of
our lines, once they are prepared / transformed
as your need, we will join and insert them
in the body of our table.
*/
var Lines = [];
/*
We define a function in charge of creating the HTML
of each row of hour table, and then push them
in the array defined above "Lines".
*/
var addLine = function(symbol, price, change, percent) {
Lines.push('<tr>' +
'<td class="symbol" >' + symbol + '</td>' +
'<td class="price" >' + price + '</td>' +
'<td class="change" >' + change + '</td>' +
'<td class="percent">' + percent + '</td>' +
'</tr>');
};
// this is your function to get data
function StockPriceTicker() {
var Symbol = "",
CompName = "",
Price = "",
ChnageInPrice = "",
PercentChnageInPrice = "";
var CNames = "^FTSE,FTSEMIB.MI,^IXIC,^N225,^HSI,EURUSD=X";
var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys";
var StockTickerXML = $.get(flickerAPI, function(xml) {
$(xml).find("quote").each(function() {
Symbol = $(this).attr("symbol");
$(this).find("Name").each(function() {
CompName = $(this).text();
});
$(this).find("LastTradePriceOnly").each(function() {
Price = $(this).text();
});
$(this).find("Change").each(function() {
ChnageInPrice = $(this).text();
});
$(this).find("PercentChange").each(function() {
PercentChnageInPrice = $(this).text();
});
var PriceClass = "GreenText",
PriceIcon = "up_green";
if (parseFloat(ChnageInPrice) < 0) {
PriceClass = "RedText";
PriceIcon = "down_red";
}
/*
We create the html to be inserted on each xml loop.
- First : prepare and transform as you need
- Last : use the function we define above "addLine";
*/
var htmlSymbol,
htmlPrice,
htmlChange,
htmlPercent;
htmlSymbol = "<span class='" + PriceClass + "'>";
htmlSymbol = htmlSymbol + "<span class='quote'>" + CompName + " </span></span>";
htmlPrice = parseFloat(Price).toFixed(2) + " ";
htmlChange = parseFloat(Math.abs(ChnageInPrice)).toFixed(2) + "<span class='" + PriceIcon + "'></span>";
htmlPercent = parseFloat(Math.abs(PercentChnageInPrice.split('%')[0])).toFixed(2) + "%";
// We use here the function defined above.
addLine(htmlSymbol, htmlPrice, htmlChange, htmlPercent);
});
/*
Once the loop of reading the XML
end, we have pushed all html in the array "Lines".
So now we delete the content of our table's body, and
we fill it with all the lines joined.
*/
$body.empty().html(Lines.join(''));
// we reset the content of Lines for the next interval
Lines = [];
});
}
.GreenText {
color: Green;
}
.RedText {
color: Red;
}
.up_green {
background: url(http://www.codescratcher.com/wp-content/uploads/2014/11/up.gif) no-repeat left center;
padding-left: 10px;
margin-right: 5px;
margin-left: 5px;
}
.down_red {
background: url(http://www.codescratcher.com/wp-content/uploads/2014/11/down.gif) no-repeat left center;
padding-left: 10px;
margin-right: 5px;
margin-left: 5px;
}
table {
border: solid;
border-color: #666;
}
td {
padding: 3px;
}
.symbol {
border: solid 3px #DDD;
}
.price {
border: solid 3px aqua;
}
.change {
border: solid 3px yellow;
}
.percent {
border: solid 3px purple;
}
td.price,
td.change,
td.percent {
text-align: right;
}
tbody tr:nth-child(odd){
background-color:#EEF;
}
tbody tr:nth-child(even){
background-color:#AAA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th class='symbol'>Symbol</th>
<th class='price'>Price</th>
<th class='change'>Change</th>
<th class='percent'>%</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>