Click here to Skip to main content
12,508,972 members (48,020 online)
Click here to Skip to main content
Articles » Web Development » HTML / CSS » HTML » Downloads

Stats

324.3K views
6.1K downloads
78 bookmarked
Posted

Semantic HTML5 Page Layout

, 14 Jan 2011 CDDL
Introducing a simplified semantic HTML5 tags based page layout, together with a basic HTML5 template and CSS sources.
///Ebable VS JS IntelliSense
/// <reference path="jquery-1.4.4.min.js" />
/// <reference path="jquery.cookie.min.js" />
/// <reference path="jquery.jstorage.min.js" />
/// <reference path="jquery.json-2.2.min.js" />
/// <reference path="modernizr-1.6.min.js" />
/// <reference path="jquery.sohabase.js" />

$(function () { pageVars.initPage(); });

var pageVars = {
	initPage: function () {
		if ($.sohaBase.isCookieEnabled())
			$('#pageContainer').fadeIn();
		else
			$('#noCookieContainer').fadeIn();

		var qs = $.sohaBase.getQueryString();

		var paramCT = qs['theme'];
		if (paramCT == "green")
			this.loadGreenTheme();
		else if (paramCT == "blue")
			this.loadBlueTheme();

		var paramHF = qs['headerfooter'];
		if (paramHF == 'header')
			this.loadPageHeader();
		else if (paramHF == 'footer')
			this.loadPageFooter();
		else if (paramHF == 'both') {
			this.loadPageHeader();
			this.loadPageFooter();
		}
	},

	loadPageHeader: function () {
		$.sohaBase.loadPageCSS('css/layout/cbexp.layout.2column.css');
		$.sohaBase.loadPageCSS('css/cbexp.header.css');
		$.sohaBase.loadContentHTML('pageHeader', 'html/_header.html');
	},

	loadPageFooter: function () {
		$.sohaBase.loadPageCSS('css/layout/cbexp.layout.2column.css');
		$.sohaBase.loadPageCSS('css/cbexp.footer.css');
		$.sohaBase.loadContentHTML('pageFooter', 'html/_footer.html');
	},

	loadGreenTheme: function () {
		$.sohaBase.loadPageCSS('css/cbexp.demo.green.css');
		$.sohaBase.loadPageCSS('css/layout/cbexp.layout.2column.css');
	},

	loadBlueTheme: function () {
		$.sohaBase.loadPageCSS('css/cbexp.demo.blue.css');
		$.sohaBase.loadPageCSS('css/layout/cbexp.layout.2column_r.css');
	}
};

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Common Development and Distribution License (CDDL)

Share

About the Author

Modesty Zhang
Technical Lead
United States United States
https://github.com/modesty

https://www.linkedin.com/in/modesty-zhang-9a43771

https://twitter.com/modestyqz

You may also be interested in...

Pro
Pro
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160927.1 | Last Updated 14 Jan 2011
Article Copyright 2011 by Modesty Zhang
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid