I have a function that renders an object in html.
.item {
padding: 10px;
margin: 20px;
display: inline-block;
position: relative;
border: 1px solid #666;
background: #ddd;
}
.item h4 {
font-size: 18px;
text-align: center;
}
.item h5 {
font-size: 14px;
text-align: center;
}
.item img {
width: 200px;
height: 200px;
}
I seem to be missing a formatting issue. The JS compiles properly, no errors, but both the h4 tag and the h5 tag render outside the , even though in code the closing div tag is after the h4 and h5 tags.
Here ids the HTML after it gets rendered in the browser
<div class="menuHolder" id="menuContainer">
for (var i = 0; i < foodItems.length; i++) {
document.getElementById("menuContainer").innerHTML += '<div class="item"> <img src="' + foodItems[i].image + '" >';
document.getElementById("menuContainer").innerHTML += '<h4> ' + foodItems[i].name + '</h4>';
document.getElementById("menuContainer").innerHTML += '<h5> $' + foodItems[i].price + '</h5>';
document.getElementById("menuContainer").innerHTML += '</div>';
console.log("Item: " + foodItems[i].name + " Cost: $" + foodItems[i].price);
}
.item {
padding: 10px;
margin: 20px;
display: inline-block;
position: relative;
border: 1px solid #666;
background: #ddd;
}
.item h4 {
font-size: 18px;
text-align: center;
}
.item h5 {
font-size: 14px;
text-align: center;
}
.item img {
width: 200px;
height: 200px;
}
<div class="menuHolder" id="menuContainer">
<div class="item">
<img src="images/hamburger.jpg"></div>
<h4>Hamburger</h4>
<h5>$2.99</h5><div class="item">
<img src="images/fries.jpg"></div>
<h4>Fries</h4>
<h5>$1.99</h5>
<div class="item">
<img src="images/donuts.jpg">
</div>
<h4>Donuts</h4>
<h5>$0.99</h5>
</div>
Try this:
for (var i = 0; i < foodItems.length; i++) {
var tmpstr = '<div class="item"> <img src="' + foodItems[i].image + '" >';
tmpstr += '<h4> ' + foodItems[i].name + '</h4>';
tmpstr += '<h5> $' + foodItems[i].price + '</h5>';
tmpstr += '</div>';
document.getElementById("menuContainer").innerHTML = tmpstr;
console.log("Item: " + foodItems[i].name + " Cost: $" + foodItems[i].price);
}
When you added string to innerHTML, browsers may "auto correct" the html and added at the end.
P.S. you may need to take care of escaping characters in your foodItems[i].name.
Related
I am seeking help with my JavaScript script to make it expandable when a new item (video) is added to my SharePoint folder. I created a counter that counts each time the video button is selected and displays the new count inside a div. The script works as expected but I like to expand its capability to automatically adjust when a new video is added into the SharePoint video folder. The video is dynamically added to an HTML page when dropped into the folder. However, when I add a new video its loads into the zero-index position and move the others video down one; making the previous video in the zero-index position to the one position and so on. Can someone view my script and see; if possible, how I can make my current script adjust accordingly when the new video is loaded? I like to make it where I do not have to go back into script and renumber everything by hand when a new video is added. I hope this question make sense.
jQuery(document).on("click", "#column5", function() {
videoHits();
getFilesFromFolder("/sites/dcsa/ep/epMainFiles/BI/video").done(function(data) {
$.each(data.d.results, function(i, item) {
var spDate = new Date(item.TimeCreated.split('T')[0]) //example: '2015-10-30T05:00:00Z'
var newTillDate = new Date();
spDate.setDate(spDate.getDate() + 2);
if (spDate <= newTillDate) {
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html("Videos");
} else {
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html('<img class="newArrow" style="width: 60px; position: relative; right: 5px; top: 0px;"src="../SiteAssets/SitePages/Test Page/icons/arrow-with_new2.gif" alt="logo">Videos');
}
});
});
});
///Read hits from growVideoHits List
function videoHits() {
jQuery(document).ready(function() {
var chartData = getListData("growVideoHits"); //vidHit
var data = [];
for (var i = 0; i < chartData.length; i++) {
data.push({
"label": chartData[i].Title
});
}
initChart(data);
});
function initChart(chartData) {
//console.log(chartData);
//Filter List Column for Specific Column Item
var view0 = chartData.filter(function(d) {
if (d["label"] == "Test Video") {
return d;
}
})
var view1 = chartData.filter(function(d) {
if (d["label"] == "GROW HHM Guest Speaker") {
return d;
}
})
var view2 = chartData.filter(function(d) {
if (d["label"] == "GROW Meeting 26 Aug 2020") {
return d;
}
})
var pageCount0 = view0.length;
var pageCount1 = view1.length;
var pageCount2 = view2.length;
d3.select('#vidHit0 span').html(pageCount0);
d3.select('#vidHit1 span').html(pageCount1);
d3.select('#vidHit2 span').html(pageCount2);
} //End of D3 function For Column Chart
function getListData(listName) {
var results;
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=Title";
$.ajax({
url: requestUri,
type: "GET",
async: false,
headers: {
"ACCEPT": "application/json;odata=verbose"
},
success: function(data) {
results = data.d.results;
},
error: function() {
//alert("Failed to get details");
}
});
return results;
}
}
////Play Buttons
jQuery(document).on("click", '[id^=growPlayPauseBtn]', function(e) {
growBtn_Event(e);
});
function growBtn_Event(e) {
if ($(e.target).attr("id") == 'growPlayPauseBtn0') {
//alert('0');
var title = "Test Video";
AddListItem(title);
videoClip0.play();
jQuery("#growPlayPauseBtn0").html("Pause");
jQuery("#growPlayPauseBtn0").fadeOut();
}
if ($(e.target).attr("id") == 'growPlayPauseBtn1') {
//alert('1');
var title = "GROW HHM Guest Speaker";
AddListItem(title);
videoClip1.play();
jQuery("#growPlayPauseBtn1").html("Pause");
jQuery("#growPlayPauseBtn1").fadeOut();
}
if ($(e.target).attr("id") == 'growPlayPauseBtn2') {
/// alert('2');
var title = "GROW Meeting 26 Aug 2020";
AddListItem(title);
videoClip2.play();
jQuery("#growPlayPauseBtn2").html("Pause");
jQuery("#growPlayPauseBtn2").fadeOut();
}
}
function AddListItem(TitleField) {
$().SPServices({
operation: "UpdateListItems",
async: false,
batchCmd: "New",
listName: "growVideoHits", //vidHit
valuepairs: [
["Title", TitleField]
],
completefunc: function(xData, Status) {
//alert("Data Saved! and Please check your List");
}
});
}
How I add content to the HTML: I use the REST API get option to detect a new item loaded into the SharePoint folder.
getFilesFromFolder("/sites/dcsa/ep/epMainFilesBI/video").done(function(data){
Then I concatenate the items from the folder onto the HTML page with the below script:
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn'+ i +'" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip'+ i +'"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit'+ i +'">Views: <span></span></div></li>');
if i have well understood your code, the new item are created in the else part so i suggest you to do a first loop to detect old videos from new videos and create html after:
getFilesFromFolder("/sites/dcsa/ep/epMainFiles/BI/video").done(function(data) {
$.each(data.d.results, function(index, item) {
var spDate = new Date(item.TimeCreated.split('T')[0]) //example: '2015-10-30T05:00:00Z'
var newTillDate = new Date();
spDate.setDate(spDate.getDate() + 2);
var newitems = [], olditems= [];
if (spDate <= newTillDate) {
olditems.push(item);
} else {
newitems.push(item);
}
var nbrolditems = olditems.length;
for(let i = 0;i < nbrolditems; i++){
let item = olditem[i];
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html("Videos");
}
for(let j = 0;j < newitems.length; j++){
let item = olditem[j;
let i = j + nbrolditems;
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html('<img class="newArrow" style="width: 60px; position: relative; right: 5px; top: 0px;"src="../SiteAssets/SitePages/Test Page/icons/arrow-with_new2.gif" alt="logo">Videos');
}
});
});
Another idea is to sort the list by date of creation of video....
I want to create a navigation bar with multiple list items. Limit number of button on the main view to 6 buttons and the remainder of the pages get placed under "..." menu.
I am able to create horizontal bar , I want to know how to limit it to 6 button and place remaining under '...'
I am fetching the data from DB and inside for loop i am creating the buttons in navigation panel. However i want to limit it to 6 button and the other items should be placed under '...'. When we select an item from '...', it should appear on screen. If i get any sample code for this will also be helpful.
Below is the code, not sure if it will be helpful for debug.
for (var j = 0; j < memberNavigationList.$values.length; j++) {
var jitem = memberNavigationList.$values[j];
var url = integra_tolower(integra_trim(APPPATH + jitem.URL));
var currenturl = integra_tolower(integra_trim(self.location.href));
if ((jitem.URL.toLowerCase().indexOf('emr/summary/visitdock') != -1 || jitem.URL.toLowerCase() == 'applications/encounternote.aspx') && jitem.PreviousVisit != '' && jitem.PreviousVisit.length > 10) {
sidebar_nav.push('<li id="menuTertairyItemId_' + j + '" style="margin: 0 5px 0 0;" onmouseover="$ic.tertiaryNav.Showtooltip(this);" onclick="openVisitFromNavbar(\'')
sidebar_nav.push(jitem.PreviousVisit + '$' + jitem.PreviousVisitDate + '$' + EMRContextApplicationId);
if (jitem.URL.toLowerCase().indexOf('emr/summary/visitdock') != -1) {
sidebar_nav.push('\'' + ',' + '\'' + jitem.URL);
}
sidebar_nav.push('\');"');
sidebar_nav.push('data-toggle="tooltip" data-placement="bottom" title="' + jitem.Description + '" class="myTip btn pull-left ic2-flowsheet-btn-gray ' + ' ');
} else {
if (jitem.Indented === true) {
sidebar_nav.push('<li id="menuTertairyItemId_' + j + '" style="margin: 0 5px 0 0;" onclick="$ic.tertiaryNav.menuItemClicked(this,\'' + url + '\',\'' + jitem.URL.toUpperCase() + '\',\'' + jitem.description + '\',\'' + jitem.PageType + '\');" onmouseover="$ic.tertiaryNav.Showtooltip(this)" data-toggle="tooltip" data-placement="bottom" title="' + jitem.Description + '" class="myTip ic2-flowsheet-btn-gray btn pull-left ' + '');
} else {
sidebar_nav.push('<li id="menuTertairyItemId_' + j + '" style="margin: 0 5px 0 0;" onclick="$ic.tertiaryNav.menuItemClicked(this,\'' + url + '\',\'' + jitem.URL.toUpperCase() + '\',\'' + jitem.description + '\',\'' + jitem.PageType + '\');" onmouseover="$ic.tertiaryNav.Showtooltip(this)" data-toggle="tooltip" data-placement="bottom" title="' + jitem.Description + '" class="myTip ic2-flowsheet-btn-gray btn pull-left ' + '');
}
}
if (currenturl.indexOf(url) > -1 || (currenturl.match(/addpatientencounter.aspx/g) && url.match(/patientencounters.aspx/g))) {
sidebar_nav.push(' ic2-flowsheet-btn-gray-active ');
} else {
if (url.indexOf("popover") > -1) {
sidebar_nav.push(' ic2-flowsheet-btn-green ');
} else {
sidebar_nav.push(' ');
}
}
sidebar_nav.push('">');
sidebar_nav.push(''+jitem.Description);
sidebar_nav.push('</li>');
}
}
sidebar_nav.push('</ul>'); // close the sidebarnav
this is an example it will help you ...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
So I'm fairly new to HTML and JS and i wanted to add some brackets and a equal sign around this grid of input forms in order to make it look more like a system of matrices. Idea: https://imgur.com/a/nH9xET2
I've tried positioning them on the CSS sheet with position absolute for each bracket but then if I change the matrix's size or resize the browser's window, it doesn't work. How would i do this in the CSS or in the HTML/Javascript file so the brackets rescale for bigger sizes and stay in the correct spot?
span {
font-family: 'Latin Modern Math';
position: absolute;
top: 228px;
vertical-align: text-top;
font-size: 56px;
}
.a1 {
position: absolute;
left: 40px;
}
.a2 {
position: absolute;
left: 618px;
}
.x1 {
position: absolute;
left: 679px;
}
.x2 {
position: absolute;
left: 780px;
}
.igual {
position: absolute;
left: 820px;
top: 220px;
vertical-align: text-top;
font-size: 58px;
}
.b1 {
position: absolute;
left: 882px;
}
.b2 {
position: absolute;
left: 982px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/linear" method="post">
<div class="col-auto my-1">
<select style="margin: 15px 0px 20px;" id="dim_select" name="dim_select" class="custom-select largura" onchange="change()">
<option disabled selected>Dimension</option>
{% for i in range(3, 8) %}
<option>{{ i }}</option>
{% endfor %}
</select>
</div>
<!-- MATRIZ A GERADA POR JS -->
<div id="matrizAcontainer">
</div>
<script type="text/javascript">
$(document).ready(function() {
grid(3, 3);
});
function change() {
var select = document.getElementById("dim_select");
var index = select.selectedIndex
var n = parseInt(select.value);
grid(n, n);
};
function grid(rows, cols) {
var table = '<span class="a1">[</span>';
table += "<table>";
var size = ((screen.availWidth / 2.45) / rows) + "px";
for (i = 0; i < rows; i++) {
table += '<tr class="spacing-50">';
for (j = 0; j < cols; j++) {
table += '<td>' + '<input class="matrizA" name="A' + (i + 1) + (j + 1) + '" placeholder="a' + (i + 1) + (j + 1) + '"/>' + '</td>';
}
if (i == 0) {
table += '<span class="a2">]</span>';
table += '<span class="x1">[</span>';
table += '<span class="x2">]</span>';
table += '<div class="igual">=</div>';
table += '<span class="b1">[</span>';
}
table += '<td><input class="matrizX" placeholder="x' + (i + 1) + '" disabled/></td>';
table += '<td><input class="matrizB" name="B' + (i + 1) + '" placeholder="b' + (i + 1) + '"/></td>';
table += "</tr>";
}
table += "</table>";
table += '<span class="b2">]</span>';
$("#matrizAcontainer").empty();
$("#matrizAcontainer").append(table);
$("tr").css("height", 32 + "px");
$("input").css("width", size);
$(".matrizX").css("text-align", "center");
$(".matrizX").css("margin-left", 80 + "px").css("width", 80 + "px");
$(".matrizX").css("background", "#dedddf");
$(".matrizB").css("margin-left", 120 + "px").css("width", 80 + "px");
var bracket = (32 * (rows + 1));
$("span").css("transform", "scaleY(" + (bracket / 50) + ")");
}
</script>
<button style="margin: 20px 0px 20px; width: auto;" class="btn btn-primary btn-submit" type="submit"><b>Solve</b></button>
</form>
Based on this answer.
body{
display: flex;
}
#mainDiv {
height: 100px;
width: 8px;
position: relative;
border-bottom: 4px solid black;
border-top: 4px solid black;
background: transparent;
}
#borderLeft {
border-left: 4px solid black;
position: absolute;
top: 0;
bottom: 0;
}
#borderRight {
border-left: 4px solid black;
position: absolute;
top: 0;
bottom: 0;
margin-left : 4px;
}
#mainDivRight {
height: 100px;
width: 8px;
position: relative;
border-bottom: 4px solid black;
border-top: 4px solid black;
background: transparent;
margin-left:0;
}
<div id="mainDiv">
<div id="borderLeft"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div id="mainDivRight">
<div id="borderRight"></div>
</div>
Different idea:
Size the width and height as you wish, or set it to auto.
Use an svg image for the background.
div{
width:200px;
height:100px;
background: lightblue url("https://cdn1.iconfinder.com/data/icons/mathematics-line-3/48/113-512.png");
background-size: 100% 100%;
background-repeat: no-repeat;}
<div id="brackets">
</div>
I have to create a "Quiz" and I have an array with 10 elements in it, and I am randomly selecting one as the correct answer, and I can't find a way so it doesn't generate it again, but instead sends the element to another array and removes it from the first one, so each time I click next question there is 1 less element in the starting array. Can anyone help? Here's what I've tried so far
var receivedArray = [{
nameIMGTOP: "15",
nameIMGTOPafter: "12",
nameIMGLEFT: "11",
nameIMGLEFTafter: "12",
nameTOP: "34"
},
{
nameIMGTOP: "-5",
nameIMGTOPafter: "-10",
nameIMGLEFT: "18",
nameIMGLEFTafter: "22",
nameTOP: "-3"
},
{
nameIMGTOP: "12",
nameIMGTOPafter: "",
nameIMGLEFT: "43",
nameIMGLEFTafter: "",
nameTOP: "29"
}
];
const StartElements = receivedArray;
var SelectedElements = [];
const correctAnswer = StartElements.splice(Math.floor(Math.random() * StartElements.length), 1)[0];
const guess1 = StartElements.splice(Math.floor(Math.random() * StartElements.length), 1)[0];
const guess2 = StartElements.splice(Math.floor(Math.random() * StartElements.length), 1)[0];
$("#btn-next").on("click", function() {
var i = 0;
while (i < correctAnswer.length) {
var item = correctAnswer[i];
console.log(item);
if (item.selected) {
correctAnswer.splice(i, 0);
SelectedElements.push(item);
} else i++;
console.log(SelectedElements);
}
});
$(document).ready(function() {
$("#test-div").append(
"<div class=\"row\">\n" +
"<div class=\"col-6\">\n" +
"<div class=\"ImageDiv\">" +
"<img id=\"testImage\" src=\"\" alt='...' align=\"middle\"/>\n" +
"</div>" +
"</div>\n" +
"<h4 class=\"Guess\" id=\"Guess\">ATMINI JŪRNIEKU MEZGLA NOSAUKUMU</h4>\n" +
"<p id=\"description\"></p>" +
"<div class=\"col-6 shuffle\">\n" +
"<div class=\"btn guesses\" >" + correctAnswer.nameLV + "</div><br>" +
"<div class=\"btn guesses\" >" + guess1.nameLV + "</div><br>" +
"<div class=\"btn guesses\" >" + guess2.nameLV + "</div><br>" +
"</div>\n" +
"</div>\n"
);
$("#testImage").attr("src", "../Images/uploads/" + correctAnswer.Image);
//$("#description").html(correctAnswer.descriptionLV);
console.log("Bwf");
$(".shuffle").each(function() {
var divs = $(this).find('div');
for (var i = 0; i < divs.length; i++) $(divs[i]).remove();
//the fisher yates algorithm, from http://stackoverflow.com/questions/2450954/how-to-randomize-a-javascript-array
var i = divs.length;
if (i == 0) return false;
while (--i) {
var j = Math.floor(Math.random() * (i + 1));
var tempi = divs[i];
var tempj = divs[j];
divs[i] = tempj;
divs[j] = tempi;
}
for (var i = 0; i < divs.length; i++) $(divs[i]).appendTo(this);
});
});
#Guess {
color: #EEA774;
position: absolute;
top: 11vw;
left: 50vw;
}
.guesses {
background-color: #E89F62;
color: white;
font-weight: bolder;
border-radius: 20px;
width: 17vw;
text-align: left;
font-size: 20px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
}
a {
color: #F3A361;
font-size: 25px;
}
a:active {}
ol {
padding-left: 50px;
}
.crumbItem {
margin-left: 200px;
}
.shuffle {
display: block;
color: white;
margin: 4px;
padding: 8px;
position: absolute;
top: 15vw;
left: 50vw;
}
#description {
position: absolute;
top: 13vw;
left: 50vw;
color: white;
width: 35vw;
font-size: 20px;
font-weight: bold;
}
#testImage {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 700px;
}
.ImageDiv {
display: block;
margin-left: auto;
margin-right: auto;
}
#btn-next {
outline: none;
height: 40px;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
}
#btn-prev {
height: 40px;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="test-div" id="test-div">
<div class="btn" id="btn-prev" onclick=""><i class="fas fa-angle-left fa-3x"></i></div>
<div class="btn" id="btn-next" onclick=""><i class="fas fa-angle-right fa-3x"></i></div>
</div>
</div>
Everything is dynamically created basing off of the receivedArray
I made a cube that shows different info of the customer on each side of the cube. There are 6 different customers but only one cube with that customer info is showing up. The rest is hidden for some reason. How can I make those cubes appear with that customer data?
I've tried an array and a foreach. Nothing is working.
function drawCube(Data) {
$('#wrapD3Cube').append($('').has(D3Cube));
var custList = [];
for (var i = 0; i < Data.length; i++) {
var custList = Data[i];
for (var j = 0; j < Data.length; j++) {
drawCube([" + i + "][" + j + "] = + custList[j]);
custList += '<div id="side1" style="position: absolute; opacity: 1.05; background-color: #D5D8DC; width: 112px; height: 112px; " ' + i + Data[i].Customer + "'> </div>"
custList += '<div id="side2" style="position: absolute; opacity: 1.05; background-color: #81C784; width: 112px; height: 112px; font-size: 11px; text-align: center; font-weight: bold; " ' + i + "'>";
custList += '<table class="table table-sm table-light"><thead><tr><td>Customer ID</tr></td></thead></table> ';
custList += Data[i].Customer;
custList += "</div>"
custList += '<div id="side3" style="position: absolute; opacity: 2.05; background-color: #FFF59D; width: 112px; height: 112px; font-size: 11px; font-weight: bold; text-align: center; " ' + i + "'>";
custList += '<table class="table table-sm table-light"><thead><tr><td>Inserted Time</tr></td></thead></table> ';
custList += Data[i].Time;
custList += "</div>"
custList += '<div id="side4" style="position: absolute; opacity: 1.05; background-color: #EF9A9A; width: 112px; height: 112px; font-size: 11px; font-weight: bold; text-align: center; " ' + i + "'>";
custList += '<table class="table table-sm table-light"><thead><tr><td>Status</tr></td></thead></table> ';
custList += Data[i].Status;
custList += "</div>"
custList += '<div id="side5" style="position: absolute; opacity: 1.05; background-color: #B2EBF2; width: 112px; height: 112px; font-size: 11px; font-weight: bold; text-align: center; " ' + i + "'>";
custList += '<table class="table table-sm table-light"><thead><tr><td>Assign To</tr></td></thead></table> ';
custList += Data[i].Agent;
custList += "</div>"
//custList += "<br>";
custList += '<div id="side6" style="position: absolute; opacity: 1.05; background-color: #D5D8DC; width: 112px; height: 112px; font-weight: bold; text-align: center; " ' + i + "'>";
custList += "</div>"
// custList += "<br>";
// else {
//custList += Data.length + i + "<br>";
//break;
}
}
document.getElementById("D3Cube").innerHTML = custList;
Each cube has different customer data but only one cube shows up. There should be many cubes depending on how many customers are waiting.