Develop Reference

appendTo adds element to another one, but it does not show on the website

I am trying to add arrows to my simple lightbox. The arrows are simple symbols "<" and ">. I have created them with jquery and when I try to add them to the image, they show up in the developer tools but not in the website for whatever reason. Can you tell me what's the problem please?
Here is the screenshot of the issue, if you did not understand my poor english. As you can see, the arrows are created in developer tools, but they cannot be found on the website. https://prnt.sc/26lyfbc
//Gallery Lightbox made with Jquery
let gallery = $('#gallery'),
overlay = $('<div = id = "overlay"></div>').appendTo('body').hide();
//Opens the lightbox with chosen image
gallery.find('a').on("click", function(event){
event.preventDefault();
let href = $(this).attr('href'),
image = $('<img>', {src: href}),
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
image.appendTo(overlay);
larrow.appendTo(image);
overlay.show();
//Closes the Lightbox with the image, by clicking on the overlay
$(document).on("click", "#overlay", function(){
overlay.hide();
image.remove();
})
})
.gallery {
display: none;
opacity: 0;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 1004px;
margin: 0 auto;
}
.gallery img {
position: relative;
top: 100px;
height: 200px;
width: 300px;
margin: 0 1em;
}
#overlay {
background: rgba(0, 0, 0, .7);
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#overlay img {
margin-top: 5%;
border: solid 5px white;
border-radius: 5px;
}
//Dont mind these, the silly values are just for testing purposes
#larrow {
font-size: 500px;
color: red;
z-index: 2000;
}
#rarrow {
font-size: 500px;
color: red;
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<img src="img\placeholder1.jpg" alt="">
<img src="img\placeholder2.jpg" alt="">
<img src="img\placeholder3.jpg" alt="">
<img src="img\placeholder4.jpg" alt="">
<img src="img\placeholder5.jpg" alt="">
<img src="img\placeholder6.jpg" alt="">
</div>
</body>

You have a few errors in your code. Instead of
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
You should write it like this. There is no need for the '=' between div and id.
larrow = $('<div id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div id = "rarrow"> > </div>'); //RIGHT ARROW
The same goes for the following tags:
overlay = $('<div id = "overlay"></div>').appendTo('body').hide();
Putting the div tags in the image will also not work. Instead you should put the image and the arrows in a container together like this:
<div id="overlay">
<img src ... </img>
<div id = "larrow"> < </div>
<div id = "rarrow"> > </div>
</div>
Refer to Floating Div Over An Image to see the needed css.

Trying to make a function hide and reveal 2 images

This is my code. I'm trying to hide another image behind another and make a button press switch which image is visible along with changing the href link.
function revealHQ() {
var pilaf = document.getElementById('PilafHQ');
var altaf = document.getElementById('altafsung');
// get the current value of the hidden image's display property
var displaySetting = altaf.style.display;
// now toggle the clock and the button text, depending on current state
if (displaySetting == 'block') {
// hidden message is visible. hide it
altaf.style.display = 'none';
pilaf.style.display = 'block';
} else {
// if message is hidden. show it
altaf.style.display = 'block';
pilaf.style.display = 'none';
}
}
.altafsung {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
display: block;
}
.PilafHQ {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
display: none;
}
<a href="https://tse1.mm.bing.net/th/id/OIP.9uW8U7EhqDOzl1-gONQjwAHaGj?pid=ImgDet&rs=1" target="_blank">
<div class="PilafHQ"><img src="Images/Pilaf Castle Entrance cropped.png " alt="Pilaf castle entrance" width="250" height="250"></div>
</a>
<a href="https://altafs-bazaar.bertry.repl.co/" target="_blank">
<div class="altafsung"><img src="Images/Altaf Bazaar Advert.png" alt="Altaf Sunglasses" width="250" height="250"></div>
</a>
<img src="Images/walkingbear.gif" alt="polar bear walking 😲" onclick="revealHQ();">

