-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathindex.html
112 lines (105 loc) · 4.06 KB
/
index.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
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Columns</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet" type="text/css"/>
<script src="jquery.column.js"></script>
<script>
$( function() {
$('#native').html($('#column').html());
$('#column').column({
width: 250,
rule_style: 'solid'
});
});
</script>
<style>
body {
font-family: "Segoe UI", Arial, sans-serif;
font-size: 16px;
}
.note {
background: #ffc;
margin: 20px 0 10px;
padding: 5px;
border: thin solid #cc3;
}
pre {
background-color: white;
padding: 10px;
border: solid 1px gray;
box-shadow: inset 2px 2px 8px #ddd;
font-family: 'Droid Sans Mono', 'Courier New', Courier, monospace;
font-size: 1em;
tab-size: 4;
}
#native {
-webkit-column-width: 250px;
-moz-column-width: 250px;
-o-column-width: 250px;
-ms-column-width: 250px;
column-width: 250px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
-o-column-rule-style: solid;
-ms-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<pre>$('#column').column({
width: 250,
rule_style: 'solid',
});</pre>
<div class="note">jQuery.column generated layout…</div>
<div id="column">
<h1>Big header</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer urna ante, faucibus non venenatis et, iaculis vitae augue.
Fusce eu massa eget odio posuere aliquam.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Fusce id tellus est, sed sagittis dolor.<br/>
<p>Paragraph...</br>
Curabitur bibendum rutrum tellus, ut tincidunt est iaculis non.
Sed imperdiet lorem sed nisl pretium vestibulum.
Suspendisse fermentum est ut odio faucibus eget consequat dolor pulvinar.
Curabitur ac ante in magna tempus consequat non vitae purus.<br/>
Quisque sagittis interdum libero sed dictum.
</p>
<img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" align="left" width="128" height="106"/>
Duis sagittis dolor ac libero convallis tincidunt.
Donec libero turpis, sagittis eget iaculis at, commodo nec ipsum.
Donec vestibulum lectus eget dolor ultrices sed sollicitudin nibh ullamcorper.
Cras a nisi et lorem pulvinar dignissim.<br/>
<h2>Smaller header with some more text</h2>
Mauris porttitor, magna at volutpat dictum, est mi mollis ligula, sit amet auctor dolor velit vel leo.
Phasellus scelerisque porta sem, in consectetur ante facilisis vel.
Suspendisse eget quam ac velit lobortis feugiat in vel libero.
In luctus nisi ac libero malesuada scelerisque.
Sed tincidunt arcu ut est congue non lobortis orci ultrices.
Nam mauris velit, varius ut dignissim id, vestibulum vitae arcu.
Duis fermentum ullamcorper molestie.<br/>
In ultricies, enim porttitor placerat condimentum, tellus sapien vehicula lorem, et porttitor purus mi nec elit.
Morbi risus magna, scelerisque eu iaculis ut, sodales vitae lectus.<br/>
<ol>
<li>Listitem 1</li>
<li>Listitem 2</li>
<li>Listitem 3</li>
<li>Listitem 4</li>
<li>Listitem 5</li>
</ol>
Aenean at eros a libero tempor molestie.
Integer quis turpis vitae lorem venenatis condimentum.
Quisque viverra pharetra placerat. Maecenas et massa tortor.
Aliquam porttitor risus vel arcu placerat lacinia.<br/>
In mollis lorem nisi.
Nam sed sapien odio, vitae rhoncus mauris.
Phasellus quis nunc nulla, vel malesuada turpis.
Nulla odio mauris, eleifend et sagittis at, aliquet sed elit.
</div>
<div class="note">Native column layout (only available on browsers that support CSS3 columns)…</div>
<div id="native"></div>
</body>
</html>