cirandas.net

ref: master

plugins/social_share_privacy/public/socialshareprivacy/demo/dynamic_layout.html


 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Social Share Privacy: Dynamic Layout</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://panzi.github.com/SocialSharePrivacy/javascripts/jquery.cookies.js"></script>
<script type="text/javascript" src="../javascripts/socialshareprivacy.js"></script>
<script type="text/javascript" src="../javascripts/modules/facebook.js"></script>
<script type="text/javascript" src="../javascripts/modules/twitter.js"></script>
<script type="text/javascript" src="../javascripts/modules/gplus.js"></script>
<script type="text/javascript" src="../javascripts/modules/reddit.js"></script>
<script type="text/javascript">
// <![CDATA[
$.fn.socialSharePrivacy.settings.path_prefix = '../';

$(document).ready(function () {
	$('.share').socialSharePrivacy({layout:window.innerWidth < 640 ? 'box' : 'line'});

	$(window).resize(function () {
		var layout = window.innerWidth < 640 ? 'box' : 'line';
		var $share = $('.share');
		if ($share.socialSharePrivacy('options').layout !== layout) {
			var enabled = $share.socialSharePrivacy('enabled');
			$share.socialSharePrivacy('destroy').socialSharePrivacy({layout:layout});

			for (var name in enabled) {
				if (enabled[name]) {
					$share.socialSharePrivacy('enable',name);
				}
			}
		}
	});
});
// ]]>
</script>
</head>
<body>

<h1>Social Share Privacy: Dynamic Layout</h1>

<div class="share"></div>

<p>
This demonstrates how to change the layout dynamically without loosing the state.
</p>

</body>
</html>