svg.js.git - The lightweight library for manipulating and animating SVG: https://github.com/svgdotjs/svg.js

about summary refs log tree commit diff stats

path: root/src/doc.js

	Commit message (Expand)	Author	Age	Files	Lines
*	Allow invocation of SVG() with an <svg> tag	wout	2013-03-29	1	-3/+5
*	Bumped to v0.9, added better style management, text support and extended anim...0.10	wout	2013-03-09	1	-5/+5
*	Bumped to v0.7 with reworked id sequence, attr nullifier, and various other f...	wout	2013-02-27	1	-5/+5
*	Created separate classes for SVG.ViewBox anSVG.BBox0.6	wout	2013-02-20	1	-21/+21
*	Reworked SVG.Container inheritance	wout	2013-02-02	1	-5/+2
*	Removed temp wrapper in safari bug fix	wout	2013-01-05	1	-12/+44
*	Made code more readable and included docs	wout	2013-01-04	1	-17/+17
*	Code refactoring	wout	2012-12-29	1	-1/+2
*	Defaulting <svg> width and height to 100%	wout	2012-12-23	1	-1/+1
*	Added and exta wrapping div around svg element	wout	2012-12-23	1	-2/+7
*	Fine-tuned safari bug fix	wout	2012-12-23	1	-2/+1
*	Fixed a bug in safari prevending correct dy on tspans	wout	2012-12-23	1	-2/+7
*	Cross browser fixes	wout	2012-12-21	1	-3/+5
*	Streamlined code	wout	2012-12-21	1	-4/+4
*	Separated core from optional libraries	wout	2012-12-18	1	-0/+2
*	Added transform()	wout	2012-12-18	1	-1/+1
*	Code slimming	wout	2012-12-17	1	-0/+19

.kt { color: #888888; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */ .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */ .highlight .na { color: #336699 } /* Name.Attribute */ .highlight .nb { color: #003388 } /* Name.Builtin */ .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ .highlight .nd { color: #555555 } /* Name.Decorator */ .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #336699 } /* Name.Variable */ .highlight .ow { color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */

<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Effects - Hide Demo</title>
	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
	<script type="text/javascript" src="../../ui/effects.core.js"></script>
	<script type="text/javascript" src="../../ui/effects.blind.js"></script>
	<script type="text/javascript" src="../../ui/effects.bounce.js"></script>
	<script type="text/javascript" src="../../ui/effects.clip.js"></script>
	<script type="text/javascript" src="../../ui/effects.drop.js"></script>
	<script type="text/javascript" src="../../ui/effects.explode.js"></script>
	<script type="text/javascript" src="../../ui/effects.fold.js"></script>
	<script type="text/javascript" src="../../ui/effects.highlight.js"></script>
	<script type="text/javascript" src="../../ui/effects.pulsate.js"></script>
	<script type="text/javascript" src="../../ui/effects.scale.js"></script>
	<script type="text/javascript" src="../../ui/effects.shake.js"></script>
	<script type="text/javascript" src="../../ui/effects.slide.js"></script>
	<script type="text/javascript" src="../../ui/effects.transfer.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<style type="text/css">
		.toggler { width: 500px; height: 200px; }
		#button { padding: .5em 1em; text-decoration: none; }
		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
		.ui-effects-transfer { border: 2px dotted gray; } 
	</style>
	<script type="text/javascript">
	$(function() {

		//run the currently selected effect
		function runEffect(){
			//get effect type from 
			var selectedEffect = $('#effectTypes').val();
			
			//most effect types need no options passed by default
			var options = {};
			//check if it's scale, transfer, or size - they need options explicitly set
			if(selectedEffect == 'scale'){  options = {percent: 0}; }
			else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; }
			else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
			
			//run the effect
			$("#effect").hide(selectedEffect,options,500,callback);
		};
		
		//callback function to bring a hidden box back
		function callback(){
			setTimeout(function(){
				$("#effect:hidden").removeAttr('style').hide().fadeIn();
			}, 1000);
		};
		
		//set effect from select menu value
		$("#button").click(function() {
			runEffect();
		});

	});
	</script>
</head>
<body>

<div class="demo">

<div class="toggler">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Hide</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>

<select name="effects" id="effectTypes">
	<option value="blind">Blind</option>
	<option value="bounce">Bounce</option>
	<option value="clip">Clip</option>
	<option value="drop">Drop</option>
	<option value="explode">Explode</option>
	<option value="fold">Fold</option>
	<option value="highlight">Highlight</option>
	<option value="puff">Puff</option>
	<option value="pulsate">Pulsate</option>
	<option value="scale">Scale</option>
	<option value="shake">Shake</option>
	<option value="size">Size</option>
	<option value="slide">Slide</option>
	<option value="transfer">Transfer</option>
</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>


</div><!-- End demo -->

<div class="demo-description">

<p>Click the button above to preview the effect.</p>

</div><!-- End demo-description -->

</body>
</html>