So, I have an image in the middle of the page (where I want it to remain) and while I hold the LMB I want it to get a little bit smaller, then go back to its previous size when released.
Below the code:
$(document).ready(function() {
$("#banana").mousedown(function() {
$("#banana").css("height","70%");
});
$("#banana").mouseup(function() {
$("#banana").css("height","100%");
});
});
.centered {
text-align: center;
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id = "banana" class = "centered">
<img src="https://via.placeholder.com/150" alt="banana.png">
</div>
</body>
I tried get that target using jQuery (but the position of the image changes and it is not centred anymore).
Thanks in advance!
This is very easy to do with CSS only, using the :active pseudo-selector (that corresponds to "mousedown"). Also why not use Flex for easy centering.
.container {
border: #00f solid 1px;
width: 250px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
.container img {
transition: all 0.3s ease-in-out;
transform: scale(1);
}
.container img:active {
transform: scale(0.8);
}
<div class="container"><img src="https://via.placeholder.com/150"/></div>
Try
transform: scale(0.7)
instead of height. It will be centered and it's more efficient (GPU usage)
place the LMB on the image not the div and use width not height
$(document).ready(function() {
$("#pic").mousedown(function() {
$("#pic").css("width","70%");
});
$("#pic").mouseup(function() {
$("#pic").css("width","100%");
});
});
.centered {
text-align: center;
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id = "banana" class = "centered">
<img id='pic' src="https://picsum.photos/300" alt="banana.png">
</div>
</body>
Add and remove a class to your body and transform your image indirectly:
$(document).ready(function() {
const body = $('body');
const cssClassClicked = 'lmb-clicked';
body
.mousedown(function() {
body.toggleClass(cssClassClicked)
})
.mouseup(function() {
body.toggleClass(cssClassClicked)
});
});
body {
min-height: 100vh;
background: #eee;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.img {
display: block;
transition: transform 300ms ease-in-out;
will-change: transform;
}
.lmb-clicked .img {
transform: scale(0.9);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="img" src="https://picsum.photos/id/1/400/300">
This should work:
$(document).ready(function() {
$("#banana").mousedown(function() {
$("#banana").css("height","50vh");
});
$("#banana").mouseup(function() {
$("#banana").css("height","100vh");
});
});
.centered {
text-align: center;
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<body>
<div class = "centered">
<img id = "banana" src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" alt="banana.png">
</div>
</body>
Related
I have this cool html css card below, where I now need to have that if you click it, it shows a lightbox with multiple photos. I have tried multiple things before, but the problem is everything gets messed up when you do light box.
this is the code for the picture card alone. and this is the link to see it with me trying the light box. https://codepen.io/gianlucaas/pen/rNzBKVz
what am i doing wrong?
function myFunction() {
var modelName = "Angela"
var height = 'My name is Angela'
var myImage = "https://images.unsplash.com/photo-1633594708103-e6e41891b679?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1040&q=80"
document.getElementById("myText").innerHTML = modelName;
document.getElementById("myHeight").innerHTML = height;
document.getElementById("myImg").src = myImage;
}
.card-content {
position: relative;
overflow: hidden;
}
.card-content-details {
padding: 10px;
}
.card-content-details {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 15px;
}
.card-content-details,
.card-content-overlay {
box-sizing: border-box;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.card-content-details {
transform: translateX(1000px);
transition-duration: 800ms;
z-index: 1;
}
.card-content-overlay {
background-color: #02010100;
transition-duration: 800ms;
transition-property: transform, opacity, background-color;
transform: translateX(-1000px);
z-index: 1;
}
.card-content-image {
transition-duration: 800ms;
width: 100%;
max-width: 100%;
}
.card-content:hover .card-content-image {
transform: scale(1.1);
}
.card-content:hover .card-content-overlay,
.card-content:hover .card-content-details {
transform: translateY(0) translateX(0);
opacity: 1;
}
.card-content:hover .card-content-overlay {
background-color: transparent;
background-image: linear-gradient(200deg, #00000000 81%, #000000ba 14%);
}
.card-content-title {
color: #fff;
font-size: 20px;
text-transform: uppercase;
margin: 0 0 10px;
}
.card-content-text {
color: #fff;
font-size: 16px;
margin: 0;
}
<body onload="myFunction()">
<div class="card-content">
<a href="#" target="_blank">
<div class="card-content-overlay"></div>
<img class="card-content-image" src="" id="myImg">
<div class="card-content-details">
<h4 class="card-content-title" id="myText"></h4>
<p class="card-content-text" id="myHeight"></p>
</div>
</a>
</div>
</body>
You can begin by creating a html container on your file of your lightbox (which will be hidden) with inside the buttons (prev, next, close) and the (empty for now).
When you launch the lightbox (with a js function that you'll have to create) you'll be display:block this html container (position: fixed; in CSS and with the highest z-index)
There are similar questions like this and this, but don't address this situation.
The goal is to slide a menu onto the screen with CSS translation when its parent is shown. However, showing the parent then applying the CSS class to trigger the translation happens instantly instead of over time. Effectively, there's no animation.
JavaScript could be used to slide the child element onto the screen, but the goal is to keep as much of the animation logic in CSS.
Setting the opacity to 0 doesn't work because we need the menu and its parent to not take any space or be part of the layout.
Codepen: https://codepen.io/Crashalot/pen/YzXmjYj
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
$("#button").on("click", function() {
toggleSidebar();
});
body {
margin: 0;
padding: 0;
}
#button {
position: fixed;
top: 0;
left: 200px;
width: 150px;
height: 50px;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
z-index: 8;
cursor: pointer;
}
#sidebar {
display: none;
}
#sidebar.show {
display: block;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transition: 0.3s ease-in-out;
transform: translate(-100%);
}
#sidebar.show .menuBox {
transform: translate(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<div id="button">CLICK ME</div>
You can't animate display: none; Set opacity to 0 and then 1 on toggle class. Here's the CodePen for you. ;)
I added a button for the toggle event. Let me know if you need any more help!
enter link description here
$(".btn").on("click", toggleSidebar);
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
body {
margin: 0;
padding: 0;
}
#sidebar {
opacity: 0;
transition: all 300ms ease-in-out;
}
#sidebar.show {
display: block;
opacity: 1;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transition: 300ms ease-in-out;
-webkit-transform: translate(-100%);
}
#sidebar.show .menuBox {
-webkit-transform: translate(0);
}
.btn {
position: absolute;
top: 10px;
left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<button class="btn">Click</button>
You need to consider an animation. The animation will run automatically when the element appear on the screen
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
$("#button").on("click", function() {
toggleSidebar();
});
body {
margin: 0;
padding: 0;
}
#button {
position: fixed;
top: 0;
left: 200px;
width: 150px;
height: 50px;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
z-index: 8;
cursor: pointer;
}
#sidebar {
display: none;
}
#sidebar.show {
display: block;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transform: translate(-100%);
animation: show 0.3s ease-in-out forwards;
}
#keyframes show {
to {
transform: translate(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<div id="button">CLICK ME</div>
updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants with display other than none. ref
I think you should define the action for your function called. When load page or on click like below:
$(document).ready(function () {
$('#sidebar').on('click', function () {
$(this).toggleClass('show');
});
});
Im learning webdev and in one the projects im working on i have to build a flip-card using css.
I have done it and its working fine when i flip it on hover. I want to be able to flip it on click but when i click it the back side is not showing.
Can anyone point out what am i doing wrong?
Thanks
Codepen Here CODEPEN
HTML
<section class="container">
<div class="card">
<div class="card__inner ">
<div class="card__side card1 card__side-front">FRONT</div>
<div class="card__side card1 card__side-back">BACK</div>
</div>
</div>
</section>
CSS
.container{
display: flex;
height:auto;
justify-content: space-around;
position: relative;
align-items: center;
}
.card{
perspective: 150rem;
position: relative;
height: 20rem;
width:10rem;
&__inner{
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 20rem;
}
&__side {
position: absolute;
top: 0;
left: 0;
height: 20rem;
width:10rem;
transition: all 0.8s ease;
backface-visibility: hidden;
border-radius: 0.5rem;
box-shadow: 0 8px 6px -6px black;
&-front{
background: peru;
}
&-back{
background: orchid;
transform: rotateY(180deg);
}
}
// &:hover &__side-front{
// transform: rotateY(180deg);
// }
// &:hover &__side-back{
// transform: rotateY(0deg);
// }
.flipped {
transform: rotateY(180deg);
}
}
JS
$(".card__side").click(function(){
$(this).addClass("flipped");
});
Thanks in advance
check out this https://codepen.io/jasinth5/pen/GxBqEd
i have removed transform from class back,added flipped class to BACK and applied this js into this
$(".card__side").click(function(){
$("div.flipped").removeClass('flipped');
$(this).addClass("flipped");
});
I'm creating a tab interface whereby the active tab has a rotate transformation which allows a preview of the next tab to be visible. Clicking on a button in the preview area will open the next tab.
This is working fine in all browsers apart from IE11. See snippet below.
$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
})
* {
margin: 0;
padding: 0
}
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.container .tab {
position: absolute;
top: 0;
left: 0;
width: 185%;
height: 140%;
transform: translateX(-50%) rotate(-25deg);
transform-origin: 50% 0;
overflow: hidden;
}
.container .tab .content {
transform: rotate(25deg);
transform-origin: 0 0;
margin-left: 50%;
position: relative;
height: 75%;
width: 55%;
}
.container .tab-1 {
z-index: 2;
}
.container .tab-1 .content {
background-color: red;
}
.container .tab-2 {
z-index: 1;
height: 200%;
}
.container .tab-2 .content {
background-color: green;
}
.container .tab-2 button {
position: absolute;
bottom: 37%;
right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content"></div>
</div>
<div class="tab tab-2">
<div class="content">
<button type="button">
Click me
</button>
</div>
</div>
</div>
I think the problem is that although IE visibly performs the rotation, the original bounding area itself is not rotated, thus the click doesn't get applied on the background element.
Anybody got any ideas how I can fix this? jsfiddle here: https://jsfiddle.net/bmq2e2ae/1/
For this to work in IE you can add pointer-events: none for .tab .content and bring back pointer-events to initial state for children of .tab .content.
Demo:
$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
})
* {
margin: 0;
padding: 0
}
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.container .tab {
position: absolute;
top: 0;
left: 0;
width: 185%;
height: 140%;
transform: translateX(-50%) rotate(-25deg);
transform-origin: 50% 0;
overflow: hidden;
}
.container .tab .content {
transform: rotate(25deg);
transform-origin: 0 0;
margin-left: 50%;
position: relative;
height: 75%;
width: 55%;
}
.container .tab-1 {
z-index: 2;
}
.container .tab-1 .content {
background-color: red;
}
.container .tab-2 {
z-index: 1;
height: 200%;
}
.container .tab-2 .content {
background-color: green;
}
.container .tab-2 button {
position: absolute;
bottom: 37%;
right: 20px;
}
/* IE Hack: disable pointer-events */
.container .tab .content {
pointer-events: none;
}
/* IE Hack: enable pointer-events for descendants */
.container .tab .content > * {
pointer-events: initial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content"></div>
</div>
<div class="tab tab-2">
<div class="content">
<button type="button">
Click me
</button>
</div>
</div>
</div>
Also you wrap this hack in media query browser hack to be evaluated only in IE
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE Hack: disable pointer-events */
.container .tab .content {
pointer-events: none;
}
/* IE Hack: enable pointer-events for descendants */
.container .tab .content > * {
pointer-events: initial;
}
}
When you use CSS3 TRANSFORMS you need to use different tags for diffeent browser.
You need to use like mentioned below.
-webkit-transform: rotate(-25deg) translateX(-50%);
-webkit-transform-origin: 50% 0%;
-moz-transform: rotate(-25deg) translateX(-50%);
-moz-transform-origin: 50% 0%;
-o-transform: rotate(-25deg) translateX(-50%);
-o-transform-origin: 50% 0%;
-ms-transform: rotate(-25deg) translateX(-50%);
-ms-transform-origin: 50% 0%;
transform: rotate(-25deg) translateX(-50%);
transform-origin: 50% 0%;
This will work and supported in below mentioned browser versions.
Chrome : 4.0+
Firefox : 3.5+
Safari : 3.1+
IE : 9.0+
Opera : 10.5+
1st Example from requirement : Instead of rotating both the div you can rotate only second div and it will work. Please check below solution.
$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
});
* {
margin: 0;
padding: 0
}
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.container .tab {
width: 185%;
height: 140%;
overflow: hidden;
}
.container .tab .content {
position: relative;
height: 100%;
width: 100%;
}
.container .tab-1 {
z-index: 2;
width: 100%;
}
.container .tab-1 .content {
background-color: red;
}
.container .tab-2 {
z-index: 3;
transform: translateX(-40%) rotate(-25deg);
transform-origin: 50% 0;
}
.container .tab-2 .content {
background-color: green;
}
.container .tab-2 button {
position: absolute;
right: 60px;
top:20px;
transform: translateX(50%) rotate(25deg);
transform-origin: 50% 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content">
</div>
</div>
<div class="tab tab-2">
<div class="content">
<button type="button">
Click me
</button>
</div>
</div>
</div>
2nd Example from requirement.: Within one div you can achieve this. Please check below.
$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
});
* {
margin: 0;
padding: 0
}
.container {
position: relative;
overflow: hidden;
}
.container .tab{
z-index: 2;
margin-bottom:10px;
position: relative;
display: block;
width: 400px;
height: 200px;
background-color: red;
overflow: hidden;
}
.container .content {
z-index: 62;
width: 200px;
height: 120px;
background-color: green;
position: absolute;
bottom: -72px;
right: -35px;
transform: rotate(-25deg) ;
-webkit-transform: rotate(-25deg) ;
-moz-transform: rotate(-25deg) ;
-o-transform: rotate(-25deg) ;
-ms-transform: rotate(-25deg) ;
}
.container button{
border:1px solid #eee;
}
.container a {
color:#FFF;
}
.container button,
.container a {
position: absolute;
display: block;
margin-right: 30px;
right: 15px;
bottom: 80px;
transform: rotate(25deg);
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
cursor: pointer;
}
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="tab tab-1">
Tab With Link
<div class="content">
Link
</div>
</div>
<div class="tab tab-2">
Tab With Button
<div class="content">
<button id="check_btn" type="button">Click me</button>
</div>
</div>
<div class="tab tab-3">
Tab Without Link or Button
<div class="content">
</div>
</div>
<div class="tab tab-4">
Only Tab with no Green Area
</div>
</div>
</body>
</html>
This will help you. Let me know if it not works for you.
The parent element .tab-2 of the button has a lower z-index set then the other .tab-1. So in IE .tab-1 is covering everything, when trying to click even though not visibility.
Take the button element out of the .tab-2 .content elements and place after both inside the container. Then set position:absolute and a higher z-index then both the .container .tab-2 and .container .tab-1. The re-position.
Note: You have to scroll in example below to see button due to elements height.
JSFiddle Demo
$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
})
* {
margin: 0;
padding: 0
}
.container {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
.container .tab {
position: absolute;
top: 0;
left: 0;
width: 185%;
height: 140%;
transform: translateX(-50%) rotate(-25deg);
transform-origin: 50% 0;
overflow: hidden;
}
.container .tab .content {
transform: rotate(25deg);
transform-origin: 0 0;
margin-left: 50%;
position: relative;
height: 75%;
width: 55%;
}
.container .tab-1 {
z-index: 2;
}
.container .tab-1 .content {
background-color: red;
}
.container .tab-2 {
z-index: 1;
height: 200%;
}
.container .tab-2 .content {
background-color: green;
}
.container button {
position: absolute;
bottom: 5%;
right: 10px;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content">Tab 1</div>
</div>
<div class="tab tab-2">
<div class="content">Tab 2</div>
</div>
<button type="button">Click me</button>
</div>
Instead of rotating the first tab, you could rotate the second one (the one with the button). It would allow to keep that second tab on top of the first one. You can see the result in this jsfiddle.
$(document).ready(function() {
$('button').click(function(e) {
e.stopPropagation();
alert('Button was clicked');
});
$('.tab-1').click(function() {
alert('Tab1 was clicked');
});
$('.tab-2').click(function() {
alert('Tab2 was clicked');
});
})
* {
margin: 0;
padding: 0
}
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.container .tab {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container .tab .content {
position: relative;
height: 100%;
background-color: red;
}
.container .tab-2 {
transform: translateX(63%) translateY(100%) rotate(-25deg);
transform-origin: 0% 0%;
overflow: hidden;
}
.container .tab-2 .content {
background-color: green;
transform: rotate(25deg) translateX(-63%) translateY(-100%);
transform-origin: 0% 0%;
}
.container .tab-2 button {
position: absolute;
bottom: 4%;
right: 3%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content">
Tab 1
</div>
</div>
<div class="tab tab-2">
<div class="content">
Tab 2
<button type="button">
Click me
</button>
</div>
</div>
</div>
I want the contents of a div to slide down from the top. All of the methods I have tried seem to 'reveal' the contents which is almost static. I want to slide down from off the edge of the screen and push the content too. How would I do this? Jsfiddle here
html
<div id="dolphin">
<div id="lizard"><img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg"></div>
</div>
<div id="content"></div>
css
#lizard {
padding:50px;
display:none;
}
#dolphin {
position: fixed;
width: 100%;
background-color: green;
}
#content {
height: 2000px;
}
js
$(document).ready(function(){
$("#dolphin").click(function(){
$("#lizard").stop().slideToggle("fast");
});
});
You can move things with negative margins to create a slide effect instead of a reveal effect.
This is a very rough example but you can see how it's originally hidden with margin-top: -100%; and revealed by setting margin-top to 0;
$(".slide-button").click(function(){
$(".lizard").toggleClass('slideit');
});
html, body {margin: 0; padding: 0;}
div {
text-align: center;
}
.slide-button {
position: fixed;
top: 0; right: 0; left: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
height: 20px;
background-color: green;
cursor: pointer;
}
.lizard {
width: 100%;
padding-top: 20px;
overflow: hidden;
background-color: green;
transition: all 0.5s ease;
}
.lizard img {
margin-top: -100%;
transition: all 0.5s ease;
opacity: 0;
}
.lizard.slideit img {
margin-top: 10px;
opacity: 1;
}
.content {
height: 1000px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-button">slide it</div>
<div class="lizard">
<img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg">
</div>
<div class="content"></div>
fiddle
https://jsfiddle.net/Hastig/qjfgsrL0/1/