1 This file was updated on Monday, 2014-09-29 at 4:21 PM
2
3
4 ======================================================================
5 GettysburgAddress-v2.json
6 ======================================================================
7
8
9 {
10 "title" : "Gettysburg Address" ,
11 "author" : "Abraham Lincoln (1809-1865)" ,
12 "authorsTitle" : "16th President of the United States" ,
13 "date" : "November 19, 1863",
14 "location" : "The Soldiers' National Cemetery, Gettysburg, Pennsylvania" ,
15 "text" : {
16 "paragraphs": [
17 [
18 "Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.",
19 "Now we are engaged in a great civil war, testing whether that nation or any nation so conceived and so dedicated can long endure."
20 ],
21 [
22 "We are met on a great battlefield of that war.",
23 "We have come to dedicate a portion of that field as a final resting-place for those who here gave their lives that that nation might live.",
24 "It is altogether fitting and proper that we should do this.",
25 "But in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow this ground.",
26 "The brave men, living and dead who struggled here have consecrated it far above our poor power to add or detract."
27 ],
28 [
29 "The world will little note nor long remember what we say here, but it can never forget what they did here.",
30 "It is for us the living rather to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced."
31 ] ,
32 [
33 "It is rather for us to be here dedicated to the great task remaining before us--that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion--that we here highly resolve that these dead shall not have died in vain, that this nation under God shall have a new birth of freedom, and that government of the people, by the people, for the people shall not perish from the earth."
34 ]
35 ]
36 }
37 }
38
39
40 ======================================================================
41 FormattingText-v9_Fall2014.html
42 ======================================================================
43
44
45 <!DOCTYPE html>
46 <html>
47 <head>
48 <meta charset="utf-8">
49
50 <!--
51 File: public_html\91.461\91.461-2010-11f\CSSTests\FormattingText\web\
52 FormattingText-v8_Fall2013.html
53 Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu
54 Copyright (c) 2010 by Jesse M. Heines. All rights reserved. May be freely
55 copied or excerpted for educational purposes with credit to the author.
56 updated by JMH on October 24, 2010 at 8:28 PM
57 updated by JMH on October 1, 2012 at 8:57 AM
58 updated by JMH on September 25, 2013 at 3:29 PM
59 updated by JMH on September 23, 2014 at 11:47 AM to detect browser
60
61 N.B. Extension must be .html, not .xhtml, or errors occur with < symbol.
62 Replacing < with < *seems* to correct the error in the browsers, but
63 NetBeans reports an error in the loop controls when you do that because it
64 gets "confused" by the semi-colon (;).
65 -->
66
67 <title>Formatting Dynamic Text Demonstration</title>
68
69 <!-- CSS file that defines basic styles for the text-->
70 <link type="text/css" rel="stylesheet" href="css/TextStyles-v8.css" />
71
72 <!--
73 load jQuery library from the Google Content Delivery Network (CDN)
74 see http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
75 however, note that you obviously must be online for this to work
76 alternatively, you can download jQuery and store it locally from
77 http://jquery.com/download/
78 -->
79 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
80
81 <!-- load the JSON file containing the text of Lincoln's Gettysburg address -->
82 <script type="text/javascript">
83 var story;
84
85 // Note to advanced students:
86 // Do *NOT* use the jQuery getJSON function here, because in this
87 // application the AJAX call has to be synchronous (that is, we need to
88 // wait for it to be done before continuing), and the getJSON function
89 // is always asynchronous. Reference:
90 // http://stackoverflow.com/questions/2765411/is-it-possible-to-set-asyncfalse-to-getjson-call
91 // The other approach is to change the global jQuery ajaxSetup option,
92 // but this is controversial, as discussed on the referenced page.
93 jQuery.ajax({
94 async: false,
95 dataType: "json",
96 url: "GettysburgAddress-v2.json" ,
97 success: function( data ) {
98 story = data ;
99 }
100 });
101
102 jQuery(document).ready( function() {
103 placeContent() ;
104 } ) ;
105 </script>
106
107 <!-- script to determine browser type and set first paragraph class appropriately -->
108 <script type="text/javascript">
109 var strFirstParaClass = "" ;
110 var strNavString = navigator.userAgent ;
111 // console.log( navigator.userAgent ) ;
112 // console.log( strNavString ) ;
113 if ( strNavString.indexOf( "Firefox" ) !== -1 ) {
114 strFirstParaClass = "Firefox" ;
115 } else if ( strNavString.indexOf( "Chrome" ) !== -1 ) {
116 strFirstParaClass = "Chrome" ;
117 } else if ( strNavString.indexOf( "Safari" ) !== -1 ) {
118 strFirstParaClass = "Safari" ;
119 }
120 </script>
121
122 <!-- script to place JSON text in the placeholder on this page -->
123 <script type="text/javascript">
124 // N.B. This version *does* apply the CSS.
125 function placeContent() {
126 var strContent = "";
127
128 // create dynamic content from JSON
129 strContent += "<h1 class='title'>" + story.title + "</h1>" ;
130 strContent += "<h2 class='author'>by " + story.author + "</h2>" ;
131 strContent += "<h2 class='authorsTitle'>" + story.authorsTitle + "</h2>" ;
132 strContent += "<h3 class='locationLabel'>delivered at:</h3>" ;
133 strContent += "<h3 class='location'>" + story.location + "</h3>" ;
134 strContent += "<h3 class='date'>" + story.date + "</h3>" ;
135
136 // loop through all the paragraphs and sentences
137 for ( var para = 0 ; para < story.text.paragraphs.length ; para++ ) {
138 strContent += "<p class=\"" + strFirstParaClass + "\">" ;
139 for ( var sent = 0 ; sent < story.text.paragraphs[para].length ; sent++ ) {
140 strContent += story.text.paragraphs[para][sent] + " " ;
141 }
142 strContent += "</p>" ;
143 }
144
145 // place dynamic content on page
146 // document.getElementById( "content" ).innerHTML = strContent ;
147 jQuery("#content").html( strContent ) ;
148 }
149
150 // N.B. This version does *NOT* apply the CSS!
151 function placeContent2() {
152 document.writeln( "<h1 class='title'>" + story.title + "</h1>" ) ;
153 document.writeln( "<h2 class='author'>by " + story.author + "</h2>" ) ;
154 document.writeln( "<h2 class='authorsTitle'>" + story.authorsTitle + "</h2>" ) ;
155 document.writeln( "<h3 class='locationLabel'>delivered at:</h3>" ) ;
156 document.writeln( "<h3 class='location'>" + story.location + "</h3>" ) ;
157 document.writeln( "<h3 class='date'>" + story.date + "</h3>" ) ;
158
159 for ( var para = 0 ; para < story.text.paragraphs.length ; para++ ) {
160 document.writeln( "<p>" ) ;
161 for ( var sent = 0 ; sent < story.text.paragraphs[para].length ; sent++ ) {
162 document.writeln( story.text.paragraphs[para][sent] + " " ) ;
163 }
164 document.writeln( "</p>" ) ;
165 }
166 }
167 </script>
168 </head>
169
170 <body>
171
172 <!-- static content -->
173 <h1 id="h1a">Formatting Text Demonstration</h1>
174 <h3>Jesse M. Heines, <a href="mailto:heines@cs.uml.edu">heines@cs.uml.edu</a><br/>
175 UMass Lowell Computer Science</h3>
176 <h4>Version 9.0, September 23, 2014</h4>
177
178 <div id="divLincolnImage">
179 <p><img src="gettysburg.jpg"></p>
180 <p><em>Picture Source:</em><br>
181 <a href="http://www.loc.gov/rr/program/bib/ourdocs/Gettysburg.html">
182 http://www.loc.gov/rr/program/bib/ourdocs/Gettysburg.html</a></p>
183 </div>
184
185 <!-- dynamic content -->
186 <div id="content"></div>
187
188 </body>
189
190 </html>
191
192
193 ======================================================================
194 css\TextStyles-v8.css
195 ======================================================================
196
197
198 /**
199 * Document : TextStyles-v8.css
200 * Created on : Oct 24, 2010, 4:23:44 PM
201 * Author : Jesse Heines, heines@cs.uml.edu
202 * Description:
203 * Styles to accompany FormattingText-vN.html.
204 *
205 * updated by JMH on October 1, 2012 at 9:42 AM
206 * updated by JMH on September 25, 2013 at 9:36 PM
207 * updated by JMH on September 23, 2014 at 11:45 AM to change firefox to Firefox
208 */
209
210 /* major header properties */
211 .title, .author, .authorsTitle {
212 font-family: Verdana, Helvetica, Arial, sans-serif ;
213 color: blue ;
214 margin: 0 0 0 0 ;
215 }
216 /* author's title header refinement */
217 .authorsTitle {
218 font-weight: normal ;
219 margin-left: 1.7em ;
220 }
221
222 /* minor header properties */
223 .location, .locationLabel, .date {
224 color: blue ;
225 }
226 /* minor header refinements */
227 .location, .locationLabel {
228 margin-bottom: 0 ;
229 }
230 /* additional minor header refinements */
231 .locationLabel {
232 font-style : italic ;
233 font-weight: normal ;
234 }
235 /* additional minor header refinements */
236 .location, .date {
237 margin-top: 0 ;
238 }
239
240 /* first letter of main text for Safari and Chrome */
241 h3.date + p:first-letter {
242 font-size: 3em ;
243 font-weight: bold ;
244 float: left ;
245 color: red ;
246 margin-right: 1px ;
247 margin-top: -0.15em ;
248 }
249 /* first letter of main text for Firefox */
250 h3.date + p.Firefox:first-letter {
251 margin-top: 0.15em ;
252 }
253
254 /* added by JMH on October 1, 2012 at 9:17 AM */
255 #divLincolnImage {
256 float: right ;
257 border: 3px solid black ;
258 padding: 10px ;
259 margin: 30px 0px 10px 20px ; /* T R B L */
260 }
261 #divLincolnImage p:first-child {
262 text-align: center ;
263 }
264 #divLincolnImage p:first-child img {
265 border: 1px solid black ;
266 }
267
268
269 ======================================================================
270