- stable spot with everything working.

- still needs styling
 - still need to combine search buttons.
 - need to switch jqueryui dialog for mobile popup

css/bible.css

@@ -1,8 +1,3 @@
-body {
-	background: #fff; /* #dde */
-	margin: 0;
-	font-family: verdana;
-}
 a 
 {
     color: #000;
@@ -13,76 +8,7 @@ a
 a:hover {
     border-bottom: 1px solid maroon;
 }
-
+#searchvalue {font-family: georgia;}
-em {font-style: normal;}
-
-#query {
-	background: #eee;
-	color: #444;
-	padding: 12px;
-	font-size: 14px;
-	font-weight: bold;
-	text-align: center;
-	border: 2px solid #999;
-	min-width: 300px;
-}
-
-#searchvalue
-{
-    color: #333; 
-    width: 100%; 
-    height: 50px;
-    line-height: 50px;
-    padding: 3px;
-    margin-left: 6px;
-    font-size: 18px;
-    font-family: georgia;
-}
-#searchbtn 
-{
-    height: 52px; 
-    width: 90px;
-}
-
-h1 {
-	color: #313952;
-	font: 36px georgia;
-	font-weight: normal;
-	background: white;
-	margin: 0 10px 0 0;
-	padding: 10px;
-	text-align: center;
-}
-h1 span {
-	font: 12px verdana;
-	display: block;
-	color: #999;
-}
-h3 {
-	font: 18px verdana;
-	font-weight: bold;
-	background: #ccc;
-	padding: 5px 5px 0 5px;
-	margin: 0;
-}
-
-#searchresultswrap {
-	font: 18px verdana;
-	width: 30%;
-	float: left;
-}
-
-#searchresultswrap h3 {
-	margin: 0;
-	background: #eee;
-	border-right: 2px solid #999;
-	border-top: 2px solid #999;
-	border-left: 2px solid #999;
-	margin-right: 16px;
-	margin-left: 16px;
-	text-align:center;
-}
-
 #searchresults {
     xmargin-right: 10px;
     padding: 0 10px 10px 10px;	
@@ -126,11 +52,11 @@ h3 {
 }
 
 #resultwrap {
-	width: 70%;
     float: left;
     font: 18px georgia;
-	color: #000;
+
 }
+
 #resultwrap h3 {
     margin: 0;
     background: white;
@@ -138,7 +64,6 @@ h3 {
     padding: 0 10px;
 }
 #result {
-
     margin: 0 0 12px 12px;
     padding: 0 12px 0 0;
     line-height: 200%;
@@ -153,17 +78,28 @@ h3 {
     display: block;
     border-bottom: 1px dotted #bbb;
     margin-bottom: 12px;
-	
     background-color: #fff;
+    padding: 6px;
+
+    -moz-border-radius: 15px;
+    -webkit-border-radius:15px;
+    border-radius: 15px;
 }
 
 .removeresult
 {
     float: left;
     display: block;
-    margin: 0 9px 12px 0;
+    margin: 20px 9px 12px 0;
     text-decoration: none;
     border: 0px;
+
+    -khtml-opacity:.80; 
+    -moz-opacity:.80; 
+    -ms-filter:"alpha(opacity=80)";
+    filter:alpha(opacity=80);
+    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.8);
+    opacity:.80;
 }
 .result .resultbody
 {
@@ -195,6 +131,7 @@ h3 {
 
 
 a.trigger{
+    visibility: hidden;
     position: absolute;
     background: url(images/open.png) 6% 55% no-repeat;
     text-decoration: none;
@@ -205,14 +142,20 @@ a.trigger{
     font-weight: bold;
     border-bottom: none;
     margin-left: 2px;
-	
     z-index:2;
+
+    -khtml-opacity:.50; 
+    -moz-opacity:.50; 
+    -ms-filter:"alpha(opacity=50)";
+    filter:alpha(opacity=50);
+    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
+    opacity:.50; 
 }
 a.trigger.left {
-	left: 12px;
+    left: 28px;
 }
 a.trigger.right {
-	right: 12px;
+    right: 28px;
 }
 a.trigger:hover {
     text-decoration: none;
@@ -220,19 +163,19 @@ a.trigger:hover {
 }
 a.active.trigger {
     background: url(images/close.png) 6% 55% no-repeat;
+
 }
 .panel {
     color:#000;
     position: absolute;
     display: none;
     background: #eee;
-	width: 300px;
+    width: 400px;
     height: auto;
-
     z-index:1;
 }
 .panel.left {
-	left: 10px;
+    left: 20px;
     padding: 10px 20px 10px 60px;
     border-top-right-radius: 15px;
     -moz-border-radius-topright: 15px;
@@ -242,7 +185,7 @@ a.active.trigger {
     border-bottom-right-radius: 15px;
 }
 .panel.right {
-	right: 10px;
+    right: 20px;
     padding: 10px 60px 10px 20px;
     border-bottom-left-radius: 15px;
     border-top-left-radius: 15px;
@@ -255,3 +198,35 @@ a.active.trigger {
     font-size:11px;
 }
 a:focus { outline: none;}
+
+
+#menuicon
+{
+    display: block;
+    background-image: url(images/icons-sd.png);
+    background-position: 0,0;
+    background-repeat: no-repeat;
+    width: 50px;
+    height: 50px;
+    margin-left: 6px;
+    border: none;
+}
+#menuicon:hover { border-bottom: none;}
+#menuicon:hover { border-bottom: none;}
+
+#searchicon
+{
+    display: block;
+    background-image: url(images/icons-sd.png);
+    background-position: -90px;
+    background-repeat: no-repeat;
+    width: 50px;
+    height: 50px;
+    margin-left: 6px;
+    border: none;
+}
+#searchicon:hover { border-bottom: none;}
+#searchicon:hover { border-bottom: none;}
+
+
+.ui-content {padding: 12px 0 12px 0;}

css/themes/db.css

@@ -51,7 +51,6 @@
 }
 .ui-body-a,
 .ui-overlay-a {
-	border: 1px solid #aaaaaa /*{a-body-border}*/;
 	color: #333333 /*{a-body-color}*/;
 	text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #ffffff /*{a-body-shadow-color}*/;
 	background: #f9f9f9 /*{a-body-background-color}*/;
@@ -188,7 +187,6 @@
 }
 .ui-body-b,
 .ui-overlay-b {
-	border: 1px solid #aaaaaa /*{b-body-border}*/;
 	color: #333333 /*{b-body-color}*/;
 	text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #ffffff /*{b-body-shadow-color}*/;
 	background: #f9f9f9 /*{b-body-background-color}*/;
@@ -327,7 +325,6 @@
 }
 .ui-body-c,
 .ui-overlay-c {
-	border: 1px solid #aaaaaa /*{c-body-border}*/;
 	color: #333333 /*{c-body-color}*/;
 	text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #ffffff /*{c-body-shadow-color}*/;
 	background: #f9f9f9 /*{c-body-background-color}*/;

index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-	<meta http-equiv="Access-Control-Allow-Origin" content="*">
+        <meta http-equiv="Access-Control-Allow-Origin" content="*" />
         <meta name="author" content="Jason Wall" />
         <meta name="PBO.auth" content="8bff0c5d7a8f61d1e5dfa6c58da67c2b" />
         <meta name="geo.country" content="US" />

index2.html

@@ -1,57 +1,110 @@
 <!doctype html>
 <html>
     <head>
-        <title>My Page</title>
+        <meta name="author" content="Jason Wall" />
+        <meta name="geo.country" content="US" />
+        <meta name="dc.language" content="en" />
+        <meta name="description" content="An AJAX implimentation of The King James Version Bible with Strong's Dictionary integrated." />
+        <meta name="keywords" content="AJAX, KJV, King James Version, Strong's Dictionary, Strongs" />
+
+        <title>The Bible with Strong's Numbers and Cross References</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="css/themes/db.css" />
         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
+        <link rel="stylesheet" href="css/themes/db.css" />
+
+        <style>@import "css/bible.css";</style>
+
         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
         <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
+
+        <script data-main="js/main" type="text/javascript" src="js/require-jquery.js"></script>
         <style>
-            html, body { padding: 0; margin: 0; }
+            .panel-content { padding:3px; }
-            html, .ui-mobile, .ui-mobile body {
-                height: 435px;
-            }
-            .ui-mobile, .ui-mobile .ui-page {
-                min-height: 435px;
-            }
-            .ui-content{
-                padding:10px 15px 0px 15px;
-            }
-            .panel-content { padding:15px; }
 
-            #menuicon
+            .ui-btn-text { font-size: .75em;}
-            {
+            h3 { font-size: 1em;}
-                display: block;
+            p {font-size: .8em;}
 
-                background-image: url(/images/icons-sd.png);
+            .ui-submit  .ui-btn-inner .ui-btn-text { font-size: 1.2em;}
-            }
+            .ui-submit {height:35px;}
-            @media all {
+            
-                .left {width: 100px; float: left; z-index: 100;}
+            /*
-            }
+            .resultbody { max-width: 600px;}
+            @media all and (min-width: 900px) {
+                .resultbody {
+                    -webkit-columns: 2;
+                    -moz-columns: 2;
+                    columns: 2;
+                }
+            }
+            */
 
-            .ui-input-search {width: 300px;}
-            .ui-submit {width:100px;}
         </style>
     </head>
     <body>
         <div data-role="page">
 
-            <div data-role="header" data-theme="b">
+            <div data-role="header" data-theme="a">
-                <table><tr><td><a id="menuicon" href="#defaultpanel">Menu</a></td><td><input id="searchvalue" type="search" /><input value="Search" type="submit" id="searchbtn" /></td></tr></table>
+                <div class="ui-grid-c my-breakpoint">
-
+                    <div class="ui-block-a"><a id="menuicon" href="#defaultpanel"></a></div>
-
+                    <div class="ui-block-b"><input id="searchvalue" type="search" /></div>
+                    <div class="ui-block-c"><input value="Search" type="submit" id="searchbtn" /></div>
+                    <div class="ui-block-d"><a id="searchicon" href="#searchpanel"></a></div>
+                </div>
             </div>
 
 
             <div data-role="content">
-
+                <div id="resultwrap">
+                    <ul id="result"></ul>
                 </div><!-- /content -->
+            </div>
 
-            <div data-role="panel" id="defaultpanel" data-theme="b">
+            <div data-role="panel" id="searchpanel" data-theme="a" data-position="right">
                 <div class="panel-content">
-                    <h3>Default panel options</h3>
+                    <h3>Search Results: <span id="searchTotal"></span></h3>
-                    <p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
+                    <div id="searchresults"></div>
+                </div>
+            </div>
+
+            <div data-role="panel" id="defaultpanel" data-theme="a">
+                <div class="panel-content">
+                    <h3>Settings</h3>
+                    <ul data-role="listview">
+                        <li><label><input type="checkbox" name="display-strongs-as-dialog" id="display-strongs-as-dialog" />Display Strong's in Dialog</label></li>
+                        <li><label>Select Font: 
+                                <select id="changefont">
+                                    <option value="georgia" selected="selected">Georgia</option>
+                                    <option value="verdana">Verdana</option>
+                                    <option value="courier">Courier</option>
+                                    <option value="serif">Serif</option>
+                                    <option value="sans-serif">Sans Serif</option>
+                                </select>
+                            </label>
+                        </li>
+                        <li><span style="letter-spacing:2px;"><a href="javascript:void();" id="shrinkfont">A<span style="font-size:12px;">A</span></a> | <a  href="javascript:void();" id="growfont"><span style="font-size:12px;">A</span>A</a></span></li>
+                    </ul>
+                    <h3>Acceptable Search Items:</h3>
+                    <p>
+                        <b>John 1</b> (displays whole chapter)<br />
+                        <b>John 1-2</b> (displays both chapters<br />
+                        <b>John 1 - John 2</b> (same as above)<br />
+                        <b>John 1:3 - 2:4</b> (displays verses starting with chapter 1 verse 3 and ending with chapter 2 verse 4)<br />
+                        <b>John 1:3 - John 2:4</b> (same as above)<br />
+                        <b>John 1:3-5</b> (displays verses starting with chapter 1 verse 3 through chapter 1 vs 5)<br />
+                        <b>H1234</b> (displays the Strong's definition for the Hebrew # 1234)<br />
+                        <b>G1234</b> (displays the Strong's definition for the Greek # 1234)<br />
+                        <b>Jesus</b> (searches for "Jesus".  all search terms assume boolean AND, i.e. "Jesus Christ" assumes "Jesus AND Christ".  an word without a number is interpreted as search).<br />
+                    </p>
+                    <h3>Notes:</h3>
+                    <p>
+                        multiple lookups can be made using a semicolon as a separator, i.e. "Ruth 1; g1234; Jesus").  <br />
+                        <br />The list of results in the main window are sortable, just click and drag to reorder them.<br /><br />
+                        <br />All Greek/Hebrew cross references translations are taken from the 1933 Webster's version and often are not the same as the KJV translation. <br />
+                        <br />All source materials were taken from the <a href="http://sourceforge.net/projects/zefania-sharp/">Zefania XML Bible Project</a> on SourceForge.  <br />
+                        <br />Any Errors and Omission you find would be appreciated. Please contact me via <a href='http://www.jasonwall.org/'>www.jasonwall.org</a>.<br />
+                    </p>
+
 
                 </div>
             </div>

js/common.js

@@ -160,16 +160,6 @@ define(['jquery', 'reference', 'jquery.ui'],
                             $("#searchresultswrap").css("float", localStorage.Panes);
                         }
                     }
-                    if (localStorage.Search !== "undefined" && localStorage.Search == "none") {
-                        $("#searchresultswrap").css("display", "none");
-                        $("#showhidesearch").html("Show Search");
-                        $("#resultwrap").css("width", "100%");
-
-                    } else {
-                        $("#searchresultswrap").css("display", "block");
-                        $("#showhidesearch").html("Hide Search");
-                        $("#resultwrap").css("width", "70%");
-                    }
 
                     if (localStorage.FontSize !== "undefined") {
                         $("#result").css("font-size", localStorage.FontSize);
@@ -206,35 +196,6 @@ define(['jquery', 'reference', 'jquery.ui'],
                     localStorage.StrongsAsDialog = $("#display-strongs-as-dialog")[0].checked;
                 }
             },
-            ShowHideSearch: function() {
-                var o = $("#showhidesearch");
-                var s = $("#searchresultswrap");
-                var r = $("#resultwrap");
-
-                if (s.css("display") != "none") {
-                    s.css("display", "none");
-                    o.html("Show Search");
-                    r.css("width", "100%");
-                } else {
-                    s.css("display", "block");
-                    o.html("Hide Search");
-                    r.css("width", "70%");
-                }
-                this.Save();
-            },
-            SwitchPanes: function() {
-                var s = $("#searchresultswrap");
-                var r = $("#resultwrap");
-                var v = s.css("float");
-                if (v == "right") {
-                    s.css("float", "left");
-                    r.css("float", "left");
-                } else {
-                    s.css("float", "right");
-                    r.css("float", "right");
-                }
-                this.Save();
-            },
             IncreaseResultFontSize: function() {
                 var s = $("#result").css("font-size");
                 $("#result").css("font-size", parseInt(s) + 1);

js/main.js

@@ -2,7 +2,12 @@ require(["jquery", "db", "common", "reference", "jquery.cookie", "jquery.ui", "j
         function($, db, common, ref) {
             $(document).ready(function()
             {
-            $("#searchform").submit(function()
+                $("#searchvalue").keypress(function(event) {
+                    if (event.which === 13) {
+                        common.Search($("#searchvalue").val());
+                    }
+                });
+                $("#searchbtn").click(function()
                 {
                     common.Search($("#searchvalue").val());
                     return false;
@@ -58,11 +63,17 @@ require(["jquery", "db", "common", "reference", "jquery.cookie", "jquery.ui", "j
                 // you need to do this last, otherwise the settings load resets the window height.
                 $(window).bind("resize", function()
                 {
-                $("#searchresults").css("height", window.innerHeight - 200);
+                    $(".my-breakpoint.ui-grid-c .ui-block-a").css("width", 55);
+                    $(".my-breakpoint.ui-grid-c .ui-block-b").css("width", window.innerWidth - 230);
+                    $(".my-breakpoint.ui-grid-c .ui-block-c").css("width", 100);
+                    $(".my-breakpoint.ui-grid-c .ui-block-d").css("width", 55);
                     return false;
                 });
 
-            $("#searchresults").css("height", window.innerHeight - 200);
+                $(".my-breakpoint.ui-grid-c .ui-block-a").css("width", 55);
+                $(".my-breakpoint.ui-grid-c .ui-block-b").css("width", window.innerWidth - 235);
+                $(".my-breakpoint.ui-grid-c .ui-block-c").css("width", 100);
+                $(".my-breakpoint.ui-grid-c .ui-block-d").css("width", 55);
             });
         });