From fc0e53c0e199850642d128a749b6c2741b758e23 Mon Sep 17 00:00:00 2001 From: Jesse Shawl Date: Tue, 1 Jan 2013 14:49:05 -0500 Subject: [PATCH] initial commit --- about.html | 56 +++++++++++++++++++++++++++++++++++++ contact.html | 53 +++++++++++++++++++++++++++++++++++ css/style.css | 70 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 59 +++++++++++++++++++++++++++++++++++++++ js/dynamicpage.js | 46 +++++++++++++++++++++++++++++++ js/modernizr.js | 4 +++ 6 files changed, 288 insertions(+) create mode 100644 about.html create mode 100644 contact.html create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/dynamicpage.js create mode 100644 js/modernizr.js diff --git a/about.html b/about.html new file mode 100644 index 0000000..e549955 --- /dev/null +++ b/about.html @@ -0,0 +1,56 @@ + + + + + + + Dynamic Page | About + + + + + + + + + + + + + + +
+ +
+

Dynamic Site

+ + +
+ +
+
+ +

About

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+ +
+
+ +
+ ©2010 CSS-Tricks +
+ +
+ + + + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..6f620b5 --- /dev/null +++ b/contact.html @@ -0,0 +1,53 @@ + + + + + + + Dynamic Page | Contact + + + + + + + + + + + + + + +
+ +
+

Dynamic Page

+ + +
+ +
+
+ + +
+
+ +
+ + + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..364419d --- /dev/null +++ b/css/style.css @@ -0,0 +1,70 @@ +/* + CSS-Tricks Example + by Chris Coyier + http://css-tricks.com +*/ + +* { margin: 0; padding: 0; } +html { overflow-y: scroll; } +body { font: 12px/1.4 Helvetica, sans-serif; background: #333; color: #333; } +.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } +.group { display: inline-block; clear: both; } +/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */ +article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } +a:focus { outline: 0; } + +#page-wrap { + width: 500px; margin: 40px auto 5px; background: #91c7ff; + padding: 8px; + background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); + background: -moz-linear-gradient(top, #eee, #ccc); + -webkit-border-radius: 16px; + -moz-border-radius: 16px; +} + +#main-content { padding: 14px; } + +h1 { font: bold 32px Helvetica, Arial, Sans-Serif; letter-spacing: -1px; padding: 14px; color: #333; text-shadow: 1px 1px 1px white; } +p { margin: 0 0 15px 0; } + +nav ul { + list-style: none; background: #154c85; padding: 5px 20px; width: 478px; position: relative; + left: -9px; +} +nav ul li { display: inline; } +nav ul li a { + display: block; + float: left; + border-top: 1px solid #96d1f8; + background: #3e779d; + background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d)); + background: -moz-linear-gradient(top, #65a9d7, #3e779d); + height: 17px; + padding: 0 10px; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + -webkit-box-shadow: rgba(0,0,0,1) 0 1px 3px; + -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; + text-shadow: rgba(0,0,0,.4) 0 1px 0; + -webkit-text-stroke: 1px transparent; + font: bold 11px/16px "Lucida Grande", "Verdana", sans-serif; + color: rgba(255,255,255,.85); + text-decoration: none; + margin: 0 5px 0 0; +} +nav ul li a:hover { + border-top: 1px solid #4789b4; + background: #28597a; + background: -webkit-gradient(linear, left top, left bottom, from(#3d789f), to(#28597a)); + background: -moz-linear-gradient(top, #3d789f, #28597a); + color: rgba(255,255,255,.85); +} +nav ul li a:active, nav ul li a.current { + border-top-color: #245779; + background: #1b435e; + position: relative; + top: 1px; +} + +footer { color: #999; margin: 0 auto; width: 500px; } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..28faaac --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ + + + + + + + Dynamic Page | Home + + + + + + + + + + + + Fork me on GitHub + + + +
+ +
+

Dynamic Page

+ + +
+ +
+
+ +

Home

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+ +
+
+ +
+ + + + + + \ No newline at end of file diff --git a/js/dynamicpage.js b/js/dynamicpage.js new file mode 100644 index 0000000..a00fd4a --- /dev/null +++ b/js/dynamicpage.js @@ -0,0 +1,46 @@ +$(function() { + + if(Modernizr.history){ + + var newHash = "", + $mainContent = $("#main-content"), + $pageWrap = $("#page-wrap"), + baseHeight = 0, + $el; + + $pageWrap.height($pageWrap.height()); + baseHeight = $pageWrap.height() - $mainContent.height(); + + $("nav").delegate("a", "click", function() { + _link = $(this).attr("href"); + history.pushState(null, null, _link); + loadContent(_link); + return false; + }); + + function loadContent(href){ + $mainContent + .find("#guts") + .fadeOut(200, function() { + $mainContent.hide().load(href + " #guts", function() { + $mainContent.fadeIn(200, function() { + $pageWrap.animate({ + height: baseHeight + $mainContent.height() + "px" + }); + }); + $("nav a").removeClass("current"); + console.log(href); + $("nav a[href$="+href+"]").addClass("current"); + }); + }); + } + + $(window).bind('popstate', function(){ + _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only + loadContent(_link); + }); + +} // otherwise, history is not supported, so nothing fancy here. + + +}); \ No newline at end of file diff --git a/js/modernizr.js b/js/modernizr.js new file mode 100644 index 0000000..04a7f7d --- /dev/null +++ b/js/modernizr.js @@ -0,0 +1,4 @@ +/* Modernizr 2.6.2 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-history-shiv-cssclasses-load + */ +;window.Modernizr=function(a,b,c){function u(a){j.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.history=function(){return!!a.history&&!!history.pushState};for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},u(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f