Permalink
Browse files

Demos: Examples: Added utility for generating popup arrow CSS.

  • Loading branch information...
gabrielschulhof committed Aug 13, 2013
1 parent f9465f3 commit d08b0cb28d2750c4403341f023c3bf19e8cf9d05
Showing with 185 additions and 1 deletion.
  1. +184 −0 demos/examples/popups/arrow-size.php
  2. +1 −1 demos/nav-examples.php
@@ -0,0 +1,184 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup arrow size - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
<script>
( function( $, undefined ) {
var sqrt2 = Math.sqrt( 2 ),
timeoutId = 0;
function arrowCSS( size ) {
return "" +
".ui-popup-arrow-container {\n" +
" width: " + ( 2 * size ) + "px;\n" +
" height: " + ( 2 * size ) + "px;\n" +
"}\n" +
"\n" +
".ui-popup-arrow-container.ui-popup-arrow-l {\n" +
" left: -" + size + "px;\n" +
" clip: rect(-1000px," + size + "px,2000px,-1000px);\n" +
"}\n" +
"\n" +
".ui-popup-arrow-container.ui-popup-arrow-t {\n" +
" top: -" + size + "px;\n" +
" clip: rect(-1000px,2000px," + size + "px,-1000px);\n" +
"}\n" +
"\n" +
".ui-popup-arrow-container.ui-popup-arrow-r {\n" +
" right: -" + size + "px;\n" +
" clip: rect(-1000px,2000px,2000px," + size + "px);\n" +
"}\n" +
"\n" +
".ui-popup-arrow-container.ui-popup-arrow-b {\n" +
" bottom: -" + size + "px;\n" +
" clip: rect(" + size + "px,2000px,1000px,-1000px);\n" +
"}\n" +
"\n" +
".ui-popup-arrow {\n" +
" width: " + size * sqrt2 + "px;\n" +
" height: " + size * sqrt2 + "px;\n" +
" left: " + ( ( ( 2 - sqrt2 ) * size ) / 2 ) + "px;\n" +
" top: " + ( ( ( 2 - sqrt2 ) * size ) / 2 ) + "px;\n" +
" border-width: 1px;\n" +
" border-style: solid;\n" +
"}\n" +
"\n" +
".ui-popup-arrow-container.ie .ui-popup-arrow {\n" +
" margin-left: -" + ( size / 3.5 ) + "px;\n" +
" margin-top: -" + ( size / 3.5 ) + "px;\n" +
"}\n" +
"\n" +
".ui-popup-arrow-background {\n" +
" width: " + ( 2 * size ) + "px;\n" +
" height: " + ( 2 * size ) + "px;\n" +
"}\n" +
"\n" +
".ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow-background {\n" +
" background-position: 0 " + size + "px;\n" +
"}\n" +
"\n" +
".ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow-background {\n" +
" background-position: " + size + "px 0;\n" +
"}\n" +
"\n" +
".ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow-background {\n" +
" background-position: 0 " + size + "px;\n" +
"}\n" +
"\n" +
".ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow-background {\n" +
" background-position: " + size + "px 0;\n" +
"}";
}
function updateArrowSize() {
var size = $( "#arrowSize" ).val(),
css = arrowCSS( size ),
pre = $( "<pre class='brush: css'>" + css + "</pre>" );
$( "#arrowCSS" ).empty().append( pre );
SyntaxHighlighter.highlight( {}, pre[ 0 ] );
timeoutId = 0;
if ( $.mobile.browser.oldIE && $.mobile.browser.oldIE <= 8 ) {
$( "#arrowStyle" )[ 0 ].styleSheet.cssText = css;
} else {
$( "#arrowStyle" ).text( css );
}
$( "#exampleArrow-l,#exampleArrow-r" ).css( "margin-top", -size );
$( "#exampleArrow-t,#exampleArrow-b" ).css( "margin-left", -size );
}
$.mobile.document
.on( "change", "#arrowSize", function( e ) {
if ( timeoutId ) {
clearTimeout( timeoutId );
}
timeoutId = setTimeout( updateArrowSize, 250 );
})
.on( "pagecreate", "#arrow-size-demo", function() {
updateArrowSize();
if ( $.mobile.browser.oldIE && $.mobile.browser.oldIE <= 8 ) {
$( "#exampleArrow-l,#exampleArrow-r,#exampleArrow-t,#exampleArrow-b" ).addClass( "ie" );
}
});
})( jQuery );
</script>
<style>
</style>
<style id="arrowStyle">
</style>
<style>
.ui-popup-arrow-container.ui-popup-arrow-l,
.ui-popup-arrow-container.ui-popup-arrow-r {
top: 50%;
}
.ui-popup-arrow-container.ui-popup-arrow-t,
.ui-popup-arrow-container.ui-popup-arrow-b {
left: 50%;
}
</style>
</head>
<body>
<div data-role="page" id="arrow-size-demo" class="jqm-demos">
<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
<?php include( '../../search.php' ); ?>
</div><!-- /header -->
<div data-role="content" class="jqm-content">
<h1>Popup arrow size</h1>
<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>
<div style="padding: 100px;">
<div style="position: static;" class="ui-popup-container ui-popup-active">
<div class="ui-popup ui-body-inherit ui-overlay-shadow ui-corner-all">
<p>This is what a popup would look like.</p>
<p>It contains multiple paragraphs.</p>
<p>Note that large arrows may not be displayed at all.</p>
<p>This is because their sides would "stick out" of the popup.</p>
<p>The arrow placement code prevents this.</p>
<div id="exampleArrow-l" class="ui-popup-arrow-container ui-popup-arrow-l">
<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
</div>
<div id="exampleArrow-r" class="ui-popup-arrow-container ui-popup-arrow-r">
<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
</div>
<div id="exampleArrow-t" class="ui-popup-arrow-container ui-popup-arrow-t">
<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
</div>
<div id="exampleArrow-b" class="ui-popup-arrow-container ui-popup-arrow-b">
<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
</div>
</div>
</div>
</div>
<form id="arrowSizeForm">
<input type="range" id="arrowSize" min="5" value="10" max="90" step="1"></input>
<div class="ui-body-b ui-corner-all" id="arrowCSS"></div>
</form>
</div><!-- /content -->
<div data-role="footer" class="jqm-footer">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /jqm-footer -->
<?php include( '../../global-nav.php' ); ?>
</div><!-- /page -->
</body>
</html>
View
@@ -40,7 +40,7 @@
<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>
<li data-section="Demo Showcase" data-filtertext="arrow popups popover"><a href="examples/popups/arrow.php" data-ajax="false">Popup with arrow</a></li>
<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>
<li data-section="Demo Showcase" data-filtertext="popups popup position alignment"><a href="examples/popups/alignment.php" data-ajax="false">Popup alignment</a></li>

0 comments on commit d08b0cb

Please sign in to comment.