headjs / headjs Goto Github PK

View Code? Open in Web Editor NEW

4.2K 4.2K 350.0 2.08 MB

The only script in your HEAD.

Home Page: https://headjs.github.io/

License: MIT License

JavaScript 57.38% CSS 5.51% HTML 35.32% Less 1.78%

headjs's Introduction

This project is no longer maintained, but was the only solution back in the day, to do responsive design with IE6 & co ^^

Latest Version: v1.0.3 :: Docs | Downloads

Responsive Design, Feature Detections, and Resource Loading

Speed up your apps: Load JS & CSS asyncronously and in parallel, but execute them in order
Load one asset if a condition is met, else fallback and load a different one
Manage script dependencies, and execute callbacks once they are loaded
Cross-browser compatible « pseudo media-queries » let you code against different resolutions & devices
Fix quirks in specific browsers by quickly applying dedicated CSS/JS logic
Detect various browsers & their versions
Check if the client supports a certain Browser, HTML5, or CSS3 feature
Automatically generates JS and CSS classes for browsers & features that where detected
Automatically generates CSS classes, to know what page or section a user is viewing
Know if the user is in landscape or portrait mode
Or whether the client is using a mobile or desktop device
Get old browsers to support HTML5 elements like nav, sidebar, header, footer, ...
...
Make it, The only script in your <HEAD>
- A concise solution to universal problems

###Resources

WebSite
- https://headjs.github.io/
Bugs
- https://github.com/headjs/headjs/issues
Community Support
- http://stackoverflow.com
- Remember to tag your questions with: head.js

headjs's People

Contributors

Stargazers

Watchers

Forkers

aergn ctcherry skeltoac nabilmj cabbiepete fadzril ahubert richardchoi rwaldron fnordfish phloxic phoenix24 sourabhbehra cherrystore rdt1 billortell cmonty bomberstudios stinie rtreffer lautis dmaffioletti theosp bdiesel pfeiffer abernier charles-cai adamantium gudata frobernik odyss009 jentanbernardus patsanch oliverc johan jgoz jc1arke gwilym kcmani gijs dreizle seabeard efrane dkcreatto janpipek gryn zfben dhchow benlong pro3d bluinfaccia avido alvarlaigna fregu creamcoderz goldenboy bummer hendriono jayphen navgarcha matoilic tbarbugli pangor stigkj zodsoft itechnology pbnkp yanneves charithsoori aymens benjaminfisher dineshkummarc tazzkiller psteam nsigustavo guiferrpereira granteagon ilaurens jusbrasil oscaratondho rogercamara zhuzhuaicoding evanrs jag miketaylr keppelen josecarlospsh paulreiber mach3 nanedo vadio hichembenchaaben clementsalles web3app4 pppanda afinzel govaniso vcichecka bjliwei liluxdev

headjs's Issues

document.write compatibility

Is head.js compatible with 3rd party ad scripts which write their content into the page with a document.write statement? I think document.write will only work before rendering is complete which if I understand correctly will not work with head.js? Its a shame because its these ads which often block the rendering of the page making a site feel slow. Any ideas or feedback appreciated.

Error in the documentation for the "Usage" section on the website

In the "Usage" section on http://headjs.com/ these are the final lines of the first set of examples:
// the previous can also be written as
head.js("file1.js").js("file1.js").("file3.js");

The last line should be:
head.js("file1.js").js("file2.js").js("file3.js");

Note the name of the second file, and the method name (which was missing) in the call of the last file.

scripts with same name but in different directory not loaded

It seems like head.js caches only the file name, instead of the entire url.

This causes an issue with files with the same name, but a different path. Only the first file is loaded.

Request: Load JS/CSS if it was not loaded yet

Many parts of a web are tiny code that need some little js and some little css only for some specific section. So it's crazy to load everything allways.

Head JS should be able to load some script only if it was not loaded before. In this cae the Execute after loaded it's not possible because you will not load the JS allways.

So, for example this

head.js(
{yourscript: "utl/yourscript.js"}, function(){
executesome();
});
head.js(
{yourscript: "utl/yourscript.js"}, function(){
executesomeother();
});

Should not load twice the same script.

And would be also great if this can be applyed to CSS files also for the same reason, you don't need allways all the code present.

Great idea by the way, I started using it :)

chrome is marked as `webkit53`

a substring() call trunctates what maybe should be webkit534

Support CommonJS Modules

head.css - load css

Hi,

