Design, CG Graphics & Inspiration
Sliding Panel on CSS3 with iframe inside

Sliding Panel on CSS3 with iframe inside

I want to share some little experience of how to create a sliding panel on CSS3 with iframe inside and how to overcome unpleasant surprises of IE. It seems to me that this decision could be good for adding a feedback form on the site, or a chat with a consultant etc.

Just in case I will remind that iframe has some minuses and when creating a site with iframe it is necessary to take them into account. However it has a lot of pluses, but we are not going to talk about that.

Here div will play the role of sliding panel. Inside it has another div it is a button-heading and iframe itself.

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

And now styles with comments:

#feedbackP{
    width : 400px;
    height : 272px;
    position : fixed; /* we fix the position in a window */
    z-index : 50;
    /* we move a panel to the right downward: */
    top : 100%; 
    left : 100%;
    /* we pull out the top: */	
    margin-top : -25px;
    margin-left : -130px;

    border : 2px solid;
    border-radius: 10px;
    
    padding: 5px;
    
    /* we set the effect of motion: */
    -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{	 
    /* we pull out a panel that everyone could see it: */	
    margin-top : -272px;
    margin-left : -400px;
    /* we set the effect of motion: */	
    -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;	
}

/* We do the heading of the panel, as a corner of paper folder: */
#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;
}

Here, is what I’ve got, when a panel is drawn out:

It might seem that this is it, but the program can’t leave us all without any surprises.
The first thing is that

position : fixed;

doesn’t work in IE6. For IE7 it is needed to specify DOCTYPE. One can put up with border – radius and transition. And for those, who doesn’t want to bear with that such panel will not work in IE 6 – there are a few methods. I didn’t care much of IE<9, as I use canvas HTML5. But it's not all the surprises of IE. As soon as a mouse from div gets in iframe, inside of it the div stops to be hover. It results in that an appearing panel disappears at once. A small script on JS + JQuery, which is necessary to be included, comes for help, if the browser is IE:[code]<!--[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]--> [/code] Cross browser availability: • FF — yes • Chrome — yes • Safari — yes • Opera — a panel emerges not smoothly, but sharply • IE — a panel emerges not smoothly, but sharply In the end I bring an example in operation: click. (a panel is on the right bottom corner)

You might also be interested in..

How to Create Simple Tooltips with CSS3
Round Avatars in CSS3
Tooltips in CSS3 and HTML5
Making an Image Gallery with CSS3
How to Create Progress Bar with CSS3
SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
CSS3 Now! Transitions
CSS3 Now! Animation, Transparency, and more (Part 2)
Sprite animation in CSS3
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

  • Ivan Efimov,
  • January 18, 2012

SHARE THIS POST

Work in IT industry. Interested in: Actionscript 3.0, PHP, C++, Delphi, JS, HTML, CSS3, MySQL, Java, Photoshop, 3Dsmax. I work as a part-programming engineer right here: www.skborion.ru/ Favourite environment of development - notepad:-)

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • Well my friend! i check 2 times on this sliding panel css but its not working :( i don’t know what’s wrong with me!!

    • Ivan Efimov

      hi. You can contact me if u want. We will try to find an error in your code :-)
      skype 777limon.spb777 without both 777 :-) to check you are not a vacuum cleaner =)

  • I was looking for this stuff for many day for my site.. Thanks for share its script .. nice and such a useful blog for us.

  • Ed

    Kind of old post but trying to do the same thing, but a little different. Both my solution and yours flake out in IE doing the exact same thing. The panel only opens erratically and as soon as the pointer hits the iframe is slams back closed. I’ve tested on IE10.

  • Well my friend! i check 2 times on this sliding panel css but its not working :( i don’t know what’s wrong with me!!

    • Ivan Efimov

      hi. You can contact me if u want. We will try to find an error in your code :-)
      skype 777limon.spb777 without both 777 :-) to check you are not a vacuum cleaner =)

  • I was looking for this stuff for many day for my site.. Thanks for share its script .. nice and such a useful blog for us.

  • Ed

    Kind of old post but trying to do the same thing, but a little different. Both my solution and yours flake out in IE doing the exact same thing. The panel only opens erratically and as soon as the pointer hits the iframe is slams back closed. I’ve tested on IE10.