Skip to content
Newer
Older
100644 168 lines (139 sloc) 3.67 KB
ffa5b83 @gordonbrander Added demo page with several popover examples.
gordonbrander authored
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>CF Popover</title>
6
7 <style type="text/css" media="screen">
8 /* Stripped-down CSS Normalize. Just here for the purpose
9 of looking good (it's not needed for the plugin to work.)
10 -------------------------------------------------- */
11 html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
12
13 html {
14 height: 100%;
15 }
16 body {
17 min-height: 100%;
18 }
19
20 body { margin: 0; font-size: 13px; line-height: 1.231; }
21
22 body, button, input, select, textarea { font-family: sans-serif; color: #222; }
23
24 a { color: #00e; }
25 a:visited { color: #551a8b; }
26 a:hover { color: #06e; }
27 a:focus { outline: thin dotted; }
28
29 /* Improve readability when focused and hovered in all browsers: h5bp.com/h */
30 a:hover, a:active { outline: 0; }
31
32 ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
33 dd { margin: 0 0 0 40px; }
34 nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
35
36 #container {
37 margin: 30px auto;
38 width: 800px;
39 }
40
41 .section {
42 margin: 60px 0;
43 }
e3d8623 @gordonbrander Added CF credit link and changed h1 to h2.
gordonbrander authored
44 .section h2 {
ffa5b83 @gordonbrander Added demo page with several popover examples.
gordonbrander authored
45 margin: 40px 0;
46 }
47
48 /* Popover styles
49 -------------------------------------------------- */
50 /* Required style */
51 .popover {
52 position: absolute;
53 }
54
55 /* Aesthetic styles */
56 .popover {
57 background: #333;
58 color: #fff;
59 -moz-border-radius: 5px; /* FF1+ */
60 -webkit-border-radius: 5px; /* Saf3+, Chrome */
61 -khtml-border-radius: 5px; /* Konqueror */
62 border-radius: 5px; /* Standard. IE9 */
63 padding: 10px;
64 width: 200px;
65 }
66
67 #popover2 .after {
68 border-bottom: 10px solid transparent;
69 border-left: 15px solid #333;
70 content: '';
71 bottom: -10px;
72 height: 0;
73 margin-left: -5px;
74 left: 50%;
75 position: absolute;
76 width: 0;
77 }
78
79 #popover3 .after {
80 border-bottom: 10px solid transparent;
81 border-left: 15px solid #333;
82 content: '';
83 bottom: -10px;
84 height: 0;
85 left: 10px;
86 position: absolute;
87 width: 0;
88 }
11da6f6 @gordonbrander Another example.
gordonbrander authored
89
90 #popover4 .after {
91 border-top: 10px solid transparent;
92 border-left: 15px solid #333;
93 content: '';
94 top: -10px;
95 height: 0;
96 margin-left: -5px;
97 left: 50%;
98 position: absolute;
99 width: 0;
100 }
ffa5b83 @gordonbrander Added demo page with several popover examples.
gordonbrander authored
101 </style>
102
103 <!-- Include the libraries -->
104 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
105 <script src="jquery.ui.position.min.js"></script>
106 <script src="jquery.cf.popover.js"></script>
107
108 <!-- Invoke the popovers -->
109 <script type="text/javascript">
110 jQuery(function ($) {
111 $('#trigger1').popover();
112
113 $('#trigger2').popover({
114 my: 'center bottom',
115 at: 'center top',
116 offset: '0 -12px'
117 });
118
119 $('#trigger3').popover({
120 my: 'left bottom',
121 at: 'right top',
122 offset: '-5px -5px'
123 });
11da6f6 @gordonbrander Another example.
gordonbrander authored
124
125 $('#trigger4').popover({
126 my: 'center top',
127 at: 'center bottom',
128 offset: '0 12px'
129 });
ffa5b83 @gordonbrander Added demo page with several popover examples.
gordonbrander authored
130 });
131 </script>
132 </head>
133
134 <body>
135 <div id="container">
e3d8623 @gordonbrander Added CF credit link and changed h1 to h2.
gordonbrander authored
136 <h1>Popover</h1>
137
ffa5b83 @gordonbrander Added demo page with several popover examples.
gordonbrander authored
138 <div class="section">
e3d8623 @gordonbrander Added CF credit link and changed h1 to h2.
gordonbrander authored
139 <h2>Simple Popover</h2>
ffa5b83 @gordonbrander Added demo page with several popover examples.
gordonbrander authored
140
141 <a id="trigger1" href="#popover1">Open Popover</a>
142 <div id="popover1" class="popover">I'm a Popover</div>
143 </div>
144
145 <div class="section">
e3d8623 @gordonbrander Added CF credit link and changed h1 to h2.
gordonbrander authored
146 <h2>Using .after element</h2>
ffa5b83 @gordonbrander Added demo page with several popover examples.
gordonbrander authored
147
148 <a id="trigger2" href="#popover2">Open Popover</a>
149 <div id="popover2" class="popover">I'm a Popover</div>
150 </div>
151
152 <div class="section">
e3d8623 @gordonbrander Added CF credit link and changed h1 to h2.
gordonbrander authored
153 <h2>Upper right-hand corner</h2>
ffa5b83 @gordonbrander Added demo page with several popover examples.
gordonbrander authored
154
155 <a id="trigger3" href="#popover3">Open Popover</a>
156 <div id="popover3" class="popover">I'm a Popover</div>
157 </div>
e3d8623 @gordonbrander Added CF credit link and changed h1 to h2.
gordonbrander authored
158
11da6f6 @gordonbrander Another example.
gordonbrander authored
159 <div class="section">
160 <h2>Center/Bottom</h2>
161
162 <a id="trigger4" href="#popover4">Open Popover</a>
163 <div id="popover4" class="popover">I'm a Popover</div>
164 </div>
165
e3d8623 @gordonbrander Added CF credit link and changed h1 to h2.
gordonbrander authored
166 <p>A <a href="http://crowdfavorite.com">Crowd Favorite</a> production.</p>
ffa5b83 @gordonbrander Added demo page with several popover examples.
gordonbrander authored
167 </div><!--! end of #container -->
168 </html>
Something went wrong with that request. Please try again.