First of all im new in using js and specificly this script, but I hope you can see past that and help finding a solution for me :-)
Okay so my problem is as following:
I try to make a popup to show customers something they have to see like an offer. As it is right know I can make the popup show when clicking the fixed button at the bottom. But I dont want it to close when I click on the showing image only when I click on the (X) buttonTAG.
Anyone who can see what I do wrong? Really hope so :-*
Best regards
Lasse Madsen
Heres my code:
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
function myFunction2() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("hide");
}
.popup {
position: fixed;
bottom: 0%;
display: inline-block;
cursor: pointer;
left: 10%;
background-color: #efefef;
padding: 10px 20px 10px 20px;
display: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 600px;
height: 400px;
background-color: #555;
color: #fff;
text-align: center;
position: absolute;
z-index: 1;
bottom: 0%;
left: 20%;
margin-left: -80px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {top: 0px;}
25% {top: -360px;}
50% {top: -300px;}
75% {top: -360px;}
100% {top: -360px;}
}
#keyframes fadeIn {
0% {top: 0px;}
25% {top: -360px;}
50% {top: -300px;}
75% {top: -360px;}
100% {top: -360px;}
}
#media only screen and (min-width: 992px) {
.popup {
display: block;
}
}
#myFunction2{
position:absolute;
z-index: 999999;
left:0%;
top: 0%;
}
<div class="popup" onclick="myFunction()">Påsketilbud – klik her! <span class="popuptext" id="myPopup"><img src="http://www.hjerm.dk/wp-content/uploads/2015/11/hjerm-billede-paa-vej.jpg" style="border: 1px solid #000;" /><button style="border-radius: 50%;" id="myFunction2">x</button></span>
</div>
Need to remove the display:none from .popup class .. rest of all code is fine and working example as below :
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">/* Popup container - can be anything you want */
.popup {
position: fixed;
bottom: 0%;
display: inline-block;
cursor: pointer;
left: 10%;
background-color: #efefef;
padding: 10px 20px 10px 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 600px;
height: 400px;
background-color: #555;
color: #fff;
text-align: center;
position: absolute;
z-index: 1;
bottom: 0%;
left: 20%;
margin-left: -80px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {top: 0px;}
25% {top: -360px;}
50% {top: -300px;}
75% {top: -360px;}
100% {top: -360px;}
}
#keyframes fadeIn {
0% {top: 0px;}
25% {top: -360px;}
50% {top: -300px;}
75% {top: -360px;}
100% {top: -360px;}
}
#media only screen and (min-width: 992px) {
.popup {
display: block;
}
}
#myFunction2{
position:absolute;
z-index: 999999;
left:0%;
top: 0%;
}
</style>
<div class="popup" onclick="myFunction()">Påsketilbud – klik her!
<span class="popuptext" id="myPopup"><img src="http://www.hjerm.dk/wp-content/uploads/2015/11/hjerm-billede-paa-vej.jpg" style="border: 1px solid #000;" /><button style="border-radius: 50%;" id="myFunction2">x</button></span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
function myFunction2() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("hide");
}
</script>
</body>
</html>
Related
I learn about website design and development on the w3schools website. I stumbled on a code and I have been playing around with it. I want the pop-up to show underneath the text instead of above the text but I have no idea how to do it. w3schools also did not explain how to do that.
I think the pop-up text should be able to pop up beneath the text, above the text, behind the text, and also in front of the text. but right now, can anyone please show me how to make the pop-up appear beneath the text, please? Thanks.
Below is a sample of the code.
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
top: 130%; /* changed bottom to top */
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
bottom: 100%; /* changed top to bottom */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent; /* changed border botom color instead of top*/
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
So i'm new to HTML, CSS, Bootstrap and JavaScript i made this gallery, it looks great but i need to fix it for mobile devices and smaller screens. What i should change?
Those #myImg4,5,12,13 are vertical images placed in differently because of design
PC preview: https://imgur.com/a/PK8irdL
and this is how it looks on smaller screen
BTW: I know, that code is very bad but i started with coding 4days ago so :/
I'm very thankful for every Respond!!!!
CSS Code for gallery is:
.gallerycontent {
margin: 10px 200px 40px 100px;
}
.galleryhr {
border-top: 2px solid #FF0000;
width: 100;
}
.galleryhr h1 {
color: #000;
text-align: center;
}
/* Style the Image Used to Trigger the Modal */
#myImg , #myImg2 , #myImg3 , #myImg6 , #myImg7 , #myImg8 , #myImg9 , #myImg10 , #myImg11 , #myImg14 , #myImg15 , #myImg16 {
margin-left: 20px;
max-height: 200px;
height: 100%;
margin-bottom: 10px;
cursor: pointer;
transition: 0.3s;
}
#myImg4 {
max-height: 414px;
height: 100%;
position: absolute;
top: 165px;
right: 186px;
cursor: pointer;
transition: 0.3s;
}
#myImg5 {
max-height: 414px;
height: 100%;
position: absolute;
top: 165px;
right: 511px;
cursor: pointer;
transition: 0.3s;
}
#myImg12 {
max-height: 414px;
height: 100%;
position: absolute;
top: 590px;
right: 511px;
cursor: pointer;
transition: 0.3s;
}
#myImg13 {
max-height: 414px;
height: 100%;
position: absolute;
top: 590px;
right: 186px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
#myImg2:hover {opacity: 0.7;}
#myImg3:hover {opacity: 0.7;}
#myImg4:hover {opacity: 0.7;}
#myImg5:hover {opacity: 0.7;}
#myImg6:hover {opacity: 0.7;}
#myImg7:hover {opacity: 0.7;}
#myImg8:hover {opacity: 0.7;}
#myImg9:hover {opacity: 0.7;}
#myImg10:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
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.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 50%;
max-width: 1000px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
I would suggest to use bootstrap (https://getbootstrap.com/), you could do something like this in bootstrap v3:
<div class='row'>
<div class='col-lg-12'>
<div class='col-lg-8'>
<img class='img-responsive col-lg-4' src='image/path'/>
<img class='img-responsive col-lg-4' src='image/path'/>
<img class='img-responsive col-lg-4' src='image/path'/>
</div>
<div class='col-lg-4'>
<img class='img-responsive col-lg-6' src='image/path'/>
<img class='img-responsive col-lg-6' src='image/path'/>
</div>
</div>
</div>
and it should look good also on mobile.
The culprit here is being 'too precise' with the positions.
Absolute positioned items are not aware of their physical context. They don't know when they should occupy less space or go on a new row.
It's time to take a look at Responsive Web Design.
There are a couple of ways in which you can approach it.
Float based layouts: https://www.w3schools.com/css/css_float.asp
Grid based layouts: https://css-tricks.com/snippets/css/complete-guide-grid/
Flex based layouts: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp
Start in this order.
Enjoy the process!
I found this on how to make a popout on click in Javascript, however I am trying to alter it a bit so when it's clicked on it should automatically disappear again after some seconds... But i can't get it to work, i tried to set the animation to
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
It dissapears but it still comes back again... why is that?
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
I think you need to set the default state of .popup .show to opacity: 0 because after the animation runs it will return to the default state you define.
.popup .show {
opacity: 0; /* add this */
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
opacity: 0;
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
#keyframes fadeIn {
0% {opacity: 0;}
50% {opacity:1 ;}
100%{opacity:0;}
}
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
Your fade in should be:
#keyframes fadeIn {
0% {opacity: 0;}
100%{opacity: 1;}
}
By setting it back to 0 at 100% like you do, it does a fadeIn / fadeOut animation
EDIT: Sorry I got the question wrong
I really like the effect of clicking on the search box and the search page coming up and the normal page fades out. How can I replicate this? Is this CSS3 only?
https://atmospherejs.com/
You can do that with CSS only and here is one way.
In this sample I used 2 radio inputs to keep track of whether to show the search box or not.
html, body {
margin: 0;
height: 100%;
}
#shide, #sshow {
display: none;
}
.container {
width: 100%;
height: 100%;
background:url('http://lorempixel.com/1024/600/city/9/') no-repeat;
background-size:cover;
transition: transform .6s ease-out, opacity .6s ease-out;
z-index: 1;
}
.showsearch{
position: absolute;
top: 25px;
right: 25px;
background-color: rgba(255,255,255,0.9);
color: #F00;
font-size: 20px;
border-radius: 5px;
padding: 10px 25px;
cursor: pointer;
}
.searchbox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(255,255,255,0.9);
transition: opacity .5s ease-in;
}
.searchbox .close{
position: absolute;
top: 25px;
right: 25px;
width: 60px;
height: 60px;
cursor: pointer;
}
.searchbox .close:before,
.searchbox .close:after {
content: ' ';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
transform: rotate(45deg);
background: #000;
}
.searchbox .close:after {
transform: rotate(-45deg);
}
.searchbox > div {
position: relative;
top: 46%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.searchbox > div > div {
font-size: 24px;
}
#sshow:checked ~ .searchbox {
opacity: 1;
z-index: 2;
}
#sshow:checked ~ .container {
opacity: 0.4;
transform: scale(0.9, 0.9);
}
<input type="radio" name="search" id="sshow">
<input type="radio" name="search" id="shide">
<div class="searchbox">
<label class="close" for="shide"></label>
<div>
<div>Search box</div>
<input type="text" class="field">
</div>
</div>
<div class="container">
<label class="showsearch" for="sshow">Search</label>
</div>
Yes this is css along with a little bit of jquery you can make this happen. You will need to wrap your body content in a wrapper so you can scale it with css. Then use jquery toggleClass to give the body a class of something like search-open. Then you can use transitions for the rest like so:
Here is a fiddle demo Fiddle
Css:
.search-overlay{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
opacity:0;
background:rgba(255,255,255,0.9);
z-index: -1;
transition: all 250ms ease-in-out;
}
.body-wrapper{
transition: all 1200ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
width:100%;
height:100%;
}
.search-open .search-overlay{
opacity:1;
z-index: 5;
}
.search-open .body-wrapper{
position:fixed;
top:0;
left:0;
opacity:0.5;
transform: scale3d(0.85, 0.85, 1);
}
Html:
<div class="search-overlay">
Search Content...
</div>
<div class="body-wrapper">
Body Content...
</div>
Then jquery to toggle the class use a button or something in the body content and the overlay to close it:
$('.search-button, .search-close').on("click", function(){
$('body').toggleClass("search-open");
});
1st problem: I am trying to display the text overlay when the "point" class gets hovered, but for me works just the display when the "caption" class gets hovered, how to fix it?
2nd problem: I need to create a smooth zoom in image when the "point" class gets hovered, how can i do it?
Demo: http://jsfiddle.net/0qgcn2uu/12/
HTML:
<div class="caption">
<span class="point"></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://2.bp.blogspot.com/-TH7ATkZ55uw/VOatQSMgt4I/AAAAAAAAAUM/bB199rdZMuE/s1600/alone.png" />
</div>
</div>
</div>
CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.captionHover::before {
background: rgba(248, 214, 215, .5);
}
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover: + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
jQuery:
$(document).ready(function() {
$(".point").mouseenter(function() {
$('.caption').addClass('captionHover');
});
$('.point').mouseleave(function() {
$('.caption').removeClass('captionHover');
});
});
All you need is the Adjacent sibling selector, General sibling selector and ftransform
*{
box-sizing: border-box
}
figure{
overflow: hidden;
width: 250px;
height: 250px;
margin: 50px auto;
z-index:1;
position: relative
}
figure span{
display: block;
width: 16px;
height:16px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
top: 10px;
left: 10px;
cursor: pointer
}
figure img, figure figcaption{
-webkit-transition: 1s ease
}
figure figcaption{
position: absolute;
top: 100%;
z-index: 2;
width: 100%;
left: 0;
text-align: center;
color: white
}
figure span:hover + img{
-webkit-transform: scale(2,2)
}
figure span:hover ~ figcaption{
top: 50%
}
<figure>
<span class=point></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<figcaption>HELLO!</figcaption>
</figure>