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/
Related
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 ~ :)
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'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'm trying to build a gallery where every image has a hover effect (this one). When I jhover the image and click the link inside , a bootstrap modal opens showing some content.
Until here works fine, however, when I close this modal, the image is not displaying properly in the main page. You can see my problem here:
http://www.bootply.com/90dGFlCrxI
Can anyone explain me what am I doing wrong?
Thanks very much guys!
The issue seems be the
overflow: hidden;
in this css rule:
.effect figure {
margin: 0;
position: relative;
/*overflow: hidden;*/
text-align: left;
}
if you remove the issue is fixed.
another work around:
.effect figcaption {
position: absolute;
width: 100%;
left: 0;
padding: 7px;
background: #26BC8A;
color: #ed4e6e;
height: 50px;
top: auto;
bottom: 0;
opacity: 0;
/* transform: translateY(100%); */
/* transition: transform 0.4s, opacity 0.1s 0.3s; */
}
the translateY is not working as expected.
I use OUIBounce ( https://github.com/carlsednaoui/ouibounce )exit popup.
When it fires, if there is AdSense ad unit under the popup, the AdSense is 100% visible, while the rest of the site is greyed out.
Please help me fix this.
Here is underlay CSS
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
cursor: pointer;
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
Screenshot:
Note that all content is greyed out, while AdSense unit is visible.
In the script used to fire the modal, add a callback function (after cookieExpire: 10,):
callback: function() {
$("#ouibounce-modal").css({"z-index": "100"});
}