This question already has answers here:
jQuery-UI Datepicker CSS problem
(4 answers)
Closed 3 years ago.
I'm having problem showing JQuery UI themes for my CakePHP application. I placed the theme at app/webroot/lib/jquery.ui/ . Now on my layout I imported the theme using :
echo $html->css('/lib/jquery-ui/theme/ui.all');
I'm usingthe DatePicker widget. On my page, I can see that the my textbox was showing the date picker when focused, but the theme was not applied properly. I can't see the background images. I know that the theme (or css) has been imported since I can see some changes in the DatePicker (fonts, spacings, etc.). I just couldn't see the background images.
I don't know if this has something to do with my problem, but I'm also using YUI.
I take it your ui.all.css file lives in app/webroot/css/lib/jquery-ui/theme/ ?
Where are the images that it references?
URLs for background images in CSS files should be relative to the CSS file itself - so if the images live in app/webroot/img/lib/jquery-ui/theme/, the URLs in the CSS file should be ../../../../img/lib/jquery-ui/theme/ or alternatively, the URLs can be absolute from the DocRoot of the site, e.g. /img/lib/jquery-ui/theme/
Just to add a little bit more clarification:
I have been using the jquery ui datepicker for several projects and it always worked great. Then I baked a new cake project, dropped in datepicker, and found that the background images were not loading. I removed cake.generic.css from my application, and the datepicker images were able to load! Add it back in, and they vanish!
So long as you use your own form css for your apps, you should be fine.
you said you have the files at app/webroot/lib/jquery.ui/
so you should use the correct path:
echo $html->css('/lib/jquery.ui/theme/ui.all');
Related
I have not been able to get an explanation of which files are needed in a JQuery Mobile Web site. The stackoverflow documentation on JQuery Mobile shows that there is one file for css and one file for js:
jquery.mobile-1.4.5.min.css
jquery.mobile-1.4.5.min.js
However, downloading the JQuery Mobile 1.4.5 package one ends up with many more. All files that have ".min" appended to the name of the asset, is a minimized version.
The standard download includes one js (the one mentioned above). That is required, as well as JQuery itself. At this date, the latest jQuery that is compatible with jQuery Mobile 1.4.5:
jquery-2.2.4.js
(correct me if that is not true)
For css files standard download includes:
jquery.mobile-1.4.5.css
jquery.mobile.structure-1.4.5.css
jquery.mobile.theme-1.4.5.css
jquery.mobile.external-png-1.4.5.css
jquery.mobile.icons-1.4.5.css
jquery.mobile.inline-png-1.4.5.css
jquery.mobile.inline-svg-1.4.5.css
It appears to me that the first file contains all the rest. So that one can choose to include all at once with one file. The others, I guess, would be used if less code is wanted in a streamlined version of JQuery Mobile. However if one does not use jquery.mobile.css, which are needed in HTML at the top of the page?
If one uses ThemeRoller, jquery.mobile.theme.css becomes MySITE.css (whatever name was selected during the export process in ThemeRoller). If one uses a custom theme, then that theme css is needed, along with jquery.mobile.structure.css.
If one includes jquery.mobile.icons.css, does that in turn include in the external-png, external-svg, and inline-png files?
And what is "jquery.mobile-1.4.5.min.map" for and when is it needed?
That would all be good information for the documentation in stackoverflow.
I created a custom theme (mysite.css) in ThemeRoller so I include the following in HTML (in the appropriate link of script tag):
mysite.css
jquery.mobile.icons-1.4.5.css
jquery.mobile.structure-1.4.5.css
jquery-2.2.4.min.js
jquery.mobile-1.4.5.js
Is that correct?
I'm wondering if this is possible and if yes, how would I go about doing it? I'm trying to make the widget use a Jalali(Persian) Calender.
jQuery UI Datepicker localization
In general, to add localization to jQuery UI Datepicker you need to include a specific localization file immediately after including the Datepicker's script. For example, to set a French localization, you'd do this:
[...include jQuery and jQuery UI...]
<script type="text/javascript" src="jquery.ui.datepicker-fr.js"></script>
The localization files are included as part of the the standard jQuery UI download, in a separate directory (development-bundle/ui/i18n). For more on this, see the Datepicker API documentation (under "Localization").
Current status: Farsi in, Jalali out
Currently, jQuery UI download package doesn't seem to include a Jalali localization file. For now, there seems to be only a regular (Georgian) calendar translated into Farsi (jquery.ui.datepicker-fr.js).
Solution 1 - custom localization file
If you prefer to stick with jQuery UI's datepicker, you can create a custom localization file, based on the format of existing localization files. If you're familiar with the calendar in question, it shouldn't be difficult.
Solution 2 - use a different plugin
Consider using the jQuery Calendars plugin instead. It already includes most common world calendars in several languages and formats, so generating a Jalali or any other foreign calendar for that matter is done by the flick of a setting.
Might be too late, but since I stumbled on it, here is a demo someone has been kind enough to put up. All credits to unknown author
http://jquery-ui.googlecode.com/svn/tags/1.6rc5/demos/datepicker/localization.html
I'm trying to use the jQuery UI Slider with my rails 3 app. I've downloaded a theme and put the css file in app/assets/stylesheet and I put all the images in app/assets/images.
When I load a page with a slider, I get an error that it can't find an image:
GET http://10.1.10.100:3000/assets/images/ui-bg_glass_45_0078ae_1x400.png 404 (Not Found)
That file is in app/assets/images/ and the css file has been edited to point to ../images/<image>
Is there something else I need to do to make a jQuery slider work with Rails 3?
gist with the files:
https://gist.github.com/2355571
I prefer to keep the jQuery UI files as they are, and put the ui images under public/stylesheets/images. That way upgrading the jQuery UI stylesheet is easier, you can just swap it out with your new one.
Perhaps just try linking to the image directly in your CSS file but leave the files where they are. If I'm correct, it should know to look in the assets/images folder anyways.
Instead of...
url(../images/ui-bg_inset-hard_100_fcfdfd_1x100.png)
Try just
url(ui-bg_inset-hard_100_fcfdfd_1x100.png)
Is there an easy way to change the theme of the jQuery UI by replacing certain files? It seems like I have to keep downloading the entire jQuery UI every time I want to change the theme.
You can build your own theme at http://jqueryui.com/themeroller/.
once you build your theme you will have link both in address bar that you can bookmark and
in your css file jquery-ui-1.8.6.custom.css that you download:
http://jqueryui.com/themeroller/#ffDefault=Trebuchet+MS,+Tahoma,+Verdana,+Arial,+sans-ser...
for each modification you can use these link instead of start from beginning.
EDIT
by using totalcommander compare tool or winmerge, you just do syncronize existing jquery ui files and the new jquery ui files, if you build new one
The only thing you need to change is the stylesheet and the images.
Referring to this answer, you can find ThemeRoller edit link in your css file. This url contains whole theme settings and this is the best way how migrate/upgrade it.
I can't find a clear answer on this. Is it possible to use JQGrid without using jQueryUI on my website?
According to the install.txt:
In order to use jqGrid 3.5, first a UI
theme css file should be loaded.
Download the desired theme (or build a
custom one) from jQueryUI site
(www.jqueryui.com) and point in your
link tag in head section the path to
the theme css
via http://www.trirand.com/blog/?page_id=6