How build search box like Facebook - javascript

Please how can make a search box that on click on the search icon should open another page for the search box Facebook search bar. Thanks in advance.


I tried to create it using HTML and CSS only
here the result:
body {
margin: 0;
}
nav {
background-color: rgba(0, 0, 255, 0.172);
border-bottom: 1px solid blue;
padding: 0.5em 0;
display: grid;
place-items: center;
}
nav input[type="text"] {
font-size: 1.5em;
border-radius: 2em;
border: none;
color: white;
width: 1.5em;
transition-duration: 0.5s;
}
nav input[type="text"]:hover,
nav input[type="text"]:focus {
width: calc(90vw - 2em);
color: rgb(0, 51, 255);
border-radius: 0.2em;
transition-duration: 1s;
padding: 0 2em 0 0;
}
input[type="text"]:hover~svg,
input[type="text"]:focus~svg {
right: 10px;
}
nav #content {
display: grid;
grid-auto-flow: column;
place-items: center;
}
#content svg {
width: 1.5em;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
z-index: 1;
}
#content {
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div id="content">
<input type="text">
<!--search icon-->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" preserveaspectratio="xMidYMid meet" focusable="false" class="style-scope yt-icon"><g class="style-scope yt-icon"><path d="M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z" class="style-scope yt-icon"></path></g></svg>
</div>
</nav>
</body>
</html>

Related

Stretching a grid box on hover to display additional information in that box

I want to make an weather app and I want to let the user to add in the application some weather cards with the city they are interested with. If they no longer want a specific weather card, they can delete it. For now, you can add some empty cards by using the + button.
Below is what I did and how the app looks like.
In the first phase I want the displayed cards to show the city weather information at the current time and with a hover I want the card to expand and display more information about that city such as a 5 day forecast.
I don't know how to stretch a specific card on hover and I'm asking your help with this problem. Thank you!
const displayContent = document.querySelector('.content');
const widget = document.querySelector('.widget');
const addWidget = document.querySelector(".addButton");
console.log(displayContent)
addWidget.addEventListener('click', newWidget);
var cont=0;
function newWidget(){
cont=cont+1;
let newWidget = document.createElement('div');
newWidget.setAttribute('class', 'widget');
newWidget.setAttribute('id', "widget" + cont);
let closeBtn = document.createElement('span');
closeBtn.setAttribute('class', 'remove');
closeBtn.setAttribute('id', 'remove' +cont);
closeBtn.textContent = '✕';
displayContent.appendChild(newWidget);
newWidget.appendChild(closeBtn);
//remove the cards
var close = document.querySelectorAll("span");
for(let i=0 ; i<close.length; i++){
close[i].addEventListener('click', () =>{
close[i].parentElement.remove();
})
}
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
--fontcolor: #313131;
--bgcolor: #FAFAFA;
}
html {
font-family: "Roboto", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bgcolor);
margin: 0;
color: var(--fontcolor);
transition: background-color 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container {
max-width: 85vw;
margin: 0 auto;
}
header {
display: flex;
margin-bottom: 30px;
font-size: 1.5em;
align-items: center;
justify-content: space-between;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid black;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.addButton {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 6px 5px 0;
cursor: pointer;
font-size: 20px;
}
.content {
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: minmax(250px, 1fr);
grid-gap: 25px;
}
.widget {
color: white;
display: flex;
flex-direction: column;
padding: 25px;
position: relative;
white-space: normal;
word-wrap: break-word;
transition: background-color 50ms;
background: linear-gradient(130deg, rgba(25,118,210,1) 0%, rgba(63,81,181,1) 100%);
box-shadow: 5px 5px 18px -1px rgb(0 0 0 / 34%);
border-radius: 5px;
}
.remove{
position: absolute;
top: 5px;
right: 12px;
font-size: 22px;
opacity: 0.7;
cursor: pointer;
}
#keyframes append-animate {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
/* animate new box */
.widget {
animation: append-animate .3s linear;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Library</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/31c84a9fec.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="header">
<h1 id='title'>Weather App</h1>
<div class="control">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Add a city">
<button type="submit" class="addButton">+</button>
</div>
</div>
</div>
</header>
<div class="content">
<div class="widget" id="widget0">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Have you tried using CSS transitions?
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
transition: all 1s;
}
div.h:hover {
width: 150px;
background-color: purple;
}
div.v:hover {
height: 150px;
background-color: purple;
}
<div class="h"></div>
<div class="v"></div>

CSS - JavaScript Not Being Implemented

I fetched an html file using fetch api and took the div components and embedded them into another html file. The css is not being applied after the process is complete. Nor is the javascript file being called. I checked the file paths and they are correct. Does the css and javascript tags not transfer over when they are fetched using the fetch api?
***Main script.js***
let testSide = document.querySelector('#test-sidebar')
let htmlUrl = './TextBox/index.html'
fetch(htmlUrl)
.then((result)=>{
return result.text()
}).then((html)=>{
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
testSide.appendChild(doDo)
}).catch((error)=>{
console.log(error)
})
***Main HTML File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>To Do</title>
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="test-sidebar">
</div>
<script src="script.js"></script>
</body>
</html>
***Second Html File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
***CSS of second html file***
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
width: 100%;
height: 100vh;
font-family: 'Titillium Web', sans-serif;
}
/*------------------------container-----------------------*/
.parent-container{
position: relative;
width: 100%;
height: 540px;
max-height: 5400px;
}
/*------------------------container-----------------------*/
.container{
position: absolute;
top: 0;
left: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
.content::-webkit-scrollbar{
display: none;
}
.content ul{
padding: 0;
margin: 0;
}
.items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid #D6DBDF;
}
.item{
position: relative;
border-bottom: 1px solid #EBEDEF;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
cursor: pointer
}
.item:hover{
background-color: #EAECEE
}
.item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
}
/*--------------------------Create Text Box--------------------------*/
.create-text-box{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container{
position: absolute;
top: 0;
right: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.notebox-container .header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.notebox-container .content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
#noteList
{
resize: none;
font-size: 15px;
font: serif;
color: #28B463;
text-align: center;
/*font-weight: bold;*/
border: none;
height: calc(100% - 35px);
width: 100%;
}
.notebox-container .content::-webkit-scrollbar{
display: none;
}
.notebox-container .content ul{
padding: 0;
margin: 0;
}
.notebox-container .items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid white;
}
.notebox-container .item{
position: relative;
border-bottom: 1px solid white;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
}
.notebox-container .item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
text-align: center;
}
/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
.notebox-container #remove{
color: #28B463;
}

