Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit d08b0cb

Browse files
author
Gabriel Schulhof
committed
Demos: Examples: Added utility for generating popup arrow CSS.
1 parent f9465f3 commit d08b0cb

File tree

2 files changed

+185
-1
lines changed

2 files changed

+185
-1
lines changed

‎demos/examples/popups/arrow-size.php‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Popup arrow size - jQuery Mobile Demos</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
8+
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
9+
<link rel="shortcut icon" href="../../favicon.ico">
10+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
11+
<script src="../../../js/jquery.js"></script>
12+
<script src="../../_assets/js/"></script>
13+
<script src="../../../js/"></script>
14+
<script>
15+
16+
( function( $, undefined ) {
17+
18+
var sqrt2 = Math.sqrt( 2 ),
19+
timeoutId = 0;
20+
21+
function arrowCSS( size ) {
22+
return "" +
23+
".ui-popup-arrow-container {\n" +
24+
" width: " + ( 2 * size ) + "px;\n" +
25+
" height: " + ( 2 * size ) + "px;\n" +
26+
"}\n" +
27+
"\n" +
28+
".ui-popup-arrow-container.ui-popup-arrow-l {\n" +
29+
" left: -" + size + "px;\n" +
30+
" clip: rect(-1000px," + size + "px,2000px,-1000px);\n" +
31+
"}\n" +
32+
"\n" +
33+
".ui-popup-arrow-container.ui-popup-arrow-t {\n" +
34+
" top: -" + size + "px;\n" +
35+
" clip: rect(-1000px,2000px," + size + "px,-1000px);\n" +
36+
"}\n" +
37+
"\n" +
38+
".ui-popup-arrow-container.ui-popup-arrow-r {\n" +
39+
" right: -" + size + "px;\n" +
40+
" clip: rect(-1000px,2000px,2000px," + size + "px);\n" +
41+
"}\n" +
42+
"\n" +
43+
".ui-popup-arrow-container.ui-popup-arrow-b {\n" +
44+
" bottom: -" + size + "px;\n" +
45+
" clip: rect(" + size + "px,2000px,1000px,-1000px);\n" +
46+
"}\n" +
47+
"\n" +
48+
".ui-popup-arrow {\n" +
49+
" width: " + size * sqrt2 + "px;\n" +
50+
" height: " + size * sqrt2 + "px;\n" +
51+
" left: " + ( ( ( 2 - sqrt2 ) * size ) / 2 ) + "px;\n" +
52+
" top: " + ( ( ( 2 - sqrt2 ) * size ) / 2 ) + "px;\n" +
53+
" border-width: 1px;\n" +
54+
" border-style: solid;\n" +
55+
"}\n" +
56+
"\n" +
57+
".ui-popup-arrow-container.ie .ui-popup-arrow {\n" +
58+
" margin-left: -" + ( size / 3.5 ) + "px;\n" +
59+
" margin-top: -" + ( size / 3.5 ) + "px;\n" +
60+
"}\n" +
61+
"\n" +
62+
".ui-popup-arrow-background {\n" +
63+
" width: " + ( 2 * size ) + "px;\n" +
64+
" height: " + ( 2 * size ) + "px;\n" +
65+
"}\n" +
66+
"\n" +
67+
".ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow-background {\n" +
68+
" background-position: 0 " + size + "px;\n" +
69+
"}\n" +
70+
"\n" +
71+
".ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow-background {\n" +
72+
" background-position: " + size + "px 0;\n" +
73+
"}\n" +
74+
"\n" +
75+
".ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow-background {\n" +
76+
" background-position: 0 " + size + "px;\n" +
77+
"}\n" +
78+
"\n" +
79+
".ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow-background {\n" +
80+
" background-position: " + size + "px 0;\n" +
81+
"}";
82+
}
83+
84+
function updateArrowSize() {
85+
var size = $( "#arrowSize" ).val(),
86+
css = arrowCSS( size ),
87+
pre = $( "<pre class='brush: css'>" + css + "</pre>" );
88+
89+
$( "#arrowCSS" ).empty().append( pre );
90+
SyntaxHighlighter.highlight( {}, pre[ 0 ] );
91+
timeoutId = 0;
92+
if ( $.mobile.browser.oldIE && $.mobile.browser.oldIE <= 8 ) {
93+
$( "#arrowStyle" )[ 0 ].styleSheet.cssText = css;
94+
} else {
95+
$( "#arrowStyle" ).text( css );
96+
}
97+
$( "#exampleArrow-l,#exampleArrow-r" ).css( "margin-top", -size );
98+
$( "#exampleArrow-t,#exampleArrow-b" ).css( "margin-left", -size );
99+
}
100+
101+
$.mobile.document
102+
.on( "change", "#arrowSize", function( e ) {
103+
if ( timeoutId ) {
104+
clearTimeout( timeoutId );
105+
}
106+
timeoutId = setTimeout( updateArrowSize, 250 );
107+
})
108+
.on( "pagecreate", "#arrow-size-demo", function() {
109+
updateArrowSize();
110+
if ( $.mobile.browser.oldIE && $.mobile.browser.oldIE <= 8 ) {
111+
$( "#exampleArrow-l,#exampleArrow-r,#exampleArrow-t,#exampleArrow-b" ).addClass( "ie" );
112+
}
113+
});
114+
115+
})( jQuery );
116+
117+
</script>
118+
<style>
119+
</style>
120+
<style id="arrowStyle">
121+
</style>
122+
<style>
123+
.ui-popup-arrow-container.ui-popup-arrow-l,
124+
.ui-popup-arrow-container.ui-popup-arrow-r {
125+
top: 50%;
126+
}
127+
.ui-popup-arrow-container.ui-popup-arrow-t,
128+
.ui-popup-arrow-container.ui-popup-arrow-b {
129+
left: 50%;
130+
}
131+
</style>
132+
</head>
133+
<body>
134+
<div data-role="page" id="arrow-size-demo" class="jqm-demos">
135+
136+
<div data-role="header" class="jqm-header">
137+
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
138+
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
139+
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
140+
<?php include( '../../search.php' ); ?>
141+
</div><!-- /header -->
142+
143+
<div data-role="content" class="jqm-content">
144+
<h1>Popup arrow size</h1>
145+
<p class="jqm-intro">The size of the popup arrow can be adjusted via custom CSS. Drag the slider below and copy/paste the resulting CSS into your project. Make sure you paste it after the jQuery Mobile structure/theme CSS.</p>
146+
<div style="padding: 100px;">
147+
<div style="position: static;" class="ui-popup-container ui-popup-active">
148+
<div class="ui-popup ui-body-inherit ui-overlay-shadow ui-corner-all">
149+
<p>This is what a popup would look like.</p>
150+
<p>It contains multiple paragraphs.</p>
151+
<p>Note that large arrows may not be displayed at all.</p>
152+
<p>This is because their sides would "stick out" of the popup.</p>
153+
<p>The arrow placement code prevents this.</p>
154+
<div id="exampleArrow-l" class="ui-popup-arrow-container ui-popup-arrow-l">
155+
<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
156+
</div>
157+
<div id="exampleArrow-r" class="ui-popup-arrow-container ui-popup-arrow-r">
158+
<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
159+
</div>
160+
<div id="exampleArrow-t" class="ui-popup-arrow-container ui-popup-arrow-t">
161+
<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
162+
</div>
163+
<div id="exampleArrow-b" class="ui-popup-arrow-container ui-popup-arrow-b">
164+
<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
169+
<form id="arrowSizeForm">
170+
<input type="range" id="arrowSize" min="5" value="10" max="90" step="1"></input>
171+
<div class="ui-body-b ui-corner-all" id="arrowCSS"></div>
172+
</form>
173+
</div><!-- /content -->
174+
175+
<div data-role="footer" class="jqm-footer">
176+
<p class="jqm-version"></p>
177+
<p>Copyright 2013 The jQuery Foundation</p>
178+
</div><!-- /jqm-footer -->
179+
180+
<?php include( '../../global-nav.php' ); ?>
181+
182+
</div><!-- /page -->
183+
</body>
184+
</html>

‎demos/nav-examples.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040

4141
<li data-section="Demo Showcase" data-filtertext="dynamic popups popup images lightbox"><a href="examples/popups/dynamic-popup.php" data-ajax="false">Dynamic popup</a></li>
4242

43-
<li data-section="Demo Showcase" data-filtertext="arrow popups popover"><a href="examples/popups/arrow.php" data-ajax="false">Popup with arrow</a></li>
43+
<li data-section="Demo Showcase" data-filtertext="arrow popups popover size"><a href="examples/popups/arrow-size.php" data-ajax="false">Popup arrow size</a></li>
4444

4545
<li data-section="Demo Showcase" data-filtertext="popups popup position alignment"><a href="examples/popups/alignment.php" data-ajax="false">Popup alignment</a></li>
4646

0 commit comments

Comments
 (0)