I'm trying to use bootstrap containers to make rows of 3 panels; however, with my current code one panel ends up in the container and two are left outside.
I'm not too sure where I'm going wrong.
I've counted and recounted my <div> and </div> so many times so I don't believe that is the issue
//var count = 0; above
//for loop for n > 3 above
html = "";
if (count%3===0) {
html = html + "<div class=\"container\">" +
"<div class=\"row\">";
}
html = html + "<div class=\"col-sm-4\">" +
"<div class=\"panel panel-primary\">" +
"<div class=\"panel-heading\">" + name + "</div>" +
"<div class=\"panel-body\"><img src=\"" + imageURL + "\"class=\"img-responsive\" style=\"width:100%\" alt=\"Image\"> </div>" +
"<div class=\"panel-footer\"> <h2>$" +
price.toString() + recString + "</h2>" + description + "</div> </div> </div>";
if (count%3===2) {
html = html + "</div> </div> <br> <br>"
}
count = count + 1;
$('#items').append(html);
Here is the items div in my html file.
<div id="items" >
</div><br>
By appending to the $items div in each iteration of the loop, the web browser checks and sees that the items div has been closed after the append. When a parent is closed, the web browser closes all the children, including the container and row divs.
Solution was to append at the end outside of the loop
Related
I am reading data from a javascript file and then importing them into the HTML file. The issue I am having is that I am unable to get my p tags and h3 tags in my section tag. This is what it looks like when I load it up:
The following code is what I have tried. I have used inner HTML to create the tags and I am not sure what I can do to fix this.
// create a box class section for whole thing
containerElement.innerHTML += "<section class='flight-info'> ";
// another class for top part of box
containerElement.innerHTML += "<div class='topBox' ";
// add all the elements such as destination and code
containerElement.innerHTML += "<h3 class='destination'> " + FlightInfo[i].destination + " </h3>";
containerElement.innerHTML += "<p class='departTime'> Depart time: " + FlightInfo[i].departTime + " </p>";
// have to check for # of stops to format. if its not 0, we can add the # of stops and time, otherwise its Non-stop, time
if (FlightInfo[i].stops != 0) {
containerElement.innerHTML += "<p class='timeStop'>" + FlightInfo[i].stops + ", " + FlightInfo[i].time + " min </p>";
} else if (FlightInfo[i].stops == 0) {
containerElement.innerHTML += "<p class='timeStop'> Non-Stop" + ", " + FlightInfo[i].time + " min </p>";
}
// end the topBox class
containerElement.innerHTML += "</div>"
containerElement.innerHTML += "</section>"
It's because you keep adding everything to the container.
containerElement.innerHTML +=
You only need the code above one time (at least the way you're doing it now), and add everything in one long string.
Otherwise, add the section, then select the section and add everything to the section's innerHTML. Same idea with the div.
I'm working on a .NET Core project for my company where work orders are loaded from our SQL database using Entity Framework, filtered and then displayed as markers on a map through Google Maps API for our installers.
We have two types of filters: one that gets included in an Ajax POST, and one that filters locally to decrease load times and performance issues. What I'm trying to do is load the local filter items (lists that are included in the response when calling the initial Ajax POST). If the list of filter items exceeds 5 items, I want them to collapse to only 5 items and insert an anchor which expands (utilizes jQuery's toggle()) showing the rest of the items in that list.
This is the excerpt from the JavaScript function which takes care of that:
filterItems
.forEach((filterItem, i) => {
var localItem = '<label class="' + selectorContainerClass
+ ' selectorContainer" id="' + selectorContainerIdPrefix + filterItem.key
+ '"><input id="' + convertValToEng(filterItem.value)
+ '" type = "checkbox" class="filled-in navy" name="' + inputName
+ '" value="' + filterItem.key
+ '" onchange="localFilter(this, this.value)" /><span class="selector-value">'
+ filterItem.value
+ '</span> <span id="' + paramName + 'Cnt__' + filterItem.key
+ '" class="selector-count"></span></label ><br />';
document.querySelector("#" + colId).insertAdjacentHTML('beforeend', localItem);
if (i >= 5) {
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key).addClass("collapse");
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key).toggle(100);
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key + " + br").toggle(100);
}
});
if (filterItems.length > 5) {
//TODO: Fix the bug here; the .filter-collapse element is not being inserted under local installers.
var newEl = '<a class="filter-collapse" onclick="toggleFilterExpand(false, this)";><i class="material-icons">expand_more</i></a>';
document.getElementById(colId).insertAdjacentHTML('beforeend', newEl);
}
I should be getting a newEl inserted under the "Installer" column (8 installers, 3 of them not being displayed), but I'm not. I've tried jQuery's after() and insertAfter() methods, but neither of those worked. newEl is being generated for the "Area" column, as it should, but for the "Installer" column it's not.
I've also tried inserting the element manually through the console window with the exact same code and it works.
Would appreciate some help with this as I feel lost regarding this issue.
Thanks.
It turned out to be a stupid mistake on my end where I was removing the element newEl from the all the other filter lists before inserting a new one to the currently iterated one.
I'm trying to style a Google Maps InfoWindow. For each of my map markers I have a window that works perfectly on a local site and in a JSFiddle. However, when I add the code to a Drupal block, it strips the closing div tags.
I've tried this way:
`var message =
"<div class='window-container'>" +
"<div class='window-content'>" +
"<div class='window-header'>" +
"<div class='window-title'>" + name + "</div>" +
"<div class='window-subtitle'>" + org + "</div>" +
"</div>" +
"<div class='window-body'>" + summary + "...</div>" +
"</div>" +
"</div>";`
And this way:
`var message =
'<div class="window-container">\
<div class="window-content">\
<div class="window-header">\
<div class="window-title">' +name+ '</div>\
<div class="window-subtitle">' +org+ '</div>\
</div>\
<div class="window-body">' +summary+ '</div>\
</div>\
</div>';`
And this way with a Babel compiler:
`var message = '
<div class="window-container">
<div class="window-content">
<div class="window-header">
<div class="window-title">${name}</div>
<div class="window-subtitle">${org}</div>
</div>
<div class="window-body">${summary}</div>
</div>
</div>'`
And on the page, in my console, it always comes out like this!
`var message =
"<div class='window-container'>" +
"<div class='window-content'>" +
"<div class='window-header'>" +
"<div class='window-title'>" + name + "" +
"<div class='window-subtitle'>" + org + "" +
"" +
"<div class='window-body'>" + summary + "..." +
"" +
"";`
It removes all the closing div tags! Why?
If you paste your code into ckeditor or other filters you'll have some trouble like that.
So it's recommanded to create a custom block programmatically, like explained here :
https://www.drupal.org/docs/creating-custom-modules/creating-custom-blocks/create-a-custom-block
Got a problem with bind some data on a bootstrap carousel. Data set perfectly, but the bind on HTML fail. Here the jQuery snippet:
function OnSuccessNews(response) {
var news = response.d;
$(news).each(function (item) {
$("#notizie").append("<div class=\"item container\">");
$("#notizie").append("<h4>" + news[item].Title + "</h4>");
$("#notizie").append("<p>" + news[item].Text + "</p>");
$("#notizie").append("<div class=\"post\"></div>");
$("#notizie").append("</div>");
});
$('.item').first().addClass('active');
$('#carouselNews').carousel();
}
Then the aspx page:
<div class="row">
<div class="col-md-12">
<div class="carousel slide" id="carouselNews">
<div class="carousel-inner" id="notizie"></div>
</div>
</div>
</div>
The problem is: I must to bind some news (with a title and text) in the bootstrap carousel, cycle endless the news in couple. Now this code show me all the data in news and no cycle. How to display 2 news a time and cycle the next news?
do it like this :
function OnSuccessNews(response) {
var news = response.d;
$(news).each(function (item) {
var container = $("<div class=\"item container\"></div>");
container.append("<h4>" + news[item].Title + "</h4>");
container.append("<p>" + news[item].Text + "</p>");
container.append("<div class=\"post\"></div>");
$("#notizie").append(container);
});
$('.item').first().addClass('active');
$('#carouselNews').carousel();
}
create a container and put data inside the container and append it to $("#notizie)
Try like this, Get the innerHTML of your target div and add all the element to that div and finally add the innerHTML to created HTML string
HTML = document.getElementById('notizie').innerHTML;
$(news).each(function (item) {
HTML += "<div class=\"item container\"></div>";
HTML += "<h4>" + news[item].Title + "</h4>";
HTML += "<p>" + news[item].Text + "</p>";
HTML += "<div class=\"post\"></div>";
});
document.getElementById('notizie').innerHTML = HTML;
I need help with a little script ...
when i append content and drigger create tho content is loaded...
but then when i use $('#set').empty(); for the second time the content is loaded but no JQM style is added (just plain text)
i have read about this problem but i dont find any solution ... i guess that $('#set').collapsibleset('refresh');as it should... any idea ?
thanks
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content).trigger("create");
$('#set').collapsibleset('refresh');
Instead of
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content).trigger("create");
$('#set').collapsibleset('refresh');
try
$('#set').empty();
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content);
$('#set').collapsibleset().trigger("create");
In this way you only call trigger('create') once after all content has been added.
Here is a DEMO