6

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/

Improve this question
9
  • I've opened in porn mode and everything seems fine? How are you reproducing this behaviour? Commented May 7, 2012 at 8:15
  • I open the jsFiddle Demo and it does not work. I open e.g. this jQuery UI Demo - klicking on run in jsFiddle and it works. I clear the cache and i can do the same again Commented May 7, 2012 at 8:22
  • 2
    porn mode = privacy mode Commented May 7, 2012 at 8:27
  • 1
    PS: Tried in various versions of FF, IE and Chrome on both OSX and Windows. Commented May 7, 2012 at 8:36
  • 1
    BINGO! Got it! Check out the answer below - thanks for the great question! Had me stuck for about 20 mins! :D Commented May 7, 2012 at 9:30

2 Answers 2

Reset to default
3

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Scrolling fast, read pl0x! in big bold letters, then i was like 0.0.. ---> i laughed, then i upvoted :D
0

jsfiddle documentation includes this in its "Add Resources" section :

Warning: jsFiddle is recognizing the type of the resource by the extension. If you want to use a dynamic resource please add a dummy GET variable i.e. http://example.com/download/js/dynamically.js?somevar=somevalue&dummy=.js. This will trick jsFiddle to recognize it as JavaScript resource.

Doesn't quite predict your problem or your workaround but worth a try (with dummy=.css).

Improve this answer

2 Comments

thanks, but i don't think this has something to do with that, because jsFiddle adds it as a CSS: <link rel="stylesheet" type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
But it might work for another reason - namely to force the resource through your company's reluctant network.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.