Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery UI Elements' Image not shown

I'm using a JQuery DatePicker element on my website. But, I'm not able to see the little arrows that are shown at both the sides of the month on top. The area is clickable & I can browse through the months by clicking on the area. But its actually blank & no arrows seen.

Eg: '<' July 2013 '>'

I encounterd a similar problem in the close button of JQuery Dialog Control. Here, the close button image, something like --> 'X', wouldn't appear on the top right corner. But clicking on that area closes the dialog.

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" href="styles/jquery-ui.css" /> 
    <script language="javascript" type="text/javascript" src="js/jquery.js" ></script> 
    <script language="javascript" type="text/javascript" src="js/jquery-ui.js"></script> 
</head> 

This is how the sequence of the included file is. Below is the link which I'm referring. I've used the css file posted on this link for download.

http://jqueryui.com/datepicker/#default

Please help.

like image 245
Crash OR Avatar asked Jul 03 '13 13:07

Crash OR


1 Answers

The problem appears to be the location of the image files in relation to the CSS file. The jQuery UI CSS sheets reference various image files used in the UI. You should keep all files within the CSS folder and reference them from there. Although I have found that you can move these CSS folders around if necessary. Here is a site I am using with multiple jQuery UI themes.


My directory listing:


enter image description here


And here are the references from my code:


enter image description here


I'm coding in ASP.NET so just ignore the content place holder tags.

*ALSO KEEP IN MIND... Each theme folder you see in my directory listing (e.g., "dark-theme") is a sub-folder created within the "CSS" folder when you use jQuery's Custom Themeroller. If you were using a default jQuery library, I believe the images folder and CSS files are located directly in the "CSS" folder.**

BONUS INFO: When using jQuery Themeroller, they allow you to employ multiple themes by using their "CSS scope" tag. You can use this feature by typing a desired class name in the textbox provided (classes must be prefixed by periods such as in a jQuery selector). If you are using multiple themes, you only need to call the jQuery once, and then reference each necessary CSS file. This is what I have done in my example, and is why it may look slightly more complex than yours when finished.

like image 91
Ross Brasseaux Avatar answered Oct 04 '22 08:10

Ross Brasseaux