Permalink
Browse files

happy friday!

  • Loading branch information...
0 parents commit f79cbdc83acfbe88244f238abc5c09db397c5f17 @tegansnyder committed Jun 1, 2012
8 README
@@ -0,0 +1,8 @@
+JQuery Mobile Popup Textbox
+=============================================================
+
+This example is simple. Fixed header. Fixed footer. One button centered in the footer.
+
+Click the "My Notes" button to display a popup containing a textbox.
+
+![Alt text](/photo.png "Screenshot")
@@ -0,0 +1,52 @@
+.center {
+ text-align: center;
+}
+
+#tpop_overlay {
+ position: absolute;
+ z-index: 2147483646;
+ left: 0;
+ overflow: hidden;
+ width: 100%;
+ opacity: 0.4;
+ background-color: #000000;
+ display: none;
+}
+
+.tpop {
+ color: #666666;
+ background-color: #F3F3F3;
+ height: 100px;
+ position: absolute;
+ z-index: 2147483647;
+ height: 200px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ -webkit-box-shadow: 5px 4px 11px 2px rgba(153, 153, 153, 0.4);
+ box-shadow: 5px 4px 11px 2px rgba(153, 153, 153, 0.4);
+ display: none;
+}
+
+.tpop:after {
+ content: ' ';
+ height: 0;
+ position: absolute;
+ width: 0;
+ border: 25px solid transparent;
+ border-top-color: #F3F3F3;
+ top: 100%;
+ left: 50%;
+ margin-left: -25px;
+}
+
+.tpop textarea {
+ font-size:16px;
+ font-family: Arial, Helvetica, sans-serif;
+ border: 0px;
+ background-color: #F3F3F3;
+ position:relative;
+ left: 10px;
+ top:10px;
+ height: 90%;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="HandheldFriendly" content="True">
+ <meta name="MobileOptimized" content="320"/>
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
+ <meta http-equiv="cleartype" content="on">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+
+ <title>Popup Textbox by Tegan Snyder</title>
+
+ <!--Include JQM and JQ-->
+ <link rel="stylesheet" href="css/themes/jqmfb.min.css" />
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
+ <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+ <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+
+ <!--JQM SlideMenu-->
+ <link rel="stylesheet" href="css/jqm.popuptextbox.css" />
+ <script src="js/jqm.popuptextbox.js"></script>
+
+</head>
+
+<body>
+
+ <div data-role="page">
+
+ <div data-role="header" data-position="fixed">
+ <h1>Popup Textbox</h1>
+ </div>
+
+ <div data-role="content">
+
+ <p>This is an rough example of a popup textbox for entering notes. This is an rough example of a popup textbox for entering notes. This is an rough example of a popup textbox for entering notes. This is an rough example of a popup textbox for entering notes. This is an rough example of a popup textbox for entering notes. This is an rough example of a popup textbox for entering notes. This is an rough example of a popup textbox for entering notes.</p>
+
+ </div>
+
+ <div data-role="footer" data-position="fixed" class="center">
+ <a href="#" data-corners="false" data-role="tpop">My Notes</a>
+ </div>
+
+ </div>
+
+</body>
+
+</html>
@@ -0,0 +1,65 @@
+$(document).on("pageinit",":jqmData(role='page')", function(){
+
+ $(":jqmData(role='page')").prepend('<div id="tpop_overlay"></div>');
+ $('body').prepend('<div class="tpop tp"><textarea name="textarea" placeholder="Enter your notes"></textarea></div>');
+
+ $(document).on("click", ":jqmData(role='tpop')", function(event) {
+
+ event.preventDefault();
+
+ if (!$(":jqmData(role='tpop')").data('tpop_open')) {
+ init_tpop();
+ $('.tpop').show();
+ $('#tpop_overlay').show();
+ $(":jqmData(role='tpop')").data('tpop_open', true);
+ } else {
+ tpop_save($('.tpop textarea').val());
+ $('.tpop').hide();
+ $('#tpop_overlay').hide();
+ $(":jqmData(role='tpop')").data('tpop_open', false);
+ }
+
+ });
+
+ $(document).on("click", "#tpop_overlay", function(event) {
+ $('.tpop').hide();
+ $('#tpop_overlay').hide();
+ $(":jqmData(role='tpop')").data('tpop_open', false);
+ tpop_save($('.tpop textarea').val());
+ });
+
+ $(window).on('resize', function(){
+ if ($(":jqmData(role='tpop')").data('tpop_open')) {
+ init_tpop();
+ }
+ });
+
+});
+
+function tpop_save(txt) {
+ //do something like save to localStorage or ajax call
+ //console.log(txt);
+}
+
+function init_tpop() {
+ $('.tpop').width(viewport().width - 80);
+ $('.tpop').css('top', $(":jqmData(role='tpop')").offset().top - $('.tpop').height() - 30 + 'px');
+ $('.tpop').css('left', '40px');
+
+ $('.tpop textarea').width($('.tpop').width() - 23);
+
+ setTimeout(function() {
+ $('#tpop_overlay').css('top', $(":jqmData(role='header')").height() + 'px');
+ $('#tpop_overlay').height(viewport().height - $(":jqmData(role='footer')").height() - $(":jqmData(role='header')").height());
+ }, 200);
+}
+
+function viewport(){
+ var e = window;
+ var a = 'inner';
+ if (!('innerWidth' in window)) {
+ a = 'client';
+ e = document.documentElement || document.body;
+ }
+ return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
+}
BIN photo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f79cbdc

Please sign in to comment.