Trying to make my first project with bunch of pictures, with a filter/search bar at the top that would filter the pictures depending on the input. For example if the input would be "Aatrox", it would show "Aatrox" and not "Jayce" and or "Senna" and so on. Script was working fine, I added a .toLowerCase() so its not case sensitive and then I added to the pictures so they are clickable and each lead to their own page. After adding these two the search bar stopped working.
Here is the snippet of the script
<script>
function search(){
var searchText = (document.getElementById("searchInput").value).toLowerCase();
var images = document.querySelectorAll(".image_container > img");
if(searchText.length > 0){
images.forEach((image) => {
image.classList.add("hide");
if((image.dataset.tags).toLowerCase().indexOf(searchText) > -1){
image.classList.remove("hide");
}
});
}else{
images.forEach((image) => {
image.classList.remove("hide");
});
}
}
</script>
Here is the HTML part
<head>
<title> Counterpicks </title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Counterpicks pro debily </h1>
<div class="container">
<div class="searchbox_container">
<div class="searchbox">
<input type="text" name=" " placeholder="Search" class="search" id="searchInput" onkeyup="search()">
</div>
</div>
<div class="image_container">
<img data-tags="aatrox" src="aatrox.webp" alt="Aatrox" class="actionimages">
<img data-tags="ahri" src="ahri.webp" alt="Ahri" class="actionimages">
</div>
I input only few of the lines because they are just repeating for 130 lines.
And here is the CSS
.container {
background: rgba(0,0,0,0);
text-align: center;
margin-left: 20%;
margin-right: 20%;
}
.searchbox {
text-align: center;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 20px;
}
.image_container {
clear:both;
}
.hide {
display:none;
This is my first project with JavaScript so I will be happy for any constructive criticism.
Replace:
var images = document.querySelectorAll(".image_container > img");
with:
var images = document.querySelectorAll(".image_container > a > img");
Related
function check_email() {
var at_present = false;
var email = document.getElementById("email").value;
if (email !== "") {
for (let i = 0; i <= email.length; i++) {
if (email[i] === "#") {
at_present = true;
break;
}
}
if (at_present == false) {
alert("Invalid email! # missing");
}
}
}
h1 {
text-align: center;
}
.background {
background-image: url("https://firebasestorage.googleapis.com/v0/b/diffusion-library.appspot.com/o/soldiers-at-a-distance-fighting-in-a-savana-biome-high-quality-little-blurred%2F1.jpg?alt=media&token=559b6e72-c738-4b56-889c-d4ad6466548d");
background-size: 1600px;
position: center;
background-position-y: -300px;
filter: blur(8px);
}
<!DOCTYPE html>
<html>
<head>
<title>MODULO ISCRIZIONE SOFTAIR</title>
<link rel="stylesheet" href="Modulo_softair_css.css">
</head>
<body>
<div class="background"></div>
<h1>MODULO ISCRIZIONE SOFTAIR</h1>
<div class="content">
<strong>Nome:</strong>
<br>
<input type="text" id="nome">
<br>
<br>
<strong>Numero di Telefono:</strong>
<br>
<input type="text" id="telefono">
<br>
<br>
<strong>Email:</strong>
<br>
<input type="text" id="email" onchange="check_email()">
</div>
<script>
</script>
</body>
</html>
The background isn't loading I don't know why. Before adding the div and class the background was loading correctly. Can somebody help me figure out why? This program is meant to be a web page for a form about softair, and I wanted to add a photo to the background with a blurred effected so that it wouldn't disturb. As I said before, I had the background in the body without the div, but when I tried to blur, it blurred the whole body. So i made the class but now it isn't working.
Thanks
Tried removing some adjectives form the css but I had no luck.
To start off I'm terrible at Js and super new at it. I'm trying to make a random image pop up when the site goes to a 404. I can't tell if my website is actually running the code or not because console.log wasn't working. Because of that I took all my CSS and js and put it all into the same HTML file to see if that was the problem (it wasn't) Any help is much appreciated :)
HTML:
<html>
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<div id="getMeme()"></div>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
document.getElementById("result").onload = '<img src="' + meme[pp] + '" />';
}
</script>
</html>
Using your code, you would need to ensure the function getMeme is called/invoked. Furthermore, you would need to update the function to modify the innerHTML of the element with id result instead of assigning to it's event handler onload.
See demo below:
I've included a console.log for debugging purposes on stackoverflow as images shared in the question are not available.
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<span id="result"></span>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
console.log("chose meme",meme[pp]); //line included for debugging purposes on stackoverflow as images shared in question are not available
//update `innerHTML` of target element
document.getElementById("result").innerHTML = '<img src="' + meme[pp] + '" />';
}
//call function to getMeme at the end of the page
getMeme();
</script>
</body>
</html>
I wanted to create an effect where the whole body gets blurred or dimmed and only a particular list item appears clear. However when I set the z-index to the list item, it doesn't work. And when I set the z-index of the whole un-ordered list, it works but the all the list items appear clear (which I don't want).
Let me show you my html code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashish Toppo</title>
<link href="https://fonts.googleapis.com/css?family=Oxanium&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body >
<!-- the html for the top bar starts here -->
<div class="top_bar" id="topBar">
<div class="logo_name" id="logoName">Ashish Toppo</div>
<ul class="menu">
<li class="menu_items currently_active_menuItem" id="home">home</li>
<li class="menu_items" id="about">about</li>
<li class="menu_items" id="education">education</li>
</ul>
</div>
<!-- the html for the top bar ends here -->
<!-- the html for the intro starts here -->
<div class="intro" id="intro">
<div class="profile_pic" id="profilePic">
<img id="profileImg" src="images/ashish-toppo-green.jpg" width="100%" height="100%" alt="a picture of mine">
</div>
<div class="intro_box" id="introBox">
<!-- some introduction text here -->
<center id="aboutPointer">To know more about me, go to the about section!</center>
</div>
</div>
<!-- the html for the intro ends here -->
<script src="js/uiversal.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Now, the Universal javaScript file:
/* this is a reusable js file universal to all web pages */
/* Ashish Toppo */
"use strict";
function get(id_or_class){
var obj = {
element: ( document.getElementById(id_or_class) ) ? document.getElementById(id_or_class) :
( document.getElementsByClassName(id_or_class) ) ? document.getElementsByClassName(id_or_class) :
( document.querySelector(id_or_class) ) ? document.querySelector(id_or_class) :
console.error("The provided HTML element could not be found"),
html: () => { return obj.element; },
changeText: (text) => { obj.html().innerHTML = text; },
appendText: (text) => {
let appendOn = obj.html().innerHTML;
obj.html().innerHTML = appendOn + text;
},
previousDisplayMode: "block",
hide: () => {
obj.previousDisplayMode = obj.html().style.display;
obj.html().style.display = "none";
},
show: () => {
obj.html().style.display = obj.previousDisplayMode;
},
on: (event, callBack) => {
obj.html().addEventListener(event, callBack);
},
previousZIndex: 1,
focusOn: () => {
let blur = document.createElement("div");
blur.className = "theDivThatBlurs";
blur.style.width ="100vw";
blur.style.height ="100vh";
blur.style.display ="block";
blur.style.position ="fixed";
blur.style.top ="0";
blur.style.left ="0";
blur.style.zIndex ="9";
blur.style.backgroundColor ="rgba(0, 0, 0, 0.9)";
blur.innerHTML = "";
document.body.appendChild(blur);
obj.html().style.zIndex = "100";
}
}
return obj;
}
and the index.js file was as followed:
/* my css wasn't working as i wanted, so i had to fix it using js */
"use strict";
(function(d){
const active = d.getElementsByClassName("currently_active_menuItem");
active[0].style.textDecoration = "none";
})(document);
var about = get("about");
var aboutPointer = get("aboutPointer");
aboutPointer.on("click", function(){
console.log("the about pointer has been clicked");
focus(about);
});
function focus(theElement){
console.log("the focus is working");
theElement.focusOn();
}
You can use the box-shadow property to achieve the dimming effect. Quick and easy :)
Just toggle a class programmatically and it should work for any element you have.
Code
function focusAndDim() {
document.getElementById("maindiv").classList.toggle("visible");
// if you want to get more fancy ;)
document.getElementsByTagName("body")[0].classList.toggle("blur");
}
.visible {
box-shadow: 0 0 0 10000px #ccc;
/* this code below make everything else hidden */
/* box-shadow: 0 0 0 10000px #fff; */
position: relative;
}
.btn {
height: 20px;
line-height: 1.4;
border: 2px solid #999;
padding: 12px 24px;
margin-bottom: 10px;
border-radius: 2px;
cursor: pointer;
}
body {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 100vh;
}
body.blur div {
filter: blur(2px);
}
body.blur div.visible {
filter: blur(0);
}
<div class="btn" onclick="focusAndDim()" id="maindiv">Click Me</div>
<div>Other elements</div>
Is it possible to lazy-load the entire div-tag using Intersection Observer API?
I have lazy loaded images using the intersection observer api approach. Not sure how to do it for html elements.
Yes, you can lazy load content into divs. The example below simply uses html() to populate the div with a random string on intersect. If the content you want is a separate html page, you could use load() instead.
function lazyDivs() {
let lis = [].slice.call(document.querySelectorAll("div.lazy")),
items = ["Aruba", "Jamaica", "Bermuda", "Bahama", "Key Largo", "Montego"];
if (!lis.length) {
//do nothing
} else if ("IntersectionObserver" in window) {
let o = new IntersectionObserver(function(es, obs) {
es.forEach(function(e) {
if (e.isIntersecting) {
let li = $(e.target);
li.html(items[Math.floor(Math.random() * items.length)]);
//li.load('/path/to/html/fragment'); //option to load content from a separate page
li.removeClass("lazy");
o.unobserve(e.target);
}
});
});
lis.forEach(function(li) {
o.observe(li);
});
} else {
lis.forEach(function(li) {
let l = $(li);
l.html(items[Math.floor(Math.random() * items.length)]);
//l.load('/path/to/html/fragment'); //option to load content from a separate page
l.removeClass("lazy");
});
}
}
$(document).ready(function() {
lazyDivs();
});
div {
border: 1px solid blue;
width: 100px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px auto;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
</body>
</html>
I have 3 divs on the page and I want them to change the color if they are scrolling. For example, all divs are blue, if they scroll to the first diva, change to green, change to green to the second diva, but the first will be blue again. I do not know how to go about it. I count on your help and tips. Maybe you've seen a similar example somewhere :)
According to your div color change dynamicaly bellow is the code
<!DOCTYPE HTML>
<html>
<head>
<style>
.divblue {
width: 100%;
height: 400px;
background-color: blue;
color: white;
}
.divgreen {
width: 100%;
height: 400px;
background-color: green;
color: white;
}
</style>
</head >
<body>
<div id="maindiv" style="width:100%;height:300px;overflow-y:scroll;">
<div id="fstdiv" class="divblue">
Hi test for first div
</div>
<div id="snddiv" class="divblue">
Hello test for second div
</div>
<div id="thrdiv" class="divblue">
Sir test for Third div
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#maindiv').scroll(function () {
var hT = $('#fstdiv').outerHeight();
var hH = $('#snddiv').outerHeight();
var tH = $('#thrdiv').outerHeight();
var wS = $(this).scrollTop();
$('#fstdiv').removeClass('divgreen').addClass('divblue');
$('#snddiv').removeClass('divgreen').addClass('divblue');
$('#thrdiv').removeClass('divgreen').addClass('divblue');
if (wS < 100) {
$('#fstdiv').removeClass('divblue').addClass('divgreen');
}
else if (wS > 400 && wS < 700) {
$('#snddiv').removeClass('divblue').addClass('divgreen');
}
else {
$('#thrdiv').removeClass('divblue').addClass('divgreen');
}
});
});
</script>
</body>
</html >