Despite the errors that show up in the console, the checkboxes are loading for another program but for my program they aren't displaying. The errors I get are:
Blocked loading mixed active content “checkboxesfilelocation.js”
Blocked loading mixed active content “checkboxesfilelocation.css”
Blocked loading mixed active content "checkboxesfilelocation.js”
Loading failed for the <script> with source “checkboxesfilelocation.js”
Blocked loading mixed active content “checkboxesfilelocation.css”
This Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox? doesn't answer my question since I always received those errors and the older program I have runs perfectly despite those errors but the current program I'm working on, having those same errors, does not.
I believe they could not be displaying due to the sizing of the wrapper and form (the css), which are different from the older original program. I tried increasing the sizing in the css but it still didn't show. This is the file that creates the checkboxes which relies on checkboxesfilelocation.
<script type='text/javascript' src='checkboxesfilelocation.js'></script>
<link rel="stylesheet" type="text/css" href="checkboxesfilelocation.css">
<div id='checkbox-div'>
<form id='location-form' action="javascript:void(0);">
<?php
//database etc., creating arrays
echo "<span class='expand' onclick='expand(this)'>Countries <span class='expand-symbol'>+</span></span><div class='location-div'>";
foreach ($countries as $country){
echo "<input type='checkbox' id='$country' class='location-checkbox'><label for='$country'>".$country."</label><br>";
}
echo "</div><span class='expand' onclick='expand(this)'>Cities <span class='expand-symbol'>+</span></span><div class='location-div'>";
foreach ($cities as $city){
echo "<input type='checkbox' id='$city' class='location-checkbox'><label for='$city'>".$city."</label><br>";
}
echo "</div>";
?>
</form>
</div>
<script>
//code to deal with when a checkbox is checked/unchecked
</script>
The expand function does this though I don't think it has anything to do with the checkboxes not showing up since "Countries +" and "Cities +" doesn't show up the page. Although, in the other program, the function doesn't work. The checkboxes are already expanded to show all of them.
function expand(element){
var list = element.nextSibling;
var symbol = element.firstElementChild;
if (list.style.display == 'block'){
list.style.display = 'none';
symbol.innerHTML = '+';
} else {
list.style.display = 'block';
symbol.innerHTML = '−';
}
}
I include this file that creates the checkboxes inside my main file that runs the website using html and css like so:
<style>
body{
min-width: 890px;
font-size: 0px;
font-family: Arial, Sans-Serif;
margin-left: 6px;
}
div>p{
margin: 10px;
}
body>p{
max-width: 885px;
}
#barchart {
/*barchart styling*/
}
#wrapper{
position: relative;
display: inline-block;
}
</style>
</head>
<body id='body'>
<div id='wrapper'>
<div id="barchart" class="chart"></div>
<?php
include 'file location that creates checkboxes.php';
?>
</div>
</body>
The original program (where the checkboxes do display and work perfectly) has this styling and html:
<style>
body{
font-family: Arial, Sans-Serif;
font-size: 14px;
}
#wrapper{
width: 1010px;
height: 530px;
}
#bar-graph{
/*bar graph styling*/
}
#options{
padding: 5px;
float: left;
}
#citation{
position: absolute;
}
select{
margin-right: 15px;
}
</style>
</head>
<body id='body'>
<div id='wrapper'>
<div id='bar-graph'></div>
<?php
include 'file location that creates checkboxes.php';
?>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire