We Keep Coding

How to add HTML append javascript... "quotation marks" problems

I'm trying to transform div content from img to div strong
for example
<div class="multi-gallery-image show" id="service_preview">
<img alt="image" src="チャイルドカット¥3000">
<img alt="image" src="ジュニアカット">
<img alt="image" src="ハナコカット">
<img alt="image" src="Hair Styling">
<img alt="image" src="Manicures">
<img alt="image" src="Hair Coloring">
</div>
I want to transform to div strong
<div class="multi-gallery-image show" id="service_preview">
<div><strong>チャイルドカット¥3000</strong></div>
<div><strong>ジュニアカット</strong></div>
<div><strong>トップスタイリストカット</strong></div>
<div><strong>Hair Styling</strong></div>
<div><strong>Manicures</strong></div>
<div><strong>Hair Coloring</strong></div>
</div>
I have this but the result is different as expected:
let servicePreview = document.getElementById('service_preview'); //parent where I am trying to introduce the src values
let myImg;
let mySrc;
let toPush;
if (servicePreview.getElementsByTagName('img').length > 0){
let servicesNumber = servicePreview.getElementsByTagName('img').length; //number of img tags inside the service_preview
for (let i = 0; i < servicesNumber; i++){
myImg = servicePreview.getElementsByTagName('img')[i]; //capturing the img tag
mySrc = myImg.getAttribute('src'); //capturing the src value from img tag
toPush = '<div><strong>' + mySrc + '</strong></div>'; //creating html tag for push to the parent service_preview
servicePreview.append(toPush); //appending the html tag
}
}
but the result of this is
<div class="multi-gallery-image show" id="service_preview">
<img alt="image" src="チャイルドカット¥3000">
<img alt="image" src="ジュニアカット">
<img alt="image" src="ハナコカット">
<img alt="image" src="トップスタイリストカット">
<img alt="image" src="Hair Styling">
<img alt="image" src="Manicures">
"<div><strong>チャイルドカット¥3000</strong></div>"
"<div><strong>ジュニアカット</strong></div>"
"<div><strong>ハナコカット</strong></div>"
"<div><strong>トップスタイリストカット</strong></div>"
"<div><strong>Hair Styling</strong></div>"
"<div><strong>Manicures</strong></div>"
</div>
I want to delete that "quotes" on every div strong, that is a string.
I have to delete the complete img tag after solve the "quotes"
problem

use createElement to create dom element to appendChild and removeChild to remove elements.
let servicePreview = document.getElementById('service_preview');
var myImg;
var mySrc;
let toPush;
var elements = servicePreview.getElementsByTagName('img');
while (elements[0]) {
newDiv = document.createElement('div');
newStrong = document.createElement('strong');
newStrong.innerHTML = elements[0].getAttribute('src');
newDiv.appendChild(newStrong);
servicePreview.appendChild(newDiv);
elements[0].parentNode.removeChild(elements[0]);
}
<div class="multi-gallery-image show" id="service_preview">
<img alt="image" src="チャイルドカット¥3000">
<img alt="image" src="ジュニアカット">
<img alt="image" src="ハナコカット">
<img alt="image" src="Hair Styling">
<img alt="image" src="Manicures">
<img alt="image" src="Hair Coloring">
</div>

Unlike jQuery append() the native method treats html strings as text
Use insertAdjacentHTML(position, html) instead
const str = '<div class="inserted">Test</div>'
document.getElementById('one').append(str);// shows as text
document.getElementById('two').insertAdjacentHTML('beforeend', str)
.inserted{color:red}
<div id="one"></div>
<div id="two"></div>

In raw JavaScript I believe its something like this.
const services = ['チャイルドカット¥3000', 'ジュニアカット', 'ハナコカット',
'Hair Styling', 'Manicures', 'Hair Coloring']
const preview = document.getElementById("service_preview")
services.forEach(service =>{
const div = document.createElement("div")
const strong = document.createElement("strong")
strong.innerText = service
div.appendChild(strong)
preview.appendChild(div)
})

const servicePreview = document.getElementById("service_preview");
const imageSources = [...servicePreview.children].map((img) => img.src);
console.log(imageSources);
// Remove all images
while (servicePreview.firstChild) {
servicePreview.removeChild(servicePreview.firstChild);
}
// Add new div/strong tags
for (const imageSource of imageSources) {
const div = document.createElement("div");
const strong = document.createElement("strong");
strong.textContent = imageSource;
div.appendChild(strong);
servicePreview.appendChild(div);
}

