I currently have some javascript functions applied to multiple buttons that trigger a popup, showing more content. I want to make a function that triggers a blur background animation once any of those buttons are clicked, and another animation where the popup sliding in from the top. Any help will be appreciate
document.querySelectorAll(".button a").forEach((a)=>{a.addEventListener("click",toggle);});
document.querySelectorAll(".popup a:last-child").forEach((a)=>{a.addEventListener("click",close);});
function toggle()
{
this.parentElement.nextElementSibling.classList.toggle("active"); //popup is sibling of a's parent element
}
function close()
{
this.parentElement.classList.toggle("active"); // .popup
}
This is the CSS for that function.
.popup
{
display: none;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%,-50%);
width: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0,0,0,.30);
background: #A6A6A6;
}
.active
{
display: block;
top: 50%;
visibility: visible;
left: 50%;
}
And the HTML:
<div class="container">
<div class="box button">
HURRICANE TRACK
</div>
<div class="popup">
<h2>HURRICANE TRACKING</h2>
<video src="python_movies/hurricanetrack.mov"controls></video>
<p>
A Python project that prompts the user for a file containing hurricane information in order to form a dictionary that contains the names of hurricanes, the years the hurricanes occurred, and the correspoding data for each of the hurricanes, including the trajectory, longitude, lattitude, and wind speed. The program graphs all of the corresponding information by adding the information on a table, graphing the trajectory of the hurricanes, and plotting the information in a graph according to the wind speed.
</p>
CLOSE
</div>
<div class="box button">
NINE MEN'S MORRIS
</div>
<div class="popup">
<h2>NINE MEN'S MORRIS</h2>
<video src="python_movies/ninemensmorris.mov"controls></video>
<p>
A Python Project that runs the game, Nine Men's Morris. Nine Men's Morris is a two player game that combines elements of tic-tac-toe and checkers. The board consists of a grid with twenty-four intersections or points. Each player has nine pieces. Players try to form 'mills'—three of their own men lined horizontally or vertically—allowing a player to remove an opponent's man from the game. A player wins by reducing the opponent to two pieces (where they could no longer form mills and thus be unable to win), or by leaving them without a legal move. The game proceeds in three phases, however, this project handles the first phase.
</p>
CLOSE
</div>
$(document).ready(function(){
$(".button").click(function(){
$(".popup").toggleClass("active");
});
});
.popup
{
display: none;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%,-50%);
width: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0,0,0,.30);
background: #A6A6A6;
}
.active
{
display: block;
top: 50%;
visibility: visible;
left: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click
<div class="popup">
<p>HEllo how r u?</p>
</div>
See this Snippet. It will help you.
$(document).ready(function(){
$(".button").click(function(){
$(".popup").toggle(800);
});
});
.popup
{
display: none;
visibility: visible;
position: fixed;
left: 0;
width: 100%;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99999999;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click
<div class="popup">
<h2 style="text-align:center">
Your Dummy Text
</h2>
</div>
You can do like this also below is the sample code
$(document).ready(function() {
$(".button").click(function() {
$(".popup").slideToggle(500);
});
});
.popup {
display: none;
visibility: visible;
position: fixed;
left: 0;
width: 100%;
padding: 0;
box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
background: #A6A6A6;
z-index: 99999999;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
Click
<div class="popup">
<h2 style="text-align:center">
Your Dummy Text
</h2>
</div>
Related
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 1 year ago.
**Here is a simple code **
div {
border: 1px solid blue;
}
.one {
background-color: red;
width: 300px;
height: 300px;
}
.two {
background-color: orange;
width: 300px;
height: 300px;
position: relative;
top: 100px;
left: 100px;
z-index: 10;
}
.twenty {
background-color: pink;
width: 300px;
height: 300px;
position: relative;
top: 100px;
left: 100px;
z-index: 500;
}
.three {
margin-top: -10px;
margin-left: 10px;
background-color: yellow;
width: 300px;
height: 300px;
}
.four {
background-color: green;
width: 300px;
height: 300px;
position: relative;
top: 80px;
left: 120px;
z-index: 11;
}
<div class="one">
<div class="two">
<div class="twenty">
Can pink be above green?
</div>
</div>
</div>
<div class="three">
<div class="four">
</div>
</div>
How to make the pink square to be above the green square? Is it possible with CSS changes only without HTML changes? Why z-index applied to the .twenty class doesn't work in this case?
Thank you.
This question is NOT a duplicate of Why can't an element with a z-index value cover its child? :
In this question we'd like the child to cover, not the parent!
All layers, except the twentieth, should not have Z order. We specify absolute an order and an order of a layer on Z.
.twenty{
position: absolute;
...
z-index: 1;
}
You should set .four with a lower z-index than .two which is the element that contains .twenty but this may not be the expected result (green also becomes under the orange).
It's not possible without changing the HTML structure, like putting .twenty inside .four, or redefining all the indexes. This is how the stacking context works.
Given this code:
<div class="A">
<div class="One"></div>
<div class="Two"></div>
</div>
<div class="B">
<div class="Three"></div>
</div>
From the top view
From the side view
Lear more about the stacking context:
CSS stacking contexts and z-index made easy
The stacking context
Yes, we can ;)... if orange gets a higher z-index than green...
.two {
...
z-index: 12;
}
It's because pink is a child of orange...
Does anyone know how to insert a tooltip for a phrase in HTML as you write without too much of code?
The idea is that it shouldn't be a huge block of code, but relatively short, and easily insertable.
An imaginary example: <p> This is a <tooltip-data="A yellow fruit"> bananna </tooltip> </p>
The purpose is for when you are writing an article, to add a tooltip explaining what a word or phrase means, but without requiring much effort, or taking too much space on the code.
One alternative I found is this, but it's a huge block of code and it takes a lot of space, also I do not know how to apply this to several phrases, it seems like you need to add a div for every tooltip you want to show.
And I already do know about Bannana but it doesn't allow for styles, and does not show up on phones.
Take a look at this.
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me2
<span class="tooltiptext">Tooltip text again</span>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me3
<p class="tooltiptext">Tooltip text</p>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me
<h1 class="tooltiptext">Tooltip text</h1>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me
<h2 class="tooltiptext">Tooltip text</h2>
</div>
</body>
</html>
This is courtesy of W3schools. Just note that all of the css in there is not necessary, you just need some to make the tooltip actually work
What you need is library based on Angular-like directives. Every aspect of tooltip may be described directly in html in place of usage. Take a look at:
https://angular-ui.github.io/bootstrap/#/popover
Example of usage:
<button uib-popover="I appeared on mouse enter!"
popover-trigger="'mouseenter'" type="button">Mouseenter</button>
Please try this.
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip:after {
position: absolute;
background: rgba(140,180,140,.5);
content: attr(data-tooltip);
bottom: 100%;
left: 0;
max-width: 200px;
opacity: 0;
transition: all ease .3s;
padding: 5px;
border-radius: 7px;
}
.tooltip:hover:after {
opacity: 1;
}
<h1>Tooltip Example</h1>
<div class="tooltip" data-tooltip="My tips">
Hover over me
<div>
I have a simple site with two sections. Ideally the section at the top would load at a particular size, but then with the click of a button located at the bottom of this section, the section would increase size to fit screen. If clicked again the section would go back to its original size.
Functionality should be exactly as the one on this site:
http://www.urbandisplacement.org/map/la
I have a couple of questions:
What is the best way to accomplish this effect through JQuery/CSS?
How do I make sure the button stays fixed at the bottom of the growing/shrinking div and moves as the div does?
I've tried resetting the height of the top div when the button is clicked, using JQuery, but this neither animates nor keeps the button at the bottom of the div when it's used.
Thank you!
Here's a simple CSS only version:
https://jsfiddle.net/otenf0fy/
body,#wrapper {
height: 100%;
}
#expand {
display: none;
}
#top {
background: black;
color: white;
padding: 1em;
position: relative;
}
label {
background: blue;
color: white;
border-radius: .5em;
padding: 1em;
display: block;
width: 5em;
text-align: center;
cursor: pointer;
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-2.5em,0);
}
#expand:checked ~ #top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="wrapper">
<input id="expand" type="checkbox">
<div id="top">
<p>
This is just a test
</p>
<label for="expand">Expand</label>
</div>
</div>
</body>
I have this application that shows small windows after clicking a button
JsFiddle
$('.modules').draggable();
$('.glyphicon').click(function() {
$(this).next('.modules').slideToggle();
});
.glyphicon {
font-size: 2em;
color: #A70000;
position:absolute;
z-index: 10;
display: block;
}
.glyphicon:hover {
cursor: pointer;
color: #000;
}
.modules{
position: absolute;
width: 30%;
box-shadow: 5px 5px 15px #000;
z-index: 5;
display: none;
overflow: hidden;
}
.modules_box {
color: white;
background-color: rgba(159,159,159,0.8)
}
.module img{
padding: 5px;
}
#module1 {
left: 10%;
top: 7%;
}
#button_module1 {
left: 10%;
top: 7%;
}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="button_module1" class="glyphicon glyphicon-info-sign"></span>
<div class="modules" id="module1" draggable="true">
<img src="http://www.touronline.ag/Portals/0/Products/alle_module.jpg" alt=""/>
<div class="modules_box">
<h5>DANE:</h5>
<ul>
<li>Parametr 1: 500</li>
<li>Parametr 2: 700</li>
<li>Parametr 3: 1500 cm</li>
</ul>
</div>
</div>
Windows are draggable so a user can move them around. What I want to achieve is to reset the window position after it's hidden so it always shows at its origin. I would like the universal solution that doesn't require writing separate code for every window. There will be many windows placed at different spots using absolute position. Any suggestions how this could be achieved?
Resetting the 'style' attribute on toggle will ensure the module always reverts to it's original position in the stylesheet.
if(!$this.is(":visible")){
$this.attr('style','');
}
http://jsfiddle.net/vrww6fcm/3/
I have a base html element and I have an overlay element that contains some buttons.
I want the mouse to be able to interact both with the base element as well as with the buttons in the overlay.
The problem is that the overlay captures the mouse events of the base element.
Is there a way that I can disable the mouse interactions for the transparent background of the overlay (like IE seems to do), while keeping the mouse interactions for the buttons inside the overlay ? Or do I need to change the structure of my code ?
Fiddle
Here's one approach.
With an overlay element:
http://jsfiddle.net/XC95u/11/
Without an overlay element:
http://jsfiddle.net/XC95u/3/
I modified the html structure and use z-index to control the positions of the divs.
HTML:
<div class="main">
<div class="base"></div>
<div class="overlay">
</div>
<div class="button left"></div>
<div class="button right"></div>
</div>
CSS：
.main {
width: 350px;
height: 150px;
position: relative;
}
.base {
background-color: #c0c0c0;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.button {
background-color: #707070;
width: 30px;
height: 30px;
position: absolute;
top: 60px;
z-index: 99;
}
.right {
right: 0;
}