3.3 Template with Left Menu and Map

Sample Header

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

The following information describes the pre-defined includes in the <head></head> element

X-UA-Computable Meta tag allows you to choose what version of Internet Explorer the page should be rendered as. If you prefer the latest version of IE then set it as 'Edge'. For a document on the compatibility mode please read the document at http://msdn.microsoft.com/en-us/library/ie/bg182625%28v=vs.85%29.aspx

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Viewport meta tag is used to control the display of the webpage on a mobile device. You can find a good explanation of viewport at https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
If you do not include this meta tag in the page it will be injected automatically.

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

The meta tags described above should appear immediately below <title></title>

The page content gets pushed down because the header is injected in the page. To avoid the content being pushed down upon header include this css. For Normal or Standard Header include preventHeaderJump.css and for slim use preventSlimHeaderJump.css

<link href="/lib/tpl/css/preventFullHeaderJump.css" rel="stylesheet" type="text/css">

Twitter Bootstrap (http://getbootstrap.com/) is required to make the page responsive and support all screen sizes. Please include bootstrap.css. NOTE: bootstrap.css is required in order to make the header/footer work correctly at this time.

<link href="/lib/tpl/css/bootstrap.css" rel="stylesheet" type="text/css">

The following two jquery includes are commented in the template. Feel free to uncomment these two lines to use bootstrap components for your page.

JQuery Include: <script src="/lib/js/jquery-1.11.0.min.js"></script>
Bootstrap JS Include: <script src="/lib/tpl/js/bootstrap.min.js"></script>

This include script is responsible to inject the Header and footer in the page. There are two options:

Standard or Normal header (below)

<script data-main="/lib/hf/js/nocache/App" src="/lib/hf/js/require.js"></script>

Slim Header (below)

<script data-main="/lib/hf/js/nocache/App" src="/lib/hf/js/require.js" data-template-name="slim"></script>

The difference between the two includes is the data-template-name attribute in the second include.

<script data-main="/lib/hf/js/nocache/App" src="/lib/hf/js/require.js"></script>

If you are using this template on interdev the above relative paths are sufficient. If you use the template on a different server (other than interdev) please replace relative paths with absolute paths. make sure to replace all the relative paths with absolute paths. Append//dpw.lacounty.gov to all the paths.

Example of Relative and Absolute Paths

Relative Path: /lib/hf/js/nocache/App
Absolute Path: //dpw.lacounty.gov/lib/hf/js/nocache/App

If you had to use absolute paths the corresponding script include will be as follows

<script data-main="//dpw.lacounty.gov/lib/hf/js/nocache/App" src="//dpw.lacounty.gov/lib/hf/js/require.js"></script>