The issue I believe is due to the use of href
href linking is the method for including an external style sheet on your web pages. It is intended to link your page with your style sheet. Whereas importing allows you to import one style sheet into another.
Use:
<style>
#import url(YOUR/FILE/PATH)
</style>
Its good practice to place css files in a subfolder located within the main folder your html is stored. This subfolder is labelled static
e.g. main folder
main folder
index.html
static
style.css
<style>
#import url("static/style.css")
</style>

Try replacing your fetch code with this:
fetch(htmlUrl)
.then((result)=>{
return result.text()
})
.then((html)=>{
var doc = document.createRange().createContextualFragment(template);
testSide.appendChild(doc);
}).catch((error)=>{
console.log(error)
})
createContextualFragment renders the Second Html File and load all its scripts

Load .css from Main Html file will work fine.
var doDo = doc.querySelector('.parent-container') here you load only parent-container div element. No css found on here. so if you want to load css from Second Html file then you should write/load css and javascript inner side of parent-container div. ex:
<div class="parent-container">
<link rel="stylesheet" href='style.css'> <!---change here[2]------>
--------
-------
If you try this on local machine you may face this error
Fetch API cannot load file:///C:/....*.html. URL scheme "file" is not supported.
Try in on Localhost or on an online server. you may not found this problem.
Main HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="test-sidebar">
</div>
<script>
let testSide = document.querySelector('#test-sidebar');
let htmlUrl = 'index.html';
fetch(htmlUrl)
.then((result) => {
return result.text()
}).then((html) => {
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
console.log('doc', doDo)
testSide.appendChild(doDo)
}).catch((error) => {
console.log(error)
})
</script>
<link rel="stylesheet" href='style.css'> <!---change here[1]------>
</body>
</html>
Second Html File
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css"> <!-- change here[2] -->
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<link rel="stylesheet" href="style.css"> <!---change here[2]------>
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
</body>
</html>
Output:

Vertical scrollbar is not working It become in active

