I'm trying to figure out how to make a div pop-up with CSS and a small amount of JavaScript. I've gotten as far as being able to click a link, have a box pop up, and while it's up the screen around it is grey, and if you click the grey the pop-up goes away. However, I can't get it to fade in rather than just appear instantly. Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var pop = document.getElementById(el)
cvr.style.display = "block"
pop.style.display = "block"
pop.style.opacity = "1"
pop.style.webkitTransform = "scale(1, 1)"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "100%"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var pop = document.getElementById(el)
cvr.style.display = "none"
pop.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display:none;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity = 50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#popup {
display:none;
left:100px;
top:100px;
width:300px;
height:300px;
position:absolute;
z-index:100;
background:white;
padding:2px;
border:1px solid gray;
opacity:0;
-webkit-transform:scale(.5, .5);
-webkit-transition:all .5s ease-in-out;
}
#cover-link {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="cover"><a id="cover-link" href="#" onclick="closePopUp('popup');"></a></div>
<div id="popup">
Some Words
</div>
Show
</body>
</html>
The important parts are these:
From the JavaScript:
pop.style.opacity = "1"
pop.style.webkitTransform = "scale(1, 1)"
From the CSS:
opacity:0;
-webkit-transform:scale(.5, .5);
-webkit-transition:all .5s ease-in-out;
Everything appears to be working except the -webkit-transform:scale(.5, .5); is being ignored when the pop.style.webkitTransform = "scale(1, 1)" is in the JavaScript, and the -webkit-transition:all .5s ease-in-out; just isn't doing anything. If you think you know something that may work you can copy the block of code above and alter it; it's already a complete HTML file.
The idea is to get it to fade something like this does:
<html>
<head>
<style type="text/css">
.message {
left:100px;
top: 100px;
width:300px;
height:300px;
position:absolute;
z-index:100;
background:white;
padding:2px;
border:1px solid gray;
opacity:0;
-webkit-transform: scale(.95, .95);
-webkit-transition: all .5s ease-in-out;
}
.message p {
padding:80px 0;
border-radius:3px;
}
.info:hover + .message {
opacity: 1;
-webkit-transform: scale(1, 1);
}
</style>
</head>
<body>
<div class="info">
<p>Hover</p>
</div>
<div class="message">
<p>A Simple Popup</p>
</div>
</body>
</html>
The main issue that you have is that you're moving from display: none to display: block. The transition won't work like that. Since you already have opacity to hide the div, and you're also using position: absolute, I don't think there's a good reason to not leave the div at display: block.
I also think you would be best served by moving the properties that you want the div to have when it's shown into a CSS class and just adding and removing that class during the appropriate triggers. That makes it easier to modify them in the future, too.
I created a jsBin with the recommended changes.
Related
This is my simple code, which I want it to scale my whole document (html) with a delay of 1s (with javascript) and it should animate slowly the scale of the whole website.
In this fiddle, it is not really working at all - but on my file it actually animates it, but only when the user moves the mouse constantly.
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6)
setTimeout(function(){
document.querySelector("html").style.transform = "scale(0.7)";
},1000)
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6); background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
<html>
<body></body>
</html>
I could not make it work with your code so I modified it like this:
<script>
setTimeout(function(){
document.querySelector("#test").style.transform = "scale(0.7)";
},1000)
</script>
<style>
html {
height: 100%;
width:100%;
}
#test{
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6);
background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
</style>
<html>
<body>
<div id="test"></div>
</body>
</html>
And it seems to work as expected for me, whether I move the mouse or not. The issue is that the background on html or body tag will fill the full size of the screen even if zooming in and out or resizing.
EDIT:
If you want the background to fit the full window while the content is growing: I just added a div in your body to see easier what is happening. Is this what you want to have?
setTimeout(function(){
document.querySelector("html").style.transform = "scale(0.8)";
},1000)
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6);
background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
body{
height: 100%;
width:100%;
}
div{
height: 100%;
width:100%;
background-color: #000;
}
<body>
<div></div>
</body>
I have a blocks overview, and when you click on one block it expands.
When clicking outside the expanded block, or on the "x", it resizes back to the default size.
But there are two issues I don't know how to solve.
When you click on a block with Chrome/Safari, the z-index updates a millisecond too late and it doesn't look smooth. (Firefox on MAC is okay when expanding.)
When it's expanded and goes back, the z-index needs to be higher than the other blocks. So, when it goes to normal the site looks a lot better.
So, when clicking, it should add z-index:2; and when it's resizing back to default size the z-index needs to be 1 so its higher than the others ( which are 0) but, when another is expanding, that needs to be the highest.
Can anyone help me with this? I'd rather use some JS magic for this, maybe inline style?
I also made a jsfiddle to show what I mean.
https://jsfiddle.net/fourroses666/sp7vbtok/2/
HTML:
<div class="grid">
<div class="grid-item">
<div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
<div class="g-item"><img src="/some-png-img.png" height="175" width="175" /></div>
<div class="g-more">Bla bla bla.</div>
<div class="g-close">x</div>
</div>
</div>
</div>
JS
$(".grid-item").on("click", function(){
$(".grid-item").removeClass("active");
$(this).addClass("active");
});
$(".g-close").on("click", function(e){
e.stopPropagation();
$(this).closest(".grid-item").removeClass("active");
});
CSS
.grid{width:875px; margin:20px auto;}
.grid:after {content:''; display:block; clear:both;}
.grid-item{width:175px; height:175px;}
.g-more{display:none; position:absolute; top:175px; height:175px; width:175px; transition:all 1s ease-in-out; opacity:0; padding:20px;}
.active .g-more{opacity:1; display:block;}
.grid-item{float:left; width:175px; height:175px; background:#ddd; color:#fff;}
.grid-item:before{display:block; padding:0;}
.grid-item-wide, .grid-item-wide .g-inner, .grid-item-wide .g-item{width:350px; height:175px;}
.g-inner{cursor:pointer; overflow:hidden; z-index:1; width:175px; height:175px; transition:all 1s ease-in-out; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:left 50%;}
.active .g-inner{width:350px; height:350px; position:relative; z-index:2; cursor:default;}
.open-left.active .g-inner{margin-left:-175px;}
.open-top.active .g-inner{margin-top:-175px;}
.g-item{width:175px; height:175px; position:relative;}
.g-close{cursor:pointer; position:absolute; right:-50px; bottom:-50px; width:50px; height:50px; line-height:50px; font-size:35px; display:none; opacity:0; text-align:center; transition:all 1s ease-in-out;}
.active .g-close{opacity:1; right:0; top:auto; bottom:0; z-index:5; display:block;}
try to use insted
.active .g-inner {
width:350px;
height:350px;
}
with transform:scale and transform-origin (-if you want set pivot x and y as top-left) like this:
.active .g-inner {
transform: scale(2);
transform-origin: left top;
}
its work fine for me
I have a popup javascript I am using on one of my html pages.
It works fine, but... when I tried to add a second one in a different location, the script would not function.
I'm not sure what I am doing wrong.
I need at least three of these on one webpage in different locations.
Any advice would be appreciated.
Here is the basic script....
<!DOCTYPE html>
<html>
<head>
<script>function myfunction() {var popup1 = document.getElementById("popup1"); popup1.classList.toggle("showpopup1");}</script>
<style>
body {margin:0;}
/* popup container */
.popup1 {
margin-left:200px;
margin-top:200px;
margin-bottom:0px;
position:relative;
display:inline-block;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
/* The actual popup */
.popup1 .popup1text {
visibility:hidden;
background-color:#555;
color:#fff;
border-radius:10px;
padding:8px 8px 8px 8px;
width:400px;
height:80px;
position:absolute;
text-align:left;
z-index:1;
bottom:130%;
left:50%;
margin-left:-210px;
}
/* Popup arrow */
.popup1 .popup1text::after {
content:"";
position:absolute;
top:100%;
left:50%;
margin-left:-5px;
border-width:5px;
border-style:solid;
border-color:#555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup1 .showpopup1 {
visibility:visible;
-webkit-animation:fadeIn 1s;
animation:fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn{from {opacity: 0;} to {opacity: 1;}
#keyframes fadeIn{from {opacity: 0;} to {opacity:1 ;}
</style>
</head>
<body>
<div class="popup1" onclick="myfunction()">POPUP 1<span class="popup1text" id="popup1">Popup 1 Text</span></div>
</body>
</html>
So I have this problem: I append a div into a div at 50px top then try to animate to 0px but the animation never works, even if the div is moved to 0%.
Here is the very simple code
HTML
<div id="toto"></div>
JS
$('#toto').append('<div id="test" class="test">test</div>');
$('#test').css('top', '0px');
CSS
#toto{
display:block;
}
.test{
display:block;
position:absolute;
transition:all 3s;
top:50px;
}
FIDDLE
Link
Any idea how to have it move with CSS transitions? Thanks.
The CSS is being applied too fast for the top change to trigger the transition. You can wrap the class change in a fast setTimeout() https://jsfiddle.net/nb0fty1b/1/
$('#toto').append('<div id="test" class="test">test</div>');
setTimeout(function() {
$('#test').css('top', '0px');
},100);
#toto{
display:block;
min-height:200px;
}
.test{
display:block;
position:absolute;
transition:all 3s;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toto">
</div>
Don't change the top on page load like:
setTimeout(function(){
$('#test').css('top', 0);
},2000);
You can do that with CSS animation and #keyframes.
$('#toto').append('<div id="test" class="test">test</div>');
#toto {
min-height: 200px;
position: relative;
}
.test {
position: absolute;
top: 50px;
animation: move 3s forwards;
}
#keyframes move {
to {
top: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toto"></div>
i am trying to make "memory game" using html5, CSS3 and JS. I have completed the view and model part of this game and now trying to make the Controller. What i want is call a function i.e. flip in JS and want that function to perform transition instead of using hover effect of CSS3. Basically i am trying to follow this approach. I checked that flipping in css3 using hover as can be seen in sass code below, but for the game, the user decides where to click. For simplicity, i have concised the code in html5 since it repeats for all other divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I Don't Know</title>
<link rel="stylesheet" href="trapStyle.css">
</head>
<body>
<div class = "container" >
<div class="sub1" >
<div class="front" id="card1" onclick="flip(card1)">card1</div>
<div class="back" id="card1_1">what the hell?</div>
</div> <--sub1 Ends-->
<div class="sub1">
<div class="front" id="card2" onclick="flip(this)">card2</div>
<div class="back" id="card2_2">what the hell?
</div> <--sub1 Ends-->
</div> <-- container Ends -->
<script src ="script.js"></script>
</body>
</html>
and the SASS code for css
.container {
position: absolute;
left: 115px;
width: 1150px;
height: 700px;
background-color: silver;
/* SUB-CONTAINER to stack two cards */
.sub1 {
width: 200px; height: 200px;
float:left; margin: 5px;
.front {
position:absolute; width: 200px; height: 200px;
background-color: #498010;
transform: perspective( 600px) rotateY(0deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
.back {
position: absolute; width: 200px; height: 200px;
float:left; background-color: #689;
transform: perspective( 600px) rotateY(180deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
}
.sub1:hover > .front {
/* transform: perspective(600px) rotateY(-180deg); */
}
.sub1:hover > .back {
/* transform: perspective(600px) rotateY(0deg); */
}
}
and JavaScript
function flip(front) {
document.getElementById("front").style.transition = opacity 0.5s linear 0s;
document.getElementById("front").style.opacity = 0;
}
Note: the link, above, is trying to pass id to JS function where the transition takes place. Exactly same is being done here, just to get input from user instead of just hovering, but nothing happens! I copy/pasted the link code in my editor and smooth transitions are performed but when it comes of my code, nothing! Could you tell me where is my flaw?
Change your CSS from the hover state to a class, for iunstance change .sub1:hover to .hovered:
.container .hovered > .front {
transform: perspective(600px) rotateY(-180deg); }
.container .hovered > .back {
transform: perspective(600px) rotateY(0deg); }
And now, on click, add this class to the element clicked:
$(".sub1").click(function() {
$(this).addClass ('hovered');
})
fiddle
this function in javascript would be
function change(element) {
element.className = element.className + " hovered";
}
provided that you send the element in the function call
onclick="change(this)"
fiddle - function set only in the first div