My goal is to understand why the div with the id of product is not shown when the page is loaded.
I would expect the product div to be displayed as a grid by default because that is what it is set as in the stylesheet. In reality, the product div doesn't show until the submit event attached to the search field is fired.
I am unable to understand why product is referenced in the javascript at the bottom of the productUpdate() function, even though it is never actually defined as a const or var.
if(!flag_error){
product.style.display = "grid";
hint.style.display = "none";
forwardBtn.style.display = "inline";
backBtn.style.display = "inline";
I have tried extensively to understand exactly which bit of code turns product div on and off. The code is below and I've also uploaded it to http://va.ogs17.brighton.domains/.
HTML
<!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>V&A online item search</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div class="main-container">
<div class="welcome-container">
<h1>Search the V&A Online</h1>
<h2>Start searching now by entering in a keyword in the searchbar below</h2>
</div>
<div id="search-container">
<form>
<fieldset>
<legend><strong>Search for an item here:</strong></legend>
<p>The V&A Museum is the world's leading museum of of art, design and performance, housing a permanent collection of over 2.27 million objects. You can search for them here.</p>
<img class="info-icon" src="info-icon2.png">
<p class="search-hint"> Stuck for ideas? Try searching for an object like a throne or vase. You could try a person or a place. Is there certain techniques or materials you are loooking for? Any keyword will work, even dragons!</p>
<label for="search-bar"></label>
<input id="search-bar" type="search">
<input type="submit" value="Search" href="#product-top">
<div class="nav-btn-container">
Previous Item
Next Item
<span id="hint">This is the last item in the list.</span>
</div>
</fieldset>
</form>
</div>
<div id="loading">
<img class="loading-img" src="Bean Eater-1s-200px.gif">
</div>
<div id="product">
<a id="product-top"></a>
<div class="title">
<h2 class="">No title found</h2>
</div>
<div class="photo-container"><img class="photo" src="image-not-found.png"></div>
<div class="information">
<p class="artist">Artist: Unknown</p>
<p class="object">Object: Unkown</p>
<p class="date_text">Date: Unkown</p>
<p class="place">Place: Unkown</p>
<p class="location">Location: Unknown</p>
<p class="object_number">Object Number: Unkown</p>
<p class="museum_number">Museum Number Token: Unkown</p>
</div>
</div>
<div id="success">
<p>Success!</p>
<!-- Link back to empty form -->
</div>
<div id="error">
<p>error...</p>
<!-- Link back to empty form -->
</div>
</div>
</body>
</html>
CSS
body {
font-family:'Roboto',sans-serif;
padding: 32px;
margin: 0;
background-image: url("vanda-front.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
img {
width: 100%;
}
.welcome-container {
color:honeydew;
text-shadow: black;
margin-top: 2rem;
margin-left: 3rem;
margin-bottom: 18rem;
}
.welcome-container h1 {
font-size: 3.5rem;
}
fieldset {
padding: 20px;
width: 60%;
margin: auto;
background-color: black;
opacity: 0.9;
border-style: none;
}
fieldset label, p, legend {
color: blanchedalmond;
}
fieldset img{
max-width: 1rem;
}
/* Button style partly by Frederico Dossena fdossena.com/?p=html5cool/buttons/i.frag */
.nav-btn-container a, input[type=submit] {
padding:0.35em 1.2em;
border:0.1em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
background-color: black;
text-decoration:none;
font-weight:300;
color:#FFFFFF;
text-align:center;
transition: all 0.2s;
cursor: pointer;
}
input[type=submit] {
font-size: 1.5rem;
}
input[type=search] {
/* padding:0.35em 1.2em; */
border:0.1em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
text-decoration:none;
/* min-height: 2.5rem; */
font-size: 3rem;
}
.nav-btn-container a:hover, input[type=submit]:hover {
color:#000000;
background-color:#FFFFFF;
}
.nav-btn-container {
margin-top: 1.2rem;
}
.search-hint{
display: none;
}
#product {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: 10rem 1fr;
gap: 0.2rem;
padding: 10px;
box-sizing: border-box;
/* in the internal divs use grid-column-start and grid-row-end: ;
basic vid here - https://www.youtube.com/watch?v=Y9rHsdCxU8Q */
}
.photo-container {
opacity: 1;
}
/* text-overflow code by Jokesterfr stackoverflow.com/questions/7711490/prevent-text-from-overflowing-a-padded-container-in-html */
.title {
background-color: black;
opacity: 0.9;
border-style: none;
color: blanchedalmond;
font-size: 3rem;
overflow: hidden;
border-left:1em solid transparent;
border-right:1em solid transparent;
text-overflow: ellipsis;
}
.information {
background-color: black;
opacity: 0.9;
border-style: none;
color: blanchedalmond;
}
.back-button, .forward-button {
display: none;
}
.forward-button{
float: right;
}
.title {
grid-column-start: 1;
grid-column-end: 10;
grid-row-start: 1;
grid-row-end: 1;
}
.photo-container {
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3;
}
.information{
grid-column-start:6;
grid-column-end: 10;
grid-row-start: 2;
grid-row-end: 3;
}
input {
display: block;
Margin: 5px;
width: 100%;
}
#hint {
color:red;
display: none;
}
#success, #error, #product {
text-align: center;
display: none;
}
.loading-img{
display: none;
}
/* Android A70 */
/* #media(min-width: 751px) and (max-width: 1080px) {
body{background-color: red;}
} */
/* iPhone 6 */
#media(max-width: 750px) {
/* body{
background-color: orangered;
background-image: none;
} */
.welcome-container {
margin-bottom: 12rem;
}
.title {
grid-column-start: 1;
grid-column-end: 10;
grid-row-start: 1;
grid-row-end: 1;
}
.photo-container {
grid-column-start: 1;
grid-column-end: 10;
grid-row-start: 2;
grid-row-end: 3;
}
.information{
grid-column-start:1;
grid-column-end: 10;
grid-row-start: 3;
grid-row-end: 4;
}
}
JavaScript
window.addEventListener('load', function() {
//global varaibles
var searchHint = document.querySelector('.search-hint');
//by defualt, the first item is always shown. Position is incremented using next and previous buttons to show new items.
var position = 0;
var maxCap = 45;
//code by Ry stackoverflow.com/questions/21147832/convert-camel-case-to-human-readable-string
function toCapitalizedWords(name) {
var words = name.match(/[A-Za-z][a-z]*/g) || [];
return words.map(capitalize).join(" ");
}
function capitalize(word) {
return word.charAt(0).toUpperCase() + word.substring(1);
}
function productUpdate(step) {
if(position + step >= maxCap - 1){
//show hint
var hint = document.querySelector("#hint");
hint.style.display = "inline";
}
else {
// var loading = document.querySelector('#loading');
position += step;
var flag_error = false;
// get all form fields
var search = document.querySelector("#search-bar").value.trim();
var hint = document.querySelector("#hint");
var backBtn = document.querySelector(".back-button");
var forwardBtn = document.querySelector(".forward-button");
var productTitle = document.querySelector(".title");
var productPhoto = document.querySelector(".photo");
var productInformation = document.querySelectorAll(".information");
var xhrSearch = new XMLHttpRequest();
xhrSearch.onreadystatechange = function() {
//readystate 4 means oporation is complete developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
//status 200 means OK
if(this.readyState == 4 && this.status == 200) {
console.log(search);
//TODO
//if there is response text, do this, if not, display hint saying product not found
const result = JSON.parse(xhrSearch.responseText);
productTitle.textContent = result.records[position].fields.title;
//js loops god post stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript
for (let item of productInformation[0].children) {
console.log(item);
itemClass = item.className;
item.textContent = toCapitalizedWords(itemClass) + ": " + result.records[position].fields[itemClass];
}
var xhrFullRecord = new XMLHttpRequest();
xhrFullRecord.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
const fullRecordResult = JSON.parse(xhrFullRecord.responseText);
productPhoto.src = "https://framemark.vam.ac.uk/collections/" + fullRecordResult[0].fields.image_set[0].fields.image_id + "/full/735,/0/default.jpg";
}
}
fullRecordUrl = "https://www.vam.ac.uk/api/json/museumobject/" + result.records[position].fields.object_number;
xhrFullRecord.open("GET", fullRecordUrl);
xhrFullRecord.send();
}
};
//what happens to URL if £$&^%$£ is put in search?
url = "https://www.vam.ac.uk/api/json/museumobject/search?q=" + search + "&limit=" + maxCap;
//do I want any other params here?
xhrSearch.open("GET", url);
xhrSearch.send();
if(!flag_error){
//setTimeout(loading.style.display = "none", 5000);
product.style.display = "grid";
hint.style.display = "none";
forwardBtn.style.display = "inline";
backBtn.style.display = "inline";
}
}
}
document.querySelector('#search-container').addEventListener("submit", function(evt){
// stop page reload default action
evt.preventDefault();
position = 0;
productUpdate(0);
})
document.querySelector('.info-icon').addEventListener("click", function(evt){
// stop page reload default action
// evt.preventDefault();
if(searchHint.style.display == "inline"){
searchHint.style.display = "none";
} else {
searchHint.style.display = "inline";
}
})
document.querySelector('.back-button').addEventListener("click", function(evt){
// stop page reload default action
evt.preventDefault();
productUpdate(-1);
})
document.querySelector('.forward-button').addEventListener("click", function(evt){
// stop page reload default action
evt.preventDefault();
productUpdate(1);
})
function displayLoading(){
var loadIcon = document.querySelector(".loadingImg");
product.style.display = "none";
loadIcon.style.display = "inline";
}
});
you have onload event but onload there is no call to productUpdate()
window.addEventListener('load', function() {
........
........
// append this line before closing
productUpdate(0);
})
Related
Clicking on the Home button at the end of this project brings it to the beginning, but no function is reset. Level buttons are not also being enabled anew. If I enable those level buttons by writing some extra code for enabling, then the number of buttons given for each level will be doubled after selecting the level. In other words, for the first time due to selecting the basic level, there were 4 options, But when I click on the last home button and then select the medium level to play the game from the beginning, it becomes 16 options instead of 8.
//VARIABLE DECLARATION PART
let frontpage = document.querySelector(".front-page");
let playbutton = document.querySelector(".play");
let levelpage = document.querySelector(".levelpg");
let startbtn = document.querySelector(".startbtn");
let maingame = document.querySelector(".maingame");
let easybtn = document.querySelector(".easy");
let mediumbtn = document.querySelector(".medium");
let hardbtn = document.querySelector(".hard");
let nextbtn = document.querySelector(".nextbtn");
let pagecount = document.querySelector('.gamepagecount');
let getnumberdiv = document.querySelector('.numberbtn').children;
let resultpg = document.querySelector('.resultpage');
let backhome = document.querySelector('.backhome');
let finalscore = document.querySelector('.score');
let resulttext = resultpg.children[1];
let changeimg = document.querySelector('.resultpage img');
// PLAYBUTTON CLICK
playbutton.addEventListener("click", () => {
frontpage.classList.add("hidden");
levelpage.classList.remove("hidden");
levelpage.classList.add("visibility");
});
//GAME START FUNCTION
function startGame(level) {
if (level == "easy") {
mediumbtn.disabled = true;
hardbtn.disabled = true;
easybtn.disabled = true;
easybtn.classList.add('levelcolor');
startbtn.addEventListener("click", () => {
pagecount.innerHTML = `1 of 10`;
nextbtn.disabled = true
levelChange(4);
gameInterfaceChange()
mainGame(10);
//NEXTBUTTON FUNCTION
nextbtn.addEventListener('click', () => {
enableBtn(4)
pageCount(10);
mainGame(10);
})
});
}
else if (level == "medium") {
mediumbtn.disabled = true;
hardbtn.disabled = true;
easybtn.disabled = true;
mediumbtn.classList.add('levelcolor');
startbtn.addEventListener("click", () => {
pagecount.innerHTML = `1 of 15`;
nextbtn.disabled = true
levelChange(8);
gameInterfaceChange();
maingame.style.top = "20%";
mainGame(20);
//NEXTBUTTON FUNCTION
nextbtn.addEventListener('click', () => {
enableBtn(8)
pageCount(15)
mainGame(20);
})
});
}
else if (level == "hard") {
mediumbtn.disabled = true;
hardbtn.disabled = true;
easybtn.disabled = true;
hardbtn.classList.add('levelcolor');
startbtn.addEventListener("click", () => {
pagecount.innerHTML = `1 of 20`;
nextbtn.disabled = true
levelChange(12);
gameInterfaceChange();
maingame.style.top = "12%";
mainGame(30);
//NEXTBUTTON FUNCTION
nextbtn.addEventListener('click', () => {
enableBtn(12)
pageCount(20)
mainGame(30);
})
});
}
}
//PAGE SLIDING FUNCTION
function gameInterfaceChange() {
levelpage.classList.remove("hidden");
levelpage.classList.add("hidden");
maingame.classList.remove("hidden");
maingame.style.top = "25%";
maingame.classList.add("visibility");
}
// FUNCTION OF RANDOM INPUTING NUMBER IN DIV
function mainGame(maxnum) {
let numboxlen = getnumberdiv.length;
let wrongnum = Math.floor(Math.random() * maxnum) + 1;
let getnumber = [];
//DUPLICATE RANDOM NUMBER CHECKING
for (let i = 0; i < numboxlen; i++) {
let check = getnumber.includes(wrongnum);
if (check === false) {
getnumber.push(wrongnum);
}
else {
while (check === true) {
wrongnum = Math.floor(Math.random() * maxnum) + 1;
check = getnumber.includes(wrongnum);
if (check === false) {
getnumber.push(wrongnum);
}
}
}
}
// NUMBER PUTTING IN InnerHtml
for (var j = 0; j < numboxlen; j++) {
if (getnumber[j] < 10) {
getnumberdiv[j].innerHTML = '0' + getnumber[j];
}
else {
getnumberdiv[j].innerHTML = getnumber[j];
}
}
}
// BUTTON ADDING ACCORDING TO THE LEVEL
function levelChange(divnum) {
for (let index = 0; index < divnum; index++) {
let newBtn = document.createElement('button');
let newbtnNode = document.createTextNode('');
newBtn.appendChild(newbtnNode);
let gamebtn = document.getElementById('numbrbtn');
gamebtn.appendChild(newBtn);
newBtn.setAttribute("onclick", `numberClick(${index},${divnum})`);
}
}
//RIGHT - WRONG CHECKING FUNTION
var right = 0;
var wrong = 0;
function numberClick(index, divnum) {
let rightnumberindex = Math.floor(Math.random() * divnum);
if (index == rightnumberindex) {
nextbtn.disabled = false
right++;
//RIGHT AND WRONG BACKGROUND ADDING AND BUTTON DISABLE
getnumberdiv[index].classList.add("rightans");
for (let i = 0; i < divnum; i++) {
getnumberdiv[i].disabled = true;
}
}
else {
nextbtn.disabled = false
wrong++;
//RIGHT AND WRONG BACKGROUND ADDING AND BUTTON DISABLE
getnumberdiv[rightnumberindex].classList.add("rightans");
getnumberdiv[index].classList.add("wrongans");
for (let i = 0; i < divnum; i++) {
getnumberdiv[i].disabled = true;
}
}
}
// BUTTON ENABLE ON NEXT BUTTION CLICK
function enableBtn(divnum) {
for (let i = 0; i < divnum; i++) {
nextbtn.disabled = true
getnumberdiv[i].disabled = false;
getnumberdiv[i].classList.remove("wrongans");
getnumberdiv[i].classList.remove("rightans");
}
}
//PAGE COUNTING ACCORDING TO THE LEVEL
let currentpg = 1;
function pageCount(levelPg) {
currentpg++;
if (currentpg <= levelPg) {
if (currentpg == levelPg) {
nextbtn.innerHTML = 'Result'
pagecount.innerHTML = `${currentpg} of ${levelPg}`;
}
else {
pagecount.innerHTML = `${currentpg} of ${levelPg}`;
}
}
else {
result();
}
}
//FINAL RESULT FUNTION
function result() {
maingame.classList.remove("visibility");
maingame.classList.add("hidden");
resultpg.classList.remove('hidden')
resultpg.classList.add('visibility')
if (right > wrong) {
changeimg.setAttribute('src', 'trophy.png')
resulttext.innerHTML = `You Win`;
finalscore.innerHTML = `Your Right Score is : ${right} out of ${right + wrong}`;
}
else if (right == wrong) {
changeimg.setAttribute('src', 'draw.png')
resulttext.innerHTML = `It's Draw`;
finalscore.innerHTML = `Your Right Score is : ${right} out of ${right + wrong}`;
}
else if (right < wrong) {
changeimg.setAttribute('src', 'lose.png')
resulttext.innerHTML = `You Lose`;
finalscore.innerHTML = `Your Right Score is : ${right} out of ${right + wrong}`;
}
}
//BACK TO THE HOME FUNCTION
backhome.addEventListener('click', () => {
frontpage.classList.add("visibility");
frontpage.classList.remove("hidden");
resultpg.classList.add('hidden')
resultpg.classList.remove('visibility')
// enable level button
mediumbtn.disabled = false;
hardbtn.disabled = false;
easybtn.disabled = false;
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
margin-top: 50px;
}
.guessing-game {
position: relative;
color: white;
text-align: center;
margin: auto;
width: 350px;
height: 600px;
border-radius: 25px;
padding: 50px 30px;
background: linear-gradient(to right, #bd3f32, #cb356b);
}
.guessing-game .front-page .front-img {
height: 160px;
text-align: center;
}
.guessing-game .front-page img {
max-height: 100%;
}
.guessing-game .front-page .front-text h1 {
margin-top: 50px;
font-size: 1.8em;
}
.guessing-game .front-page .front-text p {
margin-top: 10px;
font-size: 1em;
}
.guessing-game .front-page .front-text button,
.resultpage button ,
.levelpg .easy,
.levelpg .medium,
.levelpg .hard,
.maingame .nextbtn {
margin-top: 30px;
width: 100%;
color: white;
padding: 15px;
outline: 0;
border: 0;
border-radius: 50px;
font-size: 0.9em;
background-color: #d64d5d;
box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px,
rgba(17, 17, 26, 0.144) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}
.guessing-game .front-page .front-text button:hover,
.maingame .nextbtn:hover,
.resultpage button:hover {
transition: 0.5s;
background-color: #c22f40;
}
/* Level page */
.visiblepg {
position: absolute;
top: 12%;
width: 290px;
}
.levelpg h1 {
margin: 45px 0 40px 0;
font-weight: 600;
font-size: 2.4em;
border: 1px solid white;
}
.levelpg .easy,
.levelpg .medium,
.levelpg .hard {
display: block;
margin-top: 15px;
padding: 12px;
background: white;
font-size: 1em;
border-radius: 10px;
font-weight: 400;
color: #c22f40;
}
.startbtn {
background: transparent;
border: 0;
outline: 0;
}
.levelpg i {
color: white;
margin-top: 50px;
font-size: 70px;
border-radius: 50%;
border: 2px solid transparent;
}
.levelpg i:hover {
background-color: white;
border: 2px solid white;
color: #c22f40;
transition: 0.5s;
}
/* GAME PART */
.maingame .gamepagecount {
background-color: #d64d5d;
color: white;
padding: 4px;
border-radius: 6px;
font-size: 0.8em;
font-weight: 600;
}
.maingame .gametext {
margin-top: 15px;
font-size: 1.2em;
}
.maingame .numberbtn {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.maingame .numberbtn button {
margin-top: 40px;
width: 50px;
height: 50px;
background-color: white;
display: flex;
align-content: space-around;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex: 1 0 21%;
margin-left: 10px;
border: 0;
outline: 0;
border-radius: 10px;
font-size: 1em;
color: #c22f40;
font-weight: 600;
}
.maingame .numberbtn button:nth-child(1),
.maingame .numberbtn button:nth-child(5),
.maingame .numberbtn button:nth-child(9) {
margin-left: 0;
}
.resultpage h1 {
margin: 0px 0 40px 0;
}
.resultpage img {
margin-top: 45px;
width: 50%;
}
/* PRE DEFINE CSS */
.visibility {
visibility: visiible;
opacity: 2s;
transition: 0.5s;
transform: translateX(0px);
}
.hidden {
visibility: hidden;
opacity: 0;
transition: 0.5s;
transform: translateX(-30px);
}
.levelcolor {
transition: 0.5s;
color: white !important;
background-color: #c22f40 !important;
}
.rightans {
background-color: #27ae60 !important;
color: white !important;
transition: 0.5s;
}
.wrongans {
background-color: #fd4631 !important;
color: white !important;
transition: 0.5s;
}
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<title>Guessing Game</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="guessing-game">
<div class="front-page">
<div class="front-img">
<img src="./question.png" alt="" />
</div>
<div class="front-text">
<h1>Guessing Game</h1>
<p>
You just need to chose the right number from the option. If your
guess is right more than wrong , you will win otherwise you will
fail! Let's see how good your sixth sense is!!!
</p>
<button class="play">Let's play</button>
</div>
</div>
<div class="levelpg hidden visiblepg">
<h1>Game level</h1>
<button class="easy" onclick="startGame('easy')">Easy</button>
<button class="medium" onclick="startGame('medium')">Medium</button>
<button class="hard" onclick="startGame('hard')">Hard</button>
<button class="startbtn"><i class="fas fa-play-circle"></i></button>
</div>
<div class="maingame visiblepg hidden">
<p class="gamepagecount">1</p>
<p class="gametext">Guess the number you think is right</p>
<div class="numberbtn" id="numbrbtn"></div>
<button class="nextbtn">Next</button>
</div>
<div class="resultpage levelpg hidden visiblepg">
<img src="" alt="" />
<h1></h1>
<div class="score"></div>
<button class="backhome">Home</button>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
In short, as soon as I click on the home button, I want the game to start anew, all the functions will be reset anew, and the HTML will be reset anew also. I hope my problem is enough clear to understand.
I have solved the problem.
I just add a reload function to solve this problem.
backhome.addEventListener('click', () => {
frontpage.classList.add("visibility");
frontpage.classList.remove("hidden");
resultpg.classList.add('hidden')
resultpg.classList.remove('visibility')
//reload function
window.location.reload();
})
I have a dropdown from which I want to find the selected value.
The dropdown is basically a big blue button which, when pressed, shows different customers:
When an option is clicked, the value changes to the selected customer.
What I want to do is access this value somewhere else in my HTML script.
var Klanten = [
'niet-declareerbaar',
'ING',
'NNPC',
'Meewind',
];
var Projects = [
'alm',
'risicobeheer',
'RQ',
'overige',
];
var Tarieven = [
'standaard tarief',
'korting (50%)',
'Cadeau',
]
var project = 'overig';
var Tarief = 'standaard tarief';
var startYear = 2000;
var endYear = 2020;
var klant = 0;
var year = 0;
var selectedDays = new Array();
var mousedown = false;
var mousemove = false;
function loadKlanten() {
for (var i = 0; i < Klanten.length; i++) {
var doc = document.createElement('div');
doc.innerHTML = Klanten[i];
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedKlant = i;
return function () {
klant = selectedKlant;
document.getElementById('curKlant').innerHTML = Klanten[klant];
loadCalendarDays();
return klant;
};
})();
document.getElementById('Klanten').appendChild(doc);
}
}
function loadProjects() {
document.getElementById('Projects').innerHTML = '';
for (var i = 0; i < Projects.length; i++) {
var doc = document.createElement('div');
doc.innerHTML = Projects[i];
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedProject = i;
return function () {
project = selectedProject;
document.getElementById('curProject').innerHTML = Projects[project];
loadProjects();
return project;
};
})();
document.getElementById('Projects').appendChild(doc);
}
}
function loadTarief() {
document.getElementById('Tarieven').innerHTML = '';
for (var i = 0; i < Tarieven.length; i++) {
var doc = document.createElement('div');
doc.innerHTML = Tarieven[i];
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedTarief = i;
return function () {
Tarief = selectedTarief;
document.getElementById('curTarief').innerHTML = Tarieven[Tarief];
loadTarief();
return Tarief;
};
})();
document.getElementById('Tarieven').appendChild(doc);
}
}
var start_hour=0;
var end_hour = 10;
var hour = 0;
function loadHours() {
document.getElementById('hours').innerHTML = '';
for (var i = start_hour; i <= end_hour; i++) {
var doc = document.createElement('div');
doc.innerHTML = i;
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedHour = i;
return function () {
hour = selectedHour;
document.getElementById('curHour').innerHTML = hour;
loadHours();
return hour;
};
})();
document.getElementById('hours').appendChild(doc);
}
}
function loadCalendarYears() {
document.getElementById('years').innerHTML = '';
for (var i = startYear; i <= endYear; i++) {
var doc = document.createElement('div');
doc.innerHTML = i;
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedYear = i;
return function () {
year = selectedYear;
document.getElementById('curYear').innerHTML = year;
loadCalendarDays();
return year;
};
})();
document.getElementById('years').appendChild(doc);
}
}
function loadCalendarDays() {
document.getElementById('calendarDays').innerHTML = '';
var tmpDate = new Date(year, month, 0);
var num = daysInMonth(month, year);
var dayofweek = tmpDate.getDay()-1; // find where to start calendar day of week
for (var i = 0; i <= dayofweek; i++) {
var d = document.createElement('div');
d.classList.add('day');
d.classList.add('blank');
document.getElementById('calendarDays').appendChild(d);
}
for (var i = 0; i < num; i++) {
var tmp = i + 1;
var d = document.createElement('div');
d.id = 'calendarday_' + tmp;
d.className = 'day';
d.innerHTML = tmp;
d.dataset.day = tmp;
d.addEventListener('click', function () {
this.classList.toggle('selected');
if (!selectedDays.includes(this.dataset.day))
selectedDays.push(this.dataset.day);
else selectedDays.splice(selectedDays.indexOf(this.dataset.day), 1);
});
d.addEventListener('mousemove', function (e) {
e.preventDefault();
if (mousedown) {
this.classList.add('selected');
if (!selectedDays.includes(this.dataset.day))
selectedDays.push(this.dataset.day);
}
});
d.addEventListener('mousedown', function (e) {
e.preventDefault();
mousedown = true;
});
d.addEventListener('mouseup', function (e) {
e.preventDefault();
mousedown = false;
});
document.getElementById('calendarDays').appendChild(d);
}
var clear = document.createElement('div');
clear.className = 'clear';
document.getElementById('calendarDays').appendChild(clear);
}
function daysInMonth(month, year) {
var d = new Date(year, month + 1, 0);
return d.getDate();
}
window.addEventListener('load', function () {
var date = new Date();
month = date.getMonth();
year = date.getFullYear();
document.getElementById('curKlant').innerHTML = Klanten[klant];
document.getElementById('curTarief').innerHTML = Tarief;
document.getElementById('curHour').innerHTML = hour;
document.getElementById('curProject').innerHTML = project;
loadProjects();
loadKlanten();
loadTarief();
loadCalendarDays();
loadHours();
});
body,
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.calendar {
background-color: white;
padding: 20px;
}
.calendar .dropdown {
display: none;
position: absolute;
background-color: #fff;
color: #0047bA;
text-align: center;
font-size: 14pt;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 30px;
width: 160px;
left: 0px;
z-index: 2000;
}
.calendar .dropdown .dropdown-item {
cursor: pointer;
opacity: 0.7;
transition: 0.5s opacity;
}
.calendar .dropdown .dropdown-item:hover {
opacity: 1;
}
.calendar .hours{
display: none;
}
.calendar .tarief {
display: none;
}
.calendar .title {
text-align: center;
font-size: 20pt;
}
.calendar .calendar-btn {
float: left;
background-color: #0047bA;
color: white;
text-align: center;
font-size: 14pt;
padding-top: 5px;
padding-bottom: 5px;
position: relative;
width: 20%;
cursor: pointer;
transition: 0.5s background-color;
}
.calendar .month-btn {
width: 40%;
height: 55px;
}
.calendar .project-btn {
height: 55px;
}
.calendar .calendar-btn:hover {
background-color: #1f71a1;
}
.calendar .hours-btn{
float: middle;
height: 55px;
}
.calendar .tarief-btn {
float: left;
height: 55px;
}
.calendar .calendar-dates .days .day {
float: left;
width: 12%;
margin: 1%;
padding: 1%;
font-size: 13pt;
text-align: center;
border-radius: 10px;
border: solid 1px #ddd;
}
.calendar .calendar-dates .days .day.blank {
background-color: white;
border: none;
}
.calendar .calendar-dates .days .day.selected {
background-color: #0047bA;
color: white;
cursor: pointer;
opacity: 0.9;
transition: 0.1s opacity;
}
.calendar .calendar-dates .days .day.selected:hover {
opacity: 1;
}
.calendar .calendar-dates .days .day.label {
height: 40px;
background-color: white;
color: black;
border: none;
font-weight: bold;
}
.clear {
clear: both;
}
#media only screen and (max-width: 960px) {
.calendar {
width: 100%;
margin: 0px;
margin: 0px;
box-sizing: border-box;
position: relative;
left: 0px;
}
}
<!DOCTYPE html>
<div>
<html>
<div>
<head>
<!-- CSS property to place div
side by side -->
<style>
#middlebox {
float: left;
width: 65%;
height: 400px;
}
#rightbox {
float: right;
background-color: white;
width: 35%;
height: 450px;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
<div>
<div id="middlebox">
<body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<link href="/static/calendar3.css" rel="stylesheet">
</head>
<body>
<div class="calendar" id="calendar">
<div class="calendar-btn month-btn" onclick="$('#Klanten').toggle('fast')">
<span id="curKlant"></span>
<div id="Klanten" class="months dropdown"></div>
</div>
<div class="calendar-btn project-btn" onclick="$('#Projects').toggle('fast')">
<span id="curProject"></span>
<div id="Projects" class="projects dropdown"></div>
</div>
<div class="calendar-btn hours-btn" onclick="$('#hours').toggle('fast')">
<span id="curHour"></span>
<div id="hours" class="hours dropdown"></div>
</div>
<div class="calendar-btn tarief-btn" onclick="$('#Tarieven').toggle('fast')">
<span id="curTarief"></span>
<div id="Tarieven" class="Tarieven dropdown"></div>
</div>
<div class="clear"></div>
<div class="calendar-dates">
<div class="days">
<div class="day label">MON</div>
<div class="day label">TUE</div>
<div class="day label">WED</div>
<div class="day label">THUR</div>
<div class="day label">FRI</div>
<div class="day label">SAT</div>
<div class="day label">SUN</div>
<div class="clear"></div>
</div>
<div id="calendarDays" class="days">
</div>
</div>
<html>
<head>
<style>
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<style>
.myBtn {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
transition-duration: 0.2s;
cursor: pointer;
}
.myBtn1 {
background-color: white;
color: black;
border: 2px solid #0047bA;
}
.myBtn1:hover {
background-color: #0047bA;
color: white;
}
</style>
<button id="myBtn" class="myBtn myBtn1">Uren indienen</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Je staat op het punt om je uren in te dienen, weet je zeker dat alles klopt?</p>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
transition-duration: 0.2s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #0047bA;
}
.button1:hover {
background-color: #0047bA;
color: white;
}
</style>
</head>
<body>
<a href="{{ url_for('schrijven') }}">
<button class="button button1">Ja, dien mijn uren in</button></a>
</body>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
</div>
<script type="text/javascript" src="/static/jscodes/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/static/jscodes/calendar3.js" async></script>
</body>
</div>
<div class="card">
<div class="rightbox_buttons" id="rightbox">
<div>
<h2>Welke uren heb ik geschreven?</h2>
</div>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'week')">Per week</button>
<button class="tablinks" onclick="openCity(event, 'maand')">Per maand</button>
<button class="tablinks" onclick="openCity(event, 'klant')">Per klant</button>
</div>
<div id="week" class="tabcontent">
<p>Je hebt deze week geschreven: </p>
</div>
<div id="maand" class="tabcontent">
<p>Je hebt deze maand geschreven:</p>
</div>
<div id="klant" class="tabcontent">
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("select.klant").change(function(){
var selectedCountry = $(this).children("option:selected").val();
alert("You have selected the country - " + selectedCountry);
});
});
</script>
</head>
<body>
<form>
<label>kies klant:</label>
<select class="klant">
{% for klant in klant %}
<option value="{{ klant }}" SELECTED>{{ klant }}</option>
{% endfor %}
</select>
<input type="text" size="30" name="display" id="display" />
</form>
</body>
</html>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
{%endblock%}
Preferably, I want to save the selected customer in a new variable (so I can return it in my HTML) and use it later on. How would I be able to do this?
You to put the below code to save the selected value inside a variable inside the onclick event.
var selected_Value= $('.dropdownid :selected').val();
I need to make a fixed bottom footer to my WordPress web, with some buttons including js with a popover. I've Pillar Theme and I only need to make this change. I need to put it into my footer.php. But when I try, nothing works. I do not know if this is the best way to do that. Here is the code that I do for the footer:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Styles just for demo -->
<style>
#font-face {
font-family: 'social-icons';
font-weight: normal;
font-style: normal;
src: url('font/social.eot?44259375');
src: url('font/social.eot?44259375#iefix') format('embedded-opentype'), url('font/social.woff?44259375') format('woff'), url('font/social.ttf?44259375') format('truetype'), url('font/social.svg?44259375#social') format('svg');
}
/* Share button
***********************************************/
.need-share-button {
position: relative;
display: inline-block;
}
.need-share-button_dropdown {
position: absolute;
z-index: 10;
visibility: hidden;
overflow: hidden;
width: 240px;
-webkit-transition: .3s;
transition: .3s;
-webkit-transform: scale(.1);
-ms-transform: scale(.1);
transform: scale(.1);
text-align: center;
opacity: 0;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.need-share-button-opened .need-share-button_dropdown {
visibility: visible;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.need-share-button_link {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
text-align: center;
}
.need-share-button_link:after {
font: normal normal normal 16px/1 'social-icons';
text-align: center;
text-transform: none;
speak: none;
}
.need-share-button_link:hover {
-webkit-transition: .3s;
transition: .3s;
opacity: .7;
}
/* Dropdown position
***********************************************/
.need-share-button_dropdown-top-center {
bottom: 100%;
left: 50%;
margin-bottom: 10px;
}
/* Default theme
***********************************************/
.need-share-button-default .need-share-button_button {
display: inline-block;
margin-bottom: 0;
padding: 20px;
font-size: 14px;
line-height: 1.42857143;
font-weight: 400;
color: white;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
vertical-align: middle;
white-space: nowrap;
background-image: url("share.png") no-repeat;
}
.need-share-button-default .need-share-button_button span {
background-image: url("share.png") no-repeat;
}
.need-share-button-default .need-share-button_button:hover {
color: #737373;
}
/* Network buttons
***********************************************/
.need-share-button_mailto {
color: #efbe00;
}
.need-share-button_mailto:after {
content: '\e80a';
}
.need-share-button_mailto.need-share-button_link-box {
color: #fff;
background: #efbe00;
}
.need-share-button_twitter {
color: #00acec;
}
.need-share-button_twitter:after {
content: '\e813';
}
.need-share-button_twitter.need-share-button_link-box {
color: #fff;
background: #00acec;
}
.need-share-button_facebook {
color: #3b5998;
}
.need-share-button_facebook:after {
content: '\e80e';
}
.need-share-button_facebook.need-share-button_link-box {
color: #fff;
background: #3b5998;
}
.wrapper {
text-align: center;
}
footer {
background-color: black;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
height: 60px;
}
footer .col-sm {
text-align: center;
}
a {
color: white;
text-decoration: none;
}
footer .col-sm > span {
padding: 7px 0 0px;
display: inline-block;
}
footer .col-sm > span > a:hover {
color: #737373;
text-decoration: none;
}
#homefooter a{
background-image: url("home.png");
background-repeat: no-repeat;
padding-bottom: 35px;
}
#donarfooter a {
background-image: url("donar.png");
background-repeat: no-repeat;
padding-bottom: 35px;
}
footer a span {
visibility: hidden;
}
/* ------------------------------------ MEDIA QUERIES -------------------------------------------*/
#media (max-width: 900px){
footer .col-sm {
width: 25%;
}
footer span {
padding: 0 !important;
}
}
/* ------------------------------------ MEDIA QUERIES -------------------------------------------*/
/* ------------------------------------ SEARCH STYLES -------------------------------------------*/
* {
box-sizing: border-box;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
}
.overlay-content {
position: relative;
top: 46%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: white;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: none;
float: left;
width: 80%;
background: white;
}
.overlay input[type=text]:hover {
background: #f1f1f1;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #bbb;
}
/* ------------------------------------ SEARCH STYLES -------------------------------------------*/
</style>
</head>
<body>
<section>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</section>
<footer class="fixed-bottom">
<div class="container-fluid" style="height: 100%">
<div class="row" style="height: 100%">
<div class="col-sm" id="homefooter">
<span>
<span>HOME</span>
</span>
</div>
<div class="col-sm" style="height: 100%; border-left: solid 0.5px white; border-right: solid 0.5px white">
<div class="wrapper">
<img src="share.png">
<div id="share-button-2" class="need-share-button-default" data-share-position="topCenter" data-share-icon-style="box" data-share-networks="Mailto,Twitter,Facebook"></div>
</div>
</div>
<div class="col-sm" id="donarfooter">
<span>
<span>CONTRIBUIR</span>
</span>
</div>
<div class="col-sm" id="donarfooter">
<span>
<button class="openBtn" onclick="openSearch()">BUSCAR</button>
</span>
</div>
</div>
</div>
</footer>
<script>
/***********************************************
needShareButton
- Version 1.0.0
- Copyright 2015 Dzmitry Vasileuski
- Licensed under MIT (http://opensource.org/licenses/MIT)
***********************************************/
(function() {
// share dropdown class
window.needShareDropdown = function(elem, options) {
// create element reference
var root = this;
root.elem = elem;
root.elem.className += root.elem.className.length ? ' need-share-button' : 'need-share-button';
/* Helpers
***********************************************/
// get title from html
root.getTitle = function() {
var content;
// check querySelector existance for old browsers
if (document.querySelector) {
if (content = document.querySelector('meta[property="og:title"]') || document.querySelector('meta[name="twitter:title"]')) {
return content.getAttribute('content');
} else if (content = document.querySelector('title')) {
return content.innerText;
} else
return '';
} else {
if (content = document.title)
return content.innerText;
else
return '';
}
};
// get image from html
root.getImage = function() {
var content;
// check querySelector existance for old browsers
if (document.querySelector) {
if (content = document.querySelector('meta[property="og:image"]') || document.querySelector('meta[name="twitter:image"]')) {
return content.getAttribute('content');
} else
return '';
} else
return '';
};
// get description from html
root.getDescription = function() {
var content;
// check querySelector existance for old browsers
if (document.querySelector) {
if (content = document.querySelector('meta[property="og:description"]') || document.querySelector('meta[name="twitter:description"]') || document.querySelector('meta[name="description"]')) {
return content.getAttribute('content');
} else
return '';
} else {
if (content = document.getElementsByTagName('meta').namedItem('description'))
return content.getAttribute('content');
else
return '';
}
};
// share urls for all networks
root.share = {
'mailto' : function() {
var url = 'mailto:?subject=' + encodeURIComponent(root.options.title) + '&body=Thought you might enjoy reading this: ' + encodeURIComponent(root.options.url) + ' - ' + encodeURIComponent(root.options.description);
window.location.href = url;
},
'twitter' : function() {
var url = root.options.protocol + 'twitter.com/home?status=';
url += encodeURIComponent(root.options.title) + encodeURIComponent(root.options.url);
root.popup(url);
},
'facebook' : function() {
var url = root.options.protocol + 'www.facebook.com/sharer/share.php?';
url += 'u=' + encodeURIComponent(root.options.url);
url += '&title=' + encodeURIComponent(root.options.title);
root.popup(url);
},
}
// open share link in a popup
root.popup = function(url) {
// set left and top position
var popupWidth = 500,
popupHeight = 400,
// fix dual screen mode
dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left,
dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top,
width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width,
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height,
// calculate top and left position
left = ((width / 2) - (popupWidth / 2)) + dualScreenLeft,
top = ((height / 2) - (popupHeight / 2)) + dualScreenTop,
// show popup
shareWindow = window.open(url,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=' + popupWidth + ', height=' + popupHeight + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus) {
shareWindow.focus();
}
}
/* Set options
***********************************************/
// create default options
root.options = {
shareButtonClass: false, // child selector of custom share button
iconStyle: 'default', // default or box
boxForm: 'horizontal', // horizontal or vertical
position: 'bottomCenter', // top / middle / bottom + Left / Center / Right
buttonText: 'COMPARTIR',
protocol: ['http', 'https'].indexOf(window.location.href.split(':')[0]) === -1 ? 'https://' : '//',
url: window.location.href,
title: root.getTitle(),
image: root.getImage(),
description: root.getDescription(),
networks: 'Mailto,Twitter,Facebook'
}
// integrate data attribute options
for (var option in root.elem.dataset) {
// replace only 'share-' prefixed data-attributes
if (option.match(/share/)) {
var new_option = option.replace(/share/, '');
if (!new_option.length) {
continue;
}
new_option = new_option.charAt(0).toLowerCase() + new_option.slice(1);
root.options[new_option] = root.elem.dataset[option];
}
}
// convert networks string into array
root.options.networks = root.options.networks.toLowerCase().split(',');
/* Create layout
***********************************************/
// create dropdown button if not exists
if (root.options.shareButtonClass) {
for (var i = 0; i < root.elem.children.length; i++) {
if (root.elem.children[i].className.match(root.options.shareButtonClass))
root.button = root.elem.children[i];
}
}
if (!root.button) {
root.button = document.createElement('span');
root.button.innerText = root.options.buttonText;
root.elem.appendChild(root.button);
}
root.button.className += ' need-share-button_button';
// show and hide dropdown
root.button.addEventListener('click', function(event) {
event.preventDefault();
if (!root.elem.className.match(/need-share-button-opened/)) {
root.elem.className += ' need-share-button-opened';
} else {
root.elem.className = root.elem.className.replace(/\s*need-share-button-opened/g,'');
}
});
// create dropdown
root.dropdown = document.createElement('span');
root.dropdown.className = 'need-share-button_dropdown';
root.elem.appendChild(root.dropdown);
// set dropdown position
setTimeout(function() {
switch (root.options.position) {
case 'topCenter':
root.dropdown.className += ' need-share-button_dropdown-top-center';
root.dropdown.style.marginLeft = - root.dropdown.offsetWidth / 2 + 'px';
break
}
},1);
// fill fropdown with buttons
var iconClass = root.options.iconStyle == 'default' ? 'need-share-button_link need-share-button_' : 'need-share-button_link-' + root.options.iconStyle + ' need-share-button_link need-share-button_';
for (var network in root.options.networks) {
var link = document.createElement('span');
network = root.options.networks[network];
link.className = iconClass + network;
link.dataset.network = network;
root.dropdown.appendChild(link);
// add share function to event listener
link.addEventListener('click', function() {
root.share[this.dataset.network]();
});
}
}
})();
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
new needShareDropdown(document.getElementById('share-button-2'));
</script>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
</body>
</html>
You can try Sticky footer with jQuery. Add this code in your js file.
var $ = jQuery.noConflict();
jQuery(document).ready(function($){
/* sticky footer function */
StickyFooter()
});
/* Script on resize */
jQuery(window).resize(function($) {
/* sticky footer function */
StickyFooter();
});
/* Script on load
----------------------------------*/
jQuery(window).load(function($) {
/* sticky footer function */
StickyFooter();
});
/* Sticky Footer Function */
function StickyFooter(){
var Stickyfooter = jQuery( 'footer' ).outerHeight()
jQuery('#wrapper').css('margin-bottom',-Stickyfooter) /* Here #wrapper is your main <div> of <body> */
jQuery('#wrapper').css('padding-bottom',Stickyfooter)
}
I have this simple Modal that's shows up upon clicking button and a Page inside it, depends of which button is click,
uno is for page1, dos is for page2 tres is for page3.
the whole box is a button and i have h3 inside it(It's for the title of that button), but when i click the green area which is H3 my pages does not shos up.
I know the problem is that when it clicks h3 it targets the h3 and h3 has ni ID in it.
Can someone help me to make my h3 act as div when i click it?
<!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>
<style>
.myBtn {
width: 100px;
height: 100px;
background-color: aqua;
margin: 10px;
text-align: center;
}
.myBtn h3 {
background-color:green;
line-height: 2;
cursor: pointer;
}
.myBtn:hover {
background-color: aquamarine;;
}
.btns {
float: left;
}
.modal {
display: none;
background-color: aqua;
float: right;
width: 400px;
height: 600px;
}
.page1 {
position: absolute;
display: none;
background-color: burlywood;
margin: 20px;
width: 300px;
height: 150px;
}
.p1 {
border: 2px solid red;
}
.p2 {
border: 2px solid blue;
}
.p3 {
border: 2px solid green;
}
</style>
</head>
<body>
<p>Click the button to Show Modal.</p>
<div class="btns">
<div class="myBtn" id="uno">
<h3>uno</h3>
</div>
<div class="myBtn " id="dos">
<h3>dos</h3>
</div>
<div class="myBtn "id="tres">
<h3>tres</h3></div>
</div>
<div class="modal">
Modal
<div class="page1 p1">Page1</div>
<div class="page1 p2">Page2</div>
<div class="page1 p3">Page3</div>
</div>
<!--JS-->
<script>
var btn = document.querySelectorAll('.myBtn');
var getModal = document.querySelector('.modal');
var getPages = document.querySelectorAll('.page1');
//console.log(getPages);
for(let i=0; i<btn.length;i++ ){
btn[i].addEventListener('click', () => {
hideModal();
getId();
displayPage()});
}
function hideModal(){
getModal.style.display = "block";
}
function getId(){
//console.log(event.target.id);
}
function hideall(){
for(let i=0; i<getPages.length;i++ ){
getPages[i].style.display = 'none';
}
}
function displayPage(){
hideall();
var btnId = event.target.id;
console.log(btnId);
if(btnId == "uno"){
getPages[0].style.display = "block";
}else if(btnId == "dos"){
getPages[1].style.display = "block";
}else if(btnId == "tres"){
getPages[2].style.display = "block";
}
console.log(getPages[0]);
}
window.addEventListener('click', closeIfOutside);
function closeIfOutside(e) {
if(e.target == getModal)
{
getModal.style.display = 'none';
}
}
</script>
</body>
</html>
<html>
You can add pointer-events: none to your h3 elements so that any clicks will fall through to the containing parent div behind it, allowing you to get the correct id to show the correct page:
.myBtn h3 {
background-color: green;
line-height: 2;
cursor: pointer;
pointer-events: none;
}
See example below:
var btn = document.querySelectorAll('.myBtn');
var getModal = document.querySelector('.modal');
var getPages = document.querySelectorAll('.page1');
//console.log(getPages);
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', () => {
hideModal();
getId();
displayPage()
});
}
function hideModal() {
getModal.style.display = "block";
}
function getId() {
//console.log(event.target.id);
}
function hideall() {
for (let i = 0; i < getPages.length; i++) {
getPages[i].style.display = 'none';
}
}
function displayPage() {
hideall();
var btnId = event.target.id;
//console.log(btnId);
if (btnId == "uno") {
getPages[0].style.display = "block";
} else if (btnId == "dos") {
getPages[1].style.display = "block";
} else if (btnId == "tres") {
getPages[2].style.display = "block";
}
//console.log(getPages[0]);
}
window.addEventListener('click', closeIfOutside);
function closeIfOutside(e) {
if (e.target == getModal) {
getModal.style.display = 'none';
}
}
.myBtn {
width: 100px;
height: 100px;
background-color: aqua;
margin: 10px;
text-align: center;
}
.myBtn h3 {
background-color: green;
line-height: 2;
cursor: pointer;
pointer-events: none;
}
.myBtn:hover {
background-color: aquamarine;
;
}
.btns {
float: left;
}
.modal {
display: none;
background-color: aqua;
float: right;
width: 400px;
height: 600px;
}
.page1 {
position: absolute;
display: none;
background-color: burlywood;
margin: 20px;
width: 300px;
height: 150px;
}
.p1 {
border: 2px solid red;
}
.p2 {
border: 2px solid blue;
}
.p3 {
border: 2px solid green;
}
<p>Click the button to Show Modal.</p>
<div class="btns">
<div class="myBtn" id="uno">
<h3>uno</h3>
</div>
<div class="myBtn " id="dos">
<h3>dos</h3>
</div>
<div class="myBtn " id="tres">
<h3>tres</h3>
</div>
</div>
<div class="modal">
Modal
<div class="page1 p1">Page1</div>
<div class="page1 p2">Page2</div>
<div class="page1 p3">Page3</div>
</div>
I would please like an explanation to why the slideshow is not working. Below I have used an interval to perpetually change the slideshow, if userClick is false. The white and squared buttons (made of divs) are set to call upon two functions; slideRight() or slideLeft() and clicked(). When the buttons are clicked however, the clicked() function does not seem to change the variable, based on the data on top of the page.
<body>
<div class="page-wrapper">
<header>
<div class="headContent">
<h1 class="titleText">Slideshow</h1>
<h2 class="subTitleText">A slideshow made with JavaScript.</h2>
<p>userClick <span id="uc"></span></p>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
</ul>
</nav>
</header>
<div class="body-wrapper">
<h1 class="titleText">Slideshow</h1>
<div id="slideshow">
<div id="leftSlide" onclick="leftSlide(); clicked()"></div>
<div id="rightSlide" onclick="rightSlide(); clicked()"></div>
</div>
<p>The image is not invoked by a tag, but invoked by the background property using Javascript.</p>
</div>
<footer>
<p id="footerText">© 2017 <br>Designed by JastineRay</p>
</footer>
</div>
<script language="javascript">
// Slide function
var slide = ["minivan", "lifeinthecity", "sunsetbodyoflove"];
var slideTo = 1;
window.onload = getSlide();
// Previous Image
function leftSlide() {
if (slideTo != 0) {
slideTo = slideTo - 1;
} else if (slideTo == 0) {
slideTo = slide.length - 1;
} else {
alert('SLIDE ERROR');
}
getSlide();
}
// Next Image
function rightSlide() {
if (slideTo != (slide.length - 1)) {
slideTo = slideTo + 1;
} else if (slideTo == (slide.length - 1)) {
slideTo = 0;
} else {
alert('SLIDE ERROR');
}
getSlide();
}
function getSlide() {
imageURL = 'url(images/' + slide[slideTo] + '.jpg)';
document.getElementById("slideshow").style.backgroundImage = imageURL;
}
// Interval Slideshow & Check if user clicked (timeout)
var userClick = false;
window.onload = slideInterval(5000);
// Start Slideshow
function slideInterval(interval) {
while (userClick = false) {
setInterval(function() {
rightSlide();
}, interval)
}
}
// Stop Slideshow and start timeout
function clicked() {
userClick = true;
setTimeout(function() {
userClick = false;
slideInterval();
}, 2000)
}
window.onload = function() {
setInterval(document.getElementById("uc").innerHTML = userClick), 100
}
</script>
</body>
CSS coding below.
* {
margin: 0;
padding: 0;
}
.page-wrapper {
width: 100%;
}
// Class Styling
.titleText {
font-family: monospace;
font-size: 40px;
}
.subTitleText {
font-family: monospace;
font-size: 20px;
font-weight: normal;
}
// Header Styling
header {
height: 500px;
}
.headContent {
margin: 30px 7%;
}
// Navigation Styling
nav {
overflow: hidden;
}
nav ul {
background: black;
background: linear-gradient(#595959, black);
list-style-type: none;
font-size: 0;
padding-left: 13.33%;
margin: 40px 0;
}
nav ul li {
padding: 15px 20px;
border-right: 1px solid #595959;
border-left: 1px solid #595959;
color: white;
display: inline-block;
font-size: 20px;
font-family: sans-serif;
}
// Body Styling
.body-wrapper {
}
.body-wrapper > .titleText {
text-align: center;
font-size: 50px;
}
#slideshow {
overflow: hidden;
margin: 20px auto;
border: 2px solid blue;
height: 350px;
max-width: 800px;
background-size: cover;
background-position: center;
position: relative;
}
#leftSlide {
position: absolute;
left: 40px;
top: 175px;
background-color: white;
height: 40px;
width: 40px;
}
#rightSlide {
position: absolute;
left: 100px;
top: 175px;
background-color: white;
height: 40px;
width: 40px;
}
// Footer Styling
Try changing the checking part to:
window.onload = function() {
setInterval(function () {
document.getElementById("uc").innerHTML = userClick;
}, 100);
}
The first argument of setInterval has to be a function (something that can be called), not a generic piece of code.