simply use replaceChild() method
there is a trap with img.src because you get an URI
const servicePreview = document.getElementById('service_preview')
servicePreview.querySelectorAll('img').forEach(imgElm=>
{
let newDiv = document.createElement('div')
, newStrg = document.createElement('strong')
;
newDiv.appendChild( newStrg )
newStrg.textContent = imgElm.getAttribute('src') // or decodeURI( imgElm.src.split('/').pop() )
servicePreview.replaceChild( newDiv, imgElm )
})
<div class="multi-gallery-image show" id="service_preview">
<img alt="image" src="チャイルドカット¥3000">
<img alt="image" src="ジュニアカット">
<img alt="image" src="ハナコカット">
<img alt="image" src="Hair Styling">
<img alt="image" src="Manicures">
<img alt="image" src="Hair Coloring">
</div>

getting a source for <video src> in html from js script

Im trying to display webms on my homepage in a random order
every time someone access the homepage.
I think, i got the random part done, my problem is,
getting the path string into the source src="" of my html code
my current take on this is:
HTML
<div class="window" id="videos" style="display: none;">
<div class="content">
<center>
<video controls width="500">
<source id="random_webm" src="" type="video/webm">
Your browser does not support HTML5 or .webm video, gramps.
</video>
</center>
</div>
</div>
JS
function random_webm(max) {
var src = ["videos/ship.webm", "videos/ira.webm"];
return random_webm.src = src[Math.floor(Math.random() * src.length)];
src = rndwebm(3);
document.getElementById('random_webm').src = src.rndwebm(3);
};
other things i tried
https://pastebin.com/raw/3Sjpd0gW
concluision - how it works now:
<div class="window" id="videos" style="display: none;">
<div class="header">
<img class="icon" src="images/video.png">
gnu.3gp
<div class="buttons">
<button id= "videos" title="minimize" class="window_content" onclick="videos() ">_</button>
<button>◽</button>
<button id= "videos" title="minimize" class="window_content" onclick="videos() ">X</button>
</div>
</div>
<div class="content">
<center>
<video controls width="500" id="random_webm" src="">
<source type="video/webm">
Your browser does not support HTML5 or .webm video, gramps.
</video>
</center>
</div>
</div>
function videos() {
var src = ["videos/ship.webm", "videos/ira.webm"];
document.getElementById('random_webm').src = src[Math.floor(Math.random() * src.length)];
var x = document.getElementById("videos");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
random_webm()

Try this code, and adapt it to your needs.
function random_webm() {
var src = ["videos/ship.webm", "videos/ira.webm"];
document.getElementById('random_webm').src = src[Math.floor(Math.random() * src.length)];
};
random_webm()

How to pass looped array items to function variable

I have a group of images and each image has a title I want to change the background and title of each image to a different color on hover.
Now I selected my images and titles and looped throw them to change their colors but its not working I am not surprised just want to know how to fix it.
function changeBgAndTitle(element, event, backgroundColor, titleColor) {
element.addEventListener(event, () => {
const projectThumbnail = document.querySelectorAll('.projects-list img');
const projectTitle = document.querySelectorAll('article h1');
for (i = 0; i < projectThumbnail.length; i++) {
console.log(projectThumbnail[0]);
}
for (i = 0; i < projectTitle.length; i++) {
projectTitle[i].style.color = titleColor;
}
})
}
changeBgAndTitle(projectThumbnail[0], 'mouseover', '#0090d8', 'white');
<div class="projects-list">
<article class="old-and-blue">
<h1>old and blue</h1>
<figure>
<a href="/old-and-blue.html" class="noclick">
<img src="assets/media/images/slides/old-and-blue.jpg" alt="">
</a>
</figure>
</article>
<article class="dably">
<h1>dably</h1>
<figure>
<a href="/old-and-blue.html">
<img src="assets/media/images/slides/dably.jpg" alt="">
</a>
</figure>
</article>
<article class="cairo">
<h1>cairo</h1>
<figure>
<a href="/old-and-blue.html">
<img src="assets/media/images/slides/cairoe.jpg" alt="">
</a>
</figure>
</article>
<article class="cta">
<h1>cta</h1>
<figure>
<a href="/cta.html">
<img src="assets/media/images/slides/cta.jpg" alt="">
</a>
</figure>
</article>
</div>

If you want to call addEventListener inside the loop:
function changeBgAndTitle(element, event, backgroundColor, titleColor) {
const projectThumbnail = element.querySelectorAll('.projects-list img')[0];
projectThumbnail.addEventListener(event, () => {
var projectTitle = element.querySelectorAll('h1');
projectTitle[0].style.color = titleColor;
})
}
const articles = document.querySelectorAll('.projects-list article');
for (i = 0; i < articles.length; i++) {
changeBgAndTitle(articles[i], 'mouseover', '#0090d8', 'white');
}
https://jsfiddle.net/zf2xb48e/

You should be calling addEventListener inside the loop, not passing a single element to the function.
function changeBgAndTitle(event, backgroundColor, titleColor) {
const projectThumbnail = document.querySelectorAll('.projects-list img');
const projectTitle = document.querySelectorAll('article h1');
projectThumbnail.forEach((element, i) => element.addEventListener(event, () => {
console.log(element);
projectTitle[i].style.color = titleColor;
projectTitle[i].style.backgroundColor = backgroundColor;
}));
}
changeBgAndTitle('mouseover', '#0090d8', 'white');
<div class="projects-list">
<article class="old-and-blue">
<h1>old and blue</h1>
<figure>
<a href="/old-and-blue.html" class="noclick">
<img src="assets/media/images/slides/old-and-blue.jpg" alt="">
</a>
</figure>
</article>
<article class="dably">
<h1>dably</h1>
<figure>
<a href="/old-and-blue.html">
<img src="assets/media/images/slides/dably.jpg" alt="">
</a>
</figure>
</article>
<article class="cairo">
<h1>cairo</h1>
<figure>
<a href="/old-and-blue.html">
<img src="assets/media/images/slides/cairoe.jpg" alt="">
</a>
</figure>
</article>
<article class="cta">
<h1>cta</h1>
<figure>
<a href="/cta.html">
<img src="assets/media/images/slides/cta.jpg" alt="">
</a>
</figure>
</article>
</div>

Using Intersection Observer for lazyloading on cloned elements

I have a modified Bootstrap 4 carousel that has multiple items and scrolls one-by-one using this JavaScript:
$('.carousel[data-type="multi"] .carousel-item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
This creates a clone of each carousel-item with multiple carousel-columns, like this:
<div class="carousel-item active">
<div class="carousel-col">
<img src="" class="lazy" /> <!-- This image loads -->
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
</div>
<div class="carousel-item">
<div class="carousel-col">
<img src="" class="lazy" /> <!-- This image loads -->
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
</div>
I'm trying to implement lazy-loading with the Intersection Observer API, however inside the carousel it only works on the image in the first carousel-col in each carousel-item. I'm guessing this is due to the cloning but I'm not sure how to remedy the conflict. The API doesn't see to recognize that the cloned images exist.
Does anyone have any insight as to how I might go about fixing this?
Here's the JavaScript I'm using for lazyloading:
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages;
if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".lazy");
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy");
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(".lazy");
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}
});

jQuery How to apply custom loading for images?

I have this HTML:
<div class="page-loading-wrapper">
<div style="width: 168px" class="slide-content">
<div class="loading-panel" style="background-color: #dddddd; height: 120px; position: relative">
<div class="loading-text"><span class="loading-number">0</span>%</div>
<div class="loading-load">LOADING</div>
</div>
<img src="images/shkeer-loading.png" width="168" height="91" alt="" />
</div>
<div class="loading-bottom-line"></div>
</div>
<div id="maximage">
<div>
<img src="images/bg/bg.jpg" width="1580" height="889" alt="" />
</div>
<div>
<img src="images/bg/bg2.jpg" width="1352" height="748" alt="" />
</div>
<div>
<img src="images/bg/bg3.jpg" width="1285" height="803" alt="" />
</div>
<div>
<img src="images/bg/bg4.jpg" width="1290" height="807" alt="" />
</div>
<div>
<img src="images/bg/bg5.jpg" width="1295" height="921" alt="" />
</div>
<div>
<img src="images/bg/bg6.jpg" width="1280" height="750" alt="" />
</div>
<div>
<img src="images/bg/bg7.jpg" width="1280" height="750" alt="" />
</div>
</div>
and this Javascript code:
$('#maximage').maximage({
onImagesLoaded: function() {
$(".page-loading-wrapper").slideUp("slow");
},
cycleOptions: {
fx:'scrollHorz',
autostopCount: 1,
autostop: 1
}
});
and this code for loading:
function changeLoading() {
var height = parseInt($(".loading-panel").height()) + 5;
$(".loading-panel").css("height", height + "px");
if ( height == 325) {
clearInterval(t);
var t2 = setInterval(changeNum, 110);
}
}
function changeNum() {
var n = parseInt($(".loading-number").html()) + 1;
$(".loading-number").html(n);
if ( n == 100) {
clearInterval(t2);
}
}
var t = setInterval(changeLoading, 10);
I'm using MaxCycle (Fullscreen Slideshow for use with jQuery Cycle Plugin)
and I'm trying to display loading bar while loading all images because they're very big about 150kb for each image.
Demo
My loading bar is not fully functional as you can see. it just count until MaxCycle is loaded
onImagesLoaded: function() {
$(".page-loading-wrapper").slideUp("slow");
}
So how I can make this loading works 100% specially the percent number, to check each image is loaded or not?
Thank you very much.