I have a modal containing one or more images and these images can rotate.
My issue is when image rotate it overflow the parent div. I wish to have the container to change dimension to always fit the image (images).
I created a codepen to have a look.
I tried to change many and many css properties without success...
Jade:
.overlay
.fake-modal
.content
img.img(src='http://lorempixel.com/output/abstract-q-c-300-200-2.jpg')
.wrapper
button.left rotate left
button.right rotate right
Less:
.overlay {
background-color: rgba(0, 0, 0, .7);
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
.fake-modal {
background-color: #fff;
padding: 10px;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: auto;
height: auto;
z-index: 1;
.content {
position: relative;
.wrapper {
position: absolute;
top: 10px;
right: 10px;
}
}
}
js:
var angle = 0;
var btnLeft = $('.left');
var btnRight = $('.right');
btnLeft.on('click', function (e) {
e.preventDefault();
angle = angle - 90;
rotate(angle);
});
btnRight.on('click', function (e) {
e.preventDefault();
angle = angle + 90;
rotate(angle);
});
function rotate(rotateDegrees) {
var r = 'rotate(' + rotateDegrees + 'deg)';
var img = $('.img');
img.css({
'-moz-transform': r,
'-webkit-transform': r,
'-o-transform': r,
'-ms-transform': r
});
}
Solved using getBoundingClientRect()
Codepen: http://codepen.io/anon/pen/BNENge
you may set fixed width and height to div contaning image.
http://codepen.io/anon/pen/XbQXJP
`.overlay {
background-color: rgba(0, 0, 0, .7);
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
.fake-modal {
background-color: #fff;
padding: 10px;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: auto;
height: auto;
z-index: 1;
.content {
position: relative;
.imgContainer {
position: relative;
width: 300px;
height: 200px;
.img {
position: absolute;
margin-left: -150px;
margin-top: -100px;
top: 50%;
left: 50%;
}
}
.wrapper {
position: absolute;
top: 10px;
right: 10px;
}
}
}`
Related
I have created a simple cube in CSS and would like to be able to rotate it around with click and drag to display text on the sides etc, but every time you click and drag, it resets to the original position. How could I store the last rotated angle to be able to ensure it starts where it left off? I appreciate any help. Here is the code:
// Select the Cube
const cube = document.querySelector(".cube");
const body = document.querySelector("body");
// Get the x, y position when click
window.addEventListener("mousedown", function(e) {
const x = e.clientX;
const y = e.clientY;
// rotate
window.addEventListener("mousemove", moveRotate);
function moveRotate(e) {
cube.style.transform = `
rotateX(${-(e.clientY - y) / 2}deg)
rotateY(${(e.clientX - x) / 2}deg)`;
body.style.cursor = "grabbing";
}
window.addEventListener("mouseup", function() {
window.removeEventListener("mousemove", moveRotate);
body.style.cursor = "context-menu";
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(0, 0, 0);
}
.cube {
position: absolute;
width: 300px;
height: 300px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.cube div span {
color: azure;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, rgb(0, 255, 0));
transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
}
.top {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #222;
transform: rotateX(90deg) translateZ(150px);
}
.top div {
color: white;
position: absolute;
top: 45%;
left: 35%
}
.bottom {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: rgba(0, 255, 0);
transform: rotateX(90deg) translateZ(-150px);
}
<body>
<div class="cube">
<div class="top"></div>
<div class="bottom"></div>
<div class="sides">
<span class=front style="--i:0;">0</span>
<span class=left style="--i:1;">1</span>
<span class=back style="--i:2;">2</span>
<span class=right style="--i:3;">3</span>
</div>
</div>
</body>
You need to store the last calculated rotation value on the mouseUp event. Then add it to the value of the new calculated rotation in the mouseMove listener. The initial value must be set to zero outside both events.
// Select the Cube
const cube = document.querySelector(".cube");
const body = document.querySelector("body");
let last_x = 0,
last_y = 0
// Get the x, y position when click
window.addEventListener("mousedown", function (e)
{
const x = e.clientX;
const y = e.clientY;
let new_x = 0,
new_y = 0;
// rotate
window.addEventListener("mousemove", moveRotate);
function moveRotate(e)
{
new_x = ((e.clientX - x) / 2) + last_x
new_y = (-(e.clientY - y) / 2) + last_y
cube.style.transform =`
rotateX(${new_y}deg)
rotateY(${new_x}deg)`;
body.style.cursor = "grabbing";
}
window.addEventListener("mouseup",function ()
{
last_x = new_x
last_y = new_y
window.removeEventListener("mousemove", moveRotate);
body.style.cursor = "context-menu";
});
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(0, 0, 0);
}
.cube
{
position: absolute;
width: 300px;
height: 300px;
transform-style: preserve-3d;
}
.cube div
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.cube div span
{
color:azure;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, rgb(0, 255, 0));
transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
}
.top
{
position: absolute;
top:0;
left: 0;
width: 300px;
height: 300px;
background: #222;
transform: rotateX(90deg) translateZ(150px);
}
.top div
{
color: white;
position: absolute;
top: 45%;
left: 35%
}
.bottom
{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background:rgba(0, 255,0);
transform: rotateX(90deg) translateZ(-150px);
}
<div class="cube">
<div class="top"></div>
<div class="bottom"></div>
<div class="sides">
<span class=front style="--i:0;">0</span>
<span class=left style="--i:1;">1</span>
<span class=back style="--i:2;">2</span>
<span class=right style="--i:3;">3</span>
</div>
</div>
I am working on a project of mine and was playing around with the idea to make a custom cursor for my webpage.
Unfortunately, it seems that I can't get it to work.
Can someone tell me what I am doing wrong here?
I am using simple HTML, CSS and Javascript.
I think it is the Javascript that's not working, but I have tried to use a debugger but no luck.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
cursor: none;
}
body {
background: #000;
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.custom-cursor {
position: fixed;
top: -18px;
left: -18px;
display: block;
width: 120px;
height: 120px;
pointer-events: none;
will-change: transform;
z-index: 998;
-webkit-transform: matrix(1, 0, 0, 1, -100, -100);
transform: matrix(1, 0, 0, 1, -100, -100);
opacity: 0;
mix-blend-mode: difference;
transition: transform 0.15s cubic-bezier(0, 0.89, 0.49, 0.92),
opacity 0.4s ease;
}
.custom-cursor .cursor {
transform: scale(0.45);
transition: transform 0.5s ease;
will-change: transform;
width: 120px;
height: 120px;
float: left;
border-radius: 100%;
margin-top: -40px;
margin-left: -40px;
background: #fff;
}
.custom-cursor.custom-cursor-active .cursor {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.custom-cursor.custom-cursor-active-img {
z-index: 1010;
}
.custom-cursor.custom-cursor-active-img .cursor {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
background: #ff0;
}
body:hover .custom-cursor {
opacity: 1;
}
#media screen and (max-width: 1200px) {
.custom-cursor {
display: none !important;
}
}
.center {
padding: 30vh;
text-align: center;
width: 100%;
position: relative;
z-index: 9999;
}
.content {
padding: 1em;
font-family: sans-serif;
font-size: 3em;
background: #000;
min-height: 100vh;
}
.content::before {
position: fixed;
background: #ff0;
mix-blend-mode: multiply;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
pointer-events: none;
}
.img-wrapper {
max-width: 450px;
padding: 100px 0;
}
.img {
position: relative;
z-index: 1000;
}
</style>
</head>
<body>
<div class="content">
<div class="custom-cursor" data-custom-cursor>
<div class="cursor"></div>
</div>
<h1>hello world</h1>
link 0 / link 1 /
link 2 / link 3 /
link 4 / link 5 /
link 6 / link 7 /
link 8 .
</div>
<script>
const cursor = document.querySelector(".cursor");
document.addEventListener("mousemove", (e) => {
cursor.setAttribute(
"style",
"top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;"
);
});
var $c = $("[data-custom-cursor]");
var $h = $("a, button");
var $i = $("img");
$(window).on("mousemove", function (e) {
x = e.clientX;
y = e.clientY;
console.log(x, y);
$c.css("transform", "matrix(1, 0, 0, 1, " + x + "," + y + ")");
});
$h.on("mouseenter", function (e) {
$c.addClass("custom-cursor-active");
});
$h.on("mouseleave", function (e) {
$c.removeClass("custom-cursor-active");
});
$i.on("mouseenter", function (e) {
$c.addClass("custom-cursor-active-img");
});
$i.on("mouseleave", function (e) {
$c.removeClass("custom-cursor-active-img");
});
//# sourceURL=pen.js
</script>
</body>
</html>
The code seems to work (at least, it does things though I don't know if they are the right things) as long as jquery is also loaded.
<html lang="en"><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
cursor: none;
}
body {
background: #000;
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.custom-cursor {
position: fixed;
top: -18px;
left: -18px;
display: block;
width: 120px;
height: 120px;
pointer-events: none;
will-change: transform;
z-index: 998;
-webkit-transform: matrix(1, 0, 0, 1, -100, -100);
transform: matrix(1, 0, 0, 1, -100, -100);
opacity: 0;
mix-blend-mode: difference;
transition: transform 0.15s cubic-bezier(0, 0.89, 0.49, 0.92),
opacity 0.4s ease;
}
.custom-cursor .cursor {
transform: scale(0.45);
transition: transform 0.5s ease;
will-change: transform;
width: 120px;
height: 120px;
float: left;
border-radius: 100%;
margin-top: -40px;
margin-left: -40px;
background: #fff;
}
.custom-cursor.custom-cursor-active .cursor {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.custom-cursor.custom-cursor-active-img {
z-index: 1010;
}
.custom-cursor.custom-cursor-active-img .cursor {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
background: #ff0;
}
body:hover .custom-cursor {
opacity: 1;
}
#media screen and (max-width: 1200px) {
.custom-cursor {
display: none !important;
}
}
.center {
padding: 30vh;
text-align: center;
width: 100%;
position: relative;
z-index: 9999;
}
.content {
padding: 1em;
font-family: sans-serif;
font-size: 3em;
background: #000;
min-height: 100vh;
}
.content::before {
position: fixed;
background: #ff0;
mix-blend-mode: multiply;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
pointer-events: none;
}
.img-wrapper {
max-width: 450px;
padding: 100px 0;
}
.img {
position: relative;
z-index: 1000;
}
</style>
</head>
<body>
<div class="content">
<div class="custom-cursor" data-custom-cursor="" style="transform: matrix(1, 0, 0, 1, 1128, 590);">
<div class="cursor" style="top: 596px; left: 1118px;"></div>
</div>
<h1>hello world</h1>
link 0 / link 1 /
link 2 / link 3 /
link 4 / link 5 /
link 6 / link 7 /
link 8 .
</div>
<script>
const cursor = document.querySelector(".cursor");
document.addEventListener("mousemove", (e) => {
cursor.setAttribute(
"style",
"top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;"
);
});
var $c = $("[data-custom-cursor]");
var $h = $("a, button");
var $i = $("img");
$(window).on("mousemove", function (e) {
x = e.clientX;
y = e.clientY;
console.log(x, y);
$c.css("transform", "matrix(1, 0, 0, 1, " + x + "," + y + ")");
});
$h.on("mouseenter", function (e) {
$c.addClass("custom-cursor-active");
});
$h.on("mouseleave", function (e) {
$c.removeClass("custom-cursor-active");
});
$i.on("mouseenter", function (e) {
$c.addClass("custom-cursor-active-img");
});
$i.on("mouseleave", function (e) {
$c.removeClass("custom-cursor-active-img");
});
//# sourceURL=pen.js
</script>
</body></html>
Note: run the snippet and select full screen mode
How to detect top right bottom left screen area JavaScript? I have four arrow for slider but I wanna display only when mouse hover on particular area.
$('.container').mousemove(function (e) {
if (e.clientY < $('.container').height() / 2) {
console.log('top');
} else {
console.log('bottom');
}
if (e.client X < $('.container').width() / 2) {
console.log('left');
} else {
console.log('right');
}
});
Would you consider a CSS :hover suggestion? It may be simpler. Added font awesome arrows as example.
html,
body {
height: 100%;
width: 100%;
}
.top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: lightgray;
}
.left {
position: absolute;
top: 40px;
left: 0;
bottom: 40px;
width: 40px;
background: lightgray;
}
.right {
position: absolute;
top: 40px;
right: 0;
bottom: 40px;
width: 40px;
background: lightgray;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 40px;
background: lightgray;
}
.top:hover,
.left:hover,
.right:hover,
.bottom:hover {
cursor: pointer;
background: gray;
}
.top:hover i,
.left:hover i,
.right:hover i,
.bottom:hover i {
display: block;
}
i.fa {
display: none;
text-align: center;
line-height: 40px;
font-size: 24px;
}
i.fa.fa-arrow-right,
i.fa.fa-arrow-left {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="top"><i class="fa fa-arrow-up"></i></div>
<div class="left"><i class="fa fa-arrow-left"></i></div>
<div class="right"><i class="fa fa-arrow-right"></i></div>
<div class="bottom"><i class="fa fa-arrow-down"></i></div>
// define the rectangular areas
var areas = {
top: [0, 0, 500, 100], // [startX, startY, endX, endY]
left: [0, 0, 100, 500],
right: [100, 0, 500, 500],
bottom: [0, 400, 500, 500]
};
function getArea(x, y) {
for (var key in areas) {
var area = areas[key];
if (x <= area[0] && x >= area[2] && y <= area[1] && y >= area[3]) return key;
}
return null;
}
$('.container').mousemove(function (e) {
console.clear && console.clear();
console.log(getArea(e.clientX, e.clientY));
});
i have a circle and i am showing some text in the middle as demonstrated in the fiddle(JSFIDDLE http://jsfiddle.net/874jgh4v/2/) My requirement is this
I need to animate the outer white border for percentage for example if the percentage is 50% then i need to show that border only around half the circle
I need to show that percentage value on hower for example the text 50% should be shown only on hower preferably with some animation.
.wrapper{padding:30px;}
.circle{
border-radius: 50%;
background:#32a500;
box-shadow: 0px 0px 0px 16px #f1f1f1;
border: 16px solid #f9f9f9;
width:220px;
height:220px;
box-sizing:border-box;
}
.circle:hover {
background:red;
}
<div class="wrapper">
<div class="circle">
<p>Total ROE's</p>
<p>300</p>
<p>70%</p>
</div>
</div>
Any help would be appreciated! Also i would prefer to do this without external libraries , the percentages should support decimal points upto two points.
Try this:
Html
<span class='Progress'>
<div class="Bar">
<div class="Outer">
<div class="Fill"></div>
</div>
<div class="Draw"></div>
<div class="Status"><span></span></div>
</div>
</span>
CSS
.Progress {
position: absolute;
left: 25%;
bottom: 30%;
}
.Progress .Bar {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #E5E5E5;
position: relative;
}
.Progress .Bar .Outer {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 70px;
height: 70px;
clip: rect(0, 70px, 70px, 35px);
}
.Bar .Outer .Fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 70px;
height: 70px;
clip: rect(0, 35px, 70px, 0);
background: #00A0E3;
transform: rotate(60deg);
}
.Progress .Bar .Draw {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 53.84615px/2);
top: calc(50% - 53.84615px/2);
width: 53.84615px;
height: 53.84615px;
background: #fff;
text-align: center;
display: table;
}
.Progress .Bar .Status {
display: table-cell;
vertical-align: middle;
position: absolute;
margin-left: -100px;
margin-top: -10px;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
text-align: center;
}
.Progress .Bar .Status > span {
font-size: 14px;
font-weight: bold;
color: #00A0E3;
}
.Progress .Bar.halfway {
background-color: #00A0E3;
}
.Progress .Bar.halfway .Outer {
clip: rect(0, 35px, 70px, 0);
}
.Progress .Bar.halfway .Outer .Fill {
clip: rect(0, 70px, 70px, 35px);
background: #E5E5E5;
}
.Progress .Bar.complete.halfway,
.Progress .Bar.complete .Fill
{
background-color: #8cd64c !important;
}
Javascript/JQuery:
$('document').ready(function() {
var progress = function(perc) {
perc = Math.round(perc * 100) / 100; // 2 decimal places
var $bar = $('.Progress .Bar'),
$fill = $('.Progress .Bar .Outer .Fill'),
$status = $('.Progress .Bar .Status span');
$bar.removeClass("halfway").removeClass("complete");
// outer bar
if (perc >= 50) $bar.addClass("halfway");
if (perc >= 100) $bar.addClass("complete");
// progress bar
var degrees = 360 * perc / 100;
$fill.css({
"WebkitTransform": 'rotate(' + degrees + 'deg)',
"-moz-transform": 'rotate(' + degrees + 'deg)'
});
// status
$status.html(perc);
}
// Test it!
progress(10);
setTimeout(function() {
progress(50);
setTimeout(function() {
progress(100);
}, 2000);
}, 2000);
});
Show me the CodePen
When I have loaded my page my containers: '.lightbox-prev, .lightbox-next' load however I only want them to be visible when the '.lightbox-trigger' is clicked.
My HTML:
<div class="lightboxbg"></div>
<div class="lightbox-prev"></div>
<div class="lightbox-next"></div>
<div class="lightbox"></div>
My CSS:
div.lightbox{
position: absolute;
top: 25%;
left: 45%;
background: center no-repeat #fff;
width: 400px;
height: 600px;
padding: 10px;
z-index: 1001;
display: none;
}
div.directionslightbox{
position: absolute;
top: 10%;
left:18%;
background:url("../Map_Background_Web.png"); center;
background-repeat: no-repeat;
background-size: cover;
width: 65%;
height: 80%;
padding: 10px;
z-index: 1001;
display: none;
}
div.lightboxbg{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
z-index: 1000;
display: none;
}
.lightbox-prev, .lightbox-next {
position: absolute;
top: 0;
bottom: 0;
width: 250px;
background: center no-repeat red;
z-index: 1001;
cursor: pointer;
}
.lightbox-prev {
left: 0;
background-image: url("../previous.png");
}
.lightbox-next {
right: 0;
background-image: url("../next.png");
}
My JS:
<script type="text/javascript">
var lightboxcounter;
$(document).ready(function(){
$('.lightbox-trigger').click(function() {
lightboxcounter = $(this).attr('data-counter');
var image = $(this).attr('data-img')
$('.lightbox').css('background-image', 'url(' + image + ')');
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeIn(800);
});
$('.lightboxbg').click(function() {
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeOut(800);
});
$('.lightbox-prev').click(function() {
lightboxcounter--;
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
$('.lightbox-next').click(function() {
lightboxcounter++;
console.log(lightboxcounter);
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
});
</script>
If anyone could help, I would most appreciate it, it's been bugging me all day!
Cheers
You are already using fadeIn to display the controls so all you need to do is hide them initially.
Add this to your CSS...
.lightbox-prev, .lightbox-next {
display: none;
}