A nice feature would be to load css in the same manner as head.js()

border radius not detected on Firefox

does every page need cookie support before body scripts load?

i think the cookie code here could proooobably be optional / left out.

head.ready event

Hello Tero Piirainen,

I experienced a little issue. Maybe you came across this.

Unfortunately, I ve to create a little bit of javascript code from the server side.

I wrote something like:

head.ready(function() {
alert("test");
// execute some code here
});

When I push ctrl f5 on my webpage, I get the alert.

When I open the page again, I do not see any alert and firefox says the files are loaded from the cache. Is it possible that the ready event is not thrown in case that all files are loaded from the cache?

Best regards and thank you in advance,

Tobias

Un-named scripts become recursive load nightmare in Firefox

I was checking out your library today, and I noticed some really weird behavior in Firebug on Firefox 3.6. Basically, it appeared as though scripts were getting reloaded recursively, and upon experimentation this caused some really drastic load-time performance degradation. I built the following test cases on jsbin to demonstrate the issue:

http://jsbin.com/eliyu3/edit (load portion of YUI library in three combined groups)
http://jsbin.com/eliyu3/2/edit (load portion of YUI library in 23 non-combined files)

The time to load the JavaScript libraries for me went from ~2 seconds to almost 15 seconds in Firefox 3.6.

I tracked down the issue to the getScript private method in load.js. When passing an array of strings, getScript doesn't properly resolve the key for the "scripts" hash, and so a new object is loaded for all unexecuted scripts on each recursive pass.

Pushed workable fix to my fork, but I didn't do any cross browser testing - you should definitely check it out though. Firefox 3.6 is really unhappy right now ;)

isFunc test is not accurate

a Object.toString.call(fn) === 'function' approach is preferred...

see https://github.com/jquery/jquery/blob/master/test/unit/core.js#L314-399

feature detection incompatibilities with Opera 11

screenshot: http://paulirish.com/i/02b0.png

fiddle: http://jsfiddle.net/TCDJh/

the feature tests give false negative results for:

box-shadow (reported in #47)
border-image
border-radius
transforms
transitions

Opera 11 supports all these features.

Incomplete HTML5 element styling support in IE

Currently only supports styling of the following HTML5 elements in IE<9:

article, aside, footer, header, nav, section

Should support the same elements found here - http://code.google.com/p/html5shiv/:

abbr, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time, video

screensize resize handler isnt debounced

calling the screenSize handler on every resize event is probably undesirable. It means the page gets a full reflow of all contents during the entire resize drag. it's very costly, from a rendering perspective.

the event should be debounced.

more: http://www.quirksmode.org/dom/events/resize.html

old debounce code: http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Doesn't support print styling of HTML5 elements

Should support print styling of HTML5 elements in the way this script does - http://code.google.com/p/html5shiv/ - and as originally described by Jon Neal here - http://www.iecss.com/print-protector/

Issue with jQuery UI?

My usage:

When the page loads, the jQuery UI progress bar will render 25% of the time. Same thing happens in every browser I tried to use. I am using inline code for it as follows:

Perhaps I am just doing things the wrong way, but I thought I should at least mention it since it renders correctly some of the time.

pageId and index leak to the global scope

cuz you put a semicolon instead of a comma. whoops. :)

the createElement loop isnt neccessary for !IE

ideally you would feature detect the need for it.. msft has a blog post with this suggestion

https://github.com/Modernizr/Modernizr/blob/master/modernizr.js#L878-880 (the createElement childnodes test, not the attachEvent part.)

[Feature Request] - Slimmed down version

I'm very interested in implementing your script, but I really only want to have the js loader portion. Do you plan on, or would you be willing to, have a slimmed down version of the script that only provides the javascript loading functionality?

JSLint

Would it be possible to conform to JSLint? w/ The Good Parts?

http://jslint.com/

Just asking :)

does `window.head_conf` need to be exported to the window?

doesn't seem like it needs to be globally available if wasn't set to begin with.

Feature request: callback for when a script fails loading

