Hi,
Anybody knows a way to load snippets on click?
My mega menu is Killing my DOM size.
Thanks
Anybody knows a way to load snippets on click?
My mega menu is Killing my DOM size.
Thanks
<div class="list-items" ></div>
<script>
const Item = ({ url, img, title }) => `
<a href="${url}" class="list-group-item">
<div class="image">
<img src="${img}" />
</div>
<p class="list-group-item-text">${title}</p>
</a>
`;
//Then you could easily render it, even mapped from an array, like so:
$('.list-items').html([
{ url: '/foo', img: 'foo.png', title: 'Foo item' },
{ url: '/bar', img: 'bar.png', title: 'Bar item' },
].map(Item).join(''));
</script>
<cms:show_repeatable 'schedule' as_json='1' />
<table>
<thead>
<tr>
<th></th>
<th>September - May</th>
<th>June - August</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
const Item = ({ my_day,
my_winter_off_day,
my_winter_opening_time,
my_winter_closing_time,
my_summer_off_day,
my_summer_opening_time,
my_summer_closing_time }) => `
<tr>
<td>${my_day}</td>`
+ ( my_winter_off_day ? `<td>Closed</td>`: `<td>${my_format(my_winter_opening_time)}-${my_format(my_winter_closing_time)}</td>` )
+ ( my_summer_off_day ? `<td>Closed</td>`: `<td>${my_format(my_summer_opening_time)}-${my_format(my_summer_closing_time)}</td>` ) + `
</tr>
`;
//Then you could easily render it, even mapped from an array, like so:
$('tbody').html(<cms:show_repeatable 'schedule' as_json='1' />.map(Item).join(''));
function my_format(str){
return new Date(str).toLocaleTimeString([],{ hour: '2-digit', minute:'2-digit', hour12: true});
}
</script>
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
<script>
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody
// and the row with the template
var t = document.querySelector('#productrow');
// Clone the new row and insert it into the table
var tb = document.querySelector("tbody");
var clone = document.importNode(t.content, true);
td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
//setTimeout(tb.appendChild(clone), 2000);
setTimeout(function(){ tb.appendChild(clone); }, 1000);
// Clone the new row and insert it into the table
var clone2 = document.importNode(t.content, true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
//setTimeout(tb.appendChild(clone2), 2000);
setTimeout(function(){ tb.appendChild(clone2); }, 1500);
//tb.appendChild(clone2);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
</script>
<li><a on="tap:menumoi" onclick="showContent()">Tableaux Modernes</a></li>
<template><cms:embed 'menulightbox.html' /></template>
<script>
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>