I am trying to make iframe expanded and shrank when the mouse pointer is on the iframe by using media query.
However, it is not working, but, when the mouse point is on the frame border then it is expanded and shrank.
Dose anyone know how to fix this on IE11 and Edge?
Also, there is limitation that I can not use jQuery outside the iframe because of same origin policy. So, I might have to fix css to implement this animation.
<html>
<head>
<style type="text/css">
iframe[id^=sidebanner]{
width: 80px;
}
iframe#sidebanner{
right: 0;
}
iframe[id^=sidebanner]:hover{
width: auto;
-webkit-transition: width ease-in-out 0.1s;
-moz-transition: width ease-in-out 0.1s;
-ms-transition: width ease-in-out 0.1s;
-o-transition: width ease-in-out 0.1s;
transition: width ease-in-out 0.1s;
}
@media all and (max-width: 2500px) {
iframe[id^=sidebanner]:hover{
width: 50%;
}
}
@media all and (max-width: 900px) {
iframe[id^=sidebanner]:hover{
width: 55%;
}
}
@media all and (max-width: 800px) {
iframe[id^=sidebanner]:hover{
width: 60%;
}
}
@media all and (max-width: 750px) {
iframe[id^=sidebanner]:hover{
width: 65%;
}
}
@media all and (max-width: 700px) {
iframe[id^=sidebanner]:hover{
width: 70%;
}
}
@media all and (max-width: 650px) {
iframe[id^=sidebanner]:hover{
width: 75%;
}
}
@media all and (max-width: 600px) {
iframe[id^=sidebanner]:hover{
width: 80%;
}
}
</style>
</head>
<body>
<iframe id="sidebanner" src="" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="true" style="top: 0px; height: 100%; right: 0px;"></iframe>
</body>
</html>
I found out that you can use jquery to add a class hover that will contain the css needed to extend the iframe.
$('#sidebanner').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)
With this function we simply tell to add a class hover to our #sidebanner id
You also need to add css to the hover class. This will be the same css used in iframe[id^=sidebanner]:hover. Also add the hover class to your @media queries.
.hover {
-webkit-transition: width ease-in-out 0.1s;
-moz-transition: width ease-in-out 0.1s;
-ms-transition: width ease-in-out 0.1s;
-o-transition: width ease-in-out 0.1s;
transition: width ease-in-out 0.1s;
}
Example: https://jsfiddle.net/c9syw731/2/
I added and remove "hoveranimation" class on hover and mouse leave event correspondingly.
and added a "#sidebanner.hoveranimation" to css
$('#sidebanner').hover(function() {
$(this).addClass('hoveranimation');
});
$('#sidebanner').mouseleave(function() {
$(this).removeClass('hoveranimation');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style type="text/css">
iframe[id^=sidebanner]{
width: 80px;
!important;
}
iframe#sidebanner{
right: 0;
}
iframe[id^=sidebanner]:hover{
}
@media all and (max-width: 2500px) {
iframe[id^=sidebanner]:hover{
width: 50%;
}
}
@media all and (max-width: 900px) {
iframe[id^=sidebanner]:hover{
width: 55%;
}
}
@media all and (max-width: 800px) {
iframe[id^=sidebanner]:hover{
width: 60%;
}
}
@media all and (max-width: 750px) {
iframe[id^=sidebanner]:hover{
width: 65%;
}
}
@media all and (max-width: 700px) {
iframe[id^=sidebanner]:hover{
width: 70%;
}
}
@media all and (max-width: 650px) {
iframe[id^=sidebanner]:hover{
width: 75%;
}
}
@media all and (max-width: 600px) {
iframe[id^=sidebanner]:hover{
width: 80%;
}
}
#sidebanner.hoveranimation {
width: auto;
-webkit-transition: width ease-in-out 0.1s;
-moz-transition: width ease-in-out 0.1s;
-ms-transition: width ease-in-out 0.1s;
-o-transition: width ease-in-out 0.1s;
transition: width ease-in-out 0.1s;
}
</style>
</head>
<body>
<iframe id="sidebanner" src="" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="true" style="top: 0px; height: 100%; right: 0px;"></iframe>
</body>
</html>