Use ID on the elements when you want to access byId
It is simpler to toggle the class
I gave the emoji an ID too
window.addEventListener("load", function() { // when page loads
document.getElementById("toggleImage").addEventListener("click", function() {
var pilaf = document.getElementById('PilafHQ');
var altaf = document.getElementById('altafsung');
// show one, hide the other
altaf.classList.toggle("hide")
pilaf.classList.toggle("hide")
});
});
.altafsung {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
}
.PilafHQ {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
}
.hide {
display: none
}
<a href="https://tse1.mm.bing.net/th/id/OIP.9uW8U7EhqDOzl1-gONQjwAHaGj?pid=ImgDet&rs=1" target="_blank">
<div id="PilafHQ" class="hide"><img src="Images/Pilaf Castle Entrance cropped.png " alt="Pilaf castle entrance" width="250" height="250"></div>
</a>
<a href="https://altafs-bazaar.bertry.repl.co/" target="_blank">
<div id="altafsung"><img src="Images/Altaf Bazaar Advert.png" alt="Altaf Sunglasses" width="250" height="250"></div>
</a>
<img id="toggleImage" src="Images/walkingbear.gif" alt="polar bear walking 😲">

Run javascript when loading a specific page

I have an app that shows the active menu with javascript, it is an app made with Cordova.
The problem is that when I press the button to go back, it does not show me the active menu, the previous one is still here.
Is there a possibility to solve this? What I do is with javascript hide the non-active image and show the active image when pressed.
I have attached the code here:
<body>
<script>
var webAppWindow;
</script>
<iframe id="elframe" src="https://uoapp.es/cuenta/" name="iframe" style="position:fixed; width: 100%; height: 94%; "
onLoad="cambioiframe();"></iframe>
<div class="navbar">
<img src="img/logo-uo.png"
style="position: fixed;left: 50%; bottom: 0px; transform: translateX(-50%); width: 120px;" alt="logo"></a>
<a href="https://uoapp.es/blog" target="iframe"><img src="img/icons8-news-64-active.png"
style="position: fixed; left: 0%; bottom: 0px; width: 50px; display: none;" id="blog-activo"
alt="blog"></a>
<a href="https://uoapp.es/blog" target="iframe" onclick="mostraricono1();"><img src="img/icons8-news-64.png"
style="position: fixed;left: 0%; bottom: 0px; width: 50px;" id="blog-no-activo" alt="blog"></a>
<div class="contacto">
<a href="https://uoapp.es/contacto" target="iframe"><img src="img/icons8-group-message-64-active.png"
style="position: fixed;left: 15%; bottom: 0px; width: 50px; display: none;" id="contacto-activo"
alt="contacto"></a>
<a href="https://uoapp.es/contacto" target="iframe" onclick="mostraricono2();"><img
src="img/icons8-group-message-64.png" style="position: fixed;left: 15%; bottom: 0px; width: 50px;"
id="contacto-no-activo" alt="contacto"></a>
<a href="https://uoapp.es/directorio/" target="iframe"><img src="img/icons8-page-64-active.png"
id="directorio-activo" alt="directorio"
style="position: fixed;left: 72%; bottom: 0px; width: 50px; display: none;"></a>
<a href="https://uoapp.es/directorio/" target="iframe" onclick="mostraricono3();"><img
src="img/icons8-page-64.png" id="directorio-no-activo" alt="directorio"
style="position: fixed;left: 72%; bottom: 0px; width: 50px;"></a>
<a href="https://uoapp.es/cuenta/" target="iframe"><img src="img/icons8-user-male-64-active.png"
id="cuenta-activo" alt="cuenta"
style="position: fixed;left: 86%; bottom: 0px; width: 50px; display: none;"></a>
<a href="https://uoapp.es/cuenta/" target="iframe" onclick="mostraricono4();"><img
src="img/icons8-user-male-64.png" id="cuenta-no-activo" alt="cuenta"
style="position: fixed;left: 86%; bottom: 0px; width: 50px;"></a>
</div>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script>
</script>
<p id="OneSignalUserId"></p>
<p style="word-break: break-all;" id="OneSignalPushToken"></p>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
Javascript code is:
function mostraricono1() {
const blog_noactivo = document.getElementById('blog-no-activo');
blog_noactivo.style.display = "none";
const blog_activo = document.getElementById('blog-activo')
blog_activo.style.display = "block";
const contacto_noactivo = document.getElementById('contacto-no-activo');
contacto_noactivo.style.display = "block";
const contacto_activo = document.getElementById('contacto-activo')
contacto_activo.style.display = "none";
const directorio_noactivo = document.getElementById('directorio-no-activo');
directorio_noactivo.style.display = "block";
const directorio_activo = document.getElementById('directorio-activo')
directorio_activo.style.display = "none";
const cuenta_noactivo = document.getElementById('cuenta-no-activo');
cuenta_noactivo.style.display = "block";
const cuenta_activo = document.getElementById('cuenta-activo')
cuenta_activo.style.display = "none";
}
That is the function show icons 1 then there are the other 3 functions that are identical for each image
I hope someone can help me. If someone can, thank you!

