jQuery UI themes are nice they apply to the entire document, however I have some cases where the style of the dialog such as the title bar colour must be changed.
In my jQuery UI css, the titlebar is coded:
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
Here's my javascript:
var $AlertDialog = $('<div"></div>')
.dialog({
autoOpen: false,
title: 'Alert Message',
buttons: {Ok: function() {$( this ).dialog( "close" );}}
});
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.css('ui-dialog-titlebar','color: red');
$AlertDialog.dialog('open');
};
Alerter() is then called as a substitute for alert().
Accessing and altering the color property of 'ui-dialog-titlebar' has no effect.
Lots of reading preceded this question. Seems others have had similar issues, but not specific to jQuery UI.
How can this be done?
Update:
Thanks to a good hint, I did this:
$AlertDialog.dialog('open');
$("#.ui-dialog .ui-dialog-title").css('color','red');
$("#.ui-dialog .ui-dialog-title").css('background-color','orange');
Works. But acceptable practice?
My suggestion would be to not use the .ui-dialog selector as there may be more than one dialog on a page. You can traverse to the title bar.
...
$AlertDialog.html(cTxt);
// might as well use the theme since its part of jquery ui
$AlertDialog.prev().addClass("ui-state-error");
$AlertDialog.dialog('open');
Firstly,
According to documentation .css() takes property as param.
It seems you are trying changing ui-dialog-titlebar. Instead try this:
...
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.dialog('open');
$(".ui-dialog .ui-dialog-title").css('color','red');
$(".ui-dialog .ui-dialog-title").css('background-color','orange');
//Assuming you want to change header color only
//see the theming structure at http://jqueryui.com/demos/dialog/#theming
};
Related
Is there a good way to add and remove elements without reflowing the page and causing all the elements to jitter about?
The angular directives ng-show and ng-hide don't preserve layout.
and bootstrap classes don't either
<div class="show">...</div>
<div class="hidden">...</div>
Is there a good way to add and remove elements without reflowing the page and causing all the elements to jitter about?
ng-hide and ng-show uses display:none
You need to add new property in CSS for visibility : hidden
.element-hidden{
visibility: hidden;
}
And then provide the condition to ng directive - ng-class
e.g.
ng-class="{element-hidden : hideBox == true}"
where hideBox == true is the condition you want to check..
You're looking for the CSS visibility attribute which makes an item invisible, but still allows the element to take up space on the DOM. There's no built-in Angular directive which will do this so you'll need to roll your own.
myApp.directive("visiblityOn", function(){
return{
restrict: "A",
link: function(scope, element){
scope.$watch('visibilityFlag', function(){
element[0].style.visibility = scope.visibilityFlag ? "visible" : "hidden";
});
}
}
});
and a corresponding controller that will work with your directive:
myApp.controller("myController", function($scope){
$scope.visibilityFlag = true;
$scope.changeVisibility = function(){
$scope.visibilityFlag = !$scope.visibilityFlag;
};
});
Example
#RahulPatil's answer is correct but somewhat inelegant. I would suggest to keep using ng-show/ng-hide because it's easier and more readable (i.e. keeps using the same pattern), and add an override in CSS for you particular items:
.keepInFlow.ng-hide {
dislpay: block!important;
visibility: hidden;
}
<div class="keepInFlow" ng-show="show">..</div>
Angular's documentation also mentions overriding ng-hide
In a sencha app, I want to create two or more "Panel" in the same page, but with different Style.
Panel_1.js:
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title",
//some try
componentCls:'panel_1',
cls:'panel_1'
...
});
Panel_2.js:
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title",
componentCls:'panel_2'
});
I add these two panels in one page, eg. the "center" of mainview. Add for css file with css class panel_1 and panel_2. But does not work.
how can I set these two panel with different Title, Background color, color, border, and so on.
Add the same question, I want different Button, eg. Blue Button with yellow text, red Button with white text, in a same toolbar.
I try override the extjs css class, eg. x-panel-body . You know, all compoent will be changed. That is not what I want.
It's hard to tell what you're having a hard time with. What you seem to be trying to do does work. I'll just provide a simple example, see https://fiddle.sencha.com/#fiddle/ecd
The easiest way is to add a cls to your panel, then you can use CSS to apply only within those classes. You can also add cls to items inside of your component. Also, Ext has some classes it already applies so you can use them (x-body, x-header for Ext.panel.Panel). The following example shows you how to scope your .x-header definitions so they only apply to your class
JavaScript
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title',
cls:'panel_1',
html: 'Here I am',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title',
cls:'panel_2',
html: 'Here I am again',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
CSS
.panel_1 .x-header{
background-color: blue;
}
.panel_1 .ok{
background-color: green;
}
.panel_2 .x-header{
background-color: yellow;
}
.panel_2 .cancel{
background-color: red;
}
Most typically, you would extend your sass resources to create custom classes for your both Panels (or at least for the one you wish to change).
You could do it with the Sencha Architect, which has a 30 day trial period.
The trick would then be to add a ui tag, that would then be added to your generated class name
Ext.define("MyApp.view.Panel_2", {
ui: 'black'
});
would then be generated with a class called like
.panel-default-black
for this class you could then create your sass for all internal elements
sass/component.css would then for eg contain
.panel-default-black {
background-color: black;
color: #ffffff;
.panel-default-header {
background-color: $some-predefined-value-in-another-sass-file;
}
}
another option would be to use the UI-label, like:
#include extjs-panel-ui(
$ui-label: 'black',
$ui-background: black;
$ui-color: white;
$ui-header-background-color: blue;
);
After compiling the theme, you would then see the changes between the 2 panels.
More info, you could find on the site of Sencha
Yet another none recommended way, would be to use the style tag, and to directly give your style for your panel, but that is not recommended to use
Using the JQuery UI datepicker, in the header it gives you the option to go to the next month or previous month with left/right arrows. My question is what is the css property to change the colors when hovering over the previous or next arrows?
ui-state-hover is the class that is applied when hovering, see here
It's a little harder than it seems. As NimChipsky pointed out, it's in ui-state-hover, but the colors aren't there directly.
If you look at ui-state-hover, out of the box, you will see something that looks like:
background-image: url("images/ui-icons_222222_256x240.png");
Basically, this is telling you that you will be using an icon sheet with color #222222, but the icon sheet graphic has to be available. You can generate other icon sheets directly, with other colors, by using the jQuery UI theme builder.
<script>
$(".ui-datepicker-next, .ui-datepicker-prev").hover(function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
});
</script>
and css for your class 'hover'
.hover
{
background-image:url('paper.gif');
}
jQuery UI makes buttons look nice with $('button').button();.
Is there an equivalent for text input boxes?
There's nothing to stop you from doing $("input").button()... I like this:
$('input:text, input:password')
.button()
.css({
'font' : 'inherit',
'color' : 'inherit',
'text-align' : 'left',
'outline' : 'none',
'cursor' : 'text'
});
A fuller example.
Add the class ui-corner-all to your input and post-style the input with CSS.
$('input').addClass("ui-corner-all");
http://jsfiddle.net/TTShr/
I know this is old. But, if anyone is just looking to style their inputs to look more UIish, just add the following classes: $('input').addClass("ui-widget ui-widget-content ui-corner-all");
You could just hard code the classes too.
To sum things up I would like to add my implementation:
$('input:text, input:password, input[type=email]').button()
.addClass('ui-textfield')
.off('mouseenter').off('mousedown').off('keydown');
The CSS would be:
.ui-textfield {
font: inherit;
color: inherit;
background: none;
text-align: inherit;
outline: none;
cursor: text;
}
See it here: http://jsfiddle.net/UXdLQ/1544/
I had the same problem, I came up with the following solution. Use these classes on your input field:
ui-widget ui-state-default ui-corner-all
You may modify the padding - f.e. if you select elements on your site - to be unified.
jQuery UI v1.11.4
also add a .off('keydown') to Corin's answer to prevent the box from turning white when enter or space is pressed.
The example in your question cites jQuery UI's Button widget. The idea of this widget is to have a range of options including ease of theme-ing. There is a widget for input boxes too. Some of them that I'm aware of are as below:
Auto-Complete Widget
Default Text Plugin for input-box
Text Limit Plugin for input-box / text-area
There are many such plugins if not for widgets. You can always browse/search through at the search box available in the page http://plugins.jquery.com/
I liked the idea of simply adding the classes so much I wrote it as a jQuery plugin. Benifit here is if at some poitn in the future jQueryUI do a version it will most likely use the same format, so converting will be easy.
(function($)
{
$.fn.input = function ()
{
return this.each(function ()
{
$(this).addClass("ui-widget ui-widget-content ui-corner-all ui-button");
});
}
})(jQuery);
Call it like:
$('input, password').input();
If you wanted to add hover effects etc, just add the logic into
return this.each(function ()
{
// display logic
});
EDIT:
Added in additional class "ui-button" to make them the same height / padding etc as .button()
EDIT 2:
This turned out to be such a good idea I've carried on, adding a version for labels, and allowing custom CSS to be passed in.
// some styling for inputs
(function($)
{
$.fn.input = function (css)
{
if (!css)
css = {};
return this.each(function ()
{
$(this).addClass("ui-widget ui-widget-content ui-corner-all ui-button");
$(this).css(css);
});
}
})(jQuery);
// and labels
(function ($)
{
$.fn.label = function (css)
{
if (!css)
css = {};
return this.each(function ()
{
$(this).addClass("ui-widget ui-button");
$(this).css(css);
});
}
})(jQuery);
Then too style your inputs / labels. The class / styles of these don't actually need to exist anywhere.
$(".client-input").input();
$(".client-label").label({ "min-width": "125px", "text-align": "right" });
Outputs UI like this - with inputs and labels matching the style of the button. (Select's need work)
To have the same corners/font/padding/spacing as button, but without the button interactions (hover, active etc.)
HTML:
input type="text" class="ui-button ui-widget ui-corner-all"
if you want to align text add another custom class
CSS:
.textfield { text-align:left; }
HTML:
input type="text" class="ui-button ui-widget ui-corner-all textfield"
I am trying to change the body background color when the user changes the theme of the page using the jQuery UI Themeselector.
I have tried this
function updateBodyBackground() {
$("body").css('background-color', $('.ui-widget-header:first").css("background-color") + ' !important;');
}
Then I call it on document ready (to set initial theme background) and I set it to the onClose event for the ThemeSelector like this;
$function() {
updateBodyBackground();
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });
}
Doesn't do anything in Firefox, seems to be behind one on change in Chrome and the selector doesn't seem to work at all in IE8.
Any suggestions on how to change the background to better match the selected jQuery UI Theme?
Thanks!
A better way is not to use a timer, just use one of the jQueryUI CSS classes with the background colour your looking for, in my case I like the background colour chosen by: ui-state-hover :
<div id= "main_background" class= "ui-state-hover">
// Your Content
</div>
Since the id over-rides all class settings, use your id to remove or change any undesirable settings that ui-state-hover uses, such as the background-image :
#main_background {
position: relative;
top: 0px;
left: 0px;
width: 800px;
height: 742px;
margin: 0px;
border: 0px;
padding: 5px;
background-image:none; // kills the background url (image) that ui-state-hover sets
}
Buggy fix using timeout...
find function updateCSS() inside themeswitchertool.js
After
$("head").append(cssLink);
Add the below line increase timeout if it still doesn't work...
Insert
setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 2000);
You had an error in your js (used a " instead of ' ):
$('.ui-widget-header:first")
Should be:
$('.ui-widget-header:first')
But I found that this works. No need to put into Themeswitchertool.js, dropped the setTimeout to 500 so it changes more quickly.
function updateBodyBackground() {setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 500);
}
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });