Why isn't my black overlay appearing when button is clicked? - javascript

I am trying to create a pop-up window myself. I want my pop-up box to appear when the button is pressed and everything below to get darkened. However, when I press my button whole page hangs and no popup appears also.
If I remove the div which turns everything background black, my popup is working fine.
Here is my html code which has script tags inside
let visible = false;
$('#showBox').on('click', function(params) {
if (visible) {
$('.box').removeClass('boxVisible');
$('.blackenBackground').removeClass('boxVisible');
visible = false;
} else {
$('.box').addClass('boxVisible');
$('.blackenBackground').addClass('boxVisible');
visible = true;
}
})
.box {
background: pink;
height: 500px;
width: 500px;
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
border-radius: 1%;
opacity: 0;
transition: 0.4s;
transition-timing-function: ease-out;
}
.boxVisible {
opacity: 1;
}
.blackenBackground {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: black;
opacity: 0;
z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<p>Some lorem text.....
</p>
<button id="showBox">Show Box</button>
<!-- When I remove this popup box works perfectly but background isn't darkening and my page hangs -->
<div class="blackenBackground"></div>


Your fixed position div is blocking mouse events. The opacity is 0 but the box is still technically visible, which catches the click and prevents the button from getting clicked.
Just make sure the box is completely hidden and it should work.
let visible = false;
$('#showBox').on('click', function (params) {
if(visible){
$('.box').removeClass('boxVisible');
$('.blackenBackground').removeClass('boxVisible');
visible = false;
}else{
$('.box').addClass('boxVisible');
$('.blackenBackground').addClass('boxVisible');
visible = true;
}
})
.box{
background: pink;
height: 500px;
width: 500px;
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
border-radius: 1%;
opacity: 0;
transition: 0.4s;
transition-timing-function: ease-out;
}
.boxVisible{
opacity: 1;
display: block;
}
.blackenBackground{
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: black;
opacity: 0;
display: none;
z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<p>Some lorem text.....</p>
<button id="showBox">Show Box</button>
<div class="blackenBackground"></div>


Did you want something like this? I added an id element to the div and changed you addclass call in your Jquery to document.getElementById('dimmer').style.display= 'none / block' in your if-else statements and changed the .css class to
.blackenBackground{
pointer-events: none;
background:#000;
opacity:0.5;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
}
jsFiddle: https://jsfiddle.net/j0d8emsc/

Related

give animation to div when a button click

css Of that Div:-
.PostBox {
position: fixed;
height: 60%;
width: 100%;
background-color: white;
bottom: 0;
border-radius: 10px;
border-top: 5px solid rgb(16, 150, 233);
padding: 20px;
display: inline-table;
animation: SlidUp 3s ease-out backwards;
}
Animaion Of Div
#keyframes SlidUp {
from {
visibility: hidden;
bottom: -60%;
opacity: 0;
}
to {
visibility: visible;
bottom: 0;
opacity: 1;
}
}
I Want to give this Animation Whenever a button is clicked, That Button just turns the visibility of this div to visible or hidden.
in short, I want to give animation when ever a button click or given animation whenever visibility change

You can do this in pure CSS/HTML without JavaScript if that is suitable for your particular use case.
The trick is to use an input of type checkbox. It needs to be before the PostBox and a sibling of PostBox.
Here's a simple example:
.PostBox {
position: fixed;
height: 60%;
width: 100%;
background-color: white;
bottom: 0;
border-radius: 10px;
border-top: 5px solid rgb(16, 150, 233);
padding: 20px;
display: inline-table;
}
input:checked~.PostBox {
animation: SlidUp 3s ease-out backwards;
}
#keyframes SlidUp {
from {
visibility: hidden;
bottom: -60%;
opacity: 0;
}
to {
visibility: visible;
bottom: 0;
opacity: 1;
}
}
<label>Click me </label><input type="checkbox">
<div class="PostBox">I am the div that is going to slide up</div>
Obviously you'll want to refine things a bit - for example do you want the div to be there from the start? But that's a different question.

Cut/Rearange background centered instead of resizing

I have a little test site, where the width of a div gets decreased to 50% and another div appears when we click on button.
Here is my codepen
When you click on the button, the image just gets resized.
Because I am using: background-size: 100%;
But I want the image to move a bit to the left, so that it gets centred.

There's one simple thing you can do:
Just remove the bg image from content-container div and add it to the body
body{
background: url("http://foto-muehlbacher.at/wp-content/uploads/2014/01/Landschaft33-1.jpg");
}
Here's a working example:
$('#button').click(function(){
$('.new-content').toggleClass('half').delay(0).fadeIn(200);
$('.content-container').toggleClass('half').style.width = "50%".backgroundSize = "200%";
});
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
body{
background: url("http://foto-muehlbacher.at/wp-content/uploads/2014/01/Landschaft33-1.jpg");
}
.content-container {
height: 100vh;
display: block;
background-size: 100%;
float: left;
width: 100%;
position: relative;
transition: .2s ease-in-out;
}
.new-content {
display: none;
overflow: auto;
float: right;
width: 0;
height: 100vh;
background: #f60;
transition: .2s ease-in-out;
}
.new-content.half,
.content-container.half {
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-container">
<div class="content">
<div>text</div>
<div>text</div>
<div>text</div>
<button id="button">
Click me
</button>
</div>
</div>
<div class="new-content">
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
</div>

RotateY transition not working properly

When i hover once, transition is proper, but on second time, transition becomes wierd, as if the perspective: 800px starts working after transition has taken place.
Please also tell how can i set rotation about an edge except center.
I know about transform-origin but nothing such as transform-axis.
I want that when i hover over the , these images should open like a window.
var left=document.getElementById("left");
var right=document.getElementById("right");
function curtain() {
left.style.transform="rotateY(70deg)";
right.style.transform="rotateY(-70deg)";
}
function back() {
left.style.transform="rotateY(0deg)";
right.style.transform="rotateY(0deg)";
}
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
<html>
<head>
<link href="style/style.css" rel="stylesheet">
</head>
<body>
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>
<script src="script/script.js"></script>
</body>
</html>

There seems to be an issue with perspective and the onmouseout. back() (in onmouseout) and curtain() (in onmouseover) are called quite inconsistently. onmouseout is called whenever the mouse moves outside the element (#animate in this case) or its children (the images). The children are animated - they move - and the onmouseout is thereby called multiple times.
I wouldn't recommend onmouseover / onmouseout for this - instead I would use CSS :hover.
That aside, transform-origin defines the center of rotation.
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
#animate {
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position: absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: left;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: right;
}
<div id = 'animate'>
<div id = 'left'><img src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG'></div>
<div id = 'right'><img src = 'http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png'></div>
</div>

I don't know the origin of the problem, but it works ok if you are using CSS hover instead of JS hover.
And the transform origin is the way to go, it does what your wanted transform-axis would do.
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: left center;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: right center;
}
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>

making a toggle button to change panels

I have two panels at the top of my application and one button at the button. By default only panel one must be visible, but by clicking on the button panel one fades away, and panel two fades in. I created the layout, but I do not know how to achieve it.
$(".panel2").hide();
$(document).ready(function() {
$(".grid-button").on("click", function() {
$(".grid").toggleClass("open close");
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">Panel1</div>
<div class="panel2">Panel2</div>
</div>
<div class="dashboard">
<div class="grid-button">
<span class="grid open"></span>
</div>
</div>
</div>
First of all since I did $('.panel2').hide();, in page load first it loads the panel then hides it. How can I make it invisible from the beginning?
Secondly how can I make the panel2 visible only by pressing the button?
And finally is there anyway to add some transitions effects for changing panels?

You may try:
$(".grid-button").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
While for the visibility you need:
<div class="panel2" style="display: none;">Panel2</div&gt
The running snippet:
$(function () {
$(".grid-button").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">Panel1</div>
<div class="panel2" style="display: none;">Panel2</div>
</div>
<div class="dashboard">
<div class="grid-button">
<span class="grid open"></span>
</div>
</div>
</div>

To make one of the panels hidden in the first place, I'd use a css class called hidden:
.hidden{
display : none;
}
Which simply makes what it sounds like, hiding the element.
Than, I'd set this class in the HTML decleration:
<div class="panel2 hidden">Panel2</div>
That will hide panel2 on page load, and by that you don't have to hide it using js code.
Than, I'd use a helper css class called panel that stands to be a panel identifier (you can either use the data attribute, or any other way of identifying those elements).
For 5 panels, it would look like this:
<div class="panel panel1">Panel1</div>
<div class="panel panel2 hidden">Panel2</div>
<div class="panel panel3 hidden">Panel3</div>
<div class="panel panel4 hidden">Panel4</div>
<div class="panel panel5 hidden">Pane5</div>
At last, to make this work for any number of panels you want (not necesseraly 2), I'd use a "carousel" effect to toggle the panels visibility, while having a way to keep track with them (adding and removing the hidden class), and use the fadeIn/fadeOut effect. (again, instead of identifying the panels using the panel1,panel2,panel3... classes, you can always use the data attribute (please read more about it in jQuery docs), or in any other way).
var currentPanel = 1;
$(".grid-button").on("click", function() {
$(".grid").toggleClass("open close");
$(".panel"+currentPanel).fadeOut("normal", function(){
$(this).addClass('hidden');
});
currentPanel = currentPanel >= $(".panel").length ? 1 : currentPanel+1;
$(".panel"+currentPanel).fadeIn().removeClass('hidden');
});
Just note that the hidden class actually "looses" it's functionality after the first click, since jQuery changes the display property inline, but I think that it might not be harmful to keep them anyway (it will be easier to track them).
You can see an example here: https://jsfiddle.net/j79y5kdb/3/

Fixed elements in modal not staying fixed

I can't get these two elements to stay fixed on the modal page. (Click on that image icon just above 'modal#2') https://jsfiddle.net/gkrh0ok0/
HTML:
<div class="sidebarRightWork">Information</div>
<button class="remodal-close" data-remodal-action="close"></button>
CSS:
.remodal-close {
cursor: pointer;
-webkit-transition: color 0.2s;
transition: color 0.2s;
z-index: 9;
width: auto;
left: 5%;
position: fixed;
top: 50%;
color: #95979c;
border: 0;
outline: 0;
background: transparent;}
.sidebarRightWork {
right:3%;
position:fixed;
top:50%;
z-index:10;
}

I made the .remodal-close only, you can make a sidebar easy with this code.
Add this script to your js file:
$('.remodal').scroll(function() {
var a=$('.remodal').scrollTop();
a = a += 290;
$('.remodal-close').css('top', a+'px');
});
Demo:
https://jsfiddle.net/gkrh0ok0/3/

Categories

Resources