3

Does anyone use jQueryUI (such as the CSS framework part) without the jQuery component? If you were catering for users who don't have javascript or who have it disabled etc

A particular scenario would be the dialogs which are so brilliant and simple...without javascript its just a div though...would a potential solution be to have the dialog div with a class that positions it absolutely and above other elements and then to remove that class when jQueryUI sets up the dialog...so that if javascript cannot run the dialog still has the class?

or would you use the css framework to create the dialog manually perhaps...

Improve this question

2 Answers 2

Reset to default
4

I have used jQuery UI's classes to style things 'consistently' when JavaScript is turned off. You just use the classes that jQuery UI applies to elements, and include the jQuery UI stylesheet and resources.

For example, if you had

<a href="#" id="abutton">This is a button</a>

And you ran the jQuery UI JavaScript:

$("#abutton").button();

It would alter the markup to:

<a href="#" id="abutton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
    <span class="ui-button-text">This is a button</span>
</a>

Giving you a nice jQuery UI button. But only once the JavaScript has run will this be applied. If a user doesn't have/allow JavaScript, then you'll get an ugly link being used. Instead, you should use the jQuery UI classes at the start:

<a href="#" id="abutton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">This is a button</a>

It will have the basic jQuery UI styling before the JavaScript runs (the structure is different though - the span isn't there, and if you had the span initially it adds another one anyway, which IMHO is a bug). The thing is that you want the JavaScript to run still, because it adds other things, such as mouseover effects (and the span mentioned earler), so that users that DO have JavaScript get the full experience, but you also want to use jQuery UI classes by default because you want some consistent theme (even if it's not 100% perfect).

For more info about their CSS framework, check out http://jqueryui.com/docs/Theming/API.

If you want to have it to NOT use JavaScript, you'd have to have:

  1. Initial page, does a post back
  2. Server decides a popup needs to be done, renders the view with a dialog containing all the relevant dialog classes set.
  3. User clicks button on popup, performing another post back.
  4. Server renders view without the popup.

It is ugly, but you can't do dynamic HTML without scripting, right...

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

1 Comment

Thanks for adding a great response to an older post...cheers!
3

I use the CSS all the time outside of jQueryUI; I find it provides a much more consistent look-and-feel.

As for the rest of the question...whatt?!

and then to remove that class when jQueryUI sets up the dialog

How do you plan on having jQueryUI run ("set up the dialog") without JavaScript being enabled? If you put the dialog up without JavaScript, it won't be able to move or close; you'll be stuck with a giant div in the middle of the screen.

Improve this answer

6 Comments

that's my point...would you have a class that sets up a dialog assuming no javascript...and then have the javascript remove that class when setting it up...
do you use the CSS to manually create the dialogs? what about the manual overlay without js?
as i stated, if you make an overlay or a dialog or whatever, it will be stuck there and the user can never get rid of it. so do not put one with css. no javascript + css dialog = unusable site.
i see your point (sorry it took so long)! although, it would (in this case) be in asp.net and if the manual dialog had a control that closed the dialog (ugly though)...
make sure that the control asp.net adds is not using javascript; i think it will. you would need a link to another page, or the same page with a different query string--something that lets you identify whether or not to make the dialog.
|

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.