Why is my jQuery UI CSS not working in JSFiddle?

Question

For answering questions with JavaScript input i often use Demos on JSFiddle. It is very useful, but when i was answering this tooltip question i needed the usage of jQuery UI.

The problem of this usage is, that you can check the jQuery UI in the Framework selection, but it loads only the js file and not the css files.

So i decided to link to this http://jqueryui.com/themes/base/jquery.ui.all.css used in the official Demos of jQuery UI. => Problem solved.

Really solved? No?!

Because this link works great if a user has opened a jQuery Demo before, but as i did see here at my work it doesn't work if I only open the fiddle without ever having open one demo.

• Why is that?
• And how can i solve this problem?
• How should I link css in jsFiddles for jQuery? Also Googles CDN contains only the JavaScript files.

I don't want to host my own css file, just for posting demos on jsfiddle...

PS: The JSFiddle where I mentioned this behavior is http://jsfiddle.net/neysor/r9yfw/

Answer 1

Neysor, my sincere apologies - I was being an idiot.

I am indeed seeing the same problem and not getting the CSS, and I think I have found the problem.

It appears that jqueryui.com might be doing a referrer check against the request and returning a 403 to those outside of the domain (which makes sense). This is why it's working when you view the UI elements in another window, since the CSS will then be cached.

Make it work pl0x!

If you open up the "Manage Resources" tab and remove the 'jquery.ui.all' and replace with this http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css, all should work well (or at least better). Do this for any/all CSS resources.

I've forked your jsFiddle and seeing some improvements.

It may be worth checking in with the jsFiddle docs once you have a complete solution to see if we can get this documented (or better, fixed!)

Hope this helps!