Skip to content

Instantly share code, notes, and snippets.

@tomykaira

tomykaira/jqui_margin_auto_#4228_inline_block.html

Created May 19, 2011 03:56
Show Gist options
  • Save tomykaira/980155 to your computer and use it in GitHub Desktop.
Save tomykaira/980155 to your computer and use it in GitHub Desktop.
Download ZIP
Compare between inline blocks and normal blocks.
Raw
jqui_margin_auto_#4228_inline_block.html
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Bounce Demo</title>
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script>
<style type="text/css">
#test { width: 240px; height: 135px; padding: 0.4em; margin: 50px auto; border: 2px solid black; cursor: pointer;}
h3 { margin: 0; padding: 0.4em; text-align: center; }
#test2 { width: 240px; height: 135px; padding: 0.4em; margin: 50px auto; border: 2px solid black; cursor: pointer;}
#normal { width: 240px; height: 135px; padding: 0.4em; margin: 50px 0px; border: 2px solid black; cursor: pointer;}
#normal2 { width: 240px; height: 135px; padding: 0.4em; margin: 50px 500px; border: 2px solid black; cursor: pointer;
padding: 100px; border:10px solid black;}
#multiple{ width: 240px; height: 135px; padding: 0.4em;
border: 2px solid black; cursor: pointer;}
#multiple.left { float: left ;}
#multiple.right { float: right ;}
#multiple #inner { width: 20; height: 30; padding: 0.4em;
border: 2px solid black; cursor: pointer;
float: inherit}
#normal2 h3 { margin: 0; padding: 0.4em; text-align: center; }
#wrap { width: 400px; height:300px; position:relative; left: 100px, top:100px ;border: 1px solid black;}
.block {
display:block;
}
.inline {
display: inline-block;
}
</style>
<script type="text/javascript">
$(function() {
var effects = ["slide", "clip", "scale", "blind", "bounce", "clip", "drop", "explode", "fade", "fold", "highlight", "pulsate", "puff", "size", "shake", "slide"],
effectSelector = $("#effect");
$.each(effects, function( i, effect ) {
$("<option value='"+effect+"'>"+effect+"</option>").appendTo(effectSelector);
});
var effect = effects[0];
effectSelector.change(function() {
effect = effectSelector.val();
});
$("#toggle").click(function() {
$("#test").toggle(effect,{direction:"left", duration:10000} ) });
$(".field").click(function() {
$(this).hide(effect,{direction:"right"}, function() {
setTimeout(function() {
$(this).toggle(effect);
}, 500);
});
});
});
</script>
</head>
<body>
<select id="effect">
</select>
<input type="button" value="toggle" id="toggle">
<p>block</p>
<div id="test" class="field block">
<h3 class="ui-widget-header ui-corner-all">Bounce</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
<div id="test" class="field block">
<h3 class="ui-widget-header ui-corner-all">Bounce</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
<p>inline</p>
<div id="test" class="field inline">
<h3 class="ui-widget-header ui-corner-all">Bounce</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
<div id="test" class="field inline">
<h3 class="ui-widget-header ui-corner-all">Bounce</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment