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>
Related
So I want to create a button that would go in the bottom of my screen and create a semicircle around it with more buttons inside when clicked. I've tried adjusting the CSS but Im not able to come up with a solution. Do you guys know a way to do it? I came across this codepen ("https://codepen.io/jet/pen/LwiGu"), which is almost exactly what I want, instead of creating a whole circle around it, it would create a semicircle around the top. I've attached an image for you guys to understand it better.
var items = document.querySelectorAll('.menuItem');
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}
document.querySelector('.center').onclick = function(e) {
e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
#import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
/* Image source: http://wallbase.cc/wallpaper/718405 */
/* Excuse the base64 mess, imgur blocked the hotlinked image and this seemed like the fastest solution */
background: cornflowerblue url(" data:image/png;base64,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") no-repeat fixed;
background-size: cover;
}
a {
font-size: 14px;
text-decoration: none;
outline: 0;
}
.circle,
.ring {
height: 256px;
position: relative;
width: 256px;
}
.circle {
margin: 0 auto;
}
.ring {
background-color: rgba(0,0,0,0.5);
border-radius: 50%;
opacity: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.1) rotate(-270deg);
-moz-transform: scale(0.1) rotate(-270deg);
-transform: scale(0.1) rotate(-270deg);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .ring {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.center {
background-color: rgba(255,255,255,0.3);
border-radius: 50%;
border: 2px solid #ffffff;
bottom: 0;
color: white;
height: 80px;
left: 0;
line-height: 80px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 80px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .center {
border-color: #aaaaaa;
}
.menuItem {
border-radius: 50%;
color: #eeeeee;
display: block;
height: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
text-align: center;
width: 40px;
}
<div class="circle">
<div class="ring">
</div>
</div>
[menu mockup][1]
[1]: https://i.stack.imgur.com/GR419.png
If i understand your desire correctly, then all you'd have to change is this:
The .ring currently has height&width 256px, change that if you want it bigger/smaller.
Now re-position the .ring so that it is aligned with the bottom of its container. You do that by setting a negative bottom of exactly half the .rings height (so something like bottom: -128px;).
Now you have to decide how many icons you need on there (there used to be 8 buttons in your source, but now that we clipped it, there is only 4 visible).
Now, adjust the 2 javascript lines (the ones with ...Math.PI... in it) to account for
(A) the amount of icons you want and
(B) the fact that you only want to populate the upper half of the .ring
The 2 Math.PI lines (which set the position of each individual button, aren't complicated but how you have to change them depends entirely on how big you're making the thing, and how many button you want to place on it - so i cannot really provide an example without knowing that.
I've got a container, which contains some things including a box at the bottom. I have a need to transition that box from the bottom to the top.
from {
bottom: 4px;
top: auto;
}
to {
bottom: auto;
top: 4px;
}
For obvious reasons, this doesn't work. You can't transition/animate with an auto value. I've worked around this by having the box fade out and slide off the bottom, then fade in and slide on the top. This works, but it feels longer than it needs to be.
The box has dynamic height, and the entire thing is responsive so pre-calculated values are right out.
Any ideas? Or is what I have now the best I can do?
So it's definitely possible, but instead of trying to achieve it with a combination of top and bottom, you can achieve it with using top and translate. This will allow you to have a clear point for your stop and start whilst still giving you the freedom of a responsive container.
It would look something like this:
from {
top: 4px;
transform: translateY(0);
}
to {
top: calc(100% - 4px);
transform: translateY(-100%);
}
Here's an example in action, (I've used a textarea so that you can resize and keep testing, the button(+js) is just there to help facilitate the class change)
$('.go').click(function(){
$('textarea').toggleClass('up');
});
textarea {
position: fixed;
top: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
left: 150px;
}
textarea.up {
top: 100%;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="go">
TRANSITION
</button>
<textarea></textarea>
And a Fiddle if you prefer that instead.
You can simulate the top property by using the calc() CSS function :
from {
bottom: 4px;
}
to {
bottom: calc(100% - 4px - yourContainerHeight);
}
You can use animations to do this. You don't have to change bottom to top. Just use one of them. I chose to use 'bottom' . Then to simulate the top:4px you move the box with bottom:calc(100% - 4px) and together with transform:translateY(100%) . This is equal to top:4px .
see snippet below
.container {
height: 300px;
width: 300px;
border: 1px solid red;
position: relative;
}
.box {
position: absolute;
bottom: 4px;
background: red;
width: 100%;
height: 10px;
animation-name: fromBottom;
animation-delay: 1s;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
transform: translateY(0%)
}
#keyframes fromBottom {
0% {
bottom: 0;
transform: translateY(0%)
}
100% {
bottom: calc(100% - 4px);
transform: translateY(100%)
}
}
<div class="container">
<div class="box">
</div>
</div>
I want to hover over an image (music album) and then a record rolls out, so I want it to move to the right and to rotate a bit, and when its offhover i like it to return to normal also with an animation. It can already move to the right but I can't get it to rotate with it. I like to keep it as simple as possible as I am not a pro in coding. I am using javascript for the movement part as below,
$(document).ready(function (){
$("#cover1").hover( function() {
$("#coverrecord1").stop().animate({ left: '5%' });
}, function() {
$("#coverrecord1").stop().animate({ left: '0' });
} );
})
can you test this jsfiddle and let me know this is what you are looking for
$("#albumContainer>img").hover(function(){
$("#albumContainer>img").each(function(){
$(this).addClass("animate");
});
$(this).removeClass("animate");
});
$("#albumContainer>img").mouseout(function(){
$("#albumContainer>img").each(function(){
$(this).removeClass("animate");
});
});
Okay, what you're looking for is the CSS3 transform property.
BUT - it does not work with regular jQuery animation.
So you have a couple of options:
write your own function with step (good example: Animate element transform rotate)
use CSS3 animation with a class
something like this:
$("#cover1").hover( function() {
$("#coverrecord1").addClass('rollOut');
}, function() {
$("#coverrecord1").removeClass('rollOut');
} );
<style>
#coverrecord1{ transition:all 1s;}
.rollOut{
left: 5%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
</style>
for more on CSS3 animation: http://www.w3schools.com/css/css3_animations.asp and a whole lot of google results
Instead of doing the animation with JavaScript I'd recommend it to do it with CSS. You could simply achieve your desired effect with the following code.
The example is just to give you an idea of how it could look like. Of course from this point you can even fine tune your animation .
HTML
<div class="album">
<img class="cover" src="path" alt="" />
<img class="record" src="path" alt="" />
</div>
CSS
.album {
position: relative;
width: 200px;
height: 200px;
background: #eee;
cursor: pointer;
}
.cover {
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
.record {
position: absolute;
top: 50%;
left: 0;
height: 100%;
transform: translateY(-50%) rotate(0deg);
transition: 0.3s;
}
.album:hover .record {
left: 50%;
transform: translateY(-50%) rotate(45deg);
}
.album {
position: relative;
width: 200px;
height: 200px;
background: #eee;
cursor: pointer;
}
.cover {
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
.record {
position: absolute;
top: 50%;
left: 0;
height: 100%;
transform: translateY(-50%) rotate(0deg);
transition: 0.3s;
}
.album:hover .record {
left: 50%;
transform: translateY(-50%) rotate(45deg);
}
<div class="album">
<img class="cover" src="http://www.fuse.tv/image/56fe73a1e05e186b2000009b/768/512/the-boxer-rebellion-ocean-by-ocean-album-cover-full-size.jpg" alt="" />
<img class="record" src="http://www.clipartkid.com/images/853/vinyl-record-1-1024-768-descibel-radio-1TJlqv-clipart.png" alt="" />
</div>
Try with below tag
<img src="http://i.imgur.com/3DWAbmN.jpg" />
<img src="http://i.imgur.com/3DWAbmN.jpg" />
and add below css
img{
border-radius:50%;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
img:hover{
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
1st problem: The text overlay is displayed when i hover on the image, but i want that the overlay would be displayed when i hover on the span which has the "point" class, how to make it?
2nd problem: The text overlay isn't responsive, it doesn't fit on the image size and i want that when i resize my image the text overlay would resize with the image, how can i make it?
I would be thanful for a javascript, bootstrap, css or a different answer!
Demo: http://jsfiddle.net/0qgcn2uu/9/
HTML:
<span class="point"></span>
<div class="caption">
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://localhost/wp-content/themes/twentyfifteen/images/velveti-grid-item-text-1.png">
</a>
</div>
</div>
</div>
CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content:' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
/* This block of code is working. When i hover on my img, it gets the overlay
.caption:hover::before {
background: rgba(248, 214, 215, .5);
}
*/
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
z-index: 1;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
To solve 1st problem you need to change:
.caption:hover .caption__overlay {
To:
.point:hover + .caption .caption__overlay {
And the 2nd problem is solved adding:
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
DEMO
HTML:
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
JS:
$('.button').on('mouseenter', function () {
$('.element').addClass('active');
}).on('mouseleave', function () {
$('.element').removeClass('active');
});
$('.element').on('mouseenter', function () {
$('.element').addClass('active');
}).on('mouseleave', function () {
$('.element').removeClass('active');
});
http://jsfiddle.net/e4p98cwb/1/
When you hover on the black element the blue one enters the screen. After that if you hover for a sec on empty space the blue one starts to escape the screen, but if you hover fast on the empty space that it occupied before two things might happen:
1. The blue one returns fully shown on screen
or
2. Jumps once or twice and proceeds to leave the screen
The same happens on hover and mouseover events as well. Why is this happening and is there a way around this behavior ?
The easiest way to get around any issues with JS is to just let CSS take care of it. If you add this to the :hover state it will work:
.button:hover + .element,
.element:hover {
-webkit-transform: translateX(0);
transform: translateX(0);
}
See below for an implementation. This saves you a ton of JS as well.
.wrap {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
border: 2px solid red;
}
.button{
width: 100px;
height: 50px;
display: block;
background: #333;
}
.element {
position: absolute;
top: 0;
right: 0;
z-index: 99999;
width: 500px;
height: 630px;
background: blue;
-webkit-transform: translateX(630px);
transform: translateX(630px);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.button:hover + .element,
.element:hover {
-webkit-transform: translateX(0);
transform: translateX(0);
}
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
Update
The reason this is happening is because the element itself is still occupying the same space. This has to do with translation not actually moving the element, but transforming it. Once you move your cursor off any of the activatable elements, it will retract, but as it's animating it still occupies that same space, making it possible to hover on that space and retrigger the animation. I believe it's because this transform is only fully applied after completing the animation. Let's test this theory:
.wrap {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
border: 2px solid red;
}
.button{
width: 100px;
height: 50px;
display: block;
background: #333;
}
.element {
position: absolute;
top: 0;
right: 0;
z-index: 99999;
width: 500px;
height: 630px;
background: blue;
right: -100%;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.button:hover + .element,
.element:hover {
right: 0;
}
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
In this one we are simply using absolute positioning and the issue goes away, meaning that the tranform is actually causing the element to still occupy the same space. Until animation concludes.