I could add successfully the jquery Date-picker to my project which is in MVC5.
Works perfectly in development machine but when moved to production server or installed on any other machine then css file of Jquery Date-pciker doesn't get loaded.
files (CSS + images) are uploaded for Jquery UI
i can see css files in C:/inetpub/wwwroot/website1/Content/themes/base
and images of Jquery UI in C:/inetpub/wwwroot/website1/Content/themes/base/images.
But in my Bundle.Config i am specifying css
bundles.Add(new StyleBundle("~/Content/themes/base").Include(
"~/Content/themes/base/core.css",
"~/Content/themes/base/datepicker.css",
"~/Content/themes/base/theme.css"));
Do i need to specify for images also or will the css file of Jquery will automatically pick from the images folder of Jquery UI?
I checked the output in html for the css it appear like href="/Website/Content/themes/base?v=2Vq5_iMpJLFNII_xHdCkMM__OAdzgi5itwFpkyF2q2s1"
Where as in development machine it looks href="/Content/themes/base/core.css" & href="/Content/themes/base/datepicker.css" & href="/Content/themes/base/theme.css". All the css are loaded correctly.
if we expand it says "Reload the page to get source for: localhost/Website/Content/themes/base?v=2Vq5_iMpJLFNII_xHdCkMM__OAdzgi5itwFpkyF2q2s1
Thanks.
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 have created a custom theme using Jquerymobile.com themeroller.
A mobile website which i have created using default theme values like .js and .css folders.
Now i want to change that theme of my website to my new custom theme,created using themeroller.
How to include those files to my coding?
When you download the themerolloer that you create, there is a sample index.html file that uses the theme that is enclosed. Look at that to see what files need to be included in your page, but more importantly, look at that code to see what CSS classes are being used - no point in including them in your page if you aren't using using the Themeroller classes
You can see all the steps, and a full tutorial on the Getting Started page
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)
I am using ASP.NET MVC3. Adding a web project, it gives me all the files required for jquery to run.
It gives me Content Folder and some folders for storing css and Images.
It also gives me Scripts folder, where I can have my .js files.
Whenever I want to download some custom JQUERY UI controls, It gives me a zip file which has different folders and scripts.
How do I map them so that, I am not keeping too many jquery files in my project.
For example, I want to use DatePicker Jquery UI, I go to jquery site and download them and it gives me a ZIP File which has various folders.
There is folder called development again it has got all the files.
If I wan to go for timepicker, I think there is only a CSS difference between timepicker and datepicker.
Timepicker needs slider. So I am not sure do i need to reference jqueryslider.js in my Layouts file.
Please shed some light on this mapping of downloaded files and already existing files in MVc3?
if have to include new Jquery UI Control, What should be the changes, is it just in .js file, images folder, or css folder.
I personally think its only css and images, please correct me.
Thank you.
All you need to do is add the content in the js folder to the scripts in your Scripts folder and copy everything from the css\\ folder into the Content folder of your MVC application.
Once you have done this, you simply add the following references to the _Layout file in your Shared folder (just modify to match your version of JQuery and the correct version of your JQuery-UI download):
<link href="#Url.Content("~/Content/jquery-ui-1.8.18.custom.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")" type="text/javascript"></script>
Just remember to keep the reference to your JQuery library (jquery-1.7.1.min.js in the example above) before the reference to the JQueryUI scripts.
-- Kindly mark as the answer if this has been helpful
When I use the latest version of jQuery Mobile (referencing http://code.jquery.com/mobile/latest/jquery.mobile.min.js in my index.html page), my custom jQuery Mobile theme no longer works. I created a custom theme named with a swatch named "g". When I load my site, my header changes from ui-bar-g to ui-bar-a. What could be causing my custom themes to be replaced with a different swatch? Thanks.