The vertical scroll bar has become inactive. The strange thing about this code is that it is running fine from where I copied it but for me, the scrollbar is there but it is not clickable(it is more like transparent). I can move it with the arrow keys but not with the mouse. Why is this so?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/a54d2cbf95.js"></script>
<link rel="stylesheet" href="style.css">
<title>Back To Top</title>
</head>
<style>
* {
margin:0;
padding:0;
}
html body {
scroll-behavior: smooth;
overflow-y: auto;
}
section {
height:75vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Raleway", sans-serif;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 8px;
}
.section1 {
background: #f0932b;
}
.section2 {
background: #eb4d4b;
}
.section3 {
background: #7ed6df;
}
.section4 {
background: #22a6b3;
}
.to-top {
background: white;
position: fixed;
bottom: 16px;
right:32px;
width:50px;
height:50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size:32px;
color:#1f1f1f;
text-decoration: none;
opacity:0;
pointer-events: none;
transition: all .4s;
}
.to-top.active {
bottom:32px;
pointer-events: auto;
opacity:1;
}
</style>
<body>
<section class="section1">Section 1</section>
<section class="section2">Section 2</section>
<section class="section3">Section 3</section>
<section class="section4">Section 4</section>
<a href="#" class="to-top">
<i class="fas fa-chevron-up"></i>
</a>
<script >
const toTop = document.querySelector(".to-top");
window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})
</script>
</body>
</html>
To make the scrollbar active is my main problem. I am actually trying to change the style of the scroll bar
I'll be very grateful if you fix my code. All I want is to be able to scroll with my mouse.
I tried a couple of things but it didn't help.
thank you

Instead of trying to fixed current code try to create a new scroll bar..scroll bar code is given below ...
just copy past it customize it and enjoy
/**************** scroll bar *******************/
::-webkit-scrollbar{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
border-radius: 10px;
/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
background-image: -webkit-linear-gradient(160deg, rgb(68, 67, 67),rgb(129, 127, 127), rgb(68, 67, 67));
}
/**************** /scroll bar ********************/

I think it's because overflow-y: auto;
It should be scroll or visible

