-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
320 lines (206 loc) · 29.8 KB
/
index.html
File metadata and controls
320 lines (206 loc) · 29.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Data Docs: Interactive video and audio</title>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<link rel="stylesheet" href="css/fonts.css" type="text/css"/>
<link rel="stylesheet" href="css/navbar.css" type="text/css"/>
<link rel="stylesheet" href="css/structure-styles.css" type="text/css"/>
<link rel="stylesheet" href="css/thirdparty/jquery.ui.all.css" type="text/css"/>
<script src="js/thirdparty/jquery-1.9.1.js"></script>
<script src="js/thirdparty/jquery.ui.core.js"></script>
<script src="js/thirdparty/jquery.ui.widget.js"></script>
<script src="js/thirdparty/jquery.ui.accordion.js"></script>
</head>
<body>
<!-- Top nav bar -->
<div id="navigation">
<ul class="nav">
<a href="#what" class="">DATA DOCS</a>
<a href="#what">What is Data Docs?</a>
<a href="#how">How to make a Data Doc</a>
</ul>
</div>
<!-- Main content -->
<div class="datadocs-main-canvas-800">
<!-- About Section -->
<div id="what">
<h1>What is Data Docs?</h1>
<iframe width="800" height="450" src="knight_demo/examples/input_text/dd_input_text.html" frameborder="0" allowfullScreen></iframe>
</br>
</br>
<p>Data docs is a video platform that allows filmmakers and journalist to combine elements from the web, such as interactive graphics, text and scraped information, with linear media, such as video and audio.</p>
<p>Having worked in video both in long-form documentary and web video, we understand the power of visual media. Videos are powerful vehicles that we can use to tell personable or explanatory immersive stories. But one of the drawbacks of video as a medium is that they are finished products, which, after they have been published, become outdated fairly quickly.</p>
<p>Advances in technology and data bases has allowed for data to be more flexible than video. Data visualizations and interactive infographics, for instance, can be up-to-date at any moment in time if they are hooked up to the right data bases. Think of charts of stock markets that updated every millisecond because APIs or other technological mechanisms feed them live data.</p>
<p>We wanted to combine those two worlds — the world of immersive video storyelling and that of live and constantly updated data. This is why we created Data Docs.</p>
<p>Through the Data Docs code library filmmakers and developers can 'hook up' their video to live data and other up-to-date information from the web. The library also allows you to integrate your own interactives with specific fonts and styles into your video. It enables you to project HTML, CSS and JavaScript-based graphics on your video. This helps you make videos that will never be out of date or, in other words, to make videos that are evergreen.</p>
<img src="http://datadocs.org/training/images/illustration_how_it_works.png">
<p><i>An illustration how the Data Docs platform works.</i></p>
<h2>Sample story: The Jobs Report</h2>
<p>Every first Friday of the month, newspapers across the U.S. report these two numbers: the number of jobs added to the economy in the past month and the unemployment rate. "We added 120,000 jobs last month!," a headline might proclaim. "Unemployment rate is at 7.2%!," another outlet might print. We take these kinds of headlines for granted, but they are almost meaningless without context. </p>
<p>What do we need to know to truly understand them? The sample data story below explains the government's jobs report to you:</p>
<iframe width="800" height="500" src="http://datadocs.org/prototype/embed.html" frameborder="0" allowfullScreen></iframe>
<p>For best viewing experience, please go here: <a href="http://www.datadocs.org/prototype/">http://www.datadocs.org/prototype/</a></p>
<p>The prototype displays multiple features of Data Docs.</p>
<ol>
<li><b>Customized lower thirds/chyrons</b>: We used data docs to display expert names and their titles on top of video (time code: starting at 0:00 but used throughout the video). This allows you do make text changes on the separate from the video, allowing you to change information without having to re-export the video file.
</br><i></i>
</li>
<li><b>Customized text on screen</b>: To keep with the look-and-feel of the animation we made an alphabet that mimicks the twitchy, black-and-white and hand-drawn of the entire piece. This allows the text that we're changing to integrate seemlessly into the video and avoids interrupting the viewer's experience of the video (see an example at time code: 0:44).</li>
<li><b>Interactive components on your video</b>: We drew an interactive chart on top of the video and displayed the chart when it was relevant to the story told in the video. The chart is drawn from a data feed on the web — for coders: it's drawn from an API — and is hence always up-to-date (time code: 2:23)</li>
</ol>
<p>Below you will find step-by-step instructions that help you integrate different features into your video. If you're a filmmaker interested in using these libraries, we highly recommend you pair up with a developer.</p>
</div>
<div id="how">
<h2>How To Get Started</h2>
<p>If you're new to working with code on github, the simplest way to get started is to use the "<a href="https://github.com/datadocs/datadocs/archive/master.zip">Download Zip</a>" button at the lower right of the <a href="https://github.com/datadocs/datadocs">datadocs/datadocs repo</a> page to download all the code to your computer. Once you've unzipped the package, you'll have all the same files and folders that you can see online.</p>
<p>To get a sense for what DataDocs can do, we recommend that you actually skip the main index.html file in the main folder, and instead navigate down into the examples folders. Each of these folders is named after the DataDocs feature it demonstrates, and looking at the index.html file in each of these folders will give you a good sense of what the DataDocs platform can do - from adding simple text overlays to your video all the way up to loading dynamic data and interactive charts. Though each of these examples only shows one feature in action at a time, they can, of course, all be combined into a single DataDoc and used multiple times in a single video.</p>
<p><i>Note: because of browser restrictions, it is easiest to view all examples in FireFox; the ones that load external data will not work on your desktop in Chrome (and none of them are likely to work in Internet Explorer!).</i></p>
<h2>About the Examples</h2>
<p>One thing that can be tricky at first about adapting examples from github is the file structure. You'll probably want your finished DataDoc to live on a page at something like <code>mydomain.com/myDataDoc.html</code>. In order to keep everything in sync on github, though, if you simply duplicate or modify a set of existing example files, they will need to live inside two sets of folders to work, just the way the example files do.</p>
<p>The way around this is simple: when you're ready to move your DataDoc to the web, go into your index.html and delete the ../../ from in front of any links or URLs that have them. Then, when you publish, you make sure that you add all of the files from your video to the various css/assets folders that are in the main DataDocs folder (you can also feel free to delete any videos or data files in the existing folders that your DataDoc does not use), and replace index.html and main.js with your own files. Once you've done that, you should be all set.</p>
<p>In each of the examples below, you can always replace the underlying video with your own by saving your video files in the <code>assets/videoFiles</code> folder, and then update the <code>source</code> links in the HTML page of whatever example you're using. Likewise, you will probably want to update the <code>poster</code> image link in the <code>video</code> tag to match the content of your video.</p>
<p><i>Note: You should make sure the poster image matches the initial size of your video, and be sure to leave its styles set to width & height 100%.</i></p>
</div>
<div id="accordion">
<h3>Example 1: Adding simple text</h3>
<div>
<p><a href="http://www.datadocs.org/examples/examples/simple_text/dd_simple_text.html" target="_blank">Try the "simple text" live demo</a></p>
<p>The "simple text" DataDocs example demonstrates exactly that: how to add some static text fields to your video in the webfont of your choice. The process is as follows (note that unless otherwise specified, whenever we say "open" we mean open the file in your favorite text editor - Aptana Studio 3 is free and cross-platform, Sublime Text is also great):</p>
<p>1. Open up <code>dd_simple_text.html</code>. Near the top of the file, you'll see some text that says "load our webfont" with a link on the line below. That link comes from the Google Webfonts directory, and tells our page to load, in this case, the font "PT Mono". Feel free to change this link to the webfont of your choice.</p>
<p>2. Scroll down the HTML code a bit until you find the <code>overlays</code> div. You'll notice that there are 3 other <code>div</code> tags inside, each with a distinct id. Inside these is the text that appears in the DataDoc. Feel free to change this text and/or the ids of the divs.</p>
<p>3. Open up <code>css/dd_simple_text.css</code>. You'll notice that there are 3 css tags, each of which corresponds to one of the divs in the original HTML file. Here you can change the color, position and font-size of your text; you can also change the font-family to match your new one if you've updated that link in the HTML file. >Note: make sure that the CSS class names match the id of your divs.</p>
<p>4. Open up <code>main.js</code>. In this file, you'll see three calls to the <code>data_doc.addSalt</code> each of which has a <span>target</code> field that matches one of the original divs. Adjust these fields to match you new div ids, if you've changed them. Next, adjust the <code>start</code> and <code>end</code> fields on each one to match when (in seconds) during the video you want your divs to appear and disappear.</p>
<p>5. Open <code>dd_simple_text.html</code> in your web browser, and see your customized DataDocs in action!</p>
<p><i>Tip: You can add as many text divs, css classes and addSalt calls as you need for your video. Just make sure all the ids are unique, and that each one has a corresponding css class and addSaltcall with the id in the target field.</i></p>
<p>Need to add a lot of text? Check out the next example for a bulk method of adding text to your Data Doc.</p>
</div>
<h3>Example 2: Adding multiple text formats </h3>
<div>
<p><a href="http://www.datadocs.org/examples/examples/multi_text/dd_multi_text.html" target="_blank">Try the "multi-text" live demo</a></p>
<p>The multiple text formats or "multi_text" DataDocs example demonstrates how to use a specially formatted JSON file to more efficiently add lots of text overlays to a DataDoc. You can still use any webfont you like, but instead of manually adding divs, CSS classes and "addSalt" calls to your files, you edit a single JSON file where you specify all the information necessary to position and time your text.</p>
<p>1. Open up <code>assets/dataFiles/text_labels.json</code>. On line 2, you'll see a JSON element called <code>stylesheet</code>. This is where you can specify the font (or webfont) that should be the default for all of your text labels (don't worry, you can override these for individual pieces of text).</p>
<p>2. Inside the <code>text_blocks</code> JSON array, you'll see a series of individual elements, each of which contains 3 arrays (enclosed by square brackets []). The <code>top_left</code> array controls the positioning of the text div that will be created. The <code>start_end</code> array specifies the time, in seconds when the text will appear and disappear. The <code>text_list</code> array may contain one or more elements, each of which corresponds to a individual line of <code>text</code> in the final video. Each element must have at least a text field that contains the text to display, and may include an optional <code>fontSize</code> and <code>fontFamily</code> field, specifying the point size and font that should be applied only to that line of text, if different from the default. Note that multiline text is achieved by adding putting multiple elements into a single <code>text_list</code> array. Feel free to add, remove and change these elements as you like.</p>
<p>3. Open up <code>dd_multi_text.html</code> in FireFox (this example won't work in Chrome on your desktop). You should see the video with your new text fields and timing appear!</p>
<p><i>Note: If you don't want your text file to be called text_labels.json be sure to rename it while keeping the .json extension. Then in main.js, change the name of the .json file targeted in the $.get function to match your own.</i></p>
</div>
<h3>Example 3: Reveal Text</h3>
<div>
<p><a href="http://www.datadocs.org/examples/examples/reveal_text/dd_reveal_text.html" target="_blank">Try the reveal text live demo</a></p>
<p>The reveal_text example demonstrates how to add a "reveal" effect to data docs text, so that words or phrases in an individual text div appear in sequence rather than all at once. To review the process for adding text, changing its font and adjusting its timing in the video, refer to the instructions for the simple_text example above. Once you've got all the timing, positions and appearance set, just do the following:</p>
<p>1. In one of the text divs inside your <code>dd_reveal_text.html</code> file, add pipes (|) wherever you want there to be a delay in the text's appearance.</p>
<p>2. In the main.js file, make sure that each addSalt method has two added parameters: <code>has_reveal: "true"</code> and <code>reveal_timeout: 300</code> (where 300 is the number of milliseconds' delay between text snippets revealed. The delay can be different for each piece of text, and you can mix "reveal" text with "simple" text in any combination you like within a DataDoc.</p>
<p>3. Open up your <code>dd_reveal_text.html</code> file in your browser, and check out your DataDoc!</p>
</div>
<h3>Example 4: Launch a URL from your video</h3>
<div>
<p><a href="http://www.datadocs.org/examples/examples/launch_url/dd_launch_url.html" target="_blank">Try the live demo and click on a URL in the video</a></p>
<p>DataDocs is designed to help videos be more web native; in addition to interacting with web-based API data (see below) and supporting interactive graphics (see below), DataDocs allows you to make the content of any of the divs in your <code>overlays</code> container into a button that opens a URL in a new window or tab, which automatically pauses the video for the user. In the current example, text divs are added to the video in the same manner as seen in the simple text example above. Each one is then tied to a specific URL using the <code>addCaramel</code> function, as explained below:</p>
<p>1. Once you have the text customized as you'd like in your <code>dd_launch_url.html</code> file, open up <code>main.js</code>. You'll see that for each of the divs in the original HTML file, there is a call to <code>data_doc.addCaramel</code> that has two parameters: <code>url</code> and <code>target</code>. Adjust these values so that for each div you'd like to link to a given URL, there is a <code>data_doc.addCaramel</code> call that has the div id as the <code>target</code> and the desired URL in the corresponding url field.</p>
<p>2. To make it clear to the user which pieces of text are clickable, we suggest that you apply some additional CSS to text divs that open URLs. In the <code>dd_launch_url.html</code>, try adding one of the following classes to your linked text divs: shadow, glow or outline. You'll find these classes in the <code>css/dd_launch_url.css</code> file, where you can feel free to customize them to suit your video's style. We suggest choosing a single style for linked text and sticking to it throughout an individual DataDoc.</p>
<p>3. Open up <code>dd_launch_url.html</code> in FireFox or Chrome on your computer, and check out your links' styles and functionality!</p>
</div>
<h3>Example 5: Add a JavaScript element to your video</h3>
<div>
<p><a href="http://www.datadocs.org/examples/examples/execute_js/dd_execute_js.html" target="_blank">Try the live demo</a></p>
<p>Beyond opening a specified URL, DataDocs allows a click on an overlay element to trigger an arbitrary JavaScript function with additional parameters. For the basic setup overview, refer to the instructions above for examples/launch_url. Then adjust the files as below:</p>
<p>1. Open <code>dd_execute_js.html</code>. Towards the bottom of this file, you will find the <code>div id="external_content"</code> element with some placeholder text in it. This is the div that our JavaScript function will update when the <b>policy_text</b> overlay is clicked. The layout styles for this div can be found in <code>dd_execute_js.css</code>. Note that the "external_content" div is outside of the "all_info" div that we have specified as our video's fullscreen container (refer to DataDocs structural overview for more details on how the libraries organizes these divs). We have placed "external_content" outside of this because this particular content is "outside" of our main video and should not be included in fullscreen mode. >Note: Other Data Docs overlay divs can also be targeted with these functions.</p>
<p>2. Open <code>main.js</code> and navigate to the <code>addCaramel</code> entry with the target "policy_text". Instead of <code>url</code>, this instance includes two options: <code>function_name</code>, which is assigned the string name of the function that a click on the target div should trigger, and the optional <code>function_params</code>, which is a JSON object containing any other information that the JavaScript function should know about. Try changing the value of the <code>text</code> entry of this object.</p>
<p>3. At the bottom of <code>main.js</code> is the particular JavaScript function this example uses; is called <code>policyClickHandler</code>. Although we do not use it here, the actual click event will always be the first argument passed to any function triggered this way; the second argument will hold the <code>function_params</code> object specified in the <code>addCaramel</code> call (if included). In this simple example, we use the <code>target</code> part of the <code>paramsObject</code> to access our "external_content" div, and then simply set its contents to the value of the paramsObject "text" property.</p>
<p>4. Open up <code>dd_execute_js.html</code> in Firefox or Chrome on your desktop, and watch what happens when you click the "Influence Monetary Policy" text!</p>
</div>
<h3>Example 6: Use an API</h3>
<div>
<p><a href="http://www.datadocs.org/examples/examples/simple_api/dd_simple_api.html" target="_blank">Try the live demo</a></p>
<p>The simple api DataDocs example shows how you can use the data returned by an application programming interface (API) call in your DataDocs video. The trick here is to make sure that you create one (or more) empty <code>div</code> tags in your HTML file either by writing them directly into the "overlays" div as you would in the simple text example, but leave them empty. Alternatively, you can add the necessary <code>div</code> tags with JavaScript or jQuery, as we have in this example.</p>
<p>Once the empty div has been added to your "overlays" div, you will call data_doc.addSalt as usual, followed by a $.get request for the JSON file that has your data. It is then up to you to write a callback function that extracts the data you want from the JSON file and adds it to the <code>div</code> tag of your choice.</p>
<p><i>Note: Due to browser security restrictions, it is generally not possible to load data directly from an API into your DataDoc. In order to include data in your DataDoc that updates itself regularly, you will have to set up what is known as a "cron" job on your server. For an overview of setting up cron jobs, see the code box below.</i></p>
<!-- Code snippet starts -->
<pre><code>A "cron" (as in "chronic") job is a script that lives on a web server and runs at specified intervals. It is often used to
retrieve and save copies of API data on your own domain; this lets your web pages (and DataDocs!)
load this data while avoiding cross-domain browser security restrictions and also generally prevents your
applications from being rate-limited (i.e. blocked) by your data provider for calling the API too frequently.
For specifics on how to set up a cron job on your server, you'll need to consult your web hosting
provider, both to make sure that your account supports curl scripts (a common method of retrieving data
from other domains) and on how activate and/or use them with your particular provider.
In general, you can set up a cron job by doing a variation of the following: ssh into your hosting account,
and then type "crontab -e" and hit enter. The beginning of any cron job specifies the when the script runs using
the following 5 parameters, as follows (an asterisk means run the script on every one of that interval):
minute: 0-59
hour: 0-23
day of month: 1-31
month: 1-12
day of week: 0-7 (0 and 7 both Sunday)
So, for example, a crontab line that begins with
0,15,30,45 12 * * *
Would run the script on that line at 12, 12:15, 12:30, & 12:45 every day of every month all year long.
After you've specified the frequency, you'll write something like
curl /usr/bin/curl -o ~outputfilePath/outputfileName.json http://applicationProgrammingInterfaceCallHere
In the above command, "curl /usr/bin/curl" is the curl command, plus the path that our particular hosting
provider requires that we use for curl itself. the "-o" parameter specifies that the name of the output file
will be different than that of the URL being called. The "~outputfilePath/outputfileName.json" parameter specifies where the
copied data should be saved, and with what name. Finally the "http://applicationProgrammingInterfaceCallHere"
is the actual URL from which you want to copy the data.
As an example, here's an example of what one of the DataDocs prototype curl commands looks like:
* 8,9 * * 5 /usr/bin/curl -o ~/datadocs.org/prototype/dataFiles/MonthlyJobsChanges.json http://api.stlouisfed.org/fred/series/observations?series_id=PAYEMS&observation_start=2010-10-01&units=chg&api_key=XXXXXX&file_type=json
The above command specifies that the script should run every minute in the hours of 8am and 9am on every Friday of the year,
and save as the file datadocs.org/prototype/dataFiles/MonthlyJobsChanges.json the data that copied from
http://api.stlouisfed.org/fred/series/observations?series_id=PAYEMS&observation_start=2010-10-01&units=chg&api_key=XXXXXX&file_type=json.
Note that this example won't work in your browser directly becausewe have scrubbed out our API key.
But the folks at FRED would be happy to give you your own for free!
</code></pre>
<!-- Code snippet ends -->
<p>To add API data to your DataDoc, do the following:</p>
<p>1. Make sure you have a copy of your desired data in your <code>assets/dataFiles</code> folder. Open up your <code>main.js</code> file and add one or more <code>div</code> tags to your "overlays" div via JavaScript or jQuery, duplicating and modifying the example code as necessary. Alternatively, you can simply add <code>div</code> tags directly inside the "overlays" div in the <code>dd_simple_api.html</code> file.</p>
<p>2. As in the simple text example, modify the data_doc.addSalt call(s) in main.js to target your specific <code>div</code> tags.</p>
<p>3. Modify the <code>$.get</code> function call to point to your own data file and specify the name of your callback function. It is up to you to write a callback function that pulls the necessary information from your data file and adds it to your target <code>div</code> using either JavaScript or jQuery.</p>
<p>4. Open up <code>dd_simple_api.html</code> on your computer in FireFox and check out your new data-driven video!</p>
</div>
<h3>Example 7: Insert a dynamic chart</h3>
<div>
<p><a href="http://www.datadocs.org/examples/examples/dynamic_chart/dd_dynamic_chart.html" target="_blank">Try the live demo</a></p>
<p>One of the features of DataDocs we're most excited about is its support for visualizations (even interactive ones!) driven by API data. In this example we show how the Google Visualizations API can be used to create customized, interactive line charts using API data, though any combination of data and visualization library can be used as long as the results are rendered inside a div.</p>
<p><i>Note: Due to the implementation details of Google Visualizations, this particular example is not properly interactive in fullscreen mode, though it works as expected at its original resolution. Over time, we hope to include to provide an index of libraries that work correctly in fullscreen mode as well.</i></p>
<p>As in the simple api example, we'll start with empty <code>div</code> tags and then add the visualizations to them once our libraries have loaded:</p>
<p>1. Open the <code>dd_dynamic_chart.html</code> file, and update the number/ids of the empty divs in the "overlays" div. In <code>css/dd_dynamic_chart.css</code> update the positioning of the divs by creating or modifying the corresponding css classes. In <code>main.js</code>, adjust the <code>data_doc.addSalt</code> calls to target your updated divs.</p>
<p>2. Before we can render our chart, we need to make sure the charting library has loaded. In <code>dd_dynamic_chart.html</code>, the Google Visualization API is loaded just below the "load the google visualization library" comment. After our <code>data_doc.addSalt</code> calls in main.js, we'll use the <code>google.load</code> method to load the <code>corechart</code> package and tell it to run the function loadChartData once the library is loaded (this is specified in the callback parameter).</p>
<p>Once the library is loaded, the function loadChartData will be called, so inside this function we'll use $.get requests to load our data files. In this example, we're looking at unemployment data from the FRED API. Each of these requests will trigger an individual function to reformat the data, customize the look and feel of the chart and build it in a specified div.</p>
<p><i>Note: For a discussion of how to use cron jobs to have the data in your JSON files update automatically from an API, see the simple api tutorial.</i></p>
<p>4. In the JSON callback function (buildU3Chart and buildU6Chart in our example), we first create a Google Visualization DataTable object, and then reformat our JSON data into an array of arrays and use Google's built-in addRows method to add it to our DataTable object. In the options JSON object, we can customize virtually everything about our chart's appearance according to the documentation here . Finally, we pass our target <code>div</code> tag via javascript the google.visualization.LineChart method and call the draw function with the DataTable and our options object to draw the chart.</p>
<p><i>Note: The google.visualization.LineChart function must be passed a div retrieved with plain JavaScript; a jQuery object will not work properly.</i></p>
<p>5. Open up the dd_dyanmic_chart.html file in FireFox to view your video with its included dynamic charts!</p>
</div>
</div> <!-- Closes accordion div -->
</div> <!-- Closes main-content-700 div -->
<div id="footer">
<!-- <a href="index.html">About</a> -->
</div>
<!-- JavaScript -->
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
</script>
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
heightStyle: 'content'
});
});
</script>
</body>