I have the following code that triggers a certain effect when the mouse pointer is found on the image:
body {
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
margin: 12px 0;
}
.card-container {
cursor: pointer;
height: 150px;
perspective: 600;
position: relative;
width: 150px;
}
.card {
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 100%;
}
.card:hover {
transform: rotateY(180deg);
}
.card .side {
backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.card .back {
background: #eaeaed;
color: #0087cc;
line-height: 150px;
text-align: center;
transform: rotateY(180deg);
}
<div class="card-container">
<div class="card">
<div class="side"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
<div class="side back">Jimmy Eat World</div>
</div>
</div>
How do I make an effect start when you press a button and not when you move the mouse over the image?
Thanks in advance!
Here's a CodePen example using JQuery to change the css upon clicking. Might help.
CodePen Example
HTML:
<div id="divTester">Click me to change color</div>
JavaScript (with JQuery):
$("body").on("click", "#divTester", function()
{
$("#divTester").css("color", "blue");
});
On mousedown will work in combination with a class change.
Remove the .card:hover from the css and replace it with
.card.flip {
transform: rotateY(180deg);
}
Add the button to the html like:
<button id="trigger">Press</button>
Than add JS to change the classes. Here's a jQuery sample instead:
$('#trigger').mousedown(function() {
$('.card').addClass('flip');
}).mouseup(function(){
$('.card').removeClass('flip');
});
This will flip all the images within .card div's with one button press
The will flip back when button is released.
You can use the following to keep the flip with button click:
$('#trigger').click(function() {
$('.card').toggleClass('flip');
});
Related
Is it possible to trigger this rotate function with a click on a button? with :active it's possible to rotate it by clicking on the box. But you will need to keep the button pressed; is it possible to have some kind of toggle function on :active?
Is there any JavaScript to make a box flip?
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
One approach is as below, with comments in the code to explain what's going on:
// here we use document.querySelector() to retrieve the first <button> element
// in the document; we then use EventTarget.addEventListener() to bind the
// anonymous Arrow function as the event-handler for the 'click' event:
document.querySelector('button').addEventListener('click', (e)=>{
// the Event Object ('e') is passed to the function body, we retrieve
// the element to which the function was bound (Event.currentTarget)
// and from there we use Element.closest() to find the closest '.card-wrap'
// element:
e.currentTarget.closest('.card-wrap')
// from there we use Element.querySelector() to find the first (if any)
// flip-box element within that ancestor:
.querySelector('.flip-box')
// and use the Element.classList API to toggle the 'active' class
// on that 'flip-box' element:
.classList.toggle('active');
});
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner,
/* added another selector, so that the
.flip-box-inner element within
.flip-box.active also rotates (is
rotated): */
.flip-box.active .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box, or click the button, below:</h3>
<!-- creating a wrapper element for each 'card' or 'flip-box' in order
to query the DOM more easily to find the relevant .flip-box from
a clicked <button>: -->
<div class="card-wrap">
<!-- insert a <button> with which the user can interact: -->
<button type="button">Toggle the card</button>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
</div>
JS Fiddle demo.
References:
HTML:
<button>.
JavaScript:
Arrow functions.
document.querySelector().
document.querySelectorAll().
Element.classList.
Element.closest().
Element.querySelector().
Element.querySelectorAll().
Event.
EventTarget.addEventListener().
This can be done without Javascript:
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.check:checked ~ .flip-box .flip-box-inner {
transform: rotateY(180deg);
background-color: black;
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
/* Here is the code I added */
a.click-button {
background: steelblue;
padding: 5px;
border-radius: 5px;
color: white;
margin-bottom: 20px;
display: inline-block;
}
input[type="checkbox" i] {
display: none;
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<!-- add a checkbox -->
<input type="checkbox" class="check" id="checked">
<label class="menu-btn" for="checked">
<a class="click-button">click here</a>
</label>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
As long as you don't care about IE, classList is a well-supported option.
In your CSS file, change the following:
/* old: */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
/* new: */
.toggle .flip-box-inner {
transform: rotateY(180deg);
}
Then create a JavaScript file and add the following to it.
document
.getElementsByClassName('flip-box')[0]
.addEventListener('click', function () {
this.classList.toggle('toggle');
});
Then add the following <script> element to your html file.
<script src="<your JavaScript file name>.js"></script>
Here is the full code snippet:
document
.getElementsByClassName('flip-box')[0]
.addEventListener('click', function () {
this.classList.toggle('toggle');
});
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.toggle .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
Hope this helps.
define a generic .flip class that does a 180deg turn of any element it is assigned to with transform: rotateY(180deg).
add an original state transform: rotateY(0deg) to the class to be flipped (here .flip-box-inner showing the 'front').
Assign a Javascript click event listener to the parent to be clicked (here .flip-box).
have JS toggle the generic .flip class on/off.
UPDATE reply after OP comment
I replaced the snippet Javscript with jQuery syntax doing the same as the initial vanilla Javascript.
/*
jQuery alternative
*/
$('.flip-box').on('click', function() {
$('.flip-box-inner').toggleClass('flip');
});
/* DISABLED ORIGINAL JAVASCRIPT, no jQuery
// Reference to elements concerned
// This can be any parent/child combination
const el1 = document.querySelector(".flip-box"); // parent to be clicked
const el2 = document.querySelector(".flip-box-inner"); // child to be flipped
// Attach listener to parent, toggle child flip
el1.addEventListener('click', () => { el2.classList.toggle('flip') });
*/
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
/* ADDED, original state */
transform: rotateY(0deg);
}
/* CHANGED from '.flip-box:hover .flip-box-inner' to */
.flip { transform: rotateY(180deg) }
/* When toggled 'off' in JS '.flip-box-inner'
will revert back to original state */
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script>
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
I have a pop up modal when the page loads. There are two ways: changing in CSS the opacity to 1 or with jQuery.
.popupmodal{
display: block;
line-height: 250%;
font-size: 2.5vh;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 1;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.popupmodal:target{
opacity: 1;
pointer-events: auto;
}
.popupmodal > div{
height: auto;
width: 50%;
position: relative;
margin: 10% auto;
padding: 3% 2% 3% 2%;
background: #fff;
border-radius: 1%;
}
.popup-modal-quest > div{
background-color: transparent;
margin: 1% auto;
height: 60vh;
}
}
<!-- just to be sure the modal is working -->
<!-- You have a new quest. Click here to see. -->
<p>TRY TO SELECT THIS TEXT</p>
<div id="quest-modal" class="popupmodal popup-modal-quest">
<div class="modal-quest">
<img src="img/wooden-warning.png">
<div class="btns-quest">
<input type="button" value="Accept quest" class="btn-quest">
<input type="button" value="Do not accept quest" class="btn-quest">
</div>
</div>
</div>
Both ways make the modal appear when the document loads. However, I can not interact with the inputs inside it. When I click on the button, all the modal and its content become like static.
I started learning JS and jQuery recently, so I would like to know if the solution needs some code of these.
The pointer-events:none setting in your CSS is doing exactly what it's supposed to do - - make it so the mouse pointer does not interact with anything. So, remove that.
Also, the vendor prefixed CSS is not needed as CSS transitions have been standard for almost a decade now.
.popupmodal{
display: block;
line-height: 250%;
font-size: 2.5vh;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 1;
transition: opacity 400ms ease-in;
}
.popupmodal:target{
opacity: 1;
pointer-events: auto;
}
.popupmodal > div{
height: auto;
width: 50%;
position: relative;
margin: 10% auto;
padding: 3% 2% 3% 2%;
background: #fff;
border-radius: 1%;
}
.popup-modal-quest > div{
background-color: transparent;
margin: 1% auto;
height: 60vh;
}
}
<!-- just to be sure the modal is working -->
<!-- You have a new quest. Click here to see. -->
<p>TRY TO SELECT THIS TEXT</p>
<div id="quest-modal" class="popupmodal popup-modal-quest">
<div class="modal-quest">
<img src="img/wooden-warning.png">
<div class="btns-quest">
<input type="button" value="Accept quest" class="btn-quest">
<input type="button" value="Do not accept quest" class="btn-quest">
</div>
</div>
</div>
Remove pointer-events: none; from .popupmodal{}
Add some javascript code to do some stuff when you click the button. Also add id="" to each button.
const acceptBtn = document.getElementById("acceptBtn");
const doNotAcceptBtn = document.getElementById("doNotAcceptBtn");
acceptBtn.addEventListener('click', () => {
/*
when accept button is clicked, do some stuff
*/
});
doNotAcceptBtn.addEventListener('click', () => {
/*
when doNotAcceptBtn is clicked, do some stuff
*/
});
I want to show a popup message when i click on select button like "you have selected this event"
how to do in angular 2?
<button type="button" class="button event-buttons" [disabled]="!owned" style=""(click)="eventSet()">
SELECT
</button>
You can use a structural directive *ngIf to create popup, my example:
<button type="button"(click)="popup = true">
SELECT
</button>
<div class="overlay" *ngIf="popup">
<div class="popup">
<h2>Here i am</h2>
<a class="close" (click)="popup = false">×</a>
<div class="content">
you have selected this event
</div>
</div>
</div>
some styles:
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
cursor: pointer;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.popup{
width: 70%;
}
}
https://stackblitz.com/edit/angular-g4rdha?file=src%2Fapp%2Fapp.component.ts
Hope it helps!
Add Onclick event to parent page. For popup just add a modal create with reference of a seperate page in order to customize pop up seperately.
let test= this.modalCtrl.create('popuppage',
{
message: 'message',
(Enter all parameters you want to pass to the pop up page)
}
,{cssClass:'settings-modal'});
test.present();
Now you can create your pop up page named 'popuppage'as you require
May be you are looking for toaster in the screen which you can add to your project by installing third party UI library like primeNg and it is good to use.
Please look it here.
https://primefaces.org/primeng/#/toast
I have a simple leaflet map with a GeoJSON point layer.
I want an infobox instead of the regular pop-up, so, in HTML, I have created the following:
<div id="panoutitlu" class="info-container" style="z-index: 601">
<div class="info-title">
<h1>Selectați ceva</h1>
</div>
<div class="info-body" id="corp">
<div class="info-content-container">
<div class="info-content" id="panoutext"></div>
</div>
</div>
</div>
When clicking on one of the points in the layer, the div named info-title gets populated with an attribute from the GeoJSON, as follows:
function onEachFeature(feature, layer) {
layer.on({
click: function populate() {
document.getElementById('panoutitlu').innerHTML = feature.properties.adresa;
});
The thing I can't get to work is how to expand the div when the info-title is clicked, similar to this map. I want to recreate the exact behaviour, including the smooth transition. That's why I took the CSS from it and changed a few sizes and fonts:
.info-title {
height: 80px;
font-family: 'Fira Sans Condensed';
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
color: #FFF;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.info-content {
padding: 0 8% 24px 8%;
margin: 0 auto;
background: #385c54;
overflow-y: scroll;
font-family: 'Fira Sans Condensed';
font-size: 1rem;
line-height: 1.25em;
font-weight: 300;
}
.info-container {
position: absolute;
overflow-y: hidden;
bottom: 0;
right: 250px;
z-index: 1000;
background: #385c54;
cursor: pointer;
width: 300px;
height: 60vh;
color: #FFF;
font-family: 'Fira Sans Condensed';
font-size: 18px;
transition: all 0.4s ease-in-out;
transform: translateY(calc(100% - 80px));
}
.info-container.info-active {
transform: translateY(0);
}
.info-body {
margin-top: 80px;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
height: 80%;
}
In JavaScript, I tried adding an event listener:
document.getElementById('panoutitlu').addEventListener("click", toggle('info-active') );
but it didn't work.
Hopefully, somebody can help.
The solution was indeed an Event Listener:
document.getElementById('panoutitlu').addEventListener("click", function slide() {this.classList.toggle('info-active');}
I am making a basic div for a social navigation bar that runs vertical along the left side of the webpage.
I am trying to make each individual div slide right to a width: 64px; when you hover over it, and return to normal width when your mouse leaves it.
<div class="social-buttons">
<div class="social-btn"><b>f</b></div>
<div class="social-btn"><b>G+</b></div>
<div class="social-btn"><b>T</b></div>
<div class="social-btn"><b>E+</b></div>
</div><!-- end of social-buttons -->
.social-btn {
display: block;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size: 16px;
background: #206999;
text-align: center;
padding-top: 16px;
padding-bottom: 16px;
width: 48px;
height: 48px;
text-decoration: none;
}
Add this to your CSS:
.social-btn:hover {
width: 64px;
transition-property: width;
transition-duration: 1s;
}
.social-btn {
transition-property: width;
transition-duration: 1s;
}
Add on hover element on CSS like this
.social-btn {
display: block;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size: 16px;
background: #206999;
text-align: center;
padding-top: 16px;
padding-bottom: 16px;
width: 48px;
height: 48px;
text-decoration: none;
}
.social-btn:hover {
width: 64px;
}
Here is Live Demo.
Are you looking to animate the width using JQuery like this? https://jsfiddle.net/1nL9mq69/2/
$(document).ready(function() {
$(".social-btn").on("mouseenter", function() {
$(this).animate({"width":"64px"}, 200);
});
$(".social-btn").on("mouseleave", function() {
$(this).stop();
$(this).animate({"width":"48px"}, 200);
});
});
The 200 parameter controls how long, in milliseconds, the animation runs for, so you can change that to make it slide out more quickly or slowly.