one of the solutions is to give them serial id or serial class name , put for the first one
id = 'id1' and the second element give it an id = 'id2' and so on
then we gonna handle it in the java script using a counter like
var i = 1 ;
so if you want an element of id1 ,it gonna be ('id'+i) and after clicking the next button ,the counter increase (i++) and when clicking the previous button the counter decrease (i--)
below is an example of what i mean
// get all the elemnts of the main div
var selectedDiv = document.querySelectorAll('.contacto div')
// the counter
var i = 1;
function btnRing(clicked_id) {
// this for hide all the elements inside the main div
//when clicking any button the all elements is gonna hide
selectedDiv.forEach(div => {
div.style.display = "none"
})
// this for next button
if (clicked_id === 'btn1') {
// this line to make the previous button active when clicking the next button
document.getElementById('btn2').style.pointerEvents = 'all'
//this to show the next element
document.getElementById('div' + (i + 1)).style.display = 'block'
// increase the counter when clicking next
i++
// this for deactivating the next button when is there is no more elements
if (i >= 4) {
document.getElementById(clicked_id).style.pointerEvents = 'none'
}
//this is the previous button
} else if (clicked_id === 'btn2') {
// this for activating the next button after i deactivate it above
document.getElementById('btn1').style.pointerEvents = 'all'
//decrease the counter
i--
// showing the previous elemnt
document.getElementById('div' + i).style.display = 'block'
//this for deactivating the previous button after is no more elements
if (i <= 1) {
document.getElementById(clicked_id).style.pointerEvents = 'none'
}
}
}
#div1,
#div2,
#div3,
#div4 {
height: 10rem;
width: 10rem;
background-color: brown;
color: aliceblue;
display: none;
}
#div1 {
display: block;
}
<div class="contacto">
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
<div id="div4">DIV 4</div>
</div>
<button id='btn1' onclick="btnRing(this.id)">next</button>
<button id='btn2' onclick="btnRing(this.id)">previous</button>

When clicking a button, how do you make video and text appear?

I'm actually quite lost and don't know where to start. So basically what I'm trying to achieve is when the button is clicked, the text and video will reveal. Otherwise hide it when clicked away.
picture of how I want it
preview on the html page
HTML
<div id="abl1"> <!-- Ability ONE VIDEO HEAL SHOT !-->
<video preload="auto" autoplay="autoplay" type="video/mp4" src="sleepdart.mp4" loop></video>
</div>
<div class="shape1"></div>
<p class="ability1txt">Text.</p>
<div class="button.abl">
<button id="abl1.btn" class="ability1"></button>
</div>
CSS
abl1 video{
height: 500px;
width: 600px;
z-index: 1;
position: absolute;
margin-top: 50px;
margin-left: 200px;
}
.ability1txt{
position: absolute;
text-align: center;
width: 600px;
font-size: 27px;
z-index: 10px;
margin-left: 55%;
margin-top:8%;
font-family: "BigNoodleTitling";
color: white;
}

You can do it by javascript as following:
function ab1_Click() {
var vid1 = document.getElementById("ab1Video");
var t1 = document.getElementById("ab1Text");
var v = "visible";
if (vid1.style.visibility != "hidden") { v = "hidden"; }
vid1.style.visibility = v;
t1.style.visibility = v;
}
<div id="abl1"> <!-- Ability ONE VIDEO HEAL SHOT !-->
<video id="ab1Video" preload="auto" autoplay="autoplay" type="video/mp4" src="sleepdart.mp4" loop></video>
</div>
<div class="shape1"></div>
<p id="ab1Text" class="ability1txt">Text.</p>
<div class="button.abl">
<button id="abl1.btn" class="ability1" onclick="ab1_Click()">Show/Hide</button>
</div>

