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)
Related
I've got a JQueryMobile-based Rails app that's working quite well, but I keep seeing the following show up in the logs and I don't know how to get rid of it:
No route matches [GET] "/assets/images/ajax-loader.gif")
I've actually got my ajax-loader in /app/assets/images/ajax-loader.gif, though. Also, I'm pretty sure that the app shouldn't be trying to hit the file since I've got the following JavaScript in the app as well:
$(document).bind("mobileinit", function()
$.mobile.ajaxEnabled = false;
});
What am I doing wrong? Thanks for any help!
nothing wrong in this, the request to the file is made by following jqm css
.ui-icon-loading{background:url("images/ajax-loader.gif");background-size:2.875em 2.875em;}
and the absolute path will be relative to your current request of the jqm css path. and hence 404.
And for Loading Widget, from jqm official documentation
It can also be displayed manually for custom loading actions using the $.mobile.loading helper method (See the global method docs).
There are two solutions for this.
Move the images folder relative to your jqm css folder.
Change the background image url in jqm css.
I would recommend first one. This will keep you upgrade friendly.
Overwrite the jQuery mobile CSS by adding the following CSS rule somewhere in your mobile stylesheets.
I added it directly to my mobile manifest file app/assets/stylesheets/mobile.css.scss, just below the line //= require jquery.mobile-1.4.5.min.css
.ui-icon-loading {
background: image-url('my-custom-ajax-loader.gif') !important;
}
By using the image-url helper you get all the benefits of the asset pipeline, such as fingerprinting and CDN utilization.
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 am using a simple layout demo in my rails3 application
simple layout demo
in this demo there are 5 panel north,south,east,west,center
when I load my project this all panel show in each and every page.
instead of I want to some specific panel in different different page
give some idea how can i do that
Is the code from the simple layout demo all in your /app/views/layouts/application.html.rb? If so, rails will render everything from that file in every view. Since the jQuery code that does all of the stuff in that demo is in that same file, there may be no easy way to make that work with rails. The only thing I could think to do would be to have different .js files for different pages. each of these separate files would have jQuery code that creates the layout for that page, and is linked to that page using content_for and javascript_include_tag. I'm writing an app that uses jQuery UI and this is how I've had to do it. I created sub folders in my /public/javascripts directory that I named after my models to make it easier to keep all the .js files sorted.
I'm trying to create a bookmarklet which will use the jquery-ui - what steps must I take to do this? My bookmarklet loads a remote script and appends it to the page. This script includes jquery and jquery-ui, but getting the stylesheets and images is turning into a nightmare. Do I have to edit all the CSS to point images to their locations on the remote server?
Effectively what I'm trying to do is have a bookmarklet which will pop up some information in a nice pretty draggable jquery-ui dialog. Is there an easier way?
Thanks,
Mala
I did the same, but I had no problems to load images.
To load the jquery ui images, I just used the google cdn server. That worked without any problems.
To load items from a master webpage, I had to upload a script which returns the complete host url.
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');