more info<\/em><\/a>)<\/small>"),i+="<\/label><\/li>",$("#"+t.category).append(i)})})}function generate(){var t=[],n;document.getElementById("out").value="",$("[data-package]:checked").each(function(){$.ajax({type:"GET",url:"/src/"+$(this).data("package"),dataType:"text",async:!1}).done(function(n){t.push(n)})}),n=(new Packer).pack("var tests = ["+t+"];",$("#pack").is(":checked"),$("#minify").is(":checked")),document.getElementById("out").value=n,$("#size").html((n.length/1024).toFixed(2)+"K")}function getDownload(){var n=document.getElementById("out").value,t="head.custom.js";head.browser.ie?SaveIE(n,t):(head.browser.chrome||head.browser.ff)&&Download.save(n,t)}function SaveIE(n,t){var i,r;document.execCommand&&(i=window.open("about:blank","_blank"),i.document.write(n),i.document.close(),r=i.document.execCommand("SaveAs",!0,t),i.close())}var Download={click:function(n){var t=document.createEvent("MouseEvents");return t.initMouseEvent("click",!0,!1,self,0,0,0,0,0,!1,!1,!1,!1,0,null),n.dispatchEvent(t)},encode:function(n){return"data:application/octet-stream;base64,"+btoa(n)},link:function(n,t){var i=document.createElement("a");return i.download=t||self.location.pathname.slice(self.location.pathname.lastIndexOf("/")+1),i.href=n||self.location.href,i}};Download.save=function(n,t){this.click(this.link(this.encode(n),t))};
2 | //# sourceMappingURL=builder.min.js.map
--------------------------------------------------------------------------------
/site/assets/css/syntax.min.css:
--------------------------------------------------------------------------------
1 | .highlight{background:none repeat scroll 0 0 #f7f7f7;border:1px dotted;padding:10px}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k{font-weight:bold}.highlight .o{font-weight:bold}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:bold}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:bold;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .gd .x{color:#000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .gi .x{color:#000;background-color:#afa}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:#aaa}.highlight .gt{color:#a00}.highlight .kc{font-weight:bold}.highlight .kd{font-weight:bold}.highlight .kp{font-weight:bold}.highlight .kr{font-weight:bold}.highlight .kt{color:#458;font-weight:bold}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .na{color:teal}.highlight .nb{color:#0086b3}.highlight .nc{color:#458;font-weight:bold}.highlight .no{color:teal}.highlight .ni{color:purple}.highlight .ne{color:#900;font-weight:bold}.highlight .nf{color:#900;font-weight:bold}.highlight .nn{color:#555}.highlight .nt{color:navy}.highlight .nv{color:teal}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:teal}.highlight .vg{color:teal}.highlight .vi{color:teal}.highlight .il{color:#099}
--------------------------------------------------------------------------------
/site/assets/libs/packer/words.min.js.map:
--------------------------------------------------------------------------------
1 | {
2 | "version":3,
3 | "file":"words.min.js",
4 | "lineCount":1,
5 | "mappings":"AACA,IAAIA,MAAQC,UAAUC,OAAO,CAAC,CAC7B,WAAW,CAAEC,QAAQ,CAACC,CAAD,CAAS,CAC7B,IAAIC,KAAK,CAAA,CAAE,CACXC,OAAQ,CAACF,CAAMG,MAAM,CAACC,KAAD,CAAO,CAAE,IAAIC,IAAI,CAAE,IAAhC,CAAqC,CAC7C,IAAIC,OAAO,CAAA,CAHkB,CAI7B,CAED,GAAG,CAAED,QAAQ,CAACE,CAAD,CAAO,CAInB,OAHK,IAAIC,IAAI,CAACD,CAAD,C,EAAQ,IAAIN,KAAK,CAACM,CAAD,CAAM,CACpCA,CAAK,CAAE,IAAIE,IAAI,CAACF,CAAD,CAAM,CACrBA,CAAIG,MAAM,EAAE,CACLH,CAJY,CAKnB,CAED,MAAM,CAAED,QAAQ,CAAA,CAAG,CAUb,IAAIK,EAILC,MACAC,K,CAbJ,IAAIC,KAAK,CAAC,QAAQ,CAACC,CAAK,CAAEC,CAAR,CAAe,CAChC,OAAOA,CAAKN,MAAO,CAAEK,CAAKL,MADM,CAAxB,CAEP,CAEFO,IAAI,CAAC,aAAc,CAAEC,MAAMC,SAAvB,CAAiC,CACrC,IAAIb,OAASc,EACTC,QAAU,IAAIxB,WACda,MAAQ,IAAIY,KAAK,CAAA,CAFP,CAGd,IAASX,CAAE,CAAE,CAAC,CAAEA,CAAE,CAAED,KAAK,CAAEC,CAAC,EAA5B,CACCU,OAAOE,IAAI,CAACjB,MAAM,CAACK,CAAD,CAAG,CAAEA,CAAZ,CACZ,CAEIC,KAAM,CAAEA,QAAQ,CAAA,CAAG,CAAC,MAAO,EAAR,C,CACnBC,KAAM,CAAE,C,CACZX,OAAQ,CAAC,IAAI,CAAE,QAAQ,CAACK,CAAD,CAAO,CAC7B,GAAIc,OAAOb,IAAI,CAACD,CAAD,EACdA,CAAIM,MAAO,CAAEQ,OAAOZ,IAAI,CAACF,CAAD,CAAM,CAC9BA,CAAIiB,SAAU,CAAEZ,KAAK,CACpB,IAAK,OACC,IAAIJ,IAAI,CAACF,MAAM,CAACO,KAAD,CAAP,EAAiBA,KAAK,EAAE,CACvCN,CAAIM,MAAO,CAAEA,KAAK,EAFZ,CAIPN,CAAIc,QAAS,CAAEf,MAAM,CAACC,CAAIM,MAAL,CARQ,CAS7B,CAAE,IATK,CASA,CAGR,IAAIC,KAAK,CAAC,QAAQ,CAACC,CAAK,CAAEC,CAAR,CAAe,CAChC,OAAOD,CAAKF,MAAO,CAAEG,CAAKH,MADM,CAAxB,CA5BS,CA+BlB,CAED,QAAQ,CAAEW,QAAQ,CAAA,CAAG,CACpB,OAAO,IAAIC,UAAU,CAAA,CAAEC,KAAK,CAAC,GAAD,CADR,CA/CQ,CAkD7B,CAAE,CACF,IAAI,CAAE,CACL,WAAW,CAAE3B,QAAQ,CAACQ,CAAD,CAAO,CAC3B,IAAIiB,SAAU,CAAEG,QAAQ,CAAA,CAAG,CAAC,OAAOpB,CAAR,CADA,CAE3B,CAED,KAAK,CAAE,CAAC,CACR,OAAO,CAAE,EAAE,CACX,KAAK,CAAE,EAPF,CADJ,CAlD0B,CA4D3B",
6 | "sources":["words.js"],
7 | "names":["Words","Collection","extend","constructor","script","base","forEach","match","WORDS","add","encode","word","has","get","count","i","empty","index","sort","word1","word2","eval","Packer","ENCODE62","e","encoded","size","put","toString","getValues","join",".toString"]
8 | }
9 |
--------------------------------------------------------------------------------
/_posts/2013-11-08-head.responsive-v2.0.0-alpha.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: main
3 | title: Head.Responsive() v2.0.0-alpha
4 | excerpt: Getting things ready for 2.0, and looking for feedback
5 | scripts: ["/site/assets/libs/jquery/jquery.min.js", "https://cdn.moot.it/latest/moot.min.js", "/site/assets/js/comments.min.js"]
6 | ---
7 |
8 | #{{ page.title }} ({{ page.date | date_to_string }})
9 |
10 |
42 |
Show Comments
43 |
44 |
--------------------------------------------------------------------------------
/site/assets/css/normalize.min.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v2.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
2 | audio,canvas,video{display:inline-block}
3 | audio:not([controls]){display:none;height:0}
4 | [hidden]{display:none}
5 | html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
6 | body{margin:0}
7 | a:focus{outline:thin dotted}
8 | a:active,a:hover{outline:0}
9 | h1{font-size:2em;margin:.67em 0}
10 | abbr[title]{border-bottom:1px dotted}
11 | b,strong{font-weight:bold}
12 | dfn{font-style:italic}
13 | hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
14 | mark{background:#ff0;color:#000}
15 | code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}
16 | pre{white-space:pre-wrap}
17 | q{quotes:"\201C" "\201D" "\2018" "\2019"}
18 | small{font-size:80%}
19 | sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
20 | sup{top:-0.5em}
21 | sub{bottom:-0.25em}
22 | img{border:0}
23 | svg:not(:root){overflow:hidden}
24 | figure{margin:0}
25 | fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
26 | legend{border:0;padding:0}
27 | button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
28 | button,input{line-height:normal}
29 | button,select{text-transform:none}
30 | button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
31 | button[disabled],html input[disabled]{cursor:default}
32 | input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
33 | input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
34 | input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
35 | button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
36 | textarea{overflow:auto;vertical-align:top}
37 | table{border-collapse:collapse;border-spacing:0}
--------------------------------------------------------------------------------
/_includes/api/1.0.0/setup.html:
--------------------------------------------------------------------------------
1 | Setup
2 |
3 |
4 | Adding HeadJS to your site
5 |
6 |
7 |
8 |
The most common way to include HeadJS on your site will be to include it in the <head>
9 |
10 | {% highlight html %}
11 |
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
26 |
27 |
28 | {% endhighlight %}
29 |
30 |
But sometimes you might want it to load up a bunch of code right away, without having to declare that code in a new <script> tag. This can be very useful when using code-generation, or even if you just want to stick all your code in a centralized place.
31 |
32 | {% highlight html %}
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
45 |
46 |
47 | {% endhighlight %}
48 |
49 |
In the above example you would put your code in init.js, which would be called automagically
50 |
51 | {% highlight js %}
52 | // init.js
53 | head.load("file1.js", "file2.js");
54 | {% endhighlight %}
55 |
56 |
Note: Only the first detected instance of data-headjs-load will be used, so make sure there is only one on the page.
57 |
58 |
59 |
60 |
Show Comments
61 |
62 |
63 |
Setup
2 |
3 |
4 | Adding HeadJS to your site
5 |
6 |
7 |
8 |
The most common way to include HeadJS on your site will be to include it in the <head>
9 |
10 | {% highlight html %}
11 |
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
26 |
27 |
28 | {% endhighlight %}
29 |
30 |
But sometimes you might want it to load up a bunch of code right away, without having to declare that code in a new <script> tag. This can be very useful when using code-generation, or even if you just want to stick all your code in a centralized place.
31 |
32 | {% highlight html %}
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
45 |
46 |
47 | {% endhighlight %}
48 |
49 |
In the above example you would put your code in init.js, which would be called automagically
50 |
51 | {% highlight js %}
52 | // init.js
53 | head.load("file1.js", "file2.js");
54 | {% endhighlight %}
55 |
56 |
Note: Only the first detected instance of data-headjs-load will be used, so make sure there is only one on the page.
57 |
58 |
59 |
60 |
Show Comments
61 |
62 |
63 |
Browser Information
2 |
3 |
4 | HeadJS knows certain information about the browser and exposes that information via CSS & JS
5 |
6 |
7 |
8 |
These variables are accessible via JavaScript (all the time) so you can apply certain logic depending on specific use-cases
9 |
10 |
11 | head.browser.name (string)
12 | head.browser.version (float)
13 | head.browser.ie (bool)
14 | head.browser.ff (bool)
15 | head.browser.chrome (bool)
16 | head.browser.ios (bool)
17 | head.browser.android (bool)
18 | head.browser.webkit (bool)
19 | head.browser.opera (bool)
20 |
21 |
22 | {% highlight js %}
23 | if (head.browser.ie && head.browser.version < 9) {
24 | /* code specific to IE but only if IE < 9 */
25 | }
26 | {% endhighlight %}
27 |
28 |
The same information is also exposed via CSS, so that you may apply CSS specific fixes
29 |
30 | {% highlight css %}
31 | .ie8 {
32 | /* code specific to IE8 */
33 | }
34 |
35 | .ie-lt9 {
36 | /* code specific to IE but only if IE < 9 */
37 | }
38 | {% endhighlight %}
39 |
40 |
No matter how HeadJS is configured, it will at least generate CSS classes for the current browser & it's version (.ie8, .ff25). Generating classes for (.lt, .gt) including full min/max ranges of browser versions is supported, but not advised since it can generate too much css. By default only current browser + version, and IE6-11 ranges are generated automagically.
41 |
42 |
You can select which variables are exposed via CSS in the configuration section.
43 |
44 |
45 |
46 |
Show Comments
47 |
48 |
49 |
Browser Information
2 |
3 |
4 | HeadJS knows certain information about the browser and exposes that information via CSS & JS
5 |
6 |
7 |
8 |
These variables are accessible via JavaScript (all the time) so you can apply certain logic depending on specific use-cases
9 |
10 |
11 | head.browser.name (string)
12 | head.browser.version (float)
13 | head.browser.ie (bool)
14 | head.browser.ff (bool)
15 | head.browser.chrome (bool)
16 | head.browser.ios (bool)
17 | head.browser.android (bool)
18 | head.browser.webkit (bool)
19 | head.browser.opera (bool)
20 |
21 |
22 | {% highlight js %}
23 | if (head.browser.ie && head.browser.version < 9) {
24 | /* code specific to IE but only if IE < 9 */
25 | }
26 | {% endhighlight %}
27 |
28 |
The same information is also exposed via CSS, so that you may apply CSS specific fixes
29 |
30 | {% highlight css %}
31 | .ie8 {
32 | /* code specific to IE8 */
33 | }
34 |
35 | .lt-ie9 {
36 | /* code specific to IE but only if IE < 9 */
37 | }
38 | {% endhighlight %}
39 |
40 |
No matter how HeadJS is configured, it will at least generate CSS classes for the current browser & it's version (.ie8, .ff25). Generating classes for (.lt, .lte, .gt, .gte, .eq) including full min/max ranges of browser versions is supported, but not advised since it can generate too much css. By default only current browser + version, and IE6-11 ranges are generated automagically.
41 |
42 |
You can select which variables are exposed via CSS in the configuration section.
43 |
44 |
45 |
46 |
Show Comments
47 |
48 |
49 |
7 |
HeadJS Unit Tests
8 |
11 |
12 |
13 |
16 |
17 |
18 |
19 | 0.99
20 |
21 |
22 |
23 |
24 | 0.98
25 |
26 |
27 |
28 |
31 |
32 |
33 |
34 |
35 |
Standalone Tests
36 |
37 | See how script ordering affects load times. The older the browser, the more performance you see when loading in parallel with HeadJS.
38 |
39 |
40 |
41 |
44 |
45 |
46 |
49 |
50 |
51 |
54 |
55 |
56 |
59 |
60 |
61 |
64 |
65 |
66 |
67 |
70 | Make it the only script in your HEAD.
71 | « A concise solution to universal problems »
72 |
73 |
74 | {% include sections/download.html %}
--------------------------------------------------------------------------------
/_includes/api/1.0.0/html5.html:
--------------------------------------------------------------------------------
1 | HTML5 Shim
2 |
3 | Target HTML5 and CSS3 elements safely
4 |
5 | Want to start using HTML5 semantics but are put off by it because you still have a large audience of users using non compatible browsers ?
6 |
7 |
8 |
DIV's are good, but HeadJS let's you be semantic and futuristic
9 |
10 | {% highlight html %}
11 | /* Use CSS3 semantics */
12 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | {% endhighlight %}
23 |
24 |
HeadJS will detect if IE < 9 is present, and inject the necessary HTML5 Shim for you.
25 |
You will still need to use a HTML5 enabling stylesheet for it to work like Normalize.css , or just download our file and reference it in your HEAD.
26 |
27 | {% highlight html %}
28 |
29 |
30 |
31 |
32 |
33 | /* Use CSS3 semantics */
34 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | {% endhighlight %}
48 |
49 |
You can also enable/disable the injection via the configuration section.
50 | ---
51 |
But before you start believing all the hype around HTML5, be sure to give this a read ..you'll be surprised !
52 |
53 | The Truth About HTML5
56 |
57 |
58 |
59 |
60 |
Show Comments
61 |
62 |
63 |
HTML5 Shim
2 |
3 | Target HTML5 and CSS3 elements safely
4 |
5 | Want to start using HTML5 semantics but are put off by it because you still have a large audience of users using non compatible browsers ?
6 |
7 |
8 |
DIV's are good, but HeadJS let's you be semantic and futuristic
9 |
10 | {% highlight html %}
11 | /* Use CSS3 semantics */
12 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | {% endhighlight %}
23 |
24 |
HeadJS will detect if IE < 9 is present, and inject the necessary HTML5 Shim for you.
25 |
You will still need to use a HTML5 enabling stylesheet for it to work like Normalize.css , or just download our file and reference it in your HEAD.
26 |
27 | {% highlight html %}
28 |
29 |
30 |
31 |
32 |
33 | /* Use CSS3 semantics */
34 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | {% endhighlight %}
48 |
49 |
You can also enable/disable the injection via the configuration section.
50 | ---
51 |
But before you start believing all the hype around HTML5, be sure to give this a read ..you'll be surprised !
52 |
53 | The Truth About HTML5
56 |
57 |
58 |
59 |
60 |
Show Comments
61 |
62 |
63 |
t),h.feature("landscape",i2&&this[n+1]!==t)n&&f(this.slice(1,n+1).join("-").toLowerCase()+u.section);else{var r=e||"index",i=r.indexOf(".");i>0&&(r=r.substring(0,i)),s.id=r.toLowerCase()+u.page,n||f("root"+u.section)}}),h.screen={height:e.screen.height,width:e.screen.width},E();var S=0;e.addEventListener?e.addEventListener("resize",x,!1):e.attachEvent("onresize",x)})(window)
--------------------------------------------------------------------------------
/dist/0.99/head.nuspec:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | HeadJS
5 | 0.99
6 | HeadJS
7 | Tero Piirainen,Robert Hoffmann
8 | itechnology
9 | http://bit.ly/mit-license
10 | http://headjs.com
11 | http://headjs.com/favicon.png
12 | false
13 | At under 5K minified & gzipped
14 |
15 | HeadJS provides you with:
16 |
17 | * Asset Loader
18 | Load scripts and stylesheets when you need them.
19 | head.load("file1.js" , "file2.js" , function() { done(); })
20 | head.load("file1.css", "file2.css", function() { done(); })
21 |
22 | * JavaScript Organizer
23 | Defer execution to the bottom of page.
24 | head.ready(function() { imReady(); })
25 |
26 | * Responsive Design
27 | Detect and react to resolutions with simple css classes or js tests that work without media query support.
28 | .landscape, .lt-800, .gt-1680, if (head.mobile) { }
29 |
30 | * Browser Detection
31 | Detect browsers & their version, and apply css or js logic to them.
32 | .gt-ie6, .lt-ie10, if (head.browser.ios) { }
33 |
34 | * Feature Detection
35 | Detect browser features like cssreflections, touch-enabled
36 | .no-touch if (!head.touch) { }
37 |
38 | * CSS Moderniser
39 | Detect css support like box-shadow, border-radius
40 | .no-borderradius, if (!head.borderradius) { }
41 |
42 | * CSS Router
43 | Detect which page and section someone is on and target it with specific css.
44 | .index-page, .register-page, .root-section, .user-section,
45 |
46 | * HTML5 Shim
47 | Need to support the new HTML5 tags in older browsers ? No problem !
48 |
49 | * And more
50 | ..well, a little bit :-)
51 | Load scripts and stylesheets on demand. Achieve responsive design with CSS that targets different screen resolutions, paths, states and browsers. Detect various browsers and their features. Target HTML5 and CSS3 safely.
52 | Tero Piirainen
54 | en-US
55 | javascript, html, html5, css, css3, loader, responsive design, media queries, feature detection, dependency loading, mobile, tablet
56 |
57 |
58 |
61 |
--------------------------------------------------------------------------------
/dist/1.0.0/head.nuspec:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | HeadJS
5 | 1.0.3
6 | HeadJS
7 | Robert Hoffmann,Tero Piirainen
8 | itechnology
9 | http://bit.ly/mit-license
10 | http://headjs.com
11 | http://headjs.com/favicon.png
12 | false
13 |
14 | At under 5K minified & gzipped HeadJS provides you with:
15 |
16 | * Asset Loader: Load scripts and stylesheets when you need them.
17 | head.load("file1.js" , "file2.js" , function() { done(); })
18 | head.load("file1.css", "file2.css", function() { done(); })
19 |
20 | * JavaScript Organizer: Defer execution to the bottom of page.
21 | head.ready(function() { imReady(); })
22 |
23 | * Responsive Design: Detect and react to resolutions with simple css classes or js tests that work without media query support.
24 | .landscape, .lt-800, .gt-1680, if (head.mobile) { }
25 |
26 | * Browser Detection: Detect browsers & their version, and apply css or js logic to them.
27 | .gt-ie6, .lt-ie10, if (head.browser.ios) { }
28 |
29 | * Feature Detection: Detect browser features like cssreflections, touch-enabled
30 | .no-touch if (!head.touch) { }
31 |
32 | * CSS Moderniser: Detect css support like box-shadow, border-radius
33 | .no-borderradius, if (!head.borderradius) { }
34 |
35 | * CSS Router: Detect which page and section someone is on and target it with specific css.
36 | .index-page, .register-page, .root-section, .user-section,
37 |
38 | * HTML5 Shim: Need to support the new HTML5 tags in older browsers ? No problem !
39 |
40 | Load scripts and stylesheets on demand. Achieve responsive design with CSS that targets different screen resolutions, paths, states and browsers. Detect various browsers and their features. Target HTML5 and CSS3 safely.
41 | Tero Piirainen
43 | en-US
44 | javascript, html, html5, css, css3, loader, responsive design, media queries, feature detection, dependency loading, mobile, tablet
45 |
46 |
47 |
51 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | ###############################################################################
2 | # Set default behavior to automatically normalize line endings.
3 | ###############################################################################
4 | * text=auto
5 |
6 | ###############################################################################
7 | # Set default behavior for command prompt diff.
8 | #
9 | # This is need for earlier builds of msysgit that does not have it on by
10 | # default for csharp files.
11 | # Note: This is only used by command line
12 | ###############################################################################
13 | #*.cs diff=csharp
14 |
15 | ###############################################################################
16 | # Set the merge driver for project and solution files
17 | #
18 | # Merging from the command prompt will add diff markers to the files if there
19 | # are conflicts (Merging from VS is not affected by the settings below, in VS
20 | # the diff markers are never inserted). Diff markers may cause the following
21 | # file extensions to fail to load in VS. An alternative would be to treat
22 | # these files as binary and thus will always conflict and require user
23 | # intervention with every merge. To do so, just uncomment the entries below
24 | ###############################################################################
25 | #*.sln merge=binary
26 | #*.csproj merge=binary
27 | #*.vbproj merge=binary
28 | #*.vcxproj merge=binary
29 | #*.vcproj merge=binary
30 | #*.dbproj merge=binary
31 | #*.fsproj merge=binary
32 | #*.lsproj merge=binary
33 | #*.wixproj merge=binary
34 | #*.modelproj merge=binary
35 | #*.sqlproj merge=binary
36 | #*.wwaproj merge=binary
37 |
38 | ###############################################################################
39 | # behavior for image files
40 | #
41 | # image files are treated as binary by default.
42 | ###############################################################################
43 | #*.jpg binary
44 | #*.png binary
45 | #*.gif binary
46 |
47 | ###############################################################################
48 | # diff behavior for common document formats
49 | #
50 | # Convert binary document formats to text before diffing them. This feature
51 | # is only available from the command line. Turn it on by uncommenting the
52 | # entries below.
53 | ###############################################################################
54 | #*.doc diff=astextplain
55 | #*.DOC diff=astextplain
56 | #*.docx diff=astextplain
57 | #*.DOCX diff=astextplain
58 | #*.dot diff=astextplain
59 | #*.DOT diff=astextplain
60 | #*.pdf diff=astextplain
61 | #*.PDF diff=astextplain
62 | #*.rtf diff=astextplain
63 | #*.RTF diff=astextplain
64 |
--------------------------------------------------------------------------------
/test/headjs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Test: SCRIPT via HeadJS
6 |
27 |
33 |
34 |
SCRIPT SRC via HeadJS
35 |
36 |
37 | Press CTRL+SHIFT+R or CTRL+F5 to reload with an empty cache = first impression.
38 |
39 |
40 |
41 | View source to see how scripts are provided.
42 |
43 |
44 | Time is calculated when window.onload fires.
45 |
46 |
47 | Try with different browsers. The time difference varies a lot.
48 |
49 |
50 | head.js() calls are always separate from the page rendering. Does not matter
51 | whether you load on HEAD or on bottom. You can also load programmatically on
52 | demand.
53 |
54 |
55 |
59 |
46 |
Show Comments
47 |
48 |
--------------------------------------------------------------------------------
/dist/0.97a/head.load.min.js:
--------------------------------------------------------------------------------
1 | (function(e,t){"use strict";function y(e){if(e._done)return;e(),e._done=1}function b(e){var t=e.split("/"),n=t[t.length-1],r=n.indexOf("?");return r!=-1?n.substring(0,r):n}function w(e){var t;if(typeof e=="object")for(var n in e)e[n]&&(t={name:n,url:e[n]});else t={name:b(e),url:e};var r=l[t.name];return r&&r.url===t.url?r:(l[t.name]=t,t)}function E(e,t){if(!e)return;typeof e=="object"&&(e=[].slice.call(e));for(var n=0;n
2 |
3 |
4 | Responsive Tests
6 |
11 |
Load Tests
12 |
13 |
Load jQuery
14 |
Load jQuery/jQueryUI
15 |
Load jQueryUI/jQuery
16 |
17 |
18 |
19 | Date Picker:
21 |
22 |
23 |
24 |
28 |
Test: SCRIPT SRC in bottom
6 |
18 |
24 |
25 |
SCRIPT SRC before </body>
26 |
27 |
28 | Press CTRL+SHIFT+R or CTRL+F5 to reload with an empty cache = first impression.
29 |
30 |
31 |
32 | View source to see how scripts are provided.
33 |
34 |
35 | Time is calculated when window.onload fires.
36 |
37 |
38 | Try with different browsers. The time difference varies a lot.
39 |
40 |
41 | head.js() calls are always separate from the page rendering. Does not matter
42 | whether you load on HEAD or on bottom. You can also load programmatically on
43 | demand.
44 |
45 |
46 |
50 |
Test: SCRIPT SRC in <head>
6 |
26 |
32 |
33 |
SCRIPT SRC before </head>
34 |
35 |
36 | Press CTRL+SHIFT+R or CTRL+F5 to reload with an empty cache = first impression.
37 |
38 |
39 |
40 | View source to see how scripts are provided.
41 |
42 |
43 | Time is calculated when window.onload fires.
44 |
45 |
46 | Try with different browsers. The time difference varies a lot.
47 |
48 |
49 | head.js() calls are always separate from the page rendering. Does not matter
50 | whether you load on HEAD or on bottom. You can also load programmatically on
51 | demand.
52 |
53 |
54 |
58 |
a?(c.screensCss.gt&&e("gt-"+a),c.screensCss.gte&&e("gte-"+
2 | a)):gg);d.feature("landscape",ai?(c.browserCss.gt&&e("gt-"+h+i),c.browserCss.gte&&e("gte-"+h+i)):aa&&m("abbr article aside audio canvas details figcaption figure footer header hgroup mark meter nav output progress section summary time video".split(" "),
6 | function(a){n.createElement(a)});m(u.pathname.split("/"),function(a,b){if(2Screen Information
2 |
3 |
4 | HeadJS also knows information about the current screen & viewport size
5 |
6 |
7 |
8 |
These variables are accessible via JavaScript (all the time) so you can apply certain logic depending on specific use-cases
9 |
10 |
11 |
12 | head.screen.height (int)
13 | This is the height of the screen (resolution ) no matter the size of the current browser window
15 |
16 | head.screen.width (int)
17 | This is the width of the screen (resolution ) no matter the size of the current browser window
19 |
20 | head.screen.innerHeight (int)
21 | This is the height of the inside of the browser window (viewport ), and varies depending on the current size of the browser. It also does not include any eventual menu bars or toolbars. This is the default value when you want to do responsive design !
23 |
24 | head.screen.innerWidth (int)
25 | This is the width of the inside of the browser window (viewport ), and varies depending on the current size of the browser. It also does not include any eventual menu bars or toolbars. This is the default value when you want to do responsive design !
27 |
28 | head.screen.outerHeight (int)
29 | This is the height of the entire browser, and varies depending on if the browser is resized or not.
31 |
32 | head.screen.outerWidth (int)
33 | This is the width of the entire browser, and varies depending on if the browser is resized or not.
35 |
36 |
37 | {% highlight js %}
38 | if (head.screen.innerHeight < 800) {
39 | /* code specific to VIEWPORT < 800 */
40 | }
41 | {% endhighlight %}
42 |
43 |
Viewport width information is exposed via CSS so you can apply responsive design principles to your website. These have the advantage of working even on browsers that do not support media queries !
44 |
45 | {% highlight css %}
46 | .lt-800 {
47 | /* code specific to VIEWPORT < 800 */
48 | }
49 |
50 | .gt-800 {
51 | /* code specific to VIEWPORT > 800 */
52 | }
53 | {% endhighlight %}
54 |
55 |
You can select which variables (lt, lte, gt, gte, eq) and which breakpoints (480, 640, 800, etc) are exposed via CSS in the configuration section.
56 |
57 |
58 |
59 |
Show Comments
60 |
61 |
62 |
Screen Information
2 |
3 |
4 | HeadJS also knows information about the current screen & viewport size
5 |
6 |
7 |
8 |
These variables are accessible via JavaScript (all the time) so you can apply certain logic depending on specific use-cases
9 |
10 |
11 |
12 | head.screen.height (int)
13 | This is the height of the screen (resolution ) no matter the size of the current browser window
15 |
16 | head.screen.width (int)
17 | This is the width of the screen (resolution ) no matter the size of the current browser window
19 |
20 | head.screen.innerHeight (int)
21 | This is the height of the inside of the browser window (viewport ), and varies depending on the current size of the browser. It also does not include any eventual menu bars or toolbars. This is the default value when you want to do responsive design !
23 |
24 | head.screen.innerWidth (int)
25 | This is the width of the inside of the browser window (viewport ), and varies depending on the current size of the browser. It also does not include any eventual menu bars or toolbars. This is the default value when you want to do responsive design !
27 |
28 | head.screen.outerHeight (int)
29 | This is the height of the entire browser, and varies depending on if the browser is resized or not.
31 |
32 | head.screen.outerWidth (int)
33 | This is the width of the entire browser, and varies depending on if the browser is resized or not.
35 |
36 |
37 | {% highlight js %}
38 | if (head.screen.innerHeight < 800) {
39 | /* code specific to VIEWPORT < 800 */
40 | }
41 | {% endhighlight %}
42 |
43 |
Viewport width information is exposed via CSS so you can apply responsive design principles to your website. These have the advantage of working even on browsers that do not support media queries !
44 |
45 | {% highlight css %}
46 | .h-lt1024 {
47 | /* code specific to VIEWPORT HEIGHT < 1024 */
48 | }
49 |
50 | .w-gt800 {
51 | /* code specific to VIEWPORT WIDTH > 800 */
52 | }
53 | {% endhighlight %}
54 |
55 |
You can select which variables (lt, gt) and which breakpoints (480, 640, 800, etc) are exposed via CSS in the configuration section.
56 |
57 |
58 |
59 |
Show Comments
60 |
61 |
62 |
2 |
3 |
4 |
Featured On
5 |
6 |
7 |
8 |
10 |
11 |
12 |
23 |
24 |
n?(i.screensCss.gt&&r("gt-"+n),i.screensCss.gte&&r("gte-"+n)):tt);u.feature("landscape",fe?(i.browserCss.gt&&r("gt-"+f+e),i.browserCss.gte&&r("gte-"+f+e)):h2&&this[u+1]!==t)u&&r(this.slice(u,u+1).join("-").toLowerCase()+i.section);else{var f=n||"index",e=f.indexOf(".");e>0&&(f=f.substring(0,e));c.id=f.toLowerCase()+i.page;u||r("root"+i.section)}});u.screen={height:n.screen.height,width:n.screen.width};tt();b=0;n.addEventListener?n.addEventListener("resize",it,!1):n.attachEvent("onresize",it)})(window);
3 | /*
4 | //# sourceMappingURL=head.core.min.js.map
5 | */
--------------------------------------------------------------------------------
/test/unit/0.97a/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Head.JS Unit Tests (0.97a)
6 |
17 |
18 | « Back
19 |
20 |
21 |
22 | See how other browsers fared with these tests on BrowserScope
23 |
24 |
25 |
26 |
27 | On certain browsers CSS loading will load the CSS file but not trigger the callback. Still evaluating which browsers that are.
28 |
29 |
30 |
31 |
32 | If you have tests that fail, try clearing your cache, reloading, or running the tests individually. Some strange stuff with qUnit sometimes it seems.
33 |
34 |
35 |
36 | If after that a test still fails, be sure to let us know !
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
76 |
77 |
--------------------------------------------------------------------------------
/site/assets/libs/packer/packer.min.js:
--------------------------------------------------------------------------------
1 | eval(base2.namespace),eval(JavaScript.namespace);var IGNORE=RegGrp.IGNORE,REMOVE="",SPACE=" ",WORDS=/\w+/g,Packer=Base.extend({minify:function(n){return n=n.replace(Packer.CONTINUE,""),n=Packer.data.exec(n),n=Packer.whitespace.exec(n),Packer.clean.exec(n)},pack:function(n,t,i){return n=this.minify(n+"\n"),i&&(n=this._shrinkVariables(n)),t&&(n=this._base62Encode(n)),n},_base62Encode:function(n){var t=new Words(n),r=function(n){return t.get(n).encoded},u=this._escape(n.replace(WORDS,r)),i=Math.min(Math.max(t.size(),2),62),f=t.size(),e=t,o=Packer["ENCODE"+(i>10?i>36?62:36:10)],s=i>10?"e(c)":"c";return format(Packer.UNPACK,u,i,f,e,o,s)},_escape:function(n){return n.replace(/([\\'])/g,"\\$1").replace(/[\r\n]+/g,"\\n")},_shrinkVariables:function(n){var t=function(n){return new RegExp(n.source,"g")},i=[],s=/^[^'"]\//,h=function(n){var t="#"+i.length;return s.test(n)&&(t=n.charAt(0)+t,n=n.slice(1)),i.push(n),t},c=function(n){return(n<52?"":arguments.callee(parseInt(n/52)))+((n=n%52)>25?String.fromCharCode(n+39):String.fromCharCode(n+97))},u=/(function\s*[\w$]*\s*\(\s*([^\)]*)\s*\)\s*)?(\{([^{}]*)\})/,l=/var\s+/g,a=/var\s+[\w$]+/g,f=/\s*,\s*/,r=[],v=function(n,i,u){var s;if(i){n=o(n);var h=match(n,a).join(",").replace(l,""),v=Array2.combine(u.split(f).concat(h.split(f))),y=0,e;forEach(v,function(i){var r;if(i=trim(i),i&&i.length>1){i=rescape(i);do e=c(y++);while(new RegExp("[^\\w$.]"+e+"[^\\w$:]").test(n));for(r=new RegExp("([^\\w$.])"+i+"([^\\w$:])");r.test(n);)n=n.replace(t(r),"$1"+e+"$2");r=new RegExp("([^{,\\w$.])"+i+":","g"),n=n.replace(r,"$1"+e+":")}})}return s="~"+r.length+"~",r.push(n),s},e=/~(\d+)~/,o=function(n){while(e.test(n))n=n.replace(t(e),function(n,t){return r[t]});return n};for(n=Packer.data.exec(n,h),n=n.replace(/new function\(_\)\s*\{/g,"{;#;");u.test(n);)n=n.replace(t(u),v);return n=o(n),n=n.replace(/\{;#;/g,"new function(_){"),n.replace(/#(\d+)/g,function(n,t){return i[t]})}},{CONTINUE:/\\\r?\n/g,ENCODE10:"String",ENCODE36:"function(c){return c.toString(a)}",ENCODE62:"function(c){return(c35?String.fromCharCode(c+29):c.toString(36))}",UNPACK:"eval(function(p,a,c,k,e,r){e=%5;if(!''.replace(/^/,String)){while(c--)r[%6]=k[c]||%6;k=[function(e){return r[e]}];e=function(){return'\\\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\\\b'+e(c)+'\\\\b','g'),k[c]);return p}('%1',%2,%3,'%4'.split('|'),0,{}))",init:function(){this.data=reduce(this.data,function(n,t,i){return n.put(this.javascript.exec(i),t),n},new RegGrp,this),this.clean=this.data.union(this.clean),this.whitespace=this.data.union(this.whitespace)},clean:{"\\(\\s*;\\s*;\\s*\\)":"(;;)","throw[^};]+[};]":IGNORE,";+\\s*([};])":"$1"},data:{STRING1:IGNORE,STRING2:IGNORE,CONDITIONAL:IGNORE,"(COMMENT1)\\n\\s*(REGEXP)?":"\n$3","(COMMENT2)\\s*(REGEXP)?":" $3","([\\[(\\^=,{}:;&|!*?])\\s*(REGEXP)":"$1$2"},javascript:new RegGrp({COMMENT1:/(\/\/|;;;)[^\n]*/.source,COMMENT2:/\/\*[^*]*\*+([^\/][^*]*\*+)*\//.source,CONDITIONAL:/\/\*@|@\*\/|\/\/@[^\n]*\n/.source,REGEXP:/\/(\\[\/\\]|[^*\/])(\\.|[^\/\n\\])*\/[gim]*/.source,STRING1:/'(\\.|[^'\\])*'/.source,STRING2:/"(\\.|[^"\\])*"/.source}),whitespace:{"(\\d)\\s+(\\.\\s*[a-z\\$_\\[(])":"$1 $2","([+-])\\s+([+-])":"$1 $2","\\b\\s+\\$\\s+\\b":" $ ","\\$\\s+\\b":"$ ","\\b\\s+\\$":" $","\\b\\s+\\b":SPACE,"\\s+":REMOVE}});
2 | //# sourceMappingURL=packer.min.js.map
--------------------------------------------------------------------------------
/test/unit/0.98/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Head.JS Unit Tests (0.98)
6 |
17 |
18 | « Back
19 |
20 |
21 |
22 | See how other browsers fared with these tests on BrowserScope
23 |
24 |
25 |
26 |
27 | On certain browsers CSS loading will load the CSS file but not trigger the callback. Still evaluating which browsers that are.
28 |
29 |
30 |
31 |
32 | If you have tests that fail, try clearing your cache, reloading, or running the tests individually. Some strange stuff with qUnit sometimes it seems.
33 |
34 |
35 |
36 | If after that a test still fails, be sure to let us know !
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
77 |
78 |
--------------------------------------------------------------------------------
/dist/1.0.0/head.core.min.js:
--------------------------------------------------------------------------------
1 | /*! head.core - v1.0.2 */
2 | (function(n,t){"use strict";function r(n){a[a.length]=n}function k(n){var t=new RegExp(" ?\\b"+n+"\\b");c.className=c.className.replace(t,"")}function p(n,t){for(var i=0,r=n.length;in?(i.screensCss.gt&&r("gt-"+n),i.screensCss.gte&&r("gte-"+n)):tt);u.feature("landscape",fe?(i.browserCss.gt&&r("gt-"+f+e),i.browserCss.gte&&r("gte-"+f+e)):h2&&this[u+1]!==t)u&&r(this.slice(u,u+1).join("-").toLowerCase()+i.section);else{var f=n||"index",e=f.indexOf(".");e>0&&(f=f.substring(0,e));c.id=f.toLowerCase()+i.page;u||r("root"+i.section)}});u.screen={height:n.screen.height,width:n.screen.width};tt();b=0;n.addEventListener?n.addEventListener("resize",it,!1):n.attachEvent("onresize",it)})(window);
3 | /*
4 | //# sourceMappingURL=head.core.min.js.map
5 | */
--------------------------------------------------------------------------------
/_includes/api/1.0.0/load.html:
--------------------------------------------------------------------------------
1 | Resource Loading
2 |
3 |
4 | Speed up your site. Manage your library's dependencies. Load javascript and stylesheets in parallel but execute them in the correct order.
5 |
6 |
7 |
8 |
Resource loading has many different options to cater to various needs
9 |
10 | {% highlight js %}
11 | // queue scripts and fire a callback when loading is finished
12 | head.load("file1.js", "file2.js", function() {
13 | // do something
14 | });
15 |
16 | // same as above, but pass files in as an Array
17 | head.load(["file1.js", "file2.js"], function() {
18 | // do something
19 | });
20 |
21 | // you can also give scripts a name (label)
22 | head.load({ label1: "file1.js" }, { label2: "file2.js" }, function() {
23 | // do something
24 | });
25 |
26 | // same as above, but pass files in as an Array
27 | head.load([{ label1: "file1.js" }, { label2: "file2.js" }], function() {
28 | // do something
29 | });
30 |
31 | // Labels are usually used in conjuntion with: head.ready()
32 | head.ready("label1", function() {
33 | // do something
34 | });
35 |
36 | // Actually if no label is supplied, internally the filename is used for the label
37 | head.ready("file1.js", function() {
38 | // do something
39 | });
40 | {% endhighlight %}
41 |
42 |
All the above examples also work with CSS files.
43 |
44 | {% highlight js %}
45 | // queue scripts and fire a callback when loading is finished
46 | head.load("file1.css", "file2.css");
47 |
48 | // same as above, but pass files in as an Array
49 | head.load(["file1.css", "file2.css"]);
50 | {% endhighlight %}
51 |
52 |
Conditional Loading
53 |
You can also run tests to load file A if a test succeeds, or fallback to file B. This is great for loading Polyfils, or loading dependencies when certain conditions are met.
54 |
55 |
56 | {% highlight js %}
57 | // signature
58 | head.test(condition, success, failure, callback);
59 |
60 | /*
61 | condition: something that evaluates to true/false
62 | success : a file, an array of files, a labeled object, an array of labeled objects
63 | failure : a file, an array of files, a labeled object, an array of labeled objects
64 | callback : a function to call when evaluation & loading is done
65 | */
66 |
67 |
68 | // simplified version 1
69 | head.test(condition, "success.js", "failure.js" , callback);
70 |
71 | // simplified version 2
72 | head.test(condition, ["success1.js", "success1.js"], "failure.js" , callback);
73 |
74 | // object version
75 | head.test({
76 | test : bool,
77 | success : ["file1.js", "file2.js"],
78 | failure : ["poly1.js", "poly2.js"],
79 | callback: function() {
80 | // do stuff
81 | }
82 | );
83 |
84 | // Example
85 | head.test(head.mobile, "normal.js", "fallback.js", function() {
86 | // do stuff
87 | });
88 | {% endhighlight %}
89 |
90 |
91 |
92 |
93 |
94 |
Show Comments
95 |
96 |
97 |
Resource Loading
2 |
3 |
4 | Speed up your site. Manage your library's dependencies. Load javascript and stylesheets in parallel but execute them in the correct order.
5 |
6 |
7 |
8 |
Resource loading has many different options to cater to various needs
9 |
10 | {% highlight js %}
11 | // queue scripts and fire a callback when loading is finished
12 | head.load("file1.js", "file2.js", function() {
13 | // do something
14 | });
15 |
16 | // same as above, but pass files in as an Array
17 | head.load(["file1.js", "file2.js"], function() {
18 | // do something
19 | });
20 |
21 | // you can also give scripts a name (label)
22 | head.load({ label1: "file1.js" }, { label2: "file2.js" }, function() {
23 | // do something
24 | });
25 |
26 | // same as above, but pass files in as an Array
27 | head.load([{ label1: "file1.js" }, { label2: "file2.js" }], function() {
28 | // do something
29 | });
30 |
31 | // Labels are usually used in conjuntion with: head.ready()
32 | head.ready("label1", function() {
33 | // do something
34 | });
35 |
36 | // Actually if no label is supplied, internally the filename is used for the label
37 | head.ready("file1.js", function() {
38 | // do something
39 | });
40 | {% endhighlight %}
41 |
42 |
All the above examples also work with CSS files.
43 |
44 | {% highlight js %}
45 | // queue scripts and fire a callback when loading is finished
46 | head.load("file1.css", "file2.css");
47 |
48 | // same as above, but pass files in as an Array
49 | head.load(["file1.css", "file2.css"]);
50 | {% endhighlight %}
51 |
52 |
Conditional Loading
53 |
You can also run tests to load file A if a test succeeds, or fallback to file B. This is great for loading Polyfils, or loading dependencies when certain conditions are met.
54 |
55 |
56 | {% highlight js %}
57 | // signature
58 | head.test(condition, success, failure, callback);
59 |
60 | /*
61 | condition: something that evaluates to true/false
62 | success : a file, an array of files, a labeled object, an array of labeled objects
63 | failure : a file, an array of files, a labeled object, an array of labeled objects
64 | callback : a function to call when evaluation & loading is done
65 | */
66 |
67 |
68 | // simplified version 1
69 | head.test(condition, "success.js", "failure.js" , callback);
70 |
71 | // simplified version 2
72 | head.test(condition, ["success1.js", "success1.js"], "failure.js" , callback);
73 |
74 | // object version
75 | head.test({
76 | test : bool,
77 | success : ["file1.js", "file2.js"],
78 | failure : ["poly1.js", "poly2.js"],
79 | callback: function() {
80 | // do stuff
81 | }
82 | );
83 |
84 | // Example
85 | head.test(head.mobile, "normal.js", "fallback.js", function() {
86 | // do stuff
87 | });
88 | {% endhighlight %}
89 |
90 |
91 |
92 |
93 |
94 |
Show Comments
95 |
96 |
97 |
Head.JS Unit Tests (0.99)
6 |
17 |
18 | « Back
19 |
20 |
21 |
22 | See how other browsers fared with these tests on BrowserScope
23 |
24 |
25 |
26 |
27 | On certain browsers CSS loading will load the CSS file but not trigger the callback. Still evaluating which browsers that are.
28 |
29 |
30 |
31 |
32 | If you have tests that fail, try clearing your cache, reloading, or running the tests individually. Some strange stuff with qUnit sometimes it seems.
33 |
34 |
35 |
36 | If after that a test still fails, be sure to let us know !
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
78 |
79 |
--------------------------------------------------------------------------------
/site/assets/libs/qunit/qunit.min.css:
--------------------------------------------------------------------------------
1 | #qunit-tests,#qunit-header,#qunit-banner,#qunit-testrunner-toolbar,#qunit-userAgent,#qunit-testresult{font-family:"Helvetica Neue Light","HelveticaNeue-Light","Helvetica Neue",Calibri,Helvetica,Arial,sans-serif}#qunit-testrunner-toolbar,#qunit-userAgent,#qunit-testresult,#qunit-tests li{font-size:small}#qunit-tests{font-size:smaller}#qunit-tests,#qunit-header,#qunit-banner,#qunit-userAgent,#qunit-testresult,#qunit-modulefilter{margin:0;padding:0}#qunit-header{padding:.5em 0 .5em 1em;color:#8699a4;background-color:#0d3349;font-size:1.5em;line-height:1em;font-weight:normal;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-top-right-radius:5px;-webkit-border-top-left-radius:5px}#qunit-header a{text-decoration:none;color:#c2ccd1}#qunit-header a:hover,#qunit-header a:focus{color:#fff}#qunit-testrunner-toolbar label{display:inline-block;padding:0 .5em 0 .1em}#qunit-banner{height:5px}#qunit-testrunner-toolbar{padding:.5em 0 .5em 2em;color:#5e740b;background-color:#eee;overflow:hidden}#qunit-userAgent{padding:.5em 0 .5em 2.5em;background-color:#2b81af;color:#fff;text-shadow:rgba(0,0,0,.5) 2px 2px 1px}#qunit-modulefilter-container{float:right}#qunit-tests{list-style-position:inside}#qunit-tests li{padding:.4em .5em .4em 2.5em;border-bottom:1px solid #fff;list-style-position:inside}#qunit-tests.hidepass li.pass,#qunit-tests.hidepass li.running{display:none}#qunit-tests li strong{cursor:pointer}#qunit-tests li a{padding:.5em;color:#c2ccd1;text-decoration:none}#qunit-tests li a:hover,#qunit-tests li a:focus{color:#000}#qunit-tests li .runtime{float:right;font-size:smaller}.qunit-assert-list{margin-top:.5em;padding:.5em;background-color:#fff;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}.qunit-collapsed{display:none}#qunit-tests table{border-collapse:collapse;margin-top:.2em}#qunit-tests th{text-align:right;vertical-align:top;padding:0 .5em 0 0}#qunit-tests td{vertical-align:top}#qunit-tests pre{margin:0;white-space:pre-wrap;word-wrap:break-word}#qunit-tests del{background-color:#e0f2be;color:#374e0c;text-decoration:none}#qunit-tests ins{background-color:#ffcaca;color:#500;text-decoration:none}#qunit-tests b.counts{color:#000}#qunit-tests b.passed{color:#5e740b}#qunit-tests b.failed{color:#710909}#qunit-tests li li{padding:5px;background-color:#fff;border-bottom:none;list-style-position:inside}#qunit-tests li li.pass{color:#3c510c;background-color:#fff;border-left:10px solid #c6e746}#qunit-tests .pass{color:#528ce0;background-color:#d2e0e6}#qunit-tests .pass .test-name{color:#366097}#qunit-tests .pass .test-actual,#qunit-tests .pass .test-expected{color:#999}#qunit-banner.qunit-pass{background-color:#c6e746}#qunit-tests li li.fail{color:#710909;background-color:#fff;border-left:10px solid #ee5757;white-space:pre}#qunit-tests>li:last-child{border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px}#qunit-tests .fail{color:#000;background-color:#ee5757}#qunit-tests .fail .test-name,#qunit-tests .fail .module-name{color:#000}#qunit-tests .fail .test-actual{color:#ee5757}#qunit-tests .fail .test-expected{color:green}#qunit-banner.qunit-fail{background-color:#ee5757}#qunit-testresult{padding:.5em .5em .5em 2.5em;color:#2b81af;background-color:#d2e0e6;border-bottom:1px solid #fff}#qunit-testresult .module-name{font-weight:bold}#qunit-fixture{position:absolute;top:-10000px;left:-10000px;width:1000px;height:1000px}
--------------------------------------------------------------------------------
/test/headjs-ordered.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Test: SCRIPT ordered via HeadJS
6 |
48 |
49 |
55 |
56 |
57 |
58 |
head.js
59 |
60 |
61 |
62 |
63 | Press CTRL+SHIFT+R to reload with an empty cache = first impression.
64 |
65 |
66 |
67 | View source to see how scripts are provided.
68 |
69 |
70 |
71 | Time is calculated when window.onload fires.
72 |
73 |
74 |
75 | Try with different browsers. The time difference varies a lot.
76 |
77 |
78 |
79 | head.js() calls are always separate from the page rendering. Does not matter whether you load on HEAD or on bottom. You can also load programmatically on demand.
80 |
81 |
82 |
83 |
84 |
85 |
89 |
90 |
Head.JS Unit Tests (1.00)
6 |
17 |
18 | « Back
19 |
20 |
21 |
22 | See how other browsers fared with these tests on BrowserScope
23 |
24 |
25 |
26 |
27 | On certain browsers CSS loading will load the CSS file but not trigger the callback. Still evaluating which browsers that are.
28 |
29 |
30 |
31 |
32 | If you have tests that fail, try clearing your cache, reloading, or running the tests individually. Some strange stuff with qUnit sometimes it seems.
33 |
34 |
35 |
36 | If after that a test still fails, be sure to let us know !
37 |
38 |
39 |
40 |
41 |
42 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
81 |
82 |
--------------------------------------------------------------------------------
/_posts/2013-11-04-HeadJS-v1.0.0-Released.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: main
3 | title: HeadJS v1.0.0 Released
4 | excerpt: Yes, it's finally out ! Adding a few new features, and a few fixes.
5 | scripts: ["/site/assets/libs/jquery/jquery.min.js", "https://cdn.moot.it/latest/moot.min.js", "/site/assets/js/comments.min.js"]
6 | ---
7 |
8 | #{{ page.title }} ({{ page.date | date_to_string }})
9 |
10 |
65 |
Show Comments
66 |
67 |
--------------------------------------------------------------------------------
/dist/0.98/head.load.min.js:
--------------------------------------------------------------------------------
1 | (function(g,x){function n(){}function h(a,b){if(a){"object"===typeof a&&(a=[].slice.call(a));for(var c=0,f=a.length;ce.documentMode)f.onload=f.onreadystatechange=f.onerror=null,d()};f.onerror=function(){f.onload=f.onreadystatechange=f.onerror=null;d()};f.async=!1;f.defer=!1;c=e.head||e.getElementsByTagName("head")[0];c.insertBefore(f,c.lastChild)}function j(){e.body?k||(k=!0,h(B,function(a){i(a)})):
4 | (g.clearTimeout(d.readyTimeout),d.readyTimeout=g.setTimeout(j,50))}function u(){e.addEventListener?(e.removeEventListener("DOMContentLoaded",u,!1),j()):"complete"===e.readyState&&(e.detachEvent("onreadystatechange",u),j())}var e=g.document,B=[],C=[],m={},q={},F="async"in e.createElement("script")||"MozAppearance"in e.documentElement.style||g.opera,D,k,E=g.head_conf&&g.head_conf.head||"head",d=g[E]=g[E]||function(){d.ready.apply(null,arguments)},z=1,y=3,s=4;d.load=F?function(){var a=arguments,b=a[a.length-
5 | 1],c={};l(b)||(b=null);h(a,function(d,e){d!==b&&(d=p(d),c[d.name]=d,t(d,b&&e===a.length-2?function(){r(c)&&i(b)}:null))});return d}:function(){var a=arguments,b=[].slice.call(a,1),c=b[0];if(!D)return C.push(function(){d.load.apply(null,a)}),d;c?(h(b,function(a){if(!l(a)){var b=p(a);b.state===x&&(b.state=z,b.onpreload=[],A({src:b.url,type:"cache"},function(){b.state=2;h(b.onpreload,function(a){a.call()})}))}}),t(p(a[0]),l(c)?c:function(){d.load.apply(null,b)})):t(p(a[0]));return d};d.js=d.load;d.test=
6 | function(a,b,c,e){a="object"===typeof a?a:{test:a,success:b?w("Array",b)?b:[b]:!1,failure:c?w("Array",c)?c:[c]:!1,callback:e||n};(b=!!a.test)&&a.success?(a.success.push(a.callback),d.load.apply(null,a.success)):!b&&a.failure?(a.failure.push(a.callback),d.load.apply(null,a.failure)):e();return d};d.ready=function(a,b){if(a===e)return k?i(b):B.push(b),d;l(a)&&(b=a,a="ALL");if("string"!==typeof a||!l(b))return d;var c=q[a];if(c&&c.state===s||"ALL"===a&&r()&&k)return i(b),d;(c=m[a])?c.push(b):m[a]=[b];
7 | return d};d.ready(e,function(){r()&&h(m.ALL,function(a){i(a)});d.feature&&d.feature("domloaded",!0)});if("complete"===e.readyState)j();else if(e.addEventListener)e.addEventListener("DOMContentLoaded",u,!1),g.addEventListener("load",j,!1);else{e.attachEvent("onreadystatechange",u);g.attachEvent("onload",j);var v=!1;try{v=null==g.frameElement&&e.documentElement}catch(G){}v&&v.doScroll&&function b(){if(!k){try{v.doScroll("left")}catch(c){g.clearTimeout(d.readyTimeout);d.readyTimeout=g.setTimeout(b,50);
8 | return}j()}}()}setTimeout(function(){D=!0;h(C,function(b){b()})},300)})(window);
9 |
--------------------------------------------------------------------------------
/_includes/api/1.0.0/configuration.html:
--------------------------------------------------------------------------------
1 | Configuration
2 |
3 |
4 | Sometimes you will want to change how HeadJS behaves by enabling or disabling certain features.
5 |
6 |
7 |
8 |
This is the default configuration that HeadJS ships with
9 |
10 | {% highlight js %}
11 | conf = {
12 | screens : [240, 320, 480, 640, 768, 800, 1024, 1280, 1440, 1680, 1920],
13 | screensCss: { "gt": true, "gte": false, "lt": true, "lte": false, "eq": false },
14 | browsers : [
15 | { ie: { min: 6, max: 11 } }
16 | //,{ chrome : { min: 8, max: 31 } }
17 | //,{ ff : { min: 3, max: 26 } }
18 | //,{ ios : { min: 3, max: 7 } }
19 | //,{ android: { min: 2, max: 4 } }
20 | //,{ webkit : { min: 9, max: 12 } }
21 | //,{ opera : { min: 9, max: 12 } }
22 | ],
23 | browserCss: { "gt": true, "gte": false, "lt": true, "lte": false, "eq": true },
24 | html5 : true,
25 | page : "-page",
26 | section : "-section",
27 | head : "head"
28 | };
29 | {% endhighlight %}
30 |
31 |
If you wanted to change what screen breakpoints HeadJS uses, then you would do something like this
32 |
33 | {% highlight html %}
34 |
35 |
36 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | {% endhighlight %}
48 |
49 |
The same goes for all the other configurable variables. Just make sure var head_conf is declared BEFORE you include HeadJS.
50 |
51 |
52 | screens
53 | Width breakpoints for which lt,lte,gt,gte,eq can be generated (.gt-800, .lt-1680)
54 |
55 | screensCss
56 | Enables/Disables the actual insertion of those breakpoints into the HTML
57 |
58 | browsers
59 | Browser/Version breakpoints for which lt,lte,gt,gte,eq can be generated (.ie8, .lt-ie9)
60 |
61 | browserCss
62 | Enables/Disables the actual insertion of those breakpoints into the HTML
63 |
64 | html5
65 | When enabled, IE8 and less will have the « HTML5 Shim » injected, which adds compatibility for the following HTML5 elements: abbr, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, main, mark, meter, nav, output, progress, section, summary, time, video
66 |
67 | page
68 | Suffix used by the « CSS Router » when detecting pages (#v1-page)
69 |
70 | section
71 | Suffix used by the « CSS Router » when detecting page sections (.api-section)
72 |
73 | head
74 | Name of the variable that should be used for HeadJS. If set to something else like: test, you would call test.load() instead of head.load()
75 |
76 |
77 |
78 |
79 |
Show Comments
80 |
81 |
82 |
2 |
3 |
4 |
5 |
6 |
7 |
Created by
8 |
9 |
14 |
15 |
16 |
17 |
Lead Developer
18 |
19 |
24 |
25 |
26 |
27 |
28 |
29 |
Twitter Talk
30 |
31 |
32 |
33 |
34 |
35 |
Feature Requests
36 |
37 |
38 |
39 |
40 |
Community Support
41 |
42 |
43 |
44 |
45 |
Bug Reports
46 |
47 |
48 |
49 |
50 |
51 |
54 |
55 | Copyright © 2010—2014. HeadJS is available under the
MIT License . This site is powered by: HeadJS,
Github &
Jekyll
56 |
57 |
84 | Got some cool resource to share ?
85 |
86 |
87 |
88 |
89 |
-> Share it!
90 |
91 |
94 | Make it the only script in your HEAD.
95 | « A concise solution to universal problems »
96 |
97 |
98 | {% include sections/download.html %}
99 |
100 |
--------------------------------------------------------------------------------
/dist/0.99/head.load.min.js:
--------------------------------------------------------------------------------
1 | /*! head.load v0.99 */
2 | (function(n,t){"use strict";function v(){}function u(n,t){if(n){typeof n=="object"&&(n=[].slice.call(n));for(var i=0,r=n.length;iDocument Ready
2 |
3 | Know when the document or various files have finished loading
4 |
5 |
6 |
The best way to not block rendering of a page is to not put JS all over the page. The best practice is to put all your CSS in the <head> and all your JS right before the </body>
7 |
8 |
Unfortunately this is not always possible, since often various elements depend on certain JS before getting to the </body>. To work around this we can push functions downwards to be able to execute them later when all the JS has finished loading.
9 |
10 | {% highlight html %}
11 |
12 |
13 |
14 |
18 |
19 |
20 |
21 |
22 |
23 |
30 |
31 |
32 |
33 |
34 | {% endhighlight %}
35 |
36 |
Even when not depending on something like jQuery, if we should have inline scripts, it is always faster and safer to push the execution of those scripts to the bottom.
37 |
38 | {% highlight html %}
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
54 |
55 |
56 |
57 |
58 | {% endhighlight %}
59 |
60 |
head.ready() takes the following arguments
61 |
62 | {% highlight js %}
63 | // Attention: subtility here
64 | head.ready(function() {
65 | // push a function to the end of the page for later execution
66 | // runs once all files have finished loading
67 |
68 | // WARNING: if no files are cued for loading this will NOT trigger !
69 | });
70 |
71 | head.ready(document, function() {
72 | // push a function to the end of the page for later execution
73 | // runs as soon as the document is ready
74 | });
75 |
76 | head.ready("file1.js", function() {
77 | // execute this function, only when file1.js has finished loading
78 | // used in conjunction with head.load("file1.js");
79 | });
80 |
81 | head.ready(["file1.js", "file2.js"], function() {
82 | // execute this function, only when file1.js AND file2.js has finished loading
83 | // used in conjunction with head.load("file1.js", "file2.js");
84 | });
85 |
86 | head.ready("label1", function() {
87 | // execute this function, only when label1 has finished loading
88 | // used in conjunction with head.load({ label1: "file1.js" });
89 | });
90 |
91 | head.ready(["label1", "label2"], function() {
92 | // execute this function, only when label1 AND label2 has finished loading
93 | // used in conjunction with head.load([{ label1: "file1.js" }, { label2: "file2.js" }]);
94 | });
95 | {% endhighlight %}
96 |
97 |
98 |
99 |
100 |
Show Comments
101 |
102 |
103 |
Document Ready
2 |
3 | Know when the document or various files have finished loading
4 |
5 |
6 |
The best way to not block rendering of a page is to not put JS all over the page. The best practice is to put all your CSS in the <head> and all your JS right before the </body>
7 |
8 |
Unfortunately this is not always possible, since often various elements depend on certain JS before getting to the </body>. To work around this we can push functions downwards to be able to execute them later when all the JS has finished loading.
9 |
10 | {% highlight html %}
11 |
12 |
13 |
14 |
18 |
19 |
20 |
21 |
22 |
23 |
30 |
31 |
32 |
33 |
34 | {% endhighlight %}
35 |
36 |
Even when not depending on something like jQuery, if we should have inline scripts, it is always faster and safer to push the execution of those scripts to the bottom.
37 |
38 | {% highlight html %}
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
54 |
55 |
56 |
57 |
58 | {% endhighlight %}
59 |
60 |
head.ready() takes the following arguments
61 |
62 | {% highlight js %}
63 | // Attention: subtility here
64 | head.ready(function() {
65 | // push a function to the end of the page for later execution
66 | // runs once all files have finished loading
67 |
68 | // WARNING: if no files are cued for loading this will NOT trigger !
69 | });
70 |
71 | head.ready(document, function() {
72 | // push a function to the end of the page for later execution
73 | // runs as soon as the document is ready
74 | });
75 |
76 | head.ready("file1.js", function() {
77 | // execute this function, only when file1.js has finished loading
78 | // used in conjunction with head.load("file1.js");
79 | });
80 |
81 | head.ready(["file1.js", "file2.js"], function() {
82 | // execute this function, only when file1.js AND file2.js has finished loading
83 | // used in conjunction with head.load("file1.js", "file2.js");
84 | });
85 |
86 | head.ready("label1", function() {
87 | // execute this function, only when label1 has finished loading
88 | // used in conjunction with head.load({ label1: "file1.js" });
89 | });
90 |
91 | head.ready(["label1", "label2"], function() {
92 | // execute this function, only when label1 AND label2 has finished loading
93 | // used in conjunction with head.load([{ label1: "file1.js" }, { label2: "file2.js" }]);
94 | });
95 | {% endhighlight %}
96 |
97 |
98 |
99 |
100 |
Show Comments
101 |
102 |
103 |
";
25 | html += "(more info ";
28 | }
29 | html += "