I have a sticky element I've setup for a button on mobile devices. This is the code:
.sticky-btn {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
Works great but I don't want the button to show when the user is at the very top of the page. It would be perfect if it only appeared after you scrolled down say 20-30 pixels. Is it possible to accomplish this in CSS somehow?
Thanks!
Brian Preston. Unfortunately, we can't do this using only CSS. We should Javascript to add "sticky" class to sticky button and toggle button using that class.
.sticky-btn {
position: fixed;
bottom: 20px;
left: 50%;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-50%);
transition: all .3s ease-in-out;
}
.sticky-btn.sticky {
opacity: 1;
visibility: visible;
pointer-events: all;
}
And JS code should be like this.
document.addEventListener('DOMContentLoaded', function () {
var scrollPosition = window.scrollY;
var stickyBtn = document.querySelector('.sticky-btn');
window.addEventListener('scroll', function() {
scrollPosition = window.scrollY;
if (scrollPosition >= 30) {
stickyBtn.classList.add('sticky');
} else {
stickyBtn.classList.remove('sticky');
}
});
});
Hope this helps. Happy coding ~ :)
Related
I want a button to trigger a popup. The pop shows when the button is clicked but it happens really abruptly so I want to add a transition but it doesn't seem to work.
HTML:
<button class="terug"></button>
CSS:
img.popup{
width: 15em;
position: absolute;
top: 25em;
left: 4em;
transition: ease-in 1s;
}
JS:
var uno = document.querySelector('button.terug');
var popup = document.querySelector('img.popup');
uno.addEventListener ('click', function(){
popup.classList.toggle('popup');
});
Maybe :
var popup = document.querySelector('img');
Instead of :
var popup = document.querySelector('img.popup');
Here's an way you could do it using pure JavaScript. Although I would recommend you use a third library or a Jquery plugin.
const openPopup = () => {
const popup = document.getElementById("popup");
popup.classList.add("opened");
}
.image-popup {
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 200px);
opacity: 0;
transition: all 1s ease-in-out;
height: 0;
overflow: hidden;
}
.image-popup.opened {
opacity: 1;
height: auto;
}
<button onclick="openPopup()">Open image</button>
<div id="popup" class="image-popup">
<img src="https://placeimg.com/400/400/any">
</div>
I am building a chrome extension, when user click on the button I am loading a custom popup window from my content div
/contentScript.js
var contentDiv = `
<div id='mydiv-container'>
<div id="test"></div>
</div>`;
chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage (request, sender, sendResponse) {
$("body").append(contentDiv);
$('#mydiv-container').addClass('visible');
}
This works, problem is that I use a css transition that doesn't work
/content.css
#mydiv-container {
opacity: 0;
height: 390px;
width: 400px;
position: fixed;
top: -200px;
z-index: 999999999;
transition: all 2s;
}
#mydiv-container.visible {
opacity: 1;
top: 20px;
transition: all 2s;
}
This doesn't work as it expected, the transition is not taking place.
How can I fix this.
Use this Webkit is the property of CSS supported by google chrome
-webkit-transition: all 2s;
I have fixed that with the use of the setTimeout method.
setTimeout(function() {
$('#mydiv-container').addClass('visible');
});
using Webkit works for me and when i try to copy your code on a jsfiddle didnt work because the mydivcontainer was on top of the button so the button never triggers so i change the top: -200px; to top: -400px
https://jsfiddle.net/jvgx4ucj/1/
I have a large element that has multiple animated (rotating) images, and you can zoom in and out on the entire div (which changes its scale transform). However, if an image element is created while the div is zoomed out, when I zoom back in I can see that the image is very blurry, as if it the image was downscaled when the element was created. A possible workaround would be to hide & show the image every time I zoom, but that doesn't sound like the best solution.
Here's a snippet demonstrating the issue (fiddle). Click on the first link to get a blurred image (sometimes only breaks on the second click), and on the second link to get a good image.
$(".try-1").click(function() {
$(".image").remove();
$(".pos").css("transform", "scale(0.4)").append("<div class=\"image\"></div>");
setTimeout(() => {
$(".pos").css("transform", "scale(1.4)");
}, 500)
});
$(".try-2").click(function() {
$(".image").remove();
$(".pos").css("transform", "scale(1.4)").append("<div class=\"image\"></div>");
});
.clicky {
color: #00f;
cursor: pointer;
}
.clicky:hover {
text-decoration: underline;
}
.div {
position: relative;
width: 500px;
height: 500px;
background: #000;
}
.pos {
position: absolute;
left: 250px;
top: 250px;
}
#keyframes rotating-cw {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.image {
position: absolute;
left: -150px;
top: -150px;
width: 300px;
height: 300px;
background: url(http://i.imgur.com/grJ6I3k.png);
background-size: 300px 300px;
animation: rotating-cw 30s linear infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="clicky try-1">Create & zoom in</span> | <span class="clicky try-2">Zoom in & create</span>
<div class="div">
<div class="pos">
</div>
</div>
use this:
.pos {
-webkit-perspective: 1000;
position: absolute;
left: 250px;
top: 250px;
}
This can be solved using requestAnimationFrame but a simpler and more straightforward solution is to tell the browser to again initialize the image's container
$(".try-1").click(function() {
$(".image").remove();
$(".pos").css("transform", "scale(0.4)").append("<div class=\"image\"></div>");
setTimeout(() => {
$(".pos").css("transform", "scale(1.4)");
// Here, after we scale up the element again append
// the .image element but first remove it
$(".image").remove();
$(".pos").append("<div class=\"image\"></div>");
}, 500)
});
JsFiddle
I'm having trouble handling the "transitionend" event in Microsoft Edge, on a pseudo element.
It works in other browsers like chrome, safari, and firefox. I thought it may have been a bug with MS Edge, but it doesn't work in IE11 either, so maybe there is some other way that I'm missing in the Microsoft world.
Does anyone know how to handle this in IE?
Here's the code... the box will turn green after the fade-in completes if the transitionend event has been handled correctly.
window.setTimeout(function(){
$('#box').one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd',function(){
$(this).addClass('done');
});
$('#box').addClass('show');
},1);
#box {
position: relative;
}
#box:before {
position: absolute;
height: 100px;
width: 100px;
background-color: tomato;
transition: opacity 1s;
opacity: 0;
content: "";
}
#box.show:before {
opacity: 1;
}
#box.done:before {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="box"></div>
#box {
position: relative;
}
#box > .before {
position: absolute;
height: 100px;
width: 100px;
background-color: tomato;
transition: opacity 1s;
opacity: 0;
content: "";
}
#box.show > .before {
opacity: 1;
}
#box.done > .before {
background-color: green;
}
IE11 has an issue with transitionend on pseudo element. If added extra elements inside the parent container. This worked for me!
Is you used jQuery's .animate() function, you can have a function put on the end to be run, like this:
$(document).ready(function() {
$('#box').animate({opacity: 1}, 1000, function() {
$('#box').animate({background-color: green}, 1000);
});
});
The background-color will only transition to green after it has finished fading in. Hopefully this helps!
I've noticed that transition is not working when the element is also changing from display none to block. Why is that? It works if I remove the display attribute.
CSS:
#box {
width: 150px;
height: 150px;
background: red;
transform: scale(0);
display: none;
transition: transform .5s;
}
#box.active {
transform: scale(1);
display: block;
}
http://jsfiddle.net/640kL55u/
Because it has display: none to begin with, the other styles are not being taken into the dom to be transitioned once display: block is added.
Instead, you can hide the div with height, so its still on the page but not showing. Then add the height on the show div.
JS Fiddle
Any change from or to display: none won't trigger transitions.
You can, however, change the display property and then add the class name at the end of the javascript stack. For instance:
function showElem(elem) {
elem.style.display = "block";
setTimeout(function() {
elem.classList.add("active");
}, 0);
}
And then pass element nodes to this function.
You can't transition with display: none; properties...
$("button").on("click", function() {
$("#box").addClass("active");
});
#box {
width: 0;
height: 0;
overflow: hidden;
background: red;
transform: scale(0);
transition: transform .5s;
}
#box.active {
width: 150px;
height: 150px;
transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="box"></div>
<button>CLICK</button>