Does anyone know how do I specify that jQuery UI's datepicker will have my own CSS class?
I'm not talking about the div\input that the datepicker is "made on", rather about the pop-up that comes up when you open up the datepicker.
This div's id is: ui-datepicker-div
I can define my own styles for that pop-up using
.ui-datepicker { blah }
but, what if I have several datepickers, and want different styles for each?
I can't even do something like
.myContainer .ui-datepicker { blah }
Since the datepicker's div is added by jQuery such that it is right under "body" in the DOM. That's why I'm asking if there is a way to specify to jQuery UI to add my own class to that div, sort of like the "dialogClass" option that exists with jQuery UI's dialog ...
Thanks
You are correct that there is only one actual datepicker UI element on the page, but you could use the beforeShow event to add a class or change a theme for different elements. I added a small demo here that changes the border for different datepickers. You could add in other styles as you need. Might even be possible to swap to different jquery themes with enough effort :-)
I don't think it is possible with a simple option, but it is possible i think, the code can be seen here.
You should be able to see where the classes are set, I'm no javascript guru, but it should be possible to do something like this:
Datepicker.prototype._currentClass = Datepicker.prototype._currentClass + '-theme1';
then define a class as ui-datepicker-current-day-theme1
Somebody may correct me though!
By default JQuery UI doesn't support multiple calendar styles on 1 page. It could be possible to alter the datepicker component to include it, but you would have to take the time to figure out how to modify the javascript.
Related
I am building a website with a framework in which the HTML is automatically generated. Twitter Bootstrap 3 needs the class "form-control" added to each input to properly apply the width to such inputs. Problem is that to add that css class from code, I would need to change the framework in many places.
Is there a work around? Maybe some javascript/jquery that searches all labels in my form, for each label it finds the associated input and finally add the css class? But I really don't know how to do it.
Thanks in advance for any help.
You could edit forms.less and recompile the css, but it could be tricky because you don't want all inputs or text areas to have that .form-control styling.
If you have an ID for your form that you want to apply it to, this should help:
$('#yourFormId input, #yourFormId textarea, #yourFormId input, #yourFormId select').addClass('form-control');
You would need to make sure you are adding all the form field types that are in your form, but that above line would probably cover most of them. This is pretty hacky though, depending on your framework there may be some sort of mixin or function to include class names in auto generated forms.
This is a bad idea because it is a "hacky" implementation of bootstrap. Not only do you need the classes you need the proper html structure. The amount of time trying to craft some magic javascript to implement these two changes would be better spent modifying the framework.
A solution could be to use Bootstrap's Less classes instead of the compiled library and somehow add the necessary tags in your code.
Take a look at this article.
I've not faced this specific problem, but in general when working with Bootstrap 3 I'll build the .less files myself with my own specific changes, e.g. in my .less file:
/* Import the Bootstrap 3 .less files */
#import url('../../Bootstrap/less/bootstrap.less');
/* Now implement my own styling below */
Working with .less, you might be able to pull in the relevant styles from the relevant part of the framework, something like this (where .mydiv is your container element) :
.mydiv {
input,
select,
textarea {
.form-control;
}
}
This would pull in the .form-control styles and apply them to input, select and textarea elements inside .mydiv. I've not tried this, but it's worth a try!
C:\Documents and Settings\Omar.Abulawi\Desktop\t3\main.htm
This is a site i'm working on, now i'm trying to change and replace the main image with different ones according to one of the five menus once they are clicked. But with no use!
Your help and advice would be appreciated :)
Well, based on what you've said, this JavaScript should do it:
function changeimage()
{
document.getElementById("picture_id").src = "new_file_path";
}
Call that function in the onclick events of your menus.
You can actually do this with pure css using The :target pseudo class.
FIDDLE
Note: You'll need a modern browser to use this method. (IE9+)
Also, take a look at this article which shows some clever ways to simulate click events with css (one of them being the :target pseudo class.
I have a project that uses JQuery-UI. I recently found formee, which is a nice framework for building forms. One annoyance is that the formee submit button styling overrides the jquery-ui themed button style. How can I get all of the formee goodness but keep my jquery-ui button style? I realize I can edit the formee CSS to remove the button style, but I'm hoping to avoid that.
You can, as you said yourself, remove the offending CSS, which is what I would recommend.
Alternatively you can give the jQuery UI css classes that apply on the relevant button more specificity than the formee classes. This would be second best solution.
As a last case you could add !important; behind all CSS attributes in the classes for jQuery UI... I really wouldn't recommend this.
use this to bring front:
#your-div-id{
position:relative;
z-index:999999;
}
I am running into this problem where my page loads and then after a fraction of a second the CSS effects or styling takes place.
The main issue I am seeing is with the JQuery tabs that I am using
http://docs.jquery.com/UI/Tabs#source
When the page renders, the tabs show one below the other for a second like this:
One
Two
Three
and then render properly as tabs
Is there a quick and easy way to fix this.
Thanks
It's not the styling; it's the jQuery UI javascript library, which is appending the necessary html to your page so that the tabs can look all pretty-like.
You have a few options. First, you can hide your tabs and display them once jQuery UI has completed its magic. Second, you can style your tabs so they look close enough to the finished output so that the change isn't so noticeable. Third, you can drop jQuery UI and style the tabs with CSS only. All valid approaches, I'd say.
Hope this helps!
EDIT:
For the first option, let's say that this is your div containing the tabs:
<div id="tabs">
...stuff...
</div>
In your stylesheet, hide #tabs:
#tabs {
display:none;
}
Then, modify your jQuery UI call like so:
var t = $("#tabs");
t.tabs({
create:function(){
t.show();
}
});
weirdlover's response almost worked for me (using jQuery 1.5.2), but I had to hook the create event:
var t = $("#tabs");
t.tabs({
create:function(){
t.show();
}
});
Thanks!
Browsers usually load files as they appear in your HTML code. Be sure to put the reference to your CSS file first so it loads as soon as possible.
If the CSS is being applied using Javascript, it's not possible to make it load faster. The Javascript file needs to be loaded before it can be used.
Other than that, I don't think there's a way to control how the browser rendering works.
Is the CSS applied through Javascript? In that case you can add some static CSS that ensures the elements get at least shown horizontally arranged before the javascript is executed, by adding some static CSS.
If it is the case that the browser just decides to apply the CSS after rendering without it, there is not much you can do. It could however be, that the CSS is loaded to slowly (if its an external file), in this case, you could add the most important style to a CSS-section directly in the HTML.
i have few listbox widget, and i need to change the color of the arrow that opens the drop down list, and its surrounding box
how can i do it with the CSS?
is there an attribute list for all styles that can be applied on a widget?
Me
The javadoc for GWT specifies what styles you get by default on each of the Widgets:
See ListBox javadoc page, it states that it has the .gwt-ListBox { } style. For this particular style GWT doesn't have any property defined.
Open the css file inside your applications "war" folder and paste .gwt-ListBox { }, then put any CSS property you want to use inside that style, like .gwt-ListBox {
color: red;
}
You should probably notice that ListBox is using a select HTML element (have a look at the generated HTML code), and AFAIK you cannot style the color of the arrow, as it is browser dependent.
If you really need to do that you are going to have to try more complicated things like the ones suggested in here, but this involves doing some javascript hackery.
FWIW, I had a quasi-related problem, which may or may not help you. I needed to be able to set the color of the text in the label of a checkbox programmatically, depending on where the checkbox was in a list of checkboxes and a couple of other factors.
It turned out to be possible to construct the checkbox with some html, roughly like this (sorry, currently away from my code): "new CheckBox(new Html(""));
Hope that helps at all; I don't know for sure that the ListBox enables construction with additional html. And it took a bunch of experimentation to figure out exactly what worked in there. But now it does.