I am working with jquery ui and their icons.
My icons looks like this (except I have another theme): jquery ui icons chart
But I found this site with a set of nice icons which I would like to use (srcroll down to the bottom of the page): Michael Keck
Can these icons be found and downloaded somewhere? Do they belong to the jquery ui framework or are they customized and only exists on this site?
He's essentially created his own theme with that set of icons. That's the beauty of the jQuery UI CSS framework, it specifies a list of icons and you can choose to overwrite them without having to change any of your HTML markup or JS code.
Related
I'm facing problems with the Vaadin Designer tool using with Vaadin v23, that is included in the pro description. A custom theme was created and i have annotated the theme in the application class of the project in order to append it. Inside the browser everything looks as expected with the styling of the theme. And every change on CSS have an effect on this outcome.
But the problem is, that the CSS of the theme has no effect on the designer view and i want to make this happen.
Logically that can't work with the theme in designer, because it is applied later to the Java-class (Application-class) through the #Theme-Annotation, but how can I properly apply the theme to the designer to have the full preview inside there?
I have an application with multiple Angular Material dialogues opened at the same time with a drag and drop feature. What I want is when I click a modal it should be placed in front, is there a way to do that using Angular Material or at least a CSS trick.
Thank you
I'd like to use this upgraded jQuery Mobile dual range slider.
jQuery Mobile dual range slider working but buggy
I need to use it with twitter bootstrap. However, jQuery Mobile doesn't play nice with Twitter bootstrap and is killing the dropdown menu when the javaScript files are placed at the bottom of the page (as per yslow). Here are 3 jsbin examples to illustrate the problem:
with jQuery Mobile added, twitter bootstrap menu fails:
http://jsbin.com/ibecox/1
without jQuery Mobile .js file, twitter bootstrap the menu works fine:
http://jsbin.com/ibecox/2
with all javaScript in the header (bad practice) the menu also works, but I'd need to avoid putting all the javaScript in the header:
http://jsbin.com/ibecox/3
I can see there's a broken link to the twitter bootstrap js, I've fixed it and your sample works fine for me, both the dropdown menu and the progress bar
If all you're trying to do is get jquerymobile's Range Slider to work with Bootstrap, you can use the Custom Download tool to download just the slice that (sort of) makes the Range Slider work.
What you get is unfortunately incomplete, and above all it doesn't self-initialize, so you'll need to do that manually:
$('div[data-role=rangeslider]').rangeslider();
And you'll need to apply some styles of your own to make up for a bit too much being left out in the custom download. But you will get Range Sliders without breaking Bootstrap.
The cause of the Bootstrap break when you use all of jquery mobile is more complex. The Init module applies a ton of classes all over your code, in particular .ui-btn to buttons. That's the main thing that blows up Bootstrap - the nav menu uses a button tag, and that tag gets that problematic class applied, and then in come all the problem styles from jquerymobile.
The hackier way to solve that in the large is to just use jquerymobile without the Init module then Init only what you need - hopefully their buttons aren't one of those things. The best way to solve it is pretty intense: Improve jquerymobile so that there's either no conflict with Bootstrap ever, or, some sort of special noBSconflict() method or something you can run that avoids applying classes that will break Bootstrap but otherwise proceeds as normal.
I'm using multiple jquery ui widgets for my project and as the project has progressed I've just added what I've needed to the bottom of the list but now I get some errors. In this question is saying some widgets inherit properties/functions from others so what is best order to arrange the script tags for all the widgets to work properly without errors?
Here are jquery files I'm using in the order they are in the HTML
jquery.1.7.2.min.js
jquery.ui.core.min.js
jquery.ui.widget.min.js
jquery.ui.position.min.js
jquery.effects.core.min.js
jquery.ui.tooltip.min.js
jquery.ui.dialog.min.js
jquery.ui.datepicker.min.js
jquery.ui.tabs.min.js
jquery.ui.selectable.min.js
jquery.ui.autocomplete.min.js
jquery.ui.menu.min.js
jquery.ui.button.min.js
jquery.ui.draggable.min.js
jquery.ui.mouse.min.js
jquery.ui.resizable.min.js
Thanks
Looking through the compiled UI file is looks like it might be this:
UI Core
Widget
Mouse
Draggable
Droppable
Resizeable
Selectable
Sortable
Effects Core
All effects included alphabetically
Accordion
Autocomplete
Button
Datepicker
Dialog
Menu
Menubar
Popup
Positon
Progress bar
Slider
Spinner
Tabs
Tooltip
Please specify what widgets are you trying to use. You should always import jquery first, and then look at the widget dependencies.
You can also "build your own jquery" here and any required dependencies will automatically be checked automatically.
jQuery Mobile has a fine collection of themes for buttons.
http://jquerymobile.com/test/docs/buttons/buttons-themes.html
However, I want a button with a red gradient in the background. I could just override the CSS for one button's theme directly, but is there way to do this without breaking jQuery Mobile's abstraction barriers?
In other words, can I add my own themes through the interface that jQuery Mobile offers?
Use the ThemeRoller at http://jquerymobile.com/themeroller/index.php
You can import the existing jQuery Mobile theme and then customize it. Note that if you have less than 5 themes, you need to edit the CSS yourself and specify the style for .ui-body-e because the error message uses it.