jQuery-cssP/index.html at master · ReallyGood/jQuery-cssP · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
<html lang="en-US">
<head>
	<meta charset="utf-8">
	<title>jQuery cssP Plugin - Play with the css of Pseudo Elements</title>
	<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet'>
	<link rel="stylesheet" href="unrelated-demo-files/styles.css">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
	<meta property="og:title" content="jQuery cssP Plugin - Play with the css of Pseudo Elements" />
	<meta property="og:description" content='A lightweight jQuery plugin to set and get the css of pseudo elements.' />
	<meta property="og:url" content="http://reallygood.co.il/plugins/cssp/" />

	<!-- Code above this point isn't related to the demo -->

	<style>
		h1 {position: relative;}
		h1:before {content: '\2665'; position: absolute; color: #CD1728; width: 80px; height: 3px; top: -20px;}
	</style>
</head>
<body>
	<h1>jQuery cssP</h1>
	<p>The lovely heart above the heading is the <code>:before</code> pseudo-element of the title, and its position is calculated on the fly on each <a href="javascript:location=location;">reload</a> and set via cssP. <br>
	Also, the <code>:after</code> ruleset of that heading is: <code><output></output></code></p>
	<p>Inspect, view source and read the <a href="https://github.com/ReallyGood/jQuery-cssP#readme">manual</a> to learn more.</p>


	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<!-- Use jquery.cssp.min.js in production -->
	<script src="jquery.cssp.js"></script>
	<script>
		$('h1').cssP({
			before: function(){
				var direction = Math.random() < .5 ? 'left' : 'right';
				var distance = Math.floor( Math.random() * 100 );
				return direction + ': ' + distance + 'px;';
			},
			after: 'content: "seudos"; font-weight: normal; color: rgba(0,0,0,0.4);',
		});

		$('output').html( $('h1').cssP('after') );
	</script>


	<!-- Code below this point isn't related to the demo -->

<footer>
<a href="https://github.com/ReallyGood/jQuery-cssP"><img style="position: absolute; top: 0; right: 0; border: 0; background: transparent;" src="unrelated-demo-files/forkme.png" alt="Fork me on GitHub"></a>
<div id="social" class="cf">
	<a href="http://www.facebook.com/sharer.php?u=http://reallygood.co.il/plugins/cssp" class="socialite facebook" data-href="http://reallygood.co.il/plugins/cssp" data-send="true" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
		<span>Share on Facebook</span>
	</a>
	<a href="http://twitter.com/share" class="socialite twitter" data-text="jQuery cssP Plugin - Play with the css of Pseudo Elements" data-url="http://reallygood.co.il/plugins/cssp" data-count="horizontal" data-via="ReallyGoodTeam" rel="nofollow" target="_blank">
		<span>Share on Twitter</span>
	</a>
</div>
<script src="unrelated-demo-files/socialite-1.0.min.js"></script>
<script>
	$(window).bind('load', function(){
		Socialite.load( $('#social')[0] );
	});
</script>

<p>a <a href="http://reallygoodteam.com" target="_blank">Really good</a> Plugin</p>
</footer>
<script>
	var _gaq=[['_setAccount','UA-20534477-1'],['_trackPageview']];
	(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
	g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
	s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>