CSS3 exit panel with iframe inside

Hello, dear Habro-CSS3-people!

I want to share a little experience of creating a leaving panel on CSS3 with an iframe inside and how to overcome unpleasant surprises from IE. This solution seems to me to be well suited for adding a feedback form to the site, chatting with a consultant, etc.

Just in case, let me remind you that iframe has its drawbacks, and when creating a site with an iframe you need to take them into account. There are pluses, but the topic is not about that.



The role of the departing panel will play a div. Inside it: another div - the button-title and the iframe itself.

<div id="feedbackP"> <div id="feedbackButton"> Feedback </div> <iframe id="feedBackIframe" src="feedback.php" scrolling="no" frameborder = "yes"> </iframe> </div> 

Now styles with comments:

 #feedbackP{ width : 400px; height : 272px; position : fixed; /*     */ z-index : 50; /*    : */ top : 100%; left : 100%; /*  : */ margin-top : -25px; margin-left : -130px; border : 2px solid; border-radius: 10px; padding: 5px; /*  : */ -moz-transition:margin 0.3s linear; -o-transition:margin 0.3s linear; -webkit-transition:margin 0.3s linear; -ms-transition:margin 0.3s linear; transition:margin 0.3s linear; } #feedbackP:hover{ /*     : */ margin-top : -272px; margin-left : -400px; /*  : */ -moz-transition:margin 0.3s linear; -o-transition:margin 0.3s linear; -webkit-transition:margin 0.3s linear; -ms-transition:margin 0.3s linear; transition:margin 0.3s linear; } /*  ,     : */ #feedbackButton{ font-weight : bold; margin-left : 10px; margin-top : -6px; border : 1px solid #717277; border-radius : 0px 0px 10px 10px; text-align : center; width : 100px; margin-bottom : 5px; color : #FFFFFF; background : #717277; } #feedBackIframe{ width : 390px; height : 240px; border : 1px solid; } 

This is what I did when the panel was put forward:



')

It would seem that everything, but everyone's favorite program for downloading the browser can not leave us without New Year's surprises.



First of all,

  position : fixed; 

does not work in IE6. For IE7, you must specify a DOCTYPE.

You can accept the border-radius and transition.

UPD: (and the radius can not be tolerated: proof by kafeman )

Well, for those who do not want to put up with the fact that such a panel will not work in IE 6 - there are several techniques .

I did not care about IE <9, because I still use HTML5 canvas.



But IE surprises did not end there. As soon as the mouse from the div enters the iframe inside it, the div itself ceases to be a hover. This causes the appearing panel to disappear immediately.

A small script comes to the rescue on JS + JQuery, which must be enabled if the browser is IE:

 <!--[if IE]> <script type="text/javascript"> $('#feedbackP').live('mouseenter',function() { $('#feedbackP').css('margin-top', '-272px'); $('#feedbackP').css('margin-left', '-400px'); }); $('#feedbackP').live('mouseleave',function() { $('#feedbackP').css('margin-top', '-25px'); $('#feedbackP').css('margin-left', '-130px'); }); </script> <![endif]--> 

Cross-browser compatibility:

• FF - yes
• Chrome - yes
• Safari - yes
• Opera - the panel pops up not smoothly, but jerk
• IE - the panel pops up not smoothly, but jerk

Finally, I give an example in action: clack . (according to the link - the panel on the right below)

That's all, thank you for your attention!