I've created a background div that hosts a modal div.
I have set the modal div to have the css:
.modal {
opacity: 0.01;
top: 20px;
transition: all ease-in 200ms;
}
Then I created another class to add to it in order to show it
.modal-open {
top: 50px;
opacity: 1;
}
However, when the open class is added to the div, chrome shows the properties being striked out (a.k.a not taking effect or overridden).
See codepen for demonstration. You can click on the background to hide the modal again.
Why isn't it transitioning properly?
Because you placed .model-open before .modal in the CSS.
.modal {
position: absolute;
z-index: 101;
transition: all 300ms ease-in-out;
top: 20px;
opacity: 0.01;
width: 500px;
background-color: white;
left: 50%;
margin-left: -250px;
}
.modal-open {
top: 50px;
opacity: 1;
}
https://codepen.io/anon/pen/KvdZMa
you can use
.modal.modal-open {
top: 50px;
opacity: 1;
}
to override .modal{}
You should add !important to the .modal-open
.modal-open {
top: 50px !important;
opacity: 1 !important;
}
or make it like this to override .modal
.modal.modal-open {
top: 50px !important;
opacity: 1 !important;
}
Related
I am trying to place an image(which is a close button) on iframe at the top-right corner, the iframe and image are loaded from js function in angular, I have placed it correctly by some CSS but the issue is when the screen is responsive or on the tab or mobile view it doesn't appear in the correct place
Below is the Html code:
<div style="
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: all 0.3s ease-in-out 0s;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
">
<iframe style="
display: inherit;
z-index: 10001;
position: absolute;
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
top: 40px;
left: 50%;
margin-left: -200px;
background-color: rgb(255, 255, 255);
" src="test.html" id="iframe-overlay" title="iframe">
</iframe>
<img style="
transition: all 0.5s ease-in-out 0s;
opacity: 1;
float: left;
position: absolute;
top: 23% !important;
left: 48% !important;
transform: translate(-50%, -50%) !important;
z-index: 99999999;
margin-left: 192px;"
id="close-overlay"
" src="assets/images/pink_hair_sml.png" />
</div>
The image should be placed at the marked position even if the screen gets minimized or maximized the image should be placed at the same position.
here is how it should look
but when I reduce the screen to 75%
this is how it looks
I am able to fix it for each screen but still when the screen gets minimized or maximized position is not placed correctly
here is parent of the element
If you add a div that wraps the 2, you can position that using flex in relation to your to div like so:
<div style="
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: all 0.3s ease-in-out 0s;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
">
<div style="position: relative; max-width: 50%">
<iframe style="
display: inherit;
z-index: 10001;
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
background-color: rgb(255, 255, 255);
" src="test.html" id="iframe-overlay" title="iframe">
</iframe>
<img style="
transition: all 0.5s ease-in-out 0s;
opacity: 1;
float: left;
position: absolute;
top: 0px;
right: 0px;
transform: translate(-50%, -50%) !important;
z-index: 99999999;
id="close-overlay"
" src="assets/images/pink_hair_sml.png" />
</div>
</div>
Alternatively, positioning the wrapping element itself which means you don't have to add a new div, see below. The disadvantage of this is that there's then space not covered by the div itself and so whatever's underneath then shows through.
<div style="
position: fixed;
width: 50%;
height: 100%;
top: 0px;
left: 25%;
transition: all 0.3s ease-in-out 0s;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
">
<iframe style="
display: inherit;
z-index: 10001;
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
background-color: rgb(255, 255, 255);
width: 100%;
" src="test.html" id="iframe-overlay" title="iframe">
</iframe>
<img style="
transition: all 0.5s ease-in-out 0s;
opacity: 1;
float: left;
position: absolute;
top: 10px;
right: 10px;
z-index: 99999999;
id="close-overlay"
" src="assets/images/pink_hair_sml.png" />
</div>
The positioning of the two elements (iframe and img) is pretty straightforward as we know the width of the iframe (it is picking up the default which is set at 300px by browsers see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe ).
However it is rendered somewhat complex by the rather strange set of styles applied inline to the iframe and (worse) to the img where a couple are set !important and therefore not overwritable by our own CSS.
This snippet just gets rid of all the inline styling on those two elements using Javascript and starts again.
It positions each element independently. The iframe is centered and set at 40px from the top of its positioned parent. The img is positioned to just after the right hand edge of the iframe, and then transitioned back by half its width and height to get the overlap.
<!doctype html>
<html>
<head>
</head>
<body>
<div id="GlobalPayments-overlay-02d30efa" style="
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: all 0.3s ease-in-out 0s;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
">
<iframe style="
display: inherit;
z-index: 10001;
position: absolute;
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
top: 40px;
left: 50%;
margin-left: -200px;
background-color: rgb(255, 255, 255);
" src="test.html" id="iframe-overlay" title="iframe">
</iframe>
<img style="
transition: all 0.5s ease-in-out 0s;
opacity: 1;
float: left;
position: absolute;
top: 23% !important;
left: 48% !important;
transform: translate(-50%, -50%) !important;
z-index: 99999999;
margin-left: 192px;" id="close-overlay" " src="assets/images/pink_hair_sml.png " />
</div>
<style>
body {
width: 100vw;
}
#GlobalPayments-overlay-02d30efa {
--iframeW: 300px; /*the defaults set by browsers https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe*/
--iframeH: 150px;
}
#GlobalPayments-overlay-02d30efa iframe {
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
background-color: rgb(255, 255, 255);
top: 40px;
margin: 0;
padding: 0;
left: calc(50% - (var(--iframeW) / 2));
position: absolute;
}
#GlobalPayments-overlay-02d30efa img {
position: absolute;
top: 40px;
left: calc(50% + (var(--iframeW) / 2));
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
width: 16px;
height: 16px;
}
</style>
<script>
const iframe = document.querySelector('iframe');
const img = document.querySelector('img');
iframe.style = '';
img.style = '';
</script>
</body>
After all your comments that finally explains that you cannot change the HTML code we start to understand what you need!
You have to override the inline CSS rules with the help of the !important operator. The big problem will be on the close image
because it already has some !important rules in the inline CSS, which is bad news for us... But you can use JavaScript to correct
the horrible HTML generated.
For the CSS itself, I prefer putting all items in position fixed and use % to position them.
The close image should not be set from the left but from the right. But as said before this will be tricky because the inline CSS already has some !important rules. But at least we can remove the float and left margin. Finally, after overriding during the battle, the simpliest was just to remove the inline style attribute with JS.
You'll have to find if you can hook somewhere in the JS library. If you cannot then you could run the JS every half a second until it finds the close image, like I did (but it's not a nice solution).
By the way, it would be good to set the image size in the CSS so that it displays at the correct place and size before the image itself is downloaded.
/*
In your case, you'll have to run this once the
iframe is visible. See if you can hook somewhere.
Look at the JS library you are using or if you can
then replace it by one not generating all this
horrible HTML with inline styles.
Here, just for the demo, I finally find a solution
to run it once the document is loaded and also each
time a change is detected, typically the case of the
user clicking on a button or link to display the
iframe overlay. This avoids the solution of a timer
running all the time.
*/
/**
* Correct the close button of the iframe displayed on overlay.
*/
function correctIframe() {
let closeImg = document.querySelector('#iframe-overlay ~ img:not(.cleaned)');
if (closeImg) {
closeImg.setAttribute('style', '');
closeImg.setAttribute('class', 'cleaned');
}
}
// Once the document is loaded we can try to see if there's
// already an iframe overlay to correct it.
document.addEventListener('DOMContentLoaded', correctIframe);
// Each time the document changes (typically if some JS does
// something such as triggering an Ajax call, loading new HTML,
// or simply displaying the iframe overlay) then we also have
// to correct it.
let domInsertionObserver = new MutationObserver((mutation) => {
correctIframe();
});
domInsertionObserver.observe(document, { childList: true });
#iframe-overlay {
z-index: 1000 !important;
position: fixed !important;
top: 10% !important;
left: 10% !important;
width: 80% !important;
height: 80% !important;
margin: 0 !important;
}
/* An image tag just after the iframe. */
#iframe-overlay ~ img {
visibility: hidden; /* To avoid seeing it at bad position. */
z-index: 1001 !important;
position: fixed !important;
/*
We cannot override the left attribute
because it has !important in the inline
rule! Bad! We cannot override the transform
either! Even worth! So JavaScript can only
save us by deleting the inline style attribute.
*/
top: 10% !important;
right: 10% !important;
/* Adjust to the image size to avoid image
being resized during the download step. */
width: 30px;
height: 30px;
/* Move half of the image size to right and down. */
transform: translate(50%, -50%) !important;
}
#iframe-overlay ~ img.cleaned {
visibility: visible;
}
<div style="
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: all 0.3s ease-in-out 0s;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
">
<iframe style="
display: inherit;
z-index: 10001;
position: absolute;
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
top: 40px;
left: 50%;
margin-left: -200px;
background-color: rgb(255, 255, 255);
" src="test.html" id="iframe-overlay" title="iframe">
</iframe>
<img style="
transition: all 0.5s ease-in-out 0s;
opacity: 1;
float: left;
position: absolute;
top: 23% !important;
left: 48% !important;
transform: translate(-50%, -50%) !important;
z-index: 99999999;
margin-left: 192px;"
id="close-overlay"
" src="assets/images/pink_hair_sml.png" />
</div>
May I know where am I doing it wrong? What I wanted to achieve is that I wanted to fadeOut/hide the paragraph. When its fading out, the paragraph appears again.
$("div.spanner").addClass("show");
$("div.overlay").addClass("show");
$("p.three").addClass("show").fadeIn(1000).delay(1000).fadeOut(1000);
.one, .two, .three, .four{
visibility: hidden;
z-index: 1000;
top: 0;
left: 0;
}
.spanner{
position:absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
width: 80%;
display:block;
text-align:center;
color: #FFF;
z-index: 1000;
visibility: hidden;
border-radius: 15px;
transform: translate(200px,300px);
}
.overlay{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
visibility: hidden;
z-index: 1000;
}
.show{
visibility: visible;
}
.spanner, .overlay{
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.spanner.show, .overlay.show {
opacity: 1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="spanner">
<p class="three">Creating your database...</p>
</div>
Check other place in your code where you are use fadeIn. When i testing in sandbox it work whell. The paragraph disappear but not re-apprear
I have problem, when I'm opening menu I need animation like this:
#keyframes opening {
from {
clip-path: circle(0% at 5%, 10%)
}
to {
clip-path: circle(100%)
}
}
#keyframes closing {
from {
clip-path: circle(100%)
}
to {
clip-path: circle(0% at 5%, 10%)
}
}
On my menu
.menu {
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
background: #1f1f1f;
display: none;
}
Menu hamburger is button and i use javascript to open and close it while adding .classList.toggle(class - display: block) on my button
but closing animation doesn't work like i want
i also try to use transform CSS and other things and it doesn't gave me safe effect like i saw at keyframe
I tried to do a class in CSS .opening {anination-name:opening, duration and etc.} and after i tried to add it with javascript (toggle, settimeout adn etc.) nothing is working well for menu closing animation
Thanks
For this, a transition is more suitable:
document.addEventListener('click', () =>
document.querySelector('.menu').classList.toggle('open')
)
.menu {
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
background-color: #1f1f1f;
clip-path: circle(0% at 5% 10%);
transition: clip-path 2s;
}
.menu.open{
clip-path: circle(100%);
}
<div class="menu" ></div>
Click anywhere to try out effect
Just adding basic demo code for your undestanding.
.loader {
width: 56px;
height: 56px;
border: 8px solid transparent;
border-top-color: $warning;
border-bottom-color: $warning;
border-radius: 50%;
animation: loader-rotate 1s linear infinite;
top: 50%;
margin: -28px auto 0;
}
#keyframes loader-rotate {
0% {
transform: rotate(0); }
100% {
transform: rotate(360deg); }
}
I need to change the width of side panel in framework7 ??
https://framework7.io/docs/side-panels.html
Just change css of class panel.
default value (in framework7.ios.css) :
.panel {
z-index: 1000;
display: none;
background: #111;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
width: 260px;
top: 0;
height: 100%;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition-duration: .4s;
transition-duration: .4s;
}
I have the following: http://jsfiddle.net/yHPTv/2491/
I was wondering why the transition isn't working? What it's supposed to do is slide in the hidden element (which can be of variable width) to the right edge of the .block element, however, it just pops in.
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
left: 100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
left: auto;
right: 0;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
I think it has something to do with left: auto because if I change it left: 50%, it works, but not in the way I need it to.
Thanks.
As you say you can't animate from % to auto. But to get the desire effect you can also use transform property. Try this:
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: 0;
transform:translateX(100%);
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
transform:translateX(0)
}
Check the Demo Fiddle
Consider transitioning on right, from -100% to 0:
.block {
position: relative;
width: 500px;
height: 150px; /* shortened to fit in the "Run" window */
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
right: 0;
transition: 1s;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
For transition to work, you have to define the property you wish to change in both element states.
In your example it doesn't work because there is no common property between '.hidden' and ':hover' (you set the 'left' property in '.hidden', and 'right' property in ':hover')
If you instead use something like:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
right: 0%;
}
It will work because we defined the 'right' property in both states ('.hidden' and ':hover')