We Keep Coding

Disable NVDA from reading 'clickable' for series highchart

How can I prevent NVDA screen reader from reading 'clickable' for series Highcharts? The series values are wrapped inside a "tspan" tag and don't have any click event associated with it. Thanks for the help in advance.
Adding a 2nd screenshot (I'll attach a fiddle once I figure it out) in response to Graham Ritchie's comment.
window.EJ = window.EJ || {},
EJ.features = EJ.features || {};
EJ.events = {};
(function(q) {
'use strict';
var topics = {},
subUid = -1;
q.subscribe = function(topic, func) {
if (!topics[topic]) {
topics[topic] = [];
}
var token = (++subUid).toString();
topics[topic].push({
token: token,
func: func
});
return token;
};
q.publish = function(topic, args) {
if (!topics[topic]) {
return false;
}
setTimeout(function() {
var subscribers = topics[topic],
len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func(topic, args);
}
}, 0);
return true;
};
q.unsubscribe = function(token) {
for (var m in topics) {
if (topics[m]) {
for (var i = 0, j = topics[m].length; i < j; i++) {
if (topics[m][i].token === token) {
topics[m].splice(i, 1);
return token;
}
}
}
}
return false;
};
}(EJ.events));
/**
* Features loader
* Iterates over all data-features attributes in the DOM and will execute EJ.features.featureName.init()
*/
EJ.features = {
init: function() {
var features = $('[data-features]');
if (!features.length) return false;
for (var i = 0, n = features.length; i < n; i++) {
var $el = $(features[i]),
func = $el.data('features');
if (this[func] && typeof this[func].init === 'function') {
this[func].init($el);
}
}
}
};
EJ.features.careerFitTool = (function(quiz) {
quiz.init = function(el) {
if (!el) {
throw new Error('You must supply the constructor an element instance to operate on.');
}
var currQuestionIndex = -1,
$start = el.find('.quiz-start'),
$finish = el.find('.quiz-finish'),
$startOver = el.find('.quiz-startOver'),
$previousQuestion = el.find('.previous-question'),
$nextQuestion = el.find('.next-question'),
$stateDefault = el.find('.state-default'),
$stateActive = el.find('.state-quiz'),
$questions = el.find('.question-field'),
$progressIndicator = el.find('.progress-indicator'),
numOfQuestions = $questions.length
$answers = el.find('.answer');
var faPct = 0;
var boaPct = 0;
var hqPct = 0;
$previousQuestion.on('click', function() {
changeQuestion('prev');
});
$nextQuestion.on('click', function() {
changeQuestion('next');
});
$start.on('click', function() {
changeState('default', 'quiz');
});
$finish.on('click', function() {
changeState('quiz', 'finished');
});
$startOver.on('click', function() {
changeState('finished', 'default');
currQuestionIndex = -1;
$(el).find('form')[0].reset();
focusLetsGetStarted();
});
$answers.on('change', function() {
$nextQuestion.removeClass('disabled')
.attr('disabled', false);
})
/**
* Change state of quiz.
* #param {string} currState Current state (default/quiz/finished)
* #param {string} nextState Desired next state (default/quiz/finished)
*/
function changeState(currState, nextState) {
el.find('.state-' + currState).hide();
el.find('.state-' + nextState).show();
if (currState === 'default') {
$previousQuestion.hide();
$($questions[++currQuestionIndex]).show();
$($progressIndicator[currQuestionIndex]).addClass('active');
}
}
function computeJobFitPercents() {
var faAmount = 0;
var boaAmount = 0;
var hqAmount = 0;
var totalOptionAmount = 0;
var faPercent = 0;
var boaPercent = 0;
var hqPercent = 0;
for (var i = 1; i <= 45; i++) {
var radios = document.getElementsByName('group' + i);
for (var j = 0; j < radios.length; j++) {
var radio = radios[j];
var radioString = radio.value;
if (radioString.indexOf("Financial Advisor") >= 0 && radio.checked) {
faAmount++;
}
if (radioString.indexOf("Branch Office Administrator") >= 0 && radio.checked) {
boaAmount++;
}
if (radioString.indexOf("Headquarters") >= 0 && radio.checked) {
hqAmount++;
}
}
totalOptionAmount = faAmount + boaAmount + hqAmount;
faPercent = parseFloat(((faAmount / totalOptionAmount) * 100).toFixed());
boaPercent = parseFloat(((boaAmount / totalOptionAmount) * 100).toFixed());
hqPercent = parseFloat(((hqAmount / totalOptionAmount) * 100).toFixed());
var totalPercent = faPercent + boaPercent + hqPercent;
}
generatePieChart(faPercent, boaPercent, hqPercent);
// Populate the variables required to display the result
faPct = faPercent;
boaPct = boaPercent;
hqPct = hqPercent;
}
/**
* This function generates pie chart for the given inputs.
* It generates a job fir graph for the questions answered by the user.
*/
function generatePieChart(faPrcnt, boaPrcnt, hqPrcnt) {
Highcharts.setOptions({
colors: ['#F3BD06', '#f6d050 ', '#fae49b']
});
// Build the chart
$('#pieChartContainer').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
width: 230
},
credits: {
enabled: false
},
title: {
text: null
},
scrollbar : {
enabled : false
},
tooltip: {
enabled: false,
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
borderWidth: 0,
point: {
events: {
mouseOver: function() {
//pieChart.tooltip.hide();
}
}
}
}
},
exporting: {
enabled: false
},
legend: {
layout: 'vertical',
floating: false,
borderRadius: 0,
borderWidth: 0,
align: 'center',
verticalAlign: 'bottom',
labelFormatter: function() {
return this.y + '%' + ' ' + '-' + this.name;
}
},
series: [{
type: 'pie',
name: 'Career Chart',
point: {
events: {
legendItemClick: function() {
return false;
}
}
},
data: [
['Financial Advisor', faPrcnt],
['Branch Office Administrator', boaPrcnt], {
name: 'Headquarters',
y: hqPrcnt,
sliced: false,
selected: false
}
]
}]
});
}
/**
* Go to previous or next question
* #param {string} direction 'next' or 'prev'
* #return {boolean} are we on first or last question?
*/
function changeQuestion(direction) {
//Call function to compute the job fit percent as per the answers selected by the user
//computeJobFitPercents();
var questionAnswers;
var isAnswered;
$($questions[currQuestionIndex]).hide();
$progressIndicator.removeClass('active');
if (direction === 'next') {
currQuestionIndex++;
} else {
currQuestionIndex--;
}
$($progressIndicator[currQuestionIndex]).addClass('active');
questionAnswers = $($questions[currQuestionIndex]).find('.answer');
for (var i = 0, j = questionAnswers.length; i < j; i++) {
if ($(questionAnswers[i]).prop('checked') === true) {
isAnswered = true;
}
}
if (isAnswered) {
$nextQuestion.removeClass('disabled')
.attr('disabled', false);
} else {
$nextQuestion.addClass('disabled')
.attr('disabled', true);
}
if (currQuestionIndex === -1) {
$($questions[currQuestionIndex]).hide();
changeState('quiz', 'default');
} else if (currQuestionIndex === numOfQuestions) {
//Call function to compute the job fit percent as per the answers selected by the user
computeJobFitPercents();
$($questions[currQuestionIndex]).hide();
changeState('quiz', 'finished');
//Determine the result
$('#faOutcome').hide();
$('#faResultLink').hide();
$('#boaOutcome').hide();
$('#boaResultLink').hide()
$('#hqOutcome').hide();
$('#hqResultLink').hide();
if (faPct >= boaPct) {
if (faPct >= hqPct) {
$('#faOutcome').show();
$('#faResultLink').show();
} else {
$('#hqOutcome').show();
$('#hqResultLink').show();
}
} else if (boaPct >= hqPct) {
$('#boaOutcome').show();
$('#boaResultLink').show();
} else {
$('#hqOutcome').show();
$('#hqResultLink').show();
}
} else {
$($questions[currQuestionIndex]).show();
if (currQuestionIndex === 0) {
$previousQuestion.hide();
} else {
$previousQuestion.show();
}
}
return currQuestionIndex === numOfQuestions || currQuestionIndex === 0;
}
}
return quiz;
}(EJ.features.careerFitTool || {}));
EJ.initialize = function() {
EJ.features.init();
};
$(function() {
EJ.initialize();
$('.comp-registrationForm.modal').modal('show');
});
/* Enter Your Custom CSS Here */
input[type="checkbox"],input[type="radio"] {
box-sizing: border-box;
padding: 0;
margin: 4px 0 0;
margin-top: 1px \9;
/* IE8-9 */
line-height: normal;
position: relative;
opacity: 1;
left: 0;
}
input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus {
outline: thin dotted #333 !important;
outline-offset: -2px !important;
outline-color: #000 !important;
}
.radio,.checkbox {
display: block;
min-height: 20px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
vertical-align: middle;
}
.radio label,.checkbox label {
display: inline;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
}
.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,.checkbox + .checkbox {
margin-top: -5px;
}
.radio-inline,.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: 400;
cursor: pointer;
}
.radio-inline + .radio-inline,.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
input[type="radio"][disabled],fieldset[disabled] input[type="radio"],input[type="checkbox"][disabled],fieldset[disabled] input[type="checkbox"],.radio[disabled],fieldset[disabled] .radio,.radio-inline[disabled],fieldset[disabled] .radio-inline,.checkbox[disabled],fieldset[disabled] .checkbox,.checkbox-inline[disabled],fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
/*
# Button Primary
*/
.button,.button-cta,.button-cta-floating,.button-previous,.button-download,.button-expand,.button-arrow-only {
color: #fff;
background-color: #f8512e;
border-color: #f96141;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15);
box-shadow: 0 1px 2px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15);
-webkit-transition: background-color .25s ease-out;
transition: background-color .25s ease-out;
font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1;
padding: 8px 12px;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.pull-right {
float: right !important;
}
.hide {
display: none !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
/* start .comp-careerFitTool */
.comp-careerFitTool {
background: #9b9998;
padding-bottom: 15px;
position: relative;
}
.comp-careerFitTool:before,.comp-careerFitTool:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.comp-careerFitTool:after {
clear: both;
}
#media screen and (min-width: 470px) {
.comp-careerFitTool {
padding-bottom: 35px;
}
}
.career-tool-intro {
color: #fff;
font-size: 20px;
padding: 20px;
}
#media screen and (min-width: 960px) {
.career-tool-intro h3 {
font-size: 32px;
}
}
.career-tool-intro p {
margin: 0;
}
#media screen and (min-width: 470px) {
.career-tool-intro {
padding: 25px;
}
}
.career-tool-info {
background: #fff;
border: 1px solid #9b9998;
color: #5b5955;
padding: 20px;
}
.career-tool-info:before,.career-tool-info:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.career-tool-info:after {
clear: both;
}
.career-tool-info input[type="radio"],.career-tool-info input[type="checkbox"] {
margin-right: 5px;
vertical-align: top;
}
.career-tool-info label {
font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
font-weight: 400;
font-size: 18px;
}
#media screen and (min-width: 730px) and (max-width: 959px) {
.career-tool-info .questions-intro {
font-size: 20px;
}
}
#media screen and (min-width: 960px) {
.career-tool-info .questions-intro {
font-size: 24px;
}
}
.career-tool-info .questions {
margin-bottom: 16px;
}
.career-tool-info .question {
font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
font-weight: 400;
}
#media screen and (min-width: 730px) and (max-width: 959px) {
.career-tool-info .question {
font-size: 20px;
}
}
#media screen and (min-width: 960px) {
.career-tool-info .question {
font-size: 28px;
}
}
.career-tool-info .question-field,.career-tool-info .question-changer,.career-tool-info .question-progress {
padding-left: 50px;
}
.career-tool-info .question-field {
position: relative;
}
.career-tool-info .question-number {
font-family: "Proxima Nova-Bold",Helvetica,Arial,sans-serif;
font-weight: 400;
height: 31px;
width: 31px;
background: transparent url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/question-number.png) no-repeat 0 0;
color: #fff;
display: block;
left: 2px;
line-height: 33px;
position: absolute;
text-align: center;
top: 4px;
}
.career-tool-info .question-changer {
margin-bottom: 18px;
}
.career-tool-info .state,.career-tool-info .question-field {
display: none;
}
.career-tool-info .state-default {
display: block;
}
#media screen and (min-width: 1190px) {
.career-tool-info .state-default .inner-wrap,.career-tool-info .state-finished .inner-wrap {
font-size: 24px;
}
.career-tool-info .state-quiz {
font-size: 20px;
}
}
.career-tool-info .state .inner-wrap {
float: left;
}
#media screen and (min-width: 730px) {
.career-tool-info .state .inner-wrap {
width: 60%;
}
}
#media screen and (min-width: 1190px) {
.career-tool-info .state .inner-wrap {
padding-top: 35px;
padding-right: 25px;
}
}
#media screen and (min-width: 730px) {
.career-tool-info .state .inner-wrap-right {
float: right;
width: 40%;
}
}
#media screen and (max-width: 729px) {
.career-tool-info .state img.pull-right {
display: none;
}
}
#media screen and (min-width: 730px) {
.career-tool-info .state img.pull-right {
margin-bottom: -25px;
margin-right: -25px;
margin-top: -25px;
width: 40%;
}
}
.career-tool-info .quiz-startOver {
text-decoration: underline;
}
#media screen and (min-width: 730px) {
.career-tool-info .pie-chart,.career-tool-info .legend {
float: left;
padding: 0 1%;
width: 48%;
}
}
.career-tool-info .pie-chart img {
display: block;
height: auto;
max-width: 100%;
}
#media screen and (max-width: 729px) {
.career-tool-info .pie-chart {
display: none;
}
}
#media screen and (min-width: 730px) {
.career-tool-info .legend {
margin-top: 20px;
}
}
.career-tool-info .opportunity {
margin-bottom: 18px;
}
.career-tool-info .opportunity:before,.career-tool-info .opportunity:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.career-tool-info .opportunity:after {
clear: both;
}
#media screen and (min-width: 470px) {
.career-tool-info {
padding: 25px;
}
}
#media screen and (min-width: 730px) {
.career-tool-info .score,.career-tool-info .position {
float: left;
}
.career-tool-info .score {
width: 40%;
}
.career-tool-info .position {
width: 60%;
}
.career-tool-info .key {
height: 20px;
width: 20px;
background: #fbc81b;
display: block;
float: left;
margin-right: 15px;
}
.career-tool-info .key2 {
background: #9b9998;
}
.career-tool-info .key3 {
background: #3f3f3f;
}
}
.progress-indicator {
height: 18px;
width: 18px;
display: inline-block;
*display: inline;
*zoom: 1;
background: transparent url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/progress-indicator.png) no-repeat 0 0;
}
.progress-indicator.active {
background-image: url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/progress-indicator-active.png);
}
/* /end .comp-careerFitTool */
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://careers.edwardjones.com/images/highcharts.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<section class="comp-careerFitTool l-spacer" data-features="careerFitTool">
<div class="career-tool-intro">
<h2>Test highcharts after 3 questions</h2>
<p>Find the Right Opportunity for You.</p>
</div>
<div class="career-tool-info">
<form action="">
<div class="state state-default">
<div class="inner-wrap">
<h3>Unsure of what role may be right for you?</h3>
<p>Take a short quiz to see where your interests fit best at Edward Jones.</p>
<p><a class="button-cta quiz-start" href="javascript:;">Let's get started</a></p>
</div>
<img src="https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/career-fit-tool.png" alt="Career fit tool" class="pull-right">
</div>
<div class="state state-quiz">
<div class="questions">
<fieldset id="questionDiv1" aria-live="assertive" class="question-field">
<legend>
<span aria-label="question number 1 of 8" class="question-number">1</span>
<p class="questions-intro">Please select the option below that best applies to you.</p>
<p class="question">The type of role that interests me more:</p>
</legend>
<div>
<p><label for="question100"> <input type="radio" id="question100" name="group1" class="answer" value="Financial Advisor">Entrepreneurial/Business Development</label></p>
<p><label for="question200"> <input type="radio" id="question200" name="group1" class="answer" value="Branch Office Administrator">Support someone building their business</label></p>
</div>
</fieldset>
<fieldset id="questionDiv2" aria-live="assertive" class="question-field">
<legend>
<img src="https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/career-fit-tool.png" alt="career fit tool" class="pull-right">
<span aria-label="question number 2 of 8" class="question-number">2</span>
<p class="questions-intro">Please select the option below that best applies to you.</p>
<p class="question">How I would like to be compensated for my work:</p>
</legend>
<div>
<p><label for="question101"> <input type="radio" id="question101" name="group2" class="answer" value="Financial Advisor">Commissions</label></p>
<p><label for="question201"> <input type="radio" id="question201" name="group2" class="answer" value="Branch Office Administrator,Headquarters">Salary or hourly</label></p>
</div>
</fieldset>
<fieldset id="questionDiv3" aria-live="assertive" class="question-field">
<legend>
<span aria-label="question number 3 of 8" class="question-number">3</span>
<p class="questions-intro">Please select the option below that best applies to you.</p>
<p class="question">My preferred work style:</p>
</legend>
<div>
<p><label for="question102"> <input type="radio" id="question102" name="group3" class="answer" value="Financial Advisor,Branch Office Administrator">Work autonomously</label></p>
<p><label for="question202"> <input type="radio" id="question202" name="group3" class="answer" value="Headquarters">Work collaboratively on a team</label></p>
</div>
</fieldset>
</div>
<p aria-live="assertive" class="question-changer">
<a aria-label="go to previous question" class="button-previous previous-question" href="javascript:;">Previous</a>
<a aria-label="go to next question" class="button-cta next-question disabled" href="javascript:;">Next</a>
</p>
<p class="question-progress">
<span aria-live="assertive" class="progress-indicator"></span>
<span aria-live="assertive" class="progress-indicator"></span>
<span aria-live="assertive" class="progress-indicator"></span>
</p>
</div>
<div aria-live="assertive" class="state state-finished">
<div class="inner-wrap">
<h3>You're Finished</h3>
<p>Based on your responses, we recommend you explore career opportunities as a</p>
<p id="faOutcome">Financial Advisor</p>
<p id="boaOutcome">Branch Office Administrator</p>
<p id="hqOutcome">Headquarters Professional</p>
</div>
<div class="inner-wrap-right">
<div id="pieChartContainer" tabindex="0"></div>
</div>
<p id="faResultLink">Discover more about this opportunity here </p>
<p id="boaResultLink">Discover more about this opportunity here </p>
<p id="hqResultLink">Discover more about this opportunity here </p>
<p><a class="quiz-startOver" href="javascript:;">Start Over</a></p>
</div>
</form>
</div>
</section>
</body>
</html>

