Skip to content

Instantly share code, notes, and snippets.

@tomykaira

tomykaira/jqui_scale_effect_test_#4316.html

Created May 18, 2011 18:47
Show Gist options
  • Save tomykaira/979237 to your computer and use it in GitHub Desktop.
Save tomykaira/979237 to your computer and use it in GitHub Desktop.
Download ZIP
Testing various positionings
Raw
jqui_scale_effect_test_#4316.html
<html>
<head>
<title>scaling test</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.ui.draggable.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.ui.droppable.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$('.scale').click(function() {
$(this).effect("scale", {
percent: 200,
origin: ['middle', 'center'], // middle:y center:x
scale:"content",
}, 1000);
})});
</script>
</head>
<body>
<style type="text/css" media="screen">
.scale {
padding: 5px;
background: #abcdef;
width: 100px;
height: 50px;
}
#absolute {
position: absolute;
top: 300px;
left: 300px;
}
#relative1 {
position: relative;
top: 0px;
left: 100px;
}
#relative2 {
position: relative;
}
#static {
}
#absolute_auto {
position: absolute;
top: auto;
left: auto;
width: 100px;
}
#fixed {
position: fixed; /* error */
top: 500px;
left: 500px;
}
#right_bottom {
position: absolute;
bottom: 300px;
right: 300px;
}
#rel_right_bottom {
position: relative;
bottom: 30px;
right: 30px;
}
</style>
<div id="static" class="scale">static</div>
<div id="static" class="scale">another static</div>
<div id="relative2" class="scale">relative2</div>
<div id="relative1" class="scale">relative1</div>
<div id="absolute_auto" class="scale">absolute auto</div>
<div id="absolute" class="scale">absolute</div>
<div id="fixed" class="scale">fixed</div>
<div id="right_bottom" class="scale">abs with right bottom</div>
<div id="rel_right_bottom" class="scale">rel with right bottom</div>
<div id="scroller" style="height: 1000px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment