Back to Top
The nuts and bolts for
Creative web development

Forums

Overview » Coffee & Tea TalkZone » dmx zone designs fly out
This topic is locked

dmx zone designs fly out

phil vouers
Member



Since: 23 Oct 2008
Posts: 96
Posted 24 Sep 2011 16:34:56

How do you do that neat flyout that you have added to your site.

How do you do that neat flyout that you have added to your site.
Patrick Woldberg
Official Representative



Since: 11 Feb 2003
Posts: 1,932
Replied 26 Sep 2011 13:33:20
It is a div positioned with css and animated with jquery.

some css like:
div.flyout {
  position: fixed;
  background: #f00; /* place some image or so */
  width: 500px;
  height: 500px;
  right: -480px; /* place outside screen, only 20px visible */
  top: 50%;
  margin-top: -250px;
}


then some javascript:
$('div.flyout').hover(function(e){
  $(this).animate('right', 0);
}, function(e){
  $(this).animate('right', -480);
});


That would be the basics, you should have of course a div with a class flyout on the page, you can add more to the flyout like a banner or so, also you can play with the css and animation.