Multiple images (xml -> javascript -> CSS) being overwritten, only 1 image being displayed

I am building a simple scraping app that pulls data from an XML with format:
<entry>
<title>Title of something</title>
<summary>https://link_to_image_used_in_background</summary>
<link>www.link-to-website.com</link>
</entry>
that is being read by javascript:
$(document).ready(function() {
loadRSS('http://website.com/file.xml', '#Newsfeed', 'Heise');
});
function loadRSS(link, htmlContainer, author) {
var url = link;
var container = $(htmlContainer);
feednami.load(url, function(result){
if (result.error) {
console.log(result.error);
} else {
var entries = result.feed.entries;
for(var i = 0; i < 50; i++){
container.append("<li class=\"RSScard\"><p><h2>"
+ "" + entry.title + ' '
+ "</h2></p>"+ author +"</li>");
var bg_url = entry.summary
$(function () {
$(".RSScard").css({
backgroundImage: "url('" + bg_url + "')"
});
});
}
}
});
}
and is passed to CSS:
body {
background: #444;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Roboto', sans-serif;
margin:0;
padding:0;
}
ul {
list-style-type: none;
}
#Newsfeed {
max-width: 1350px;
margin: 0 auto;
padding-top: 25px;
padding-bottom: 65px;
}
.RSScard {
padding: 20px 25px;
margin-left: 20px;
margin-top: 20px;
min-width: 200px;
max-width: 200px;
min-height: 225px;
opacity: .87;
background-image: var(plink);;
color: #388E3C;
font-size: 0.85em;
text-align: center;
overflow: hidden;
box-shadow: 0 0 8px rgba(0,0,0, 0.25);
float:left;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.RSScard a {
text-decoration: none;
color: #ededed;
font-size: 0.75em;
font-weight: 300;
opacity: 1;
}
.RSScard:hover {
opacity: 1;
background-color: #202B33;
}
.... my problem is that it that while the title and link are written to their respective space correctly, each space's background image is overwritten by the last xml entry's 'summary' child. My apologies for the probably poor coding and formatting - I initially took Tobias Totz's rss reader / feeder (https://codepen.io/tobias-totz/pen/rrJXqo) and tried to hotwire it. Thanks for your help!

The problem here is that you are setting the background image to all elements with class RSScard in every iteration of the loop. That's why you are able to see only the last item image because you have overridden the previous ones.
You would need to do something like the following to set a different image for each enty:
for(var entry in entries){
var $listElement = $("<li class=\"RSScard\".... </li>");
container.append($listElement);
$listElement.css({
backgroundImage: "url('" + entry.summary + "')"
});
}

Inserting input field to chat popup

I am trying to learn by creating a chat bar. I have created a side nav bar with users and once I click the chat pop up box will open at the bottom. I want to add input field to that chatbox.
I tried to add the input field but I just got half success; it just gets added to the body not at the bottom of the chat box.
chat.html
<script>
//this function can remove a array element.
Array.remove = function(array, from, to) {
var rest = array.slice((to || from) + 1 || array.length);
array.length = from < 0 ? array.length + from : from;
return array.push.apply(array, rest);
};
var total_popups = 0;
//arrays of popups ids
var popups = [];
function close_popup(id)
{
for(var iii = 0; iii < popups.length; iii++)
{
if(id == popups[iii])
{
Array.remove(popups, iii);
document.getElementById(id).style.display = "none";
calculate_popups();
return;
}
}
}
function display_popups()
{
var right = 220;
var iii = 0;
for(iii; iii < total_popups; iii++)
{
if(popups[iii] != undefined)
{
var element = document.getElementById(popups[iii]);
element.style.right = right + "px";
right = right + 320;
element.style.display = "block";
}
}
for(var jjj = iii; jjj < popups.length; jjj++)
{
var element = document.getElementById(popups[jjj]);
element.style.display = "none";
}
}
function register_popup(id, name)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">'+ name +'</div>';
element = element + '<div class="popup-head-right">✕</div>';
element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
element = element + '<div class="popup-bottom"><div class="popup-bottom"><div id="'+ id +'"></div><input id="field"></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}
//calculate the total number of popups suitable and then populate the toatal_popups variable.
function calculate_popups()
{
var width = window.innerWidth;
if(width < 540)
{
total_popups = 0;
}
else
{
width = width - 200;
//320 is width of a single popup box
total_popups = parseInt(width/320);
}
display_popups();
}
//recalculate when window is loaded and also when window is resized.
window.addEventListener("resize", calculate_popups);
window.addEventListener("load", calculate_popups);
</script>
style.css
<style>
#media only screen and (max-width : 540px)
{
.chat-sidebar
{
display: none !important;
}
.chat-popup
{
display: none !important;
}
}
body
{
background-color: #e9eaed;
}
.chat-sidebar
{
width: 200px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
}
.sidebar-name
{
padding-left: 10px;
padding-right: 10px;
margin-bottom: 4px;
font-size: 12px;
}
.sidebar-name span
{
padding-left: 5px;
}
.sidebar-name a
{
display: block;
height: 100%;
text-decoration: none;
color: inherit;
}
.sidebar-name:hover
{
background-color:#e1e2e5;
}
.sidebar-name img
{
width: 32px;
height: 32px;
vertical-align:middle;
}
.popup-box
{
display: none;
position: absolute;
bottom: 0px;
right: 220px;
height: 285px;
background-color: rgb(237, 239, 244);
width: 300px;
border: 1px solid rgba(29, 49, 91, .3);
}
.popup-box .popup-head
{
background-color: #009688;
padding: 5px;
color: white;
font-weight: bold;
font-size: 14px;
clear: both;
}
.popup-box .popup-head .popup-head-left
{
float: left;
}
.popup-box .popup-head .popup-head-right
{
float: right;
opacity: 0.5;
}
.popup-box .popup-head .popup-head-right a
{
text-decoration: none;
color: inherit;
}
.popup-box .popup-bottom .popup-head-left
{
position:absolute;
left: 0px;
bottom: 0px
text-decoration: none;
color: inherit;
}
.popup-box .popup-messages
{
height: 100%;
overflow-y: scroll;
}
</style>

posting relevant parts hopw you can make sense of it.
HTML
<div class="popup-box chat-popup">
<div class="popup-head">
<div class="popup-head-left">name</div>
<div class="popup-head-right">✕</div>
<div style="clear: both"></div>
</div>
<div class="popup-messages"></div>
<div class="popup-bottom-container">
<div class="popup-bottom">
<div id="'+ id +'"></div>
<input type="text" id="field">
</div>
</div>
</div>
CSS
.popup-bottom
{
position:absolute;
left: 0px;
bottom: 10px;
text-decoration: none;
color: inherit;
}
.popup-box .popup-messages
{
height: 200px;
overflow-y: scroll;
}
It is always better to try out your layout in plain html before testing with js

Array[0] undefined

When I output my code I get this output:
0[object Object]
1[object Object]
I believe this is because it is an object. Although I'm pretty noob, so I believe an object is an array. Correct me if that's wrong.
I noticed the object in my console:
Objectresult: Objectadmin_county: "Somerset"admin_district: "Sedgemoor"admin_ward: "Axevale"ccg: "NHS Somerset"codes: Objectcountry: "England"eastings: 343143european_electoral_region: "South West"incode: "2WL"latitude: 51.2870673059808longitude: -2.81668795540695lsoa: "Sedgemoor 001A"msoa: "Sedgemoor 001"nhs_ha: "South West"northings: 154531nuts: "Somerset"outcode: "BS26"parish: "Axbridge"parliamentary_constituency: "Wells"postcode: "BS26 2WL"primary_care_trust: "Somerset"quality: 1region: "South West"__proto__: Objectstatus: 200__proto__: Object
it maybe neater to look at this: https://api.postcodes.io/postcodes?lon=0.080647&lat=51.626281000000006&radius=115
I am trying to separate these parts into usable items stored as variables. I tried array[0] but that is undefined. Which I assume means I need to do something more like object(array[0])
I've been searching a while and I'm not getting anywhere.
Here's my full code that I was forking from elsewhere.
$(window).ready(function() {
$(initiate_geolocation);
});
function initiate_geolocation() {
navigator.geolocation.getCurrentPosition(handle_geolocation_query);
}
function handle_geolocation_query(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var url = "https://api.postcodes.io/postcodes?lon=" + lon + "&lat=" + lat + "&radius=125";
post(url).done(function(postcode) {
displayData(postcode);
// console.log("postcode says: "+postcode);
console.log(postcode[0[1]]);
});
}
//display results on page
function displayData(postcode) {
var html = "";
$('#text').hide();
for (var index in postcode['result']) {
html += "<div class='row'>";
html += "<div class='cell'>";
html += index.replace(/_/g, ' ').strFirstUpper();
html += "</div><div class='cell'>";
html += postcode['result'][index];
html += "</div></div>";
console.log(postcode)
}
$('#text').html(html).fadeIn(300);
}
//ajax call
function post(url) {
return $.ajax({
url: url,
success: function() {
//woop
},
error: function(desc, err) {
$('#text').html("Details: " + desc.responseText);
}
});
}
//uppercase
String.prototype.strFirstUpper = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
#import url(//fonts.googleapis.com/css?family=Roboto);
html {
font-family: 'Roboto', sans-serif;
}
.header {
position: fixed;
z-index: 10;
width: 100%;
background: -moz-linear-gradient(90deg, #394D66, #3A5B85);
background: linear-gradient(90deg, #394D66, #3A5B85);
height: 80px;
min-width: 500px;
}
h1 {
font-weight: 400;
text-align: center;
margin: 0px;
font-size: 1.5em;
color: #9DC3EB;
text-transform: uppercase;
}
h1 span {
font-size: 0.8em;
text-transform: lowercase;
color: #E0E0E0;
}
.row {
width: 100%;
font-size: 1.2em;
padding: 5px 0px;
border-bottom: 1px solid #ccc;
}
.inputHolder {
width: 100%;
font-size: 20px;
text-align: center;
}
.inputHolder input {
text-align: center;
color: #333;
}
.cell {
display: inline-block;
width: 49%;
color: #393939;
}
.row .cell:first-child {
text-align: right;
padding-right: 10px;
}
.row:hover {
background: #ccc;
}
#text {
z-index: 0;
padding: 90px 0px;
width: 60%;
margin: 0px auto;
min-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class='header'>
<h1><span>Postcode Seach with</span> Postcodes.io</h1>
<!-- <div class='inputHolder'>
<input placeholder='Postcode' type='text' id='txtPostcode'/>
<input type='button' value='Search' id='btnPostcode'/>
</div>
-->
</div>
<div id='text'></div>
Eventually i want this code to ask you for permission to discover your location when you open the page and then find your post code (using postcode.io). I've got most of the way there but my noobishness is hurting me badly. Any help is much appreciated.
The code must be https to run geolocation.

How to debug "Mixed Content" errors in a browser?

I'm working on a project in codepen (it is large project for me as a beginner). So I decided to clean it up a little bit in https://www.dirtymarkup.com/ and pasted tidied code back in codepen. However after that procedure my code is broken and displays a bunch of errors in console.log. If you need look at console.
Project on codepen
HTML
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!--********** HEADER **********-->
<header class="navigation">
<div class="icon">
<span class="glyphicon glyphicon-align-justify" onclick=
"openNav()"></span>
<div id="headerText">
Social Media
</div>
</div><!--icon div-->
<div id="textRandomQuote">
Random Quote Project 2016 <span id="by">by</span> <span id=
"nzMai">NZ MAI</span>
</div>
</header><!--********** QUOTE SECTION **********-->
<section>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 quoteDiv col-xs-12">
<p id="quotes"></p><!--end of "quotes" p-->
<button class="btn btn-primary" id="getQuote" type=
"button">Get Quote</button>
<div class="like&share pull-right">
<span class="glyphicon glyphicon-heart social-but"
data-placement="left" data-toggle="tooltip" title=
"Like the Quote"></span> <span class=
"glyphicon glyphicon-share" data-placement="left"
data-toggle="tooltip" title="Share the Quote"></span>
<span><i aria-hidden="true" class="fa fa-twitter"
data-placement="left" data-toggle="tooltip" title=
"Tweet the Quote"></i></span>
</div>
</div><!--end of "col-md-6 col-md-offset-3" div-->
</div><!--row-->
<div class="row">
<div class=
"col-md-6 col-md-offset-3 col-xs-12 bioDivContainer">
<h1 class="authorName"></h1>
<p class="bioDiv"></p>
</div>
</div><!--row-->
</div><!--end of container-->
</section>
<section class="articlesSection">
<div class="container">
<div class="row">
<div id="wikiArticlesDiv">
<h1 class="wikiArticlesHeader"></h1>
<ul class="wikiArticlesList"></ul>
</div>
</div>
</div>
</section><!--SIDE NAVIGATION-->
<div class="sidenav" id="mySidenav">
<a class="closebtn" href="javascript:void(0)" onclick=
"closeNav()">×</a> About <a href="#"><img alt=
"twitter" id="twitter" src=
"https://www.socialflow.com/wp-content/uploads/2016/04/twitter1.png"></a>
<a href="#"><img alt="youtube" id="youtube" src=
"https://worldartsme.com/images/youtube-icon-clipart-1.jpg"></a>
<a href="#"><img alt="facebook" id="facebook" src=
"https://rocketfans.com/wp-content/uploads/2014/12/Buy-facebook-likes.png">
</a>
</div><!-- Use any element to open the sidenav -->
<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
CSS
#import https://fonts.googleapis.com/css?family=Roboto;
.navigation {
width: 100%;
height: 80px;
background-color: #e0f2f1;
box-shadow: 1px 5px 16px #aec0bf;
}
.icon {
display: inline;
width: 240px;
height: 100%;
}
.glyphicon-align-justify {
font-size: 30px;
margin-top: 20px;
margin-left: 20px;
margin-right: 0;
}
#headerText {
display: inline;
font-size: 24px;
margin-left: 10px;
border-right: 2px solid #000;
padding-right: 5px;
font-family: 'Roboto',sans-serif;
font-weight: 700;
opacity: .9;
color: #424242;
}
#textRandomQuote {
width: auto;
display: inline;
margin-left: 20px;
font-family: 'Roboto',sans-serif;
font-size: 18px;
font-weight: 700;
opacity: .75;
}
#by {
font-size: 12px;
font-family: 'Roboto',sans-serif;
opacity: .4;
}
#nzMai {
font-size: 18px;
font-family: 'Roboto',sans-serif;
border: 1px solid #424242;
padding: 10px;
}
.quoteDiv {
padding-bottom: 20px;
transition: all .7s ease;
background-color: #b2b2b2;
height: auto;
margin-top: 40px;
padding-top: 40px;
box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);
background-image: repeating-linear-gradient(90deg,transparent,transparent 50%,#F5F5F5 50%,#F5F5F5),repeating-linear-gradient(180deg,transparent,transparent 50%,#F5F5F5 50%,#F5F5F5),repeating-radial-gradient(circle,#607D8B,#607D8B 45%,transparent 45%,transparent 60%,#607D8B 60%,#607D8B 100%);
background-size: 3px 3px;
}
.quoteDiv:hover {
box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);
background-image: repeating-linear-gradient(45deg,transparent,transparent 50%,#9E9E9E 50%,#9E9E9E),repeating-linear-gradient(-45deg,transparent,transparent 50%,#424242 50%,#424242);
background-size: 50px 50px;
}
#quotes {
text-align: center;
font-family: 'Roboto',sans-serif;
font-size: 36px;
color: #FAFAFA;
text-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);
}
#getQuote {
text-align: center;
}
.bioDivContainer {
padding-bottom: 20px;
background-color: #ebf9fe;
height: auto;
margin-top: 40px;
padding-top: 40px;
box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);
}
h1 {
text-align: center;
font-family: 'Roboto',sans-serif;
opacity: .9;
color: #424242;
}
.bioDiv {
font-family: 'Roboto',sans-serif;
opacity: .9;
color: #424242;
font-size: 18px;
}
.articlesSection {
margin-top: 45px;
height: auto;
background-color: #e0f2f1;
box-shadow: 1px 5px 16px #aec0bf;
margin-bottom: 45px;
}
#wikiArticlesDiv {
padding-top: 20px;
margin: 0 auto;
width: 60%;
margin-top: 25px;
margin-bottom: 25px;
height: auto;
opacity: .9;
border: 2px solid #000;
}
.wikiArticlesHeader {
text-align: center;
font-family: 'Roboto',sans-serif;
opacity: .9;
color: #424242;
}
.wikiArticlesList {
padding-left: 0;
}
.articleItem {
list-style-type: none;
text-align: center;
font-size: 22px;
opacity: .8;
}
.shortInfo {
color: red;
display: block;
font-family: 'Roboto',sans-serif;
font-size: 18px;
opacity: .8;
}
.glyphicon-heart,.glyphicon-share,.fa-twitter {
font-size: 20px;
color: #337ab7;
cursor: pointer;
opacity: .8;
}
.active {
color: red;
opacity: .8;
}
/**********SIDE NAVIGATION****************/
/* The side navigation menu */
.sidenav {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: .5s;
/* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: .3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,.offcanvas a:focus {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
a #twitter {
width: 60px;
}
a #youtube {
width: 60px;
padding-left: 0;
}
a #facebook {
width: 60px;
padding-left: 0;
}
#media all and (max-width: 1000px) {
#wikiArticlesDiv {
width: 90%;
}
}
#media all and (max-width: 800px) {
.wikiArticlesHeader {
font-size: 24px;
}
.authorName {
font-size: 24px;
}
#quotes {
font-size: 24px;
}
a {
font-size: 18px;
}
.shortInfo {
font-size: 16px;
}
.bioDiv {
font-size: 16px;
}
}
#media all and (max-width: 600px) {
#by,#nzMai {
display: none;
}
}
Javascript
var randomQuoteGenerator = (function() {
//var foundArticle = "Ben Stein";
//////////
///General
//////////
var general = {
// The URL to the quote API
url: 'https://api.forismatic.com/api/1.0/',
// What to display as the author name if s/he's unknown
unknownAuthor: 'Unknown',
// Base URL for the tweet links generation
tweetURL: 'https://twitter.com/home?status=',
//wikiURL:'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + foundArticle + '&format=json&callback=wikiCalback'
};
/////////////
////DOM cache
/////////////
var domCache = {
$quoteDiv: $('#quotes'),
$authorDiv: $('#author'),
$clickButton: $('#getQuote'),
$tweetButton: $('#tweetQuote'),
$bioDiv: $('.bioDiv'),
$authorName: $('.authorName'),
$wikiArticlesDivHeader: $('.wikiArticlesHeader'),
$wikiArticlesList: $('.wikiArticlesList'),
$wikiArticlesDiv: $('#wikiArticlesDiv')
};
var getWikiAuthorBio = function(author) {
var url =
'https://en.wikipedia.org/w/api.php?action=opensearch&search=' +
author + '&format=json&callback=wikiCalback'
//////////////
//Wiki request
/////////////
var wikirequest = function() {
$.ajax({
url: url,
dataType: 'jsonp',
success: function(wikiData) {
// Fetch the biographical information
var bioName = wikiData[2][0];
// Check if instead of bio there is a phrase "The article may refer to...." if so then change indices
if (bioName.indexOf(
'may refer to') >= 0) {
bioName = wikiData[2][1];
} else {
var bioName = wikiData[2][0];
}
var wikiArcticles = wikiData[1];
var wikiArticlesShortInfo =
wikiData[2]
domCache.$wikiArticlesList.html(
'');
var authorName = wikiData[0];
if (authorName === "Unknown") {
console.log(
"This is author's name " +
authorName);
$('.bioDiv').html('');
$('.bioDiv').text(
'No available information'
);
}
for (var j = 0; j < wikiData.length; j++) {
var articleAuthor =
wikiData[1][j];
var articleInfo = wikiData[
2][j];
var linkAuthor = wikiData[3]
[j];
domCache.$wikiArticlesList.append(
'<li class="articleItem">' +
'<span>' +
'<a href =' +
linkAuthor +
' target="_blank" >' +
articleAuthor +
'</a>' + '</span>' +
'<span class="shortInfo">' +
articleInfo +
'</span>' + '</li>'
);
// Check if some articles are undefined if so hide them
if (typeof articleAuthor ===
"undefined") {
$('.articleItem').last()
.html('');
}
if (articleInfo === "") {
$('.shortInfo').last().html(
'');
}
//console.log(j + " " + articleAuthor);
//console.log(j + " " + articleInfo);
//console.log(j + " " + linkAuthor);
} // end of for loop
// Short biography
console.log(wikiData);
console.log(wikiArcticles);
console.log(url);
domCache.$bioDiv.text(bioName);
} // end of success
});
} // wikirequest
wikirequest();
}
///////////////////////////////
//Display the quote on the page
///////////////////////////////
var displayQuote = function(quote, author) {
domCache.$quoteDiv.text(quote);
domCache.$authorDiv.text(author);
domCache.$authorName.text(author);
domCache.$bioDiv.text(getWikiAuthorBio(author));
};
//////////
//getQuote
/////////
var getQuote = function() {
$.ajax({
url: general.url,
type: 'GET',
dataType: 'jsonp',
jsonpCallback: "saveQuote",
data: 'method=getQuote&format=jsonp&lang=en&jsonp=saveQuote',
success: function(data) {
if (!data.quoteAuthor) {
data.quoteAuthor = general.unknownAuthor;
}
var quote = data.quoteText;
var author = data.quoteAuthor;
displayQuote(quote, author);
var addon =
"'s Related Wikipedia Articles";
domCache.$wikiArticlesDivHeader.text(
author + addon)
console.log(data);
} // end of success
});
} // get quote
////////////////////////////
//get new quote by clicking
///////////////////////////
var ul = function() {
domCache.$clickButton.on('click', getQuote);
domCache.$wikiArticlesList.html("");
};
var init = function() {
// Display a quote
getQuote();
ul();
};
return {
init: init
};
})(); // end of self-invoking function "randomQuoteGenerator"
//////////
//function is ready
///////////
$(document).ready(function() {
// Initialize the QuoteGenerator module
randomQuoteGenerator.init();
});
// SIDE NAVIGATION
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
$(".social-but").click(function() {
$(this).toggleClass("active");
});
Errors in console
Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'. This request has been blocked; the content must be served over HTTPS.
Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure image 'http://www.socialflow.com/wp-content/uploads/2016/04/twitter1.png'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure image 'http://worldartsme.com/images/youtube-icon-clipart-1.jpg'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/?callback=saveQuote&method=getQuote&format=jsonp&lang=en&jsonp=saveQuote&_=1470391383459'. This request has been blocked; the content must be served over HTTPS.

The console errors you are receiving are exactly what they say they are, Mixed Content errors. You are loading the codepen page via HTTPS but the resources named in the errors are being loaded over HTTP. You can either change the URLs for those resources to HTTPS urls (alter http:// to https:// ) or remove the protocol designations entirely enabling the browser to pick which protocol to use ( remove http: leaving just the // ).