Materialize radio buttons conflict with jquery ui buttonset - javascript

I'm hoping that I am being specific enough about this:
I am designing my website using materializecss. However, this framework only provides classical style radio buttons.
I am instead interested in using the buttonset from jQuery ui as described at the bottom of the page:
https://api.jqueryui.com/buttonset/
The problem with that is that the namespaces from materialize and jquery ui seem to collide and i get a mixture of both frameworks as a resulting buttonset.
Could anyone tell me how to avoid this?
I have tried:
Adding namespaces to the respective css files using less and then using them like so
"<div class="materialize"></div>"
Which by the way messed up something with the fonts too, as it is now reverted to some not so nice default font
Any help is greatly appreciated
Regards

Related

Can I use Materializecss with dart?

Google made some neat presets which can be found on http://materializecss.com/
I am mainly interested in the floating button, but I would like to know about the whole if I can use it with dart. The reason I worry is, because it consists not only of CSS and fonts but also of JS - and that requires JQuery to work, which I don't think I can bring to work with dart.
Or can I simply drop JQuery next to the Materialize-folder?
As I have tried recently, yes it can be used. Any css and javascript framework can be used from dart. jQuery/Materializecss javascript API might be tricky to use so you better get familiar with js interoperability. In my experiment I ended up switching to bootstrap and a css framework on top of it (currently investigating http://fezvrasta.github.io/bootstrap-material-design/ and paper theme from bootswatch). While it might look less "material", I found the elements more mature (that is a pure personal opinion) and I have already a lot of js wrapper for jQuery and bootstrap .

Jquery: Swap out HTML partials depending on screen resolution

With the current project I am working on (Using Bootstrap 3), the client has asked for major changes to the structure for mobile views.
I have used Zurb Foundations Interchange in the past: http://foundation.zurb.com/docs/components/interchange.html - Which is just awesome!
I am wondering if anyone has used a bootstrap alternative? Or if you have coded this before, what has been your approach? I'm a little lost in which direction to go on this one. Searching seems to yield little results. I will probably just do this programmatically, but like the idea of JS handling it.
Many thanks
I had to do this for a client and I used the built in Bootstrap visible-xs, invisible-s etc. to end up with several different versions of the page depending on the screen size. It was a bit fiddly but it didn't need any JavaScript and is easy to modify. It's an option at least and as you're already using Bootstrap everything you need is there.

Using CSS Theme from two or more frameworks

I work with a JS framework than heavily leverages jEasyUI.
We have a need in various projects to combine using jEasyUI with Twitter Bootstrap theme. Another project wants to put EasyUI widgets inside Sharepoint.
This problem is not specific to just jEasyUI but rather combining "themes" from two or more frameworks.
In Sharepoint we found that both have a concept of "Tabs" therefore depending which stylesheet we included first, it screwed up the Tabs of the other product. With Bootstrap, because it styles most basic HTML elements, it interferes with how widgets are rendered from other UI frameworks as it can over-ride styles of basic elements.
I'm not really sure what the solution is. Or I'm wondering what is the best/easiest way to combine both.
It feels like I need to combine the theme from two frameworks then manually go back and fix indvidual elements to they "work together".
Has anyone faced this challenge before and is there a good or faster process for doing this?
Many thanks.
In Bootstrap you can customize your download to specific components. If you only choose the ones you need, there will be minimal style collisions.

How can you use jQuery mobile's Column-Toggle without applying the mobile style to your whole page?

I'm trying to use the jQuery Mobile Column-Toggle widget in a web application that will be almost exclusively used by non-mobile users, so I really just want the Column picker functionality, without any of the other jQuery Mobile features. However, if I load the jQuery Mobile js and css, my entire site picks up the mobile style, which conflicts horribly with my existing stlying.
I've tried several mobileinit options that supposedly should suppress the mobile styling (I've tried various combinations of these settings - I'm just combining them all here for brevity):
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.ignoreContentEnabled = true;
$.mobile.page.prototype.options.keepNative = "select, input, a";
});
The other option I've seen is to add data-role="none" to all of the elements you don't want to style, but that has two problems:
It doesn't work for me (I'm still investigating why, and will update my question soon).
It seems like bad practice to junk up your html with a ton of suppression tags, which also increase the page size.
I've tried using the download builder to create a customer jQuery Mobile package with only the Column-Toggle (and dependency) module, but that custom package doesn't seem to work at all.
So I have two questions really:
Is there an alternative column picker for HTML tables that I can use instead of the jQuery Mobile version. I feel like I have done extensive web research, but have found nothing else.
What methods exist to prevent jQuery Mobile from applying it's style to your whole page? There are a few other SO questions about this, and I'm afraid that there just isn't any currently working method to do so.
Update: I've actually changed to using the new column selection widget in the tablesorter plugin, and scrapped jQuery Mobile.

jQuery: Plain HTML/CSS with core jQuery or jQuery UI for a blog?

I'm about to implement a blog, and I'm pretty sure I want to go with jQuery, because I really like it.
However, when I last did jQuery, I just did plain HTML/CSS and then improved the user experience with what jQuery has to offer. Meanwhile, jQuery UI has been released, and it looks like a full-fledged user interface framework like Ext JS.
Can I benefit from jQuery UI with a rather simple website like this, or is it more geared towards web applications like GMail?
jQuery UI is quite large and seems to have lots and lots of CSS in their skins. I'm a bit worried that I would have to write/adjust tons of CSS to make the blog look like I want it to. If I did plain HTML/CSS, I would have fine-grained control over the appereance.
Edit: I'll stress again that I'm specifically wondering whether jQuery UI is intended for and useful for a simple website like a blog. It is no doubt useful for more sophisticated web applications.
Edit 2: Thanks for all your answers, too bad I couldn't accept more than one. By now I realised that jQuery UI is not like I expected a full-fledged web application framework, but rather a bunch of useful utilities on top of jQuery. I think I'll use it, if only for Draggable, Droppable and Selectable.
You don't necessarily need to write loads of CSS if you don't like the supplied styles.
The jQuery UI ThemeRoller is a very good web-based GUI for customising the look of the widgets. It then allows you to download your own customised (and minified) .css and .js files containing just the widgets you need.
I suggest that you should have a play with that first and see if you can make the demo widgets look how you'd like them before making any decision.
You can have both... I have! Where I am using widgets (datepicker) etc, I use jquery ui, besides visit : http://jqueryui.com/themeroller/ and you can customize the colours quite easily. The UI themes are recommended strongly if you use the widgets as the widgets rely on the css defined therein to move things around, for display and selection, handling rezise of widgets.
You can always build your site using html + css then add the ui theme later, as you said it will increase the user experience greatly... besides we always end up using 1 or 2 features then extend or find other suitable plugins.
As always, the answer is 'it depends'.
More specifically though, it depends on what kind of a UI you're planning on. If you find yourself coding functionality that's already there in jq UI go ahead and use it. They've got a handy theme roller plugin which will allow you to customize the skin to perfectly match the look of your site, so that is a non issue.
You might also want to include it all through a CDN (offered by google or MS) so that your site doesn't get slow downloading the (relatively) heavy initial payload.

Categories