I implemented jQuery DatePicker in my VS2010 project and it works fine with one small issue. When I implemented a custom theme, I lost my prev and next icons (for moving through the months).
Here's the image:
Here are the jquery library references:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="~/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="~/lightbox/js/lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="~/lightbox/css/lightbox.css" media="screen" />
<link type="text/css" rel="Stylesheet" href="~/Scripts/jquery-ui-1.8.9.custom.css" />
Here are my image references in jquery-ui-1.8.9-custom.css
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(~/images/jquery/ui-icons_d8e7f3_256x240.png); }
.ui-state-default .ui-icon { background-image: url(~/images/jquery/ui-icons_6da8d5_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(~/images/jquery/ui-icons_217bc0_256x240.png); }
.ui-state-active .ui-icon {background-image: url(~/images/jquery/ui-icons_f9bd01_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(~/images/jquery/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(~/images/jquery/ui-icons_cd0a0a_256x240.png); }
I modified the path to be sure it pointed to the files. Not sure what I'm missing.
Any help would be greatly appreciated.
Thanks.
Are you sure your paths are pointing correctly (AKA, are you seeing the jQuery UI icons elsewhere in your site)? That is the first thing I would check...particularly because you modified the path. You may have inadvertently screwed something up.
Update
I think you need to fix your paths - I don't think they are pointing correctly. From what I see, they have to be relative to your .custom.css file. So, for example, my jquery-ui-1.8.9.custom.css file exists in my Content folder. My states and images are referenced like this:
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }
Therefore, I have to place an images folder at the same level as the jquery-ui-1.8.9.custom.css and place all the images inside that folder. Try that and see if it fixes the problem for you.
For me, the issue was that the Themeroller was adding double quotes around the image paths. I just removed those from my custom CSS file, and everything worked.
i.e. I changed:
url("images/ui-bg_highlight-hard_100_fafaf4_1x100.png")
to:
url(images/ui-bg_highlight-hard_100_fafaf4_1x100.png)
throughout the whole CSS file.
I also was having this problem. I was pulling my hair out. But yes, JasCav is correct, you must put an "images" folder at the same level as your query-ui-1.8.9.custom.css (or in my case jquery-ui-1.8.16.custom.css) file. And inside this folder copy your *.png files from your jquery ui download.
I had the exact same problem and finally solved it.
The problem was coming from the rights on the 'images' directory. I had to make the directory browsable for 'others' by using chmod:
chmod o+rx images
I hope this helps
I had the same problem. Created an images directory under my theme name, and dragged all the gif files and png files from the theme into the new images directory. worked like a charm, no messing with the paths.
I think the themeroller app at JQuery_ui doesn't package the images into an image directory, and it should.
Anyway, revert your pathing back to the way it was, and give it a try. Good luck.
By the way, it appears you put your custom.css into your scripts folder, that gets messy, I just pointed mine to the themes folder copy. i.e.
link href="../../Content/themes/humanity/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css"
I also fell foul of this. I have read the answers given above and they do not tally 100% with my experience as of July 2012. I do not know if the UI custom ThemeRoller has been changed at all since this question was first raised which may explain the previous comments/answers. However for me these answers over complicate what needs to be done and were therefore a confusion to me.
What worked for me :-
Use ThemeRoller to create you customised theme.
Download the theme - for example to directory my_Work_Area outside of your project.
Unzip the download to my_Work_Area
Review the index.html after unzipping - check that the datepicker style reflects the style tested in the ThemeRoller. If not go back to the ThemeRoller and repeat 1-3.
copy my_Work_Area/js/jquery-ui-1.8.21.custom.min.js to your jquery folder within your project for example _public/_jquery/jquery-ui-1.8.21.custom.min.js
if required similarly copy jquery-1.7.2.min.js
copy my_Work_Area/css/custom-theme/jquery-ui-1.8.21.custom.css to your css folder within your project for example _public/_css/jquery-ui-1.8.21.custom.css
copy the folder my_Work_Area/css/custom-theme/images to your css folder within your project for example _public/_css/images
as per the documentation ensure that the following is included in your html
<link rel="stylesheet" type="text/css" href="../_public/_css/jquery-ui-1.8.21.custom.css" />
<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../_public/_jquery/jquery-ui-1.8.21.custom.min.js"></script>
That is all you need to do.
Whether it is appropriate to have a folder called images inside your css folder might need to be considered. Changing the location of this folder would involve considering of the paths employed.
But if you just want the ui to work 'out of the box' the above works with no need to make anything complicated.
I hope that this helps.
Place image folder with icons files, in that location, where the .css file exists.
who reading this question,
If you use this dateime picker
http://www.malot.fr/bootstrap-datetimepicker/
You add this option: bootcssVer : 3
$( ".date" ).datepicker( "option", "changeMonth", true, **"bootcssVer" : 3** );
The icon will show!!!
Let me share the solution for my case. My ASP.NET MVC project has the following directory structure:
Content
themes
base
images
icon1.png
icon2.png
jquery-ui.css
Other directories
When I run application locally via Visual Studio, in the jquery-ui.css I can refer to the icons using the following url: url("images/icon1.png"). But when I run application on the Azure server, I must refer to this icon with: url("themes/base/images/icon1.png"). It turned out, that the real "working"/"current" directory for jquery-ui.css is Content directory. That is because in cshtml I load jquery-ui.css using the bundle, which I create in the following way:
bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css"));
It seems like VS is "super intelligent" and looks for referred images also inside subdirectories.
The solution can be to use inside jquery-ui.css file the absolute url to the images: url("/Content/themes/base/images/icon1.png") (or proper path relative to the Content directory in my case, i.e. url("themes/base/images/icon1.png"), as I mentioned above) or to create bundle with more nested path:
bundles.Add(new StyleBundle("~/Content/themes/base/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css"));
Another (worse in my opinoin) solution is to load css file into cshtml using <link> element:
<link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />
Related
Could you explain me how to access assets from webpacker gem within vue.js components? For example - how to create div with background image. I've tried use /app/assets/images and /app/javascripts/assets folders but images is only available in template section, but not in style section :(
in my case
<template>
<div id="home">
<div id="intro">
<img src="assets/cover-image-medium.png" alt="">
</div>
</div>
</template>
works fine, but
<style scoped>
#intro {
height: 200px;
background: url("assets/cover-image-medium.png");
}
</style>
not working :(
Whats wrong?
New Rails' webpacker stuff is pretty raw, so that's the configuration that works for me:
config/webpacker.yml (for webpacker 3):
resolved_paths: ['app/javascript/images', 'app/javascript/src']
compile: false
# ...
JS files:
/app
/javascript
/packs
# only entry point files
vue_application.js
/src
some_component.vue
/images
logo.svg
in component:
<script>
import 'images/logo.svg'
</script>
in template:
<img src='~images/logo.svg' />
point the tilde here - it means that the image is a module dependency
in CSS:
<style lang='sass'>
#app
background: url('../images/logo.svg')
</style>
For some reason tilde does not work here, so relative path is used.
If I understand your question correctly, you will have to find the webpack.base.conf.js file inside your build folder, then find the code that looks like this:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src')
}
}
Then add the following line to the alias object: 'assets': resolve('src/assets/'), which will work for the assets folder being right below the src folder. You can also change the key string from assets to whatever alias name you desire.
EDIT:
I forgot to mention, to access aliases in style code, you have to prefix it with a ~ (telda) so that assets becomes ~assets.
Since this is tagged with Vue.js I will answer for that. None of the other answers worked with Vue 2.x.
For Attributes
A webpacker require statement returns the full URL of the required asset (resolved based on your resolved_paths inside webpacker.yml). Based on that, you can do something like this:
<img :src="require('images/what-a-pain.png')" alt="Finally working" />
Please note the colon causing the src attribute to be bound to the result of the javascript expression.
You can also use ID anchors by appending them, for example with SVG:
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<use :href="require('images/icons.svg') + '#copy'" />
</svg>
Vue templates are generally pre-compiled to javascript equivalents, so a require statement is needed to pull the assets in at compile time, not runtime.
For CSS urls, scoped or not
Simply use a tilde ~ and a path. The path must be relative to either the file including it or the resolved_paths from webpacker.yml.
.relative-pathed {
background: url(~../../../assets/images/quitethepath.svg) center center no-repeat;
}
.works-after-editing-webpackeryml {
background: url(~images/quitethepath.svg) center center no-repeat;
}
For this usage there is no need to require() the asset.
Please note: there is a difference in paths between development and production, especially if Sprockets is also used. Simply doing src="/assets/image.png" will sometimes work in developement, but not production.
You can try
background: url("/assets/cover-image-medium.png");
Instead of
background: url("assets/cover-image-medium.png");
If you have installed sass-rails gem, try this:
<style scoped>
#intro {
height: 200px;
background: image-url("cover-image-medium.png");
}
</style>
Trying to go through the "openlayers-workshop" on Windows 8. In the "Basic - Creating a Map" section following the instructions and making the example map.html file. When viewing the html file in my browser the following error occurs:
ReferenceError: ol is not defined
Sourcefile: http://localhost:4000/map.html
Line: 18
I have followed the tutorial as far and installed the required prerequisites.
Is there something I haven't installed yet to make it work?
Any other Windows users out there that have the same problem?
Go to http://openlayers.org/download/ and download latest *dist.zip file. Extract this file. In the extracted folder there will be 3 files, you only need ol.js and ol.css. In the directory you have map.html create 2 folders, one called "css" and another called "js". In the "css" folder placer the ol.css file from the extracted folder. In the "js" folder placer the ol.js file from the extracted folder. In your map.html file change the line on line 4(may be different, you should see a line),
<link rel="stylesheet" href="/ol.css" type="text/css">
Change this to
<link rel="stylesheet" href="css/ol.css" type="text/css">
Similarly on line 12 of the map.html file change
<script src="/loader.js" type="text/javascript"></script>
To
<script src="js/ol.js" type="text/javascript"></script>
Now save and reload the map.html file, now it should display correctly. The reason you where original getting a error was because you hadn't included the openlayers library in your map.html file correctly.
In my _Layout page, following works:
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css")" />
This doesn't work (the styles do get applied, however images referenced in the css don't render):
#Styles.Render("~/bundles/kendoStyle")
here's the Bundle def in App_start -> BundleConfig.cs:
//Kendo Styles:
bundles.Add(new StyleBundle("~/bundles/kendoStyle").Include(
"~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css"
, "~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css"
, "~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css"
, "~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css"
//, "~/Kendo/Content/contextMenu.css"
));
What am I doing wrong here? (please note, "Kendo" is setup as an mvc4.5 web app under my main website
Image paths are relative to the folder in which styesheets are located. For example, an image might be referenced like this:
.k-icon {
background-image: url('BlueOpal/sprite.png');
}
Because your bundle redefines the path to your stylesheets, the browser attempts to download the image from ~/bundles/BlueOpal/sprite.png, which doesn't exist. The actual path to the image is ~/Kendo/Content/kendo/2013.2.918/BlueOpal/sprite.png.
Everything works fine when you link to your stylesheets directly (without the bundle) because relative paths correctly point to images on your server. However, because your bundle redefines the virtual path in which the stylsheets are located the relative paths to images no longer work.
If you want to use a bundle you must define it with a path that will not break relative image paths in the stylesheets. In your case, since the KendoUI stylesheets are located at ~/Kendo/Content/kendo/2013.2.918, you should define the bundle with that same path:
bundles.Add(new StyleBundle("~/Kendo/Content/kendo/2013.2.918/bundle").Include(
"~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css",
"~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css",
"~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css",
"~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css"
));
I hope that helps.
Hi I hat the same problem. but I saw that the page was able to get the sprite file, but does not show some symbols. The temporally solution was set the bundle EnableOptimizations property to false.
BundleTable.EnableOptimizations = False
I'm having an issue with the bundling and minification feature of ASP.NET MVC 4 Basically I have the following bundle setup:
bundles.Add(new StyleBundle("~/backendcss").Include(
"~/backendContent/bootstrap/css/bootstrap.min.css",
"~/backendContent/assets/jui/css/jquery-ui.css",
"~/backendContent/assets/jui/jquery-ui.custom.css",
"~/backendContent/plugins/uniform/css/uniform.default.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
"~/backendContent/assets/css/fonts/icomoon/style.css",
"~/backendContent/assets/css/main-style.css",
"~/backendContent/plugins/pnotify/jquery.pnotify.css",
"~/backendContent/plugins/msgbox/jquery.msgbox.css",
"~/backendContent/IntroJS/css/introjs.css"));
when they are placed on the page they come out like so:
<link href="/backendContent/assets/jui/css/jquery-ui.css" rel="stylesheet"/>
<link href="/backendContent/assets/jui/jquery-ui.custom.css" rel="stylesheet"/>
<link href="/backendContent/plugins/uniform/css/uniform.default.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/fonts/icomoon/style.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/main-style.css" rel="stylesheet"/>
<link href="/backendContent/plugins/pnotify/jquery.pnotify.css" rel="stylesheet"/>
<link href="/backendContent/plugins/msgbox/jquery.msgbox.css" rel="stylesheet"/>
<link href="/backendContent/IntroJS/css/introjs.css" rel="stylesheet"/>
First problem is that the Tilda ~ is not coming in the beginning of the link and I think that's one of the problems (site not rendering properly) now all of the above css stylesheets are resolving but there are a lot of imports and relative urls (images) and I think those are getting messed up (without the bundles, if I just point to ~/backendContent/.... everything is working just fine
Second problem is that when I set BundleTable.EnableOptimizations = true; there are a lot more problems and digging deeper I get a huge list of
(4368,1): run-time error CSS1019: Unexpected token, found '#import'
(4368,9): run-time error CSS1019: Unexpected token, found 'url("layout.css")'
I don't know if this is important but the minified and rendered style link produced by #Styles.Render("~/backendcss") is:
<link href="/backendcss?v=eMX6YcVB78xPWZV9Dw6seHqsT742J8_M1irfUC0IdaQ1" rel="stylesheet"/>
Any Ideas? I'm sorry but this is the first time I'm using this feature and with this site having so many css and js it would save a lot of bandwidth and speed up the whole site. Plus its just plain cool (that is if I can get it to work)!!!
The ~ is not supposed to be rendered. That's a special character in asp.net which means the root of the application
I'm not sure why you are having issues with the actual minification, but that'd be pretty hard to diagnose without the source.
The link when optimized should look like that. the ?v=xxx at the end is for cache busting so that people get the updated css when you change the css files.
I think for minification to work you need to add in global.asax file
BundleTable.EnableOptimizations = true;
Also can you try to create different groups of for example keeping jqueryui separate from bootstrap and so on.
Darren Kopp is right "The ~ is not supposed to be rendered. That's a special character in asp.net which means the root of the application"..
And don't use ".min" because when you set BundleTable.EnableOptimizations = true; it will be minimize your files.. So it should be like this;
bundles.Add(new StyleBundle("~/backendcss").Include(
"~/backendContent/bootstrap/css/bootstrap.css",
"~/backendContent/assets/jui/css/jquery-ui.css",
"~/backendContent/assets/jui/jquery-ui.custom.css",
"~/backendContent/plugins/uniform/css/uniform.default.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
"~/backendContent/assets/css/fonts/icomoon/style.css",
"~/backendContent/assets/css/main-style.css",
"~/backendContent/plugins/pnotify/jquery.pnotify.css",
"~/backendContent/plugins/msgbox/jquery.msgbox.css",
"~/backendContent/IntroJS/css/introjs.css"));
I started integrating jquery ui datepicker in my page.
I included the js files:
jquery-1.5.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.datepicker.js
and CSS Files:
jquery.ui.datepicker.css
But it resulted out datepicker without the background...
what am i missing on it?
After i manually add :
.ui-datepicker{background-color: silver;}
it shows like:
http://outsourcingnepal.com/general-images/shot1.jpg
Check the datepicker.css if there is style definition for the element with missing background. If not..just check the element in firebug (or similar tool) and add your own style. There probably will be already a class, so just add your style in your stylesheet, or add it into detepicker.css.
Got it solved unpackaing all the files once more... i hope some files were missing
For styling only the DatePicker, these are the necessary stylesheet files:
~/Content/themes/base/jquery.ui.core.css
~/Content/themes/base/jquery.ui.datepicker.css
~/Content/themes/base/jquery.ui.theme.css
or the minified ones:
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.core.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.theme.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.datepicker.min.css" />