I know this project is but a few days old (the internet is amazing, isn't it?!) but as soon as I downloaded it I thought of a feature that would be nice to have. We are using Paul Irish's HTML5 boilerplate, and it has a unique way of loading jQuery which I really like:

<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/javascripts/vendor/jquery-1.4.4.min.js"><\/script>')</script>

So basically what this does is, we first try to load jQuery from Google's CDN. If that times out for some reason, we instead load a local copy of jQuery.

In order to do the same thing with head.js, there could be a 'failure' callback for a file. So I could say something like this:

head.js({
  jquery: "http://http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
})
head.failure("jquery", function(api) {
  !window.jQuery && api.loadAs('jquery-local', '/javascripts/vendor/jquery-1.4.4.min.js')
})

The intention here is that the callback passed to failure() would get called immediately after the referenced file fails to load, and is passed the global head object; and that the local version of jQuery would be the next file that's loaded. To make that happen, of course, loadAs() (or something like it; don't know if we can reuse .js here) would have to actually insert the given file into the list of files to load instead of merely pushing it (so that it's the next one to load).

So, anyway, I don't know if you see a need for that, but I thought I'd throw it out there.

no-js class at headjs.com

seems like this has been fixed in the dev version, as I can't replicate it there, but it's worth pointing out.

location.pathname could save you some bytes

instead of calculating it yourself.
it's got full support everywhere, too.

does not remove no-js class when javascript is available

no-js class on html tag should be removed if javascript is available.

Opera 10/11 beta: scriptTag's cleanup throws DOMException

While testing head.js in the latest Opera, Dragonfly keeps yelling Uncaught exception: [object DOMException] at me. Exception's message is NOT_FOUND_ERR.

The bug can be reproduced on the test page and affects even the stable version.

I have tracked down the source to the line 488:

if (!ie) {
   head.removeChild(elem);
}

Changing the condition to

if (!ie && !opera) {

or putting the call into empty try/catch block silences Dragonfly.

Is it our problem or Opera's?

Problem with HTML5 in IE

Hello.

I just noticed that :

head.load.min.js doesn't work for HTML5 in old IE
head.min.js does work for HTML5 in old IE

CDN Support

Something very useful, would be if head js knew locations for the CDN(s) of the major libraries (mootools, prototype, jQuery, etc) so you could do something like this:

head.js('jquery'); and that would load jQuery from the google CDN. I know it take quite a bit of work and I'd gladly help (as much as I can :P)

Chaining head.js(): bugs in doc, inconsistencies in function

The docs say that head.js() can be chained like so:

head.js("file1.js").js("file1.js").("file3.js");

There's a typo here: the third chain lacks the function name. In addition, head.js() sometimes returns itself, and sometimes returns the result of queue.push() (the length of the array) which breaks chaining. Also, since the function is returning itself (a function) rather than the api object, the chaining would actually look like this:

head.js("file1.js")("file1.js")("file3.js");

Function should always return api so that chaining works per the docs, which is probably the most logical syntax.

Scripts not loading after pressing F5 or ctrl+F5 in IE

Head.js works fine first time but if i refresh IE browser then scripts does not loads.

head.js wipes out existing IDs on the html element

will probably catch a user or two by surprise.
probably just needs documentation.

Script errors in IE

Just tried headjs in IE - specifically the demo page with headjs.html
IE 8 (and IE 7 in compatability mode) shows a scripting error.

'null' is null or not an object
prototype.js
line 4125

Cannot easily input text into fields on iPhone

This is specific for iPhone Safari.
My site is using jQuery. I tried using head.js because I wanted to use the classes such as lt-480 to style for different screen sizes (i.e. mobile), but I noticed when head.js was included, more often than not it seemed like I couldn't type into text input fields. I would touch the input field, and a cursor would blink as if I could start typing, but as I type the cursor disappeared as if the field didn't have focus. In order to type in the field, I had to either long press or tap it a few times. When I removed head.js, the field acts as normal. Not sure what is going on here, but it works fine in Android.

Licence?

Hi, I'm curious to know what licence (GPL, MIT etc) you'll be releasing this under? Thanks for an excellent script.

Allow URLs without extensions

I found that head.js wouldn't load scripts from URLs like 'http://maps.google.com/maps/api/js?sensor=false'. Is there any workaround for this?

Feature: Add var/option in to load order

It'd be rad to be able to load vars or other option in order as well.

For example. Load jQuery, set the name space, then load a jQuery plugin:

head.js("jquery.min.js",noConflict = jQuery.noConflict(),"plugin.jquery.js");

Screen size detector resizing functionality is not working well

have been playing around lately with headjs but i have found an estranger behavior that i think is not normal. When I'm using the screen size detector for resizing functionality the classes for the size doesn't change as it was expected to adapt to the new size (when you change the size of the window).

Have anyone experienced a similar problem with headjs?

Thanks!

http://stackoverflow.com/questions/4337264/problem-with-headjs-resizer

Duplicate script loads error

Line 441:
if (script.state == 'loaded') { return callback(); }

callback() is undefined. Instead it should be:
if (script.state == 'loaded') {
return callback && callback.call();
}

I created a headjs-rails gem

Hey guys, just wanted to share this little gem I created to easily add Head JS support to Rails 3.

https://github.com/muitocomplicado/headjs-rails

It basically provides a headjs_include_tag helper and a generator to download the latest Head JS files (would be interesting to start tagging releases). The tag helper is a wrapper of javascript_include_tag so it accepts all the default parameters, but it just outputs the Head JS syntax.

It's pretty simple, and actually my first gem. =)

Seems like Head.js isn't working on my Blog

Hello. I was amazed by what Head.js does by combining and also minifying JS files. But the problem is that I feel its working on my Blog. You can see a repot by GTMetrix Here:

http://gtmetrix.com/reports/techsplurge.com/vfM4SVyB

It shows that my page requests for Several External JS files (eg Digg.js, float.js). I think they should have been combined, right?

Any help please?

Add support for script concatenation: one URL provides multiple dependencies

WordPress (e.g.) automatically concatenates scripts to reduce HTTP requests, speeding page loads. A single script URL provides many scripts, e.g. jQuery Core and Tools and UI, each of which satisfies different dependencies. The current headjs API provides a one-to-one mapping of labels to scripts.

I propose that headjs should provide a many-to-one mapping. This would improve support for script concatenation. This syntax comes to mind:
// if arg is object and arg.length > 1 then arg is labels and a URL
head.js(["jquery", "tools", "ui", "/path/to/concat.js"]);

Opera 11 Preloading Bug

In Opera 11.0:

When loading scripts sequentially using head.js, only the first script loads and executes. As a result, the head.ready callback doesn't execute.

https://gist.github.com/752136

CDN for head.js

Is there any CDN to load head.js from? Does github provide it?
Right now we can use the free Coral CDN: http://headjs.com.nyud.net/media/js/head.min.js

head.loader.js IE8 bug

Just a heads up.

I'm testing head.loader.js and IE8 seems to not be loading scripts in order.

head.min.js seems to load everything in order though.

I'm rocking this on something pretty awesome. I'll send it your way when it's all up.

Thanks!

Bug in detecting box-shadow feature in Opera 11

Opera 11 supports box-shadow but head.js still marks it as no-boxshadow.

Need DOM ready event included in Head JS

I've read that the $(document).ready() event is now unusable if loading jQuery via Head JS because the DOM ready code completes before any external scripts loaded via Head JS are executed even with head.ready.

Do you think you could include the DOM ready code from jQuery into Head JS file so that you can execute code before the page renders and still load jQuery in parallel? I.e. a dom.ready() function.

Reason I ask is I print a simple red text warning message (in a div) onto the page with the HTML saying "Please enable Javascript for full functionality". Then in the $(document).ready() I set the div's display to none. Effectively if Javascript is enabled you don't see the message at all because it's hidden before the page displays, if Javascript is not enabled you see it. Now I'm not sure that's the standard way to do it, but that's what I devised and I'm open to better suggestions.

With Head JS however you sometimes see a brief flash of the red warning message if you refresh/load the page before it disappears (FUBC). You mention you can avoid this by initially hiding the modifiable elements before the scripts make them visible. However Catch-22 you can't hide the message before the page loads then show the 'Javascript is disabled message' using Javascript after the page has loaded if Javascript is disabled.

Only solution I can think of is to load jQuery directly in the head without Head JS so the DOM ready event works which kinda defeats the purpose of parallel loading as jQuery 1.4.4 is my largest script.

Cheers

page ID can include a question mark

Given a URL like http://www.cnn.com/?refresh=1 the ID will be ?refresh=1-page

probably also solved by issue #8

repetetive addClass calls call multiple reflows.

and it just touches the DOM again and again

they should be done in one fell swoop at the end.

Opacity-detection not WebKit-proof

Looking at the source code of head.detect.js, I noticed that you check the status of opacity using
return testAll("opacity:.1");
Now you're likely to fall into the trap jQuery fell into, due to a WebKit bug where locale settings influenced the returned CSS rule: when commas are used as the decimal mark the problematic WebKit-based browsers will return opacity:,1 and your test will fail.

John Resig solved this by using a RegEx instead:
opacity: /^0.55$/.test( a.style.opacity )