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"});
}
Related
Pretty new to CSS design,
I'm trying to get my discord widget to transform two ways on hover and off hover,
There is a nice transition when I hover over the discord widget which expands slowly and when I take the mouse off resets to its originally position.
What I'm trying to do is help transition back to its original position in the same way it does when I hover over the widget
So far I've only managed to it work on hover
.disc-widget {
position: fixed;
top: 16%;
right: 75px;
border-radius: 5px;
}
.disc-widget :hover{
transition: transform 0.5s;
transform: scale(1.1,1.1);
}
I've even tried this and still doesn't work
.disc-widget {
position: fixed;
top: 16%;
right: 75px;
border-radius: 5px;
transition: all transform 0.5s;
}
.disc-widget :hover{
transform: scale(1.1,1.1);
}
I don't know if it's because of the part of the widget that is maybe keeping me from doing it or the I'm just not doing the CSS right.
I have an issue regarding a position: sticky element that flickers whenever I scroll the page in Google Chrome using the device toolbar and simulate different devices. However, when I don't use the device toolbar, the element works as it supposed to. It looks fine in Safari and Firefox as well. I saw a couple of workarounds using -webkit-transform: translate3d(0,0,0); and backface-visibility: hidden;, but I cant't seem to get it to work.
I'm using it inside a Next.js project.
Anybody experienced the same thing?
This is the css for the sticky element:
.StateTitle {
position: sticky;
top: 0;
padding-top: 45px;
z-index: 50;
width: 100%;
padding-bottom: 1px;
background-color: #FF7E7E;
}
And this is the css for the parent element:
.StateWrapper {
margin-top: 0;
width: 100%;
box-sizing: border-box;
position: relative;
}
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'm working on a home page for a film company's website, and it has a CSS button with a hover effect that is going to open a lightbox once it's ready, at the moment I just have it set to href="#" as a placeholder until I'm ready to implement the lightbox. There is also a small image of a downward pointing arrow, with the link set to an anchor that isn't on the page yet. Both of these work in Firefox, but in Chrome the hover effect doesn't work on the button, and it behaves as if neither of these elements have anchor tags around them. I poked around with Chrome's dev tools and it seems as though the span around the button may be the culprit as Chrome seems to be resizing it, but I can't figure out any reason why the image link isn't working, and I'm not entirely sure why Chrome is disagreeing with the span.
The strange part is that there are three other CSS buttons with hover effects in a seperate div, and they all work just fine.
The website is currently uploaded at http://www.gruntwork.us/reelindi/test/
The style sheet can be found at http://www.gruntwork.us/reelindi/test/reelindi.css
CSS:
div.header {
position:absolute;
top: 0;
left: 0;
right: 0;
background-image:url("resources/images/bg.jpg");
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height:430px;
width:100%;
z-index: -1;
}
img.arrow {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 58px;
z-index: 999;
}
span.redBtn a {
text-align:center;
display:block;
margin: 0 auto;
width: 150px;
margin-top: -40px;
z-index: 999;
}
a.redBtn {
color: #fff;
background-color: #d94d4d;
font-size: 1.125em;
padding: 8px 18px;
text-decoration: none;
text-align: center;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
border-radius: 5px;
}
a.redBtn:hover {
background-color: #bf3030;
}
HTML:
<div class="header">
<h1 class="header">Reel Indi</h1>
<h2 class="header">"Storytelling in motion."</h2><br>
<span class="redBtn">Push the red button!</span>
<img class="arrow" src="resources/images/arrow.png">
</div>
I've searched around but can't find an answer for this. Help?
Seems like your header's z-index: -1 rule pushes everything "behind" the body content, causing you not to be able to receive mouse events on that layer. Changing it to zero or higher will let you have hover effects and other events just fine.
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.