Skip to content

Instantly share code, notes, and snippets.

@adamboduch

adamboduch/jquery.ui.dialog.on.hover.css

Created August 9, 2013 00:53
Show Gist options
  • Save adamboduch/6190301 to your computer and use it in GitHub Desktop.
Save adamboduch/6190301 to your computer and use it in GitHub Desktop.
Download ZIP
A preview jQuery UI dialog, displays and loads content on link hover. Based on the original implementation found here: http://jsbin.com/okosi4
Raw
jquery.ui.dialog.on.hover.css
body {
font-size: 0.8em;
margin: 5%;
}
Raw
jquery.ui.dialog.on.hover.html
<html>
<head>
<title>jQuery UI: Dialog on hover</title>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link href="jquery.ui.dialog.on.hover.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="jquery.ui.dialog.on.hover.js" type="text/javascript"></script>
</head>
<body>
<div class="ui-widget">
<ul>
<li><a href="#" data-title="Preview 1" data-preview="preview1.html">Link 1</a></li>
<li><a href="#" data-title="Preview 2" data-preview="preview2.html">Link 2</a></li>
</ul>
</div>
<div id="dialog" title="Preview"></div>
</body>
</html>
Raw
jquery.ui.dialog.on.hover.js
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
draggable: false,
resizable: false
});
var $a = $( "a" );
$a.on( "mouseover", function( e ) {
e.preventDefault();
var $target = $( e.currentTarget );
$( "#dialog" ).html( "Loading..." )
.load( $target.data( "preview" ) )
.dialog( "option", "title", $target.data( "title" ) )
.dialog( "open" );
});
$a.on( "mousemove", function( e ) {
e.preventDefault();
$( "#dialog" ).dialog( "option", "position", {
my: "left+20 top+20",
at: "right bottom",
of: e
});
});
$a.on( "mouseout", function( e ) {
$( "#dialog" ).dialog( "close" );
});
});
Raw
preview1.html
<h2>Preview 1</h2>
<p>This is just a preview</p>
Raw
preview2.html
<h2>Preview 2</h2>
<p>This is just another preview</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment