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...
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
This is a button
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:
This is a button
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:
Initial page, does a post back
Server decides a popup needs to be done, renders the view with a dialog containing all the relevant dialog classes set.
User clicks button on popup, performing another post back.
Server renders view without the popup.
It is ugly, but you can't do dynamic HTML without scripting, right...
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.
Related
We encounter the following problems with Jquery Mobile.
Our site is divided in a mobile and a fixed desktop site.
Both use the same database and php code. Only the templates are different.
On our mobile site we use Jquery mobile for a better user experience and that works fine. However we integrated a button "goto desktop".
This link should bring us back to our "normal" desktop site.
But there is the problem. In the desktop-site, Jquery mobile is still activated and it replaces drop down fields, input fields and make a complete mess of the desktop site.
We tried everything to disable JQM but nothing seems to work.
How we can switch from our mobile site template to the desktop site template and disable JQM completely when we are on the desktop template?
Thanks a lot for help!
There are few available solutions but only one will really do.
Working example: http://jsfiddle.net/Gajotres/NvEcW/
Few things are needed, first we need to set this:
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
it will give us an ability to programatically turn on/off content enhancement. If you already don't know this mobileinit event must be initialized before jQuery Mobile initialization but after the jQuery initialization. This must always be a part of a page.
There's one last step. When we want to move from mobile to desktop page we need to reload page and use this javascript:
$(document).on('pagebeforecreate', '#index', function(){
$(this).attr('data-enhance','false');
});
Pagebeforecreate event is important because at this point content is still not enhanced and attribute data-enhance = false will prevent any further page enhancement. If you want to turn it on again just set attribute value to true.
If you want more solutions then take a look at my other answer, search for the topic Methods of markup enhancement prevention : jQuery Mobile: Markup Enhancement of dynamically added content.
I want to use just the slide transitions / AJAX navigation component of jQuery Mobile. On jQuery Mobile's website they have a "Custom Builder Tool" which lets you select just the "AJAX Navigation System" (and it auto-selects associated stuff like transitions).
http://jquerymobile.com/download-builder/
This yields some custom JavaScript and CSS files. For the life of me, I can't get this to work on a webpage. If I include these custom files, then add data-transition="slide" to an anchor element, nothing happens. If I include the full jQuery Mobile library it works perfectly (but screws up the styling of my mobile site). How can I make this work? Maybe one needs to initialize the custom jQuery Mobile manually? I can't find anything in the docs about this. Help!
Here's how I got this to work:
I included the latest jQuery Mobile js but used the stripped down css from my custom JQM build (using the Custom Builder tool).
data-role="page" was added to page content containers. Some scripts called in needed to be moved to now load from within the content containers. Now transitions work as expected.
I hope this helps somebody.
I am loading a file in JQueryUI tabs, when I include the jquery file in the called file i am getting errors while switching tabs, I thought its due to conflict of the jquery as it is included in both calling and called files, the problem was solved when I removed the link from the called file. Now the file is loaded in tab, well I have something like few jquery operations to be done in that tab, as the jquery is not included I am unable to perform any stuff in that tab, what is the solution, how did they design those tabs so that a user cant include the main jquery file in all the ajax called files. Is there a solution or this is a bug or shall i give up using jqueryUI tabs?
Thanks
The content of the tab is part of the main page, which has jQuery in it. So you can select elements from the tab and call jQuery methods on them as if they were part of the main page. In fact, by the time you are able to call jQuery methods on anything on the page, i.e. after document.ready, it is part of the main page.
If you couldn't use jQuery with jQuery UI, you wouldn't be able to use jQuery UI, because that itself uses jQuery...
We have an MVC site that has custom formatting throughout. We are using jQuery Mobile and want to use the features in it, but it themes everything. We do not want this.
I found this SO question and I added this Javascript code in the _Layout.cshtml page:
$(function () {
$('html').find('*').attr('data-role', 'none');
});
This works for all of the elements, but sometime after the page loads jQuery inserts a <div> with the attribute data-role="page" which still causes issues.
Can I somehow disable themes altogether?
Try simple add data-ajax=false to the links/buttons who are responsible for the navigation.
Ex:
<a href="#Url.Action("Index", "MyPage")" data-ajax="false">
This will prevent jquery from use ajax for the transitions, you page will reload and the duplicated data-role=page will not be on DOM anymore.
It works for me, maybe can help you too.
I have used a tutorial to create a widget for my site.
This widget now needs to be dropped into a complex page with existing CSS rules on important tags like *, body, ul, and li.
Is there a way to drop in this widget (currently a separate page with html, css, and javascript) into my webpage without the webpage applying all of its own CSS on top?
Is there a way to drop in this widget (currently a separate page with html, css, and javascript) into my webpage without the webpage applying all of its own CSS on top?
The easiest way would be to use an iframe.
If you want an embedded widget, the wisest thing to do is to specify the CSS properties inline in the widget's markup. It's bad practice usually, but is the right thing here.
Check out for example what the Facebook Profile badge (you need to be a Facebook user to see it) looks like:
<!-- Facebook Badge START -->Pekka Gaiser<br/><img src="http://badge.facebook.com/badge/1238473725.2447.1697336437.png" width="120" height="239" style="border: 0px;" /><br/>Create Your Badge<!-- Facebook Badge END -->
They are very likely to have done a lot of testing on this, so the CSS properties they set in their code, I would recommend to set in your widget, too.
It can be done with an IFrame, but I wouldn't reccomend that. IFrames are messy and they usually don't work as expected. Some browsers block them, some don't support them at all, and interacting with the page they're in from the IFrame page is really hard.
The most clean way is by wrapping the widget in an extra div with an id like widgetwrapper. Then prefix every css rule with #widgetwrapper [space]. That way, the css from the widget won't affect the rest of the page. Make sure you put the css for the widget last in the css. If there's still page rules messing with your widget, overwrite them in the widget css.