Can't figure out how to close modal by clicking outside window - javascript

No matter what I try, it just won't work for me. I'm wanting the user to click on an apple and display a modal. I placed an "x" inside the modal for closing it. I just need to know how I can close it by clicking outside of the modal.
Here is my JavaScript code for the apple button:
<script>
var ambModal = $('#ambPopup');
$('#amb').click(function() {
ambModal.show();
});
$('.ambClose').click(function() {
ambModal.hide();
});
</script>
This works perfectly, but I've scoured the Internet looking for solutions and nothing I've tried has solved my problem. I do have jQuery loaded in the HTML. Is Bootstrap required for this function to work? It's possible I've got my header wrong.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apples2Apples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="applestyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<!--FONT FOR BODY-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
Am I missing something? Please, someone reply if you can. Thank you!

Not sure your use case but what works for me is to include an extra element behind the modal (like an overlay but can be transparent if you want) to catch the click outside the modal window. Here is an example.
$("body").on("click", '.toggle-modal', function() {
if ($('#ambPopup').is(":visible")) {
$('#ambPopup').fadeOut("fast", function() {
$(this).remove();
});
} else {
const modal = $("<div />", {
"id": "ambPopup"
}).append(
$("<div />", {
"class": "modal-overlay toggle-modal"
}),
$("<div />", {
"class": "modal-content"
}).text("Content for the modal. Can be dynamic too.").append(
$("<div />", {
"class": "modal-close toggle-modal"
})
)
).appendTo("body").fadeIn("fast").css("display", "flex");
}
});
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#ambPopup {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9000;
}
.modal-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0, 0, 0, .1);
cursor: pointer;
}
.modal-content {
background: white;
padding: 30px;
font-size: 16px;
line-height: normal;
text-align: center;
z-index: 2;
position: relative;
margin: auto;
}
.modal-close {
position: absolute;
top: 0;
right: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
transform: translate(0, -50%);
cursor: pointer;
z-index: 10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle-modal">Show modal</button>

I believe you are using a custom modal?
You can use the Bootstrap Modal for your version (3.4.1) here.
They already have the scripts for closing the modal from the close button and from clicking outside or the backdrop.

Related

href not waiting for function to return before redirecting

I'm trying to make some animations to move some elements to make movement between pages smoother. For some reason when I click the link I'm redirected to the page before the animation plays out.
Below is the HTML for the link
<div id='Logo' class="logopos"><a href="{% url 'Home' %}" ><img class="image" src="{% static 'assets/Icon.png'%}" alt="Logo"/></a></div>
<div id="Menu" class="list">
<a href="" class="base-button" onclick='move()'>Home</a>
<a onclick='move()' href="{% url 'Portfolio' %}" class="base-button">Portfolio</a>
About
Contact
</div>
Below is the animation js function
function move() {
var logo = document.getElementById("Logo");
var menu = document.getElementById("Menu");
logo.animate([
{ 'left': '50vw' , 'top': '25vh'},
{ 'left': '5vw', 'top':'7.5vh'}
],
{ duration: 1000});
menu.animate([
{'left' : '50vw', 'top' :'40vh', 'width': '10vw'},
{'left' : '0vw', 'top' :'5vh', 'width': '7.5vw'}
],
{duration: 1000});
logo.style.left = "5vw"
logo.style.top = "7.5vh"
menu.style.left = '0vw'
menu.style.top = '5vh'
menu.style.width= '7.5vw'
return true;
}
Below is the css for the relevant elemants
.list {
position: absolute;
top: 40vh;
left: 50vw;
}
.base-button {
display: block;
background: rgba(190, 193, 197, 0.1);
background-clip: padding-box;
text-align: center;
color: #bec1c5;
border: none;
width: 10vw;
height: 3vh;
background-clip: text;
padding: 5px;
margin-left: -5vw;
margin-top: -5px;
margin-bottom: 10px;
cursor: pointer;
border-radius: 10px;
font-size: 20px;
font-family: Adoring;
}
.image {
display: block;
position: absolute;
margin: auto;
width: 7.5vw;
margin-left: -3.75vw;
margin-top: -3.75vh;
opacity: 0.75;
}
.logopos {
position: absolute;
top: 25vh;
left: 50vw;
}
I have tried using e.preventDefault() but this just stops the subsequent page from loading altogether.
I've also tried to put the animation in a while loop and to break after animation is complete and return, also no dice.
Any help would be appreciated!
You must stop redirecting action by returning false in onclick by:
onclick="btnOnClick(this);return false;"
Full example:
<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>Test Page</title>
</head>
<body>
<script>
function btnOnClick(elm){
console.log(elm.href);
// here do your code
//
// eventually on the end:
location.href = elm.href;
return;
}
</script>
Link:
Home
</body>
</html>
Don't add link in href, instead when you have done with animation, you can redirect to another page by js like this
window.location.href = "https://example.com";
add this line in the move function to redirect to next page.

How can I make text change when a page is scrolled to a certain point using jQuery?

I am trying to make the content of a div change when the page is scrolled to a certain point using jQuery. Currently, I am trying to accomplish this by adding a class when the page is scrolled past 800 and removing it and adding a different class when the page is above 800. Here is my current code on jsfiddle: https://jsfiddle.net/shgfrdm8/
Here is the jQuery code:
$(window).scroll(function() {
let windowTop = $(window).scrollTop();
if (windowTop < 800) {
$('image-content').addClass('scrolledDown');
$('image-content').removeClass('scrolledUp');
} else {
$('image-content').addClass('scrolledUp');
$('image-content').removeClass('scrolledDown')
}
})
The CSS ids/classes:
.main {
width: 100%;
height: 700px;
overflow: hidden;
position: relative;
}
.main-image {
width: 100%;
position: fixed;
left: 50%;
transform: translate(-50%) scale(500%);
}
.filler {
height: 400vh;
}
.main-text {
left: -14px;
width: 99.3vw;
height: 4000px;
text-align: center;
background-color: red;
position: relative;
}
#image-content::before {
white-space: pre;
position: absolute;
bottom: 20px;
left: 20px;
font-family: Impact;
font-size: 55px;
font-weight: 550;
color: white;
z-index: 4;
opacity: 1;
position: fixed;
}
#image-content.scrolledDown::before {
opacity: 1;
content: 'ABC';
}
#image-content.scrolledUp::before {
opacity: 1;
content: "DEF";
}
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="zoom.css">
</head>
<body>
<div class="image-container">
<div class="zoom main">
<img src="images/sourcecode.jpg" class="main-image">
</div>
<div id="content-anchor"></div>
<div id="image-content"></div>
</div>
<div class="filler">
</div>
<div class="main-text">
</div>
I am wondering how I can make this work because I far as I can tell the classes either not being added or the classes are not working.
Suggesting the following changes:
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (windowTop < 800) {
$('.image-content').addClass('scrolledDown');
$('.image-content').removeClass('scrolledUp');
} else {
$('.image-content').addClass('scrolledUp');
$('.image-content').removeClass('scrolledDown')
}
});
This ensures you have the correct Class selector.

Image not showing up when adding the element through javascript

I am adding images of cards for a blackjack game and for whatever reason when I try to insert images through JS, they don't appear on the website. The hit button is supposed to add a new random card. The goal is to generate a random suite and a number and add the source accordingly.
let randomSuite;
let randomNum
let count = 1;
var cards = new Array();
const suites = new Array();
suites[0] = "H";
suites[1] = "S";
suites[2] = "C";
suites[3] = "D";
window.onload = function main(){
for(let i = 0 ; i < 56 ; i++){
randomNum = (Math.random() * 12) + 1;
cards.push(Math.floor(randomNum));
console.log(cards[i]);
count++;
}
}
function hitFunc(){
randomSuite = Math.floor(Math.random() * 3);
var img = document.createElement("img");
img.setAttribute("src","PNG-cards-1.3\1C.png");
document.body.appendChild(img);
//alert(randomSuite); used to check whether or not my code is running random numbers
img.id = count;
count++;
}
*{
margin: 0;
padding : 0;
font-family: sans-serif;
}
#divId {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.main{
width: 100%;
height: 100vh;
background-color:black;
}
.img1{
position: relative;
z-index: -1;
margin: 10px auto 20px;
display: block;
width: 75%;
height: 75%;
}
.img2{
position: relative;
z-index: 1;
margin: 10px auto 20px;
display: block;
bottom: 150px;
width: 7%;
height: 7%;
}
.hitButton {
z-index: 1;
position: relative;
text-align: center;
left: 175px;
bottom: 250px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
color: aliceblue;
object-position: center;
}
<!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>first js website</title>
<link rel = "stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<style>
h1{text-align: center;}
</style>
<body class="main">
<div id="divId">
<h1 class="center">black jack</h1>
<img src="C:\Users\Adamf\OneDrive\Pictures\Camera Roll\background.jpg"
alt="" class="img1">
<button class="hitButton" id="hitbtn" onclick="hitFunc()">HIT</button>
<img src="PNG-cards-1.3\1C.png"
alt="" class="img2">
</div>
</body>
</html>
When I insert the same photo in html it works fine however when I try to manually add (the same path) it in JavaScript the same image does not want to appear. It will show up as if the image is not found.
edit: I just added the full program to stop confusion. Also, I am very new to JS so forgive my lack of knowledge.
I don't think anything wrong with your JS. Just check the image URL. Search on google about img attributes to see if anythings different.

Odd behaivour of clientWidth and offsetWidth, why do they return wrong values?

I am trying to understand why the below code snippet returns the wrong value and it doesn't matter whether I use clientWidth or offsetWidth.
const imgSize = document.querySelector('.slides').children[0].offsetWidth;
console.log(imgSize);
What does matter is where I import my script though. I found out that it will only return the correct value when I import my script at the end of my body tag, in addition, I have to keep the defer attribute!
<script src="../source/js/myJS.js" defer></script>
If I would import this in my head it is not working.
The oddest thing is when I import my script in my head with the defer attribute, then I will get randomly two values (133px or 450px), but only 450 is correct. So where does this effect come from?
I will now past the relevant css in case it is needed to answer my question because I am not sure whether it will be:
* {
box-sizing: border-box;
margin: 0;
}
body {
margin: 0;
font-size: 62.5%;
font-family: 'Rochester';
font-family: 'Open
#gen-info .container-carousel {
overflow: hidden;
width: 450px;
height: auto;
margin: auto;
position: relative;
}
#gen-info .slides {
display: flex;
align-items: center;
align-content: center;
}
#gen-info img {
width: 450px;
height: 300px;
}
#gen-info h3 {
display: none;
font-size: 1.4rem;
text-align: center;
margin: 15px 0 40px 0;
}
#gen-info .current-heading {
display: block;
}
.prevBtn {
position: absolute;
top: 50%;
z-index:2;
left: 5%;
font-size: 30px;
color: white;
opacity: 0.5;
cursor: pointer;
}
.nextBtn {
position: absolute;
top: 50%;
z-index:2;
right: 5%;
font-size: 30px;
color: white;
opacity: 0.5;
cursor: pointer;
}
.nextBtn:hover {
opacity: 1;
}
.prevBtn:hover {
opacity: 1;
}
I also have media queries but in none, is a width of 133px
Edit:
The Html
//head area
<head>
<meta charset="utf-8" />
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="../source/css/style.css" />
<link
href="https://fonts.googleapis.com/css?family=Open+Sans|Rochester&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/427c34389f.js"
crossorigin="anonymous"
defer
></script>
<script src="../source/js/myJS.js" defer></script>
</head>
// img area
<section id="gen-info">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img src="../source/img/gen-info/information/WinterAlt.jpg" alt="outsideHous">
<img src="../source/img/gen-info/information/feldberg.jpg" alt="Feldberg">
<img src="../source/img/gen-info/information/bspWinter2.jpg" alt="winterTitisee">
<img src="../source/img/gen-info/information/bspWinter1.jpg" alt="snowTrecking">
</div>
</div>
</section>
//complete JS
const btnPrevList = document.querySelectorAll('.prevBtn');
const btnNextList = document.querySelectorAll('.nextBtn');
const slides = document.querySelectorAll('.slides');
const imgSize = document.querySelector('.slides').children[0].offsetWidth;
console.log(document.querySelector('.slides').children[0]);
console.log(imgSize);
const makeCloneSlides = (img, c) => {
const lastClone = img[img.length - 1].cloneNode();
const firstClone = img[0].cloneNode();
lastClone.className = 'last-clone';
firstClone.className = 'first-clone';
slides[c].insertAdjacentElement('beforeend', firstClone);
slides[c].insertAdjacentElement('afterbegin', lastClone);
};
const moveCarouselLeft = () => {
console.log('left');
};
const moveCarouselRight = () => {
console.log('right');
};
for (c = 0; c < slides.length; c++) {
let img = document.querySelectorAll('.slides')[c].children;
makeCloneSlides(img, c);
slides[c].style.transform = 'translateX(' + -imgSize + 'px)';
}
for (c = 0; c < btnPrevList.length; c++) {
btnPrevList[c].addEventListener('click', moveCarouselLeft);
}
for (c = 0; c < btnNextList.length; c++) {
btnNextList[c].addEventListener('click', moveCarouselRight);
}

Minimizing and Maximizing <div>

Referring various sources, I've written a code to minimize and maximize a div tag in my JSP code which goes as follows,
<style type="text/css" media="screen" > #editor {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
}
#widnow {
position: absolute;
top: 72.5%;
right: 0;
bottom: 0;
left: 0;
width: auto;
border: solid 1px;
}
#title_bar {
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button {
border: solid 1px;
width: 25px;
height: 23px;
float: right;
cursor: pointer;
}
#box {
height: 250px;
background: #DFDFDF;
}
</style >
=============================
<div id="widnow">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
============================
<script type="text/javascript">
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
</script>
This gives me a div tag something like this,
But when I click the minimize button (i.e - on the top right) nothing happens.
The code works fine as shown in this demo but does not work in my jsp.
what to do? where is my mistake?
Did you Check for JavaScript conflicts? I had such issues before.
Removed
<script src="js/jquery.autocomplete.js"></script>
from head in JSP and added
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This worked fine.

Categories

Resources