We Keep Coding

How do I stop this JS 'show and hide' button from revealing the content at first?

Basically, I have 3 images and once the button is clicked it displays those images, however, when the page is loading up, the button is already toggled on and displays the images, once you click on it the images go. So the button works, but it starts off with displaying the contents which is not what I want.
var a;
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
<div id="image">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>

You can assign a = 1 and make your div to display none.
HTML:
<div id="image" style="display: none">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
JS:
var a = 1;
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}

You can use a class to define the style which you can toggle on clicking the button using DOMTokenList.toggle().
Also, I will suggest you to avoid inline event handler.
Demo:
document.querySelector('button').addEventListener('click', show_hide);
function show_hide()
{
document.getElementById("image").classList.toggle('showHide');
}
.showHide{
display: none;
}
<div id="image" class="showHide">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button>Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>

That's it just assign the value of 0 to the var before doing anything and call the function. It was that easy. I hope I solved your query you can run this code snippet to check if it works!
Thanks!
var a = 0;
show_hide()
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
<div id="image">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>

JS - IntersectionObserver - Argument 1 does not implement interface Element

I'm trying to add a class 'is-visible' to all elements of a class 'module' using IntersectionObserver when they come into view on scrolling. I get the error:
IntersectionObserver.observe: Argument 1 does not implement interface
Element.
Javascript:
let modules = document.getElementsByClassName("module");
const observer = new IntersectionObserver(
([e]) => {
let modules = document.getElementsByClassName("module");
modules.forEach((entry) => {
entry.classList.toggle("is-visible", e.intersectionRatio < 1);
});
},
{ threshold: [0, 0.25, 0.5, 0.75, 1] }
);
window.addEventListener(
"load",
(event) => {
observer.observe(modules);
},
false
);
HTML
<div id="wrapper">
<div id="hero">
<h1>This is my hero</h1>
</div>
<div id='strip'>
<div id='s1'>Option 1</div>
<div id='s2'>Option 2</div>
<div id='s3'>Option 3</div>
<div id='s4'>Option 4</div>
</div>
<div id="box" class="module fade-in-section">
<h2>Contact us</h2>
<img src="https://picsum.photos/300/100" />
</div>
<div class="module fade-in-section">
<h2>What we do</h2>
<img src="https://picsum.photos/300/100" />
</div>
<div class="module fade-in-section">
<h2>Who we are</h2>
<img src="https://picsum.photos/300/100" />
</div>
<div class="module fade-in-section">
<h2>Mission</h2>
<img src="https://picsum.photos/300/100" />
</div>
<div class="module fade-in-section">
<h2>About us</h2>
<img src="https://picsum.photos/300/100" />
</div>
<div class="module fade-in-section">
<h2>Services</h2>
<img src="https://picsum.photos/300/100" />
</div>
<div class="module fade-in-section">
<h2>Processes</h2>
<img src="https://picsum.photos/300/100" />
</div>
</div>
Here's a codepen:
https://codepen.io/m-herda/pen/BazpzZM
UPDATE:
Apart from the explanation to my problem that was mentioned in the comments/answers, it looks like a lot of the code above was not necessary. The code below works fine and is much simpler.
const modules = document.querySelectorAll(".module");
function handleIntersection(entries) {
entries.map((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("is-visible");
} else {
entry.target.classList.remove("is-visible");
}
});
}
window.addEventListener("load", (event) => {
const observer = new IntersectionObserver(handleIntersection);
modules.forEach((m) => observer.observe(m));
});

The error you get is:
IntersectionObserver.observe: Argument 1 does not implement interface Element.
This clearly states that the first argument of the function IntersectionObserver.observe needs to be an element.
Read the documentation of it.
In your code, you are calling .observe with a collection of elements.
The solution is to call it on each element you want to observe separately.

Instead of using getElementsByClassName("module"); to select your class use querySelector(".module"); or querySelectorAll(".module"); when selecting the observed element.

Crossfade a 6 images grid randomly, one by one

I've been trying since yesterday to do something a bit tricky (I guess).
I'm trying to do exactly what happens here: https://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html but this script is 8 years old and can't work with newer jQuery, anyway I wanted to redo it by myself.
What I need (well, what the marketing want me to do):
Having a 6 images grid which randomly crossfade to another image, but one by one. They should never repeat themselves.
So far I've done this, but all the crossfade are made 6 by 6. I want to do it, one by one, in a random order.
HTML
<div class="img-bank">
<img style="display:none" src="https://picsum.photos/210?image=0" />
<img style="display:none" src="https://picsum.photos/210?image=11" />
<img style="display:none" src="https://picsum.photos/210?image=21" />
<img style="display:none" src="https://picsum.photos/210?image=31" />
<img style="display:none" src="https://picsum.photos/210?image=41" />
<img style="display:none" src="https://picsum.photos/210?image=51" />
<img style="display:none" src="https://picsum.photos/210?image=61" />
<img style="display:none" src="https://picsum.photos/210?image=71" />
<img style="display:none" src="https://picsum.photos/210?image=81" />
<img style="display:none" src="https://picsum.photos/210?image=91" />
<img style="display:none" src="https://picsum.photos/210?image=101" />
<img style="display:none" src="https://picsum.photos/210?image=111" />
<img style="display:none" src="https://picsum.photos/210?image=121" />
<img style="display:none" src="https://picsum.photos/210?image=131" />
<img style="display:none" src="https://picsum.photos/210?image=141" />
<img style="display:none" src="https://picsum.photos/210?image=151" />
<img style="display:none" src="https://picsum.photos/210?image=161" />
<img style="display:none" src="https://picsum.photos/210?image=171" />
<img style="display:none" src="https://picsum.photos/210?image=181" />
<img style="display:none" src="https://picsum.photos/210?image=191" />
</div>
<div class="container galery">
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=1" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=2" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=3" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=4" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=5" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=6" />
<img style="display:none;" class="img-fluid" src="" />
</div>
</div>
</div>
JS
$( document ).ready(function() {
var ids = [];
function initArray() {
$(".img-bank img").each(function() {
ids.push($(this).attr("src"));
})
}
function randomArray() {
// copie du tableau d'ids car il va etre modifié
var tempIds = ids.slice();
// init du tableau de resultat
var myIds = [];
for (var i = 0; i < 6; i++) {
// Recupere un int random
var randomId = (Math.floor(Math.random() * tempIds.length) + 1);
// Recupere la valeur random
var myId = tempIds[randomId - 1];
// Ajout de la valeur random au tableau de resultat
myIds.push(myId);
// Recupere l'index de la valeur random pour la suppression
var pos = tempIds.indexOf(myId);
// Suppression de la valeur choisie pour eviter de retomber dessus
tempIds.splice(pos, 1);
}
return myIds;
}
initArray();
function changeSrc() {
var result = randomArray();
$(".galery img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
$(".galery img").fadeToggle(1500);
}
setInterval(function() {
changeSrc();
}, 2000);
});
LESS
.galery {
margin-top: 30px;
.row > div {
position:relative;
height: 240px;
width: 240px;
img {
position: absolute;
top: 0;
left: 15;
}
}
}
https://jsfiddle.net/N_3G/ju0comn2/
Can someone help me with this please?

You can select a cell col-4 at random, then apply the logic to only the 2x img in that cell.
Without changing too much of your existing code, change to:
var cells = $(".galery .col-4");
var randomId = (Math.floor(Math.random() * cells.length));
var cell = cells.eq(randomId);
cell.find("img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
cell.find("img").fadeToggle(1500);
Updated fiddle: https://jsfiddle.net/ju0comn2/1/
Due to the nature of Math.random() you will notice it runs the same images in the same order - seed the random. You'll also get the same image replacing with the same image.
For a rudimentary fix for duplicated images, check if any of the visible images have the same src as the new src:
var result = randomArray();
var cells = $(".galery .col-4");
var randomId = (Math.floor(Math.random() * cells.length));
var newsrc = result[0];
if ($(".galery img[src='" + newsrc + "']:visible").length > 0) {
changeSrc();
}
else {
var cell = cells.eq(randomId);
cell.find("img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
cell.find("img").fadeToggle(1500);
}
This could be handled with a while loop to keep getting randomIds, but as long as you have more images than panels, the recursive call is unlikely to stack overflow.
Updated fiddle: https://jsfiddle.net/ju0comn2/2/

Cannot find elements by class jQuery in just inserted HTML

render:function () {
var self = this;
$.ajax({url:'/db/list.json', dataType:'JSON'}).done(function (json) {
var html = tmpl['video-list']({videos:json});
self.$el.html(html);
});
console.log($('.video-thumb-box'));
$.each($('.video-thumb-box'), function(){
console.log(this);
$(this).bind('mouseenter', function(){
console.log($('.video-thumb-info', this));
});
});
}
tmpl['video-list']({videos:json}) is underscore template and contain list of items in DIVs here is example return
<div class="span3">
<a href="#/video/123">
<div class="video-thumb-box">
<img class="video-thumb-img" src="test" alt="Video tumbnail">
<div class="video-thumb-info hide">
<img class="pull-right" width="16" height="16" src="/img/icons/namba.png">
something
</div>
</div>
</a>
</div>
<div class="span3">
<a href="#/video/123">
<div class="video-thumb-box">
<img class="video-thumb-img" src="test" alt="Video tumbnail">
<div class="video-thumb-info hide">
<img class="pull-right" width="16" height="16" src="/img/icons/namba.png">
something
</div>
</div>
</a>
</div>
Why cannot I find anything in $('.video-thumb-box')?

your each loop is backwards.
$('.video-thumb-box').each(function() {
console.log(this);
$(this).bind('mouseenter', function(){
console.log($('.video-thumb-info', this));
});
});
Here's the jQuery .each() API page

How do I make a direct call to a Menu item from the content?

I have this code, it works for a rotating menu that is obviously a ul> li> Menu.
What I would like to know is how to trigger (onClick, HRef, etc.) the function for a specific list item such as rot7.
I would like to click a line of text and fire the function, is this possible?
Example "Click here to go there" ,
Kinda like the old days -- {a href="some.html"}Click Here{/a} page loads.
In this case I want the text to open the 7th li> menu item using the form and function of the JQuery script.
There, clear as Mud.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bridgett's Electrolysis</title>
<!-- Favorite Icon --><link rel="shortcut icon" href="images/beLogoColor3D.png" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
}
#content{
margin:150px auto 10px auto;
}
.reference{
clear:both;
width:800px;
margin:30px auto;
}
.reference p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:10px;
}
.reference p a:hover{
color:#333;
}
</style>
<script type="text/javascript">
// EDITED
$(function () {
$('#link6').click(function () {
$('#rotmenu li:nth-child(6)').click();
});
});
</script>
</head>
<body>
<div class="logoback">
<div id="logo">
<img src="images/beWebLogoColor3D.png" height="250">
</div>
</div>
<div id="content">
<div class="rotator">
<div class="myh">STOP TWEEZING UNWANTED HAIR.....FOREVER!!!</div>
<ul id="rotmenu">
<li>
Home
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Relax</div>
<div class="info_description">
<div class="myh1">Eliminate Unwanted Hair</div><br />
<div class="col2"><img src="images/page1_img1.png" alt="" width="90%"></div>
<div class="col2">
<span class="myh2">Safe, Permanent Hair Removal<br />
<br />
Electrolysis is:</span><br />
<span class="myh3home">• Still the only true permanent hair removal method and the only
permanent treatment recognized by the FDA<br />
• An excellent solution for those discouraged by the unsuccessful results of temporary
hair removal methods<br />
• For everyone<br />
• The preferred treatment for combating folliculitis<br />
<br />
</span>
</div>
<div id="mycenter" class="myh2"><a id="link6" href="javascript:;">Book now to schedule your Complimentary Consultation</a>
</div>
</div>
</div>
</li>
<li>
News
<div style="display: none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">The Scoop</div>
<div class="info_description">
<div class="col1">
<img src="images/page2_img1.jpg" alt="" />
<img src="images/appointment-request1.png" width="60%" alt="" />
<img src="images/page2_img3.jpg" alt="" />
</div>
<div class="col3">
<div class="mytabs">Open at our new Location!</div>
<span class="myh3">See our Location Section for a Map or Directions.</span><br /><br /><br /><br />
<div class="mytabs">Online Appointment Booking is Now Available!</div>
<span class="myh3">Go to our Appointments Section and schedule your appointment today.</span><br /><br /><br /><br />
<div class="mytabs">All New Equipment!</div>
<span class="myh3">The latest and greatest equipment has been installed to offer you the most comfortable Electrolysis experience.</span>
</div>
</div>
</div>
</li>
<li>
Services
<div style="display:none;">
<div class="info_image">3.jpg</div>
<div class="info_heading">Here to Serve You</div>
<div class="info_description">
<span class="mytabs">Electrolysis</span><br />
<span class="myh3">These are the areas that Electrolysis can be performed on.</span><br />
<img src="images/areas.png" / width="100%" height="350">
</div>
</div>
</li>
<li>
Location
<div style="display:none;">
<div class="info_image">4.jpg</div>
<div class="info_heading">Come and Visit</div>
<div class="info_description">
<span class="mytabs">1003 E. Broad St. Mansfield TX 76063</span>
<iframe width="100%" height="355px" seamless="seamless" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1003+E+Broad+St,+Mansfield,+TX&aq=2&oq=1003+E+Broad&sll=32.800447,-97.289319&sspn=0.966172,1.783905&t=m&ie=UTF8&hq=&hnear=1003+E+Broad+St,+Mansfield,+Texas+76063&ll=32.565228,-97.130527&spn=0.007568,0.013937&z=14&output=embed">
</iframe>
<br />
</div>
</div>
</li>
<li>
Contact Us
<div style="display:none;">
<div class="info_image">5.png</div>
<div class="info_heading">Get in Touch</div>
<div class="info_description">
<div class="col1">
<span class="mytabs">Contact Info:</span><br />
<span class="myh3">Bridgett's Electrolysis<br />
1003 E. Broad St<br />
Mansfield, TX. 76063<br />
Phone:(817)879-7817<br />
email: <a href="mailto:bridgettselectro#gmail.com?subject=Info Request from your site">
bridgettselectro#gmail.com</a><br />
</span>
</div>
<div class="col3">
</div>
</div>
</div>
</li>
<li>
FAQ
<div style="display:none;">
<div class="info_image">6.png</div>
<div class="info_heading">Electrolysis Questions?</div>
<div class="info_description">
<Iframe src="faq/faq.htm" width="100%" height="400" frameborder="0" marginheight="0"></Iframe>
</div>
</div>
</li>
<li>
Appointment
<div style="display:none;">
<div class="info_image">book.jpg</div>
<div class="info_heading">Book It</div>
<div class="info_description">
<Iframe src="webappt/index.php" width="100%" height="405" frameborder="0" marginheight="0"></Iframe>
</div>
</div>
</li>
<li>
FaceBook
<div style="display:none;">
<div class="info_image">like.png</div>
<div class="info_heading">Coment or Like Us</div>
<div class="info_description">
<div class="mycenter"><span class="myh2">Be Sure to Visit our FaceBook FanPage for deals and coupons!</span></div>
<div class="col2">
<div class="fb-like", data-href="http://www.bridgettselectro.com" data-send="false" data-width="450" data-show-faces="true" data-colorscheme="dark" data-font="arial"></div>
</div>
<div class="col2">
<div class="fb-comments" data-href="https://www.facebook.com/BridgettsElectrolysis?fref=ts" data-num-posts="10" data-width="350" data-colorscheme="dark"></div>
</div>
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script src="js/atooltip.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var current = 1;
var iterate = function () {
var i = parseInt(current + 1);
var lis = $('#rotmenu').children('li').size();
if (i > lis) i = 1;
display($('#rotmenu li:nth-child(' + i + ')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate, 3000000);
$('#rotmenu li').bind('click', function (e) {
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem) {
var $this = elem;
var repeat = false;
if (current == parseInt($this.index() + 1))
repeat = true;
if (!repeat)
$this.parent().find('li:nth-child(' + current + ') a').stop(true, true).animate({ 'marginRight': '-20px' }, 300, function () {
$(this).animate({ 'opacity': '0.7' }, 700);
});
current = parseInt($this.index() + 1);
var elem = $('a', $this);
elem.stop(true, true).animate({ 'marginRight': '0px', 'opacity': '1.0' }, 300);
var info_elem = elem.next();
$('#rot1 .heading').animate({ 'left': '-420px' }, 500, 'easeOutCirc', function () {
$('h1', $(this)).html(info_elem.find('.info_heading').html());
$(this).animate({ 'left': '0px' }, 400, 'easeInOutQuad');
});
$('#rot1 .description').animate({ 'bottom': '-425px' }, 500, 'easeOutCirc', function () {
$('p', $(this)).html(info_elem.find('.info_description').html());
$(this).animate({ 'bottom': '0px' }, 400, 'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>', {
style: 'opacity:0',
className: 'bg'
}).load(
function () {
$(this).animate({ 'opacity': '1' }, 600);
$('#rot1 img:first').next().animate({ 'opacity': '0' }, 700, function () {
$(this).remove();
});
}
).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '1200').attr('height', '500')
);
}
});
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>

<a id="link6" href="javascript:;">click to open menu 6</a>
<script>
// EDITED
$(function() {
$('#link6').click(function(){
$('#rotmenu li:nth-child(6)').click();
});
});
</script>
EDIT:
The code above will not work because each time the menu is changing pages sets the container (.description) content with the original tags get upon initialization, so the page content including our a tag is overriden by a the original content which is same as previous one, but overrides the old one and that's why the click handler doesn't work - because it was set on an item which is overriden.
To not set the click handler each time when the menu changes the pages it should be bind into the link as simple as taht: <a onclick="$('#rotmenu li:nth-child(6)').click();" href="javascript:;">Book now to schedule your Complimentary Consultation</a>.
That's it - works fine.