The arrow icon problem is with your fontawesome kit. You can look into that otherwise you can use fontawesome cdn. I added some css for scrollbar now It will work perfectly fine.
const toTop = document.querySelector(".to-top");
window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})
* {
margin:0;
padding:0;
}
html body {
scroll-behavior: smooth;
overflow-y: auto;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
section {
height:75vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Raleway", sans-serif;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 8px;
}
.section1 {
background: #f0932b;
}
.section2 {
background: #eb4d4b;
}
.section3 {
background: #7ed6df;
}
.section4 {
background: #22a6b3;
}
.to-top {
background: white;
position: fixed;
bottom: 16px;
right:32px;
width:50px;
height:50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size:32px;
color:#1f1f1f;
text-decoration: none;
opacity:0;
pointer-events: none;
transition: all .4s;
}
.to-top.active {
bottom:32px;
pointer-events: auto;
opacity:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<title>Document</title>
</head>
<body>
<section class="section1">Section 1</section>
<section class="section2">Section 2</section>
<section class="section3">Section 3</section>
<section class="section4">Section 4</section>
<a href="#" class="to-top">
<i class="fas fa-chevron-up"></i>
</a>
</body>
</html>

Responsive side menu

I am following a tutorial titled 'Responsive HTML & CSS Side Menu From Scratch' by Traversy Media on Youtube (I'd post the link by not enough reputation yet) and I am having a couple of issues with my side-nav. Note the way that it appears before I click on the openSlideMenu() icon on the top left-hand corner versus when I have clicked on it. I have followed the teacher's code to-the-t, yet there appears to be at least 4 problems on the interface.
There is an open tag symbol positioned near the 3-bar icon that remains both when the menu is up and when it is not.
The side-nav, when clicked to open, goes far away from the left side of the page, creating a large whitespace gap between the menu and the left-side of the page, where no gap should exist.
The side-nav goes over the title text 'Responsive Side Menu', thus blocking the 'e Menu' part of the text, whereas the title text should be responsive and move when the side-nav moves, as portrayed in the tutorial.
The closeMenuButton() within the side-nav has its position straight over the elements whereas it should be positioned in the right hand corners.
My HTML/Javascript Code:
function openSlideMenu() {
document.getElementById('side-menu').style.width = '250px';
document.getElementById('side-menu').style.marginLeft = '250px';
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0px';
document.getElementById('side-menu').style.marginLeft = '0px';
}
body {
font-family: "Arial", Serif;
background-color: #f4f4f4;
overflow-x: hidden;
}
.navbar {
background-color: #3b5998;
overflow: hidden;
height: 63px;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar ul {
margin: 8px 0 0 0;
list-style: none;
}
.navbar a:hover {
background-color: #ddd;
color: #000;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 22px;
color: #ccc;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #fff;
}
.side-nav .btn-close {
postion: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
# main {
transition: margin-left 0.5s;
padding: 20px;
overflow: hidden;
width: 100%;
}
#media(max-width: 568px) {
.navbar-nav {
display: none
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
<link rel="stylesheet" href="style.css" </head>
<body>
<nav class="navbar">
<span class="open-slide">
<a href="#" onClick="openSlideMenu()">
<<svg width="30" height="30">
<path d="M0,5 30,5" stroke=#fff stroke-width="5"/>
<path d="M0,14 30,14" stroke=#fff stroke-width="5"/>
<path d="M0,23 30,23" stroke=#fff stroke-width="5"/>
</svg>
</a>
</span>
<ul class="navbar-nav">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<div id="side-menu" class="side-nav">
×
Home
About
Services
Contact
</div>
<div id="main">
<h1>Responsive Side Menu</h1>
</div>
</body>
</html>
Additionally, the teacher has the code that he produced in the description of his video on Youtube, which you can find as the first result by searching 'Responsive HTML & CSS Side Menu From Scratch'.

The code was full of mistakes
Here is the working code
Find your mistakes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style media="screen">
body {
font-family: "Arial", Serif;
background-color: #f4f4f4;
overflow-x: hidden;
}
.navbar {
background-color: #3b5998;
overflow: hidden;
height: 63px;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar ul {
margin: 8px 0 0 0;
list-style: none;
}
.navbar a:hover {
background-color: #ddd;
color: #000;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
margin-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 22px;
color: #ccc;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #fff;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
display: inline;
}
#main {
transition: margin-left 0.5s;
padding: 20px;
overflow: hidden;
width: 100%;
}
.open-slide {
display: none;
}
#media(max-width: 568px) {
.navbar-nav {
display: none
}
.open-slide {
display: inline-block;
}
}
</style>
</head>
<body>
<nav class="navbar">
<span class="open-slide">
<a href="#" onClick="openSlideMenu()">
<<svg width="30" height="30">
<path d="M0,5 30,5" stroke=#fff stroke-width="5"/>
<path d="M0,14 30,14" stroke=#fff stroke-width="5"/>
<path d="M0,23 30,23" stroke=#fff stroke-width="5"/>
</svg>
</a>
</span>
<ul class="navbar-nav">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<div id="side-menu" class="side-nav">
×
Home
About
Services
Contact
</div>
<div id="main">
<h1>Responsive Side Menu</h1>
</div>
<script type="text/javascript">
function openSlideMenu() {
document.getElementById('side-menu').style.width = '250px';
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0px';
document.getElementById('side-menu').style.marginLeft = '0px';
}
</script>
</body>
</html>

popup for dynamicaly generated data

I use google script to generate data each consisting of a picture and name.
I can do the popup for one item.
How to do it with the generated items?
Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa:400,700|Cairo&subset=arabic" rel="stylesheet">
<meta content="ar-bh" http-equiv="Content-Language" />
<meta content="text/html; charset=windows-1256" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
td {border: 1px solid #ccc;}</style>
<style type="text/css">
body {
font-family: 'Aref Ruqaa', serif;
}
#largeImgPanel {
text-align: center;
display: none;
position: fixed;
z-index: 100;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.5);
}
</style>
<style>
#table_id {display: block; }
#table_id td {display: inline-block; }
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 0px;
width: 150px;
height: 25x;
}
</style>
<style>
div.polaroid2 {
width: 200px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.polaroid {
width: 200px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 1px;
}
</style>
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body>
<table id="table_id" align="center" cellpadding="10" >
<tr>
<? var data = getData1(); ?>
<? for (var i = 2; i <= 1+data[0][3] ; i++) { ?>
<td style="border-width: 0"><div class="polaroid">
<img height="160" src=<?= data[i][8] ?> width="127" style="text-align: center" >
<div id='a<?= i ?>' class="popup" onclick="myFunction()" class="container">
<?= data[i][3] ?> <br> <?= data[i][4] ?> <span class="popuptext" id='myPopup<?= i ?>'><?= data[i][3] ?> ميااااااو</span>
</div>
</div></td>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show');
}
</script>
<? } ?>
</tr>
</table>
<meta content="Sheets" name="generator" />
<style type="text/css"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}
.auto-style1 {
border-collapse: collapse;
border: 2px solid #000000;
}
.auto-style2 {
direction: rtl;
}
.auto-style3 {
border-width: 0;
}
.auto-style4 {
font-size: midium;
}
.auto-style5 {
direction: rtl;
font-size: midium;
}
.auto-style6 {
font-size: midium;
}
--></style>
</body>
<p>
<img border="0" src="https://drive.google.com/uc?export=download&id=0B33gublUUxAtYkRPUjFVUGExNm8" width="90" height="12" align="left"></p>
</html>
and here is what I get
https://script.google.com/macros/s/AKfycbxxV4G7YN7Pg3C-aZIniNPExNI7jQhMn7-O92RA60dtDmX17Ko/exec?page=2

Distribute your toggle event like this below:
function myFunction(element) {
element.childNodes[3].classList.toggle('show');
}
Update your onclick to myFunction(this).
There are lots of way to do this, but that's how I will do it since the span element position if assumed to be static.

Categories