Use jQuery.
You could always use raw Javascript but using jQuery makes things a whole lot easier. Generally, Javascript is used for interactivity.
Your Javascript code would look something like this:
$(document).ready(function() {
$('div.button\.abl button#abl1\.btn').click(function() {
if ($('div#abli video').is(':visible') && $('p.ability1txt').is(':visible')) {
$('div#abli video').hide(); // or fadeOut()
$('p.ability1txt').hide(); // or fadeOut()
} else {
$('div#abli video').show(); // or fadeIn()
$('p.ability1txt').show(); // or fadeIn()
}
});
});

You really don't need JavaScript to make video and text show/hide. By using only CSS and HTML we could hide anything with a strategically placed checkbox and label. Added some JavaScript so the video pauses when it's hidden, but the show/hide feature requested doesn't need any JavaScript.
Details commented in Demo
Demo
// Reference the <video> and <input type='checkbox'>
var v = document.getElementById('vid0');
var c = document.getElementById('chx0');
/* Whenever label.btn is clicked, the checkbox triggers
|| the change event. When a change happens, the <video>
|| will play if the checkbox is checked and pause if
|| it isn't
*/
c.onchange = function(e) {
if (this.checked) {
v.play();
} else {
v.pause();
}
}
html,
body {
width: 100%;
height: 100%;
}
/* Although .chx is "gone", it is still able to
|| influence and be influenced by other elements
*/
.chx {
display: none
}
.case {
display: none;
height: 270px;
width: 480px;
}
/* When checkbox is checked the figure.case
|| that follows the label.btn which in turn
|| follows the checkbox is revealed
*/
.chx:checked+.btn+.case {
display: block;
}
#vid0 {
width: 100%;
height: 100%;
display: block;
}
.cap {
text-align: center;
width: 100%;
font-size: 27px;
color: white;
display: table;
background: rgba(0, 0, 0, 0.6);
}
.btn {
font-size: 48px;
display: inline-block;
width: 8ch;
height: 2ex;
cursor: pointer;
color: #00f;
text-shadow: 3px 1px 2px #555;
}
.btn::before {
content: '▶'
}
/* When the checkbox is checked, the pseudo-element
|| of label.btn that follows the checkbox changes its
|| icon to pause.
*/
.chx:checked+.btn::before {
content: '⏸';
font-size: 54px;
}
<input id='chx0' class='chx' type='checkbox'>
<!--
[for] attribute value is the #id of the form-control it is accosiated with. This association allows the <label> to act as the form-control's proxy. Simply put, if label#btn0 is clicked, then input#chx0 is checked or unchecked.
-->
<label id="btn0" class='btn' for='chx0'></label>
<figure class="case">
<video id='vid0' preload="auto" autoplay loop src="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005611.mp4" width='480' height='270'></video>
<figcaption class='cap'>1 min/11 sec Leader</figcaption>
</figure>

Javascript create IFrame

I'm trying to create IFrame element within parent div. this is my javascript code:
var e = document.createElement('iframe');
e.setAttribute('src', 'http://www.example.com/);
e.setAttribute('scrolling', 'no');
e.style.border = "none";
e.style.overflow = "hidden";
e.style.overflowX = "hidden";
e.style.overflowY = "hidden";
var c = document.getElementById('parentDiv');
c.appendChild(e);
When I'm use this script in another site (emmbeded code), I'm getting this result:
<div>
<div id="parentDiv">
<iframe src="http://www.example.com/" scrolling="no" style="width: 250px; height: 60px; border: medium none; overflow: hidden;">
</iframe>
<iframe src="http://www.example.com/" scrolling="no" style="width: 250px; height: 60px; border: medium none; overflow: hidden;">
</div>
<script type="text/javascript" src="http://example.com/path" >
</div>
As you can see, the previous code is creating two IFrames (instead of one) and I'm don't know why.
Why this is happens?