in enyo I can't find any documentation that tells tyou how to chnage the Properties.
For example in the documentation it has disabled as one of the properties. What would the java script code be to set that property, so I could make the button go on and off?
Let's say you have something like:
/* Enyo controls code */
{name: "detailButton", disabled:true, caption: "Details"},
/* More Enyo code */
To change that property, just use Enyo's property system:
myFunction: function() {
this.$.detailButton.setDisabled(false);
}
You can define your own properties using:
published:{
myProperty: ""
}
You will then have a setMyProperty() function and a myPropertyChanged() to observe changes in your property
I take an example of a text area of enyo, whose property u want to set..
consider we declared something like this:
{kind: "enyo.TextArea", name: "keymouse", placeholder: "Mouse events.", style : "width:150px ;height:400px ; position: fixed; top : 30px; left:650px"}
To change the contents of the text area you can do something like this:
this.$.keymouse.setValue("Mousedrag"+ " ");
So, all you need to do is call set*propertyname* for your particular element..
And also incase u also want to change or add some stylings then do something like this:
this.$.<element_name>.applyStyle("background-color", "red");
Related
I'm trying to provide dynamic styling to a MatHeaderCell instance like this:
[ngStyle]="styleHeaderCell(c)"
I've created a demo here.
I can see that:
styleHeaderCell(c)
Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts?
It appears to be a syntax issue in your styles helper function.
Give this a try.
public styles: any = {
ID: {
'min-width': '4rem',
'background-color': 'red'
}
};
STACKBLITZ
https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts
I have this code that changes the styling of the checkbox "tick" mark on selecting the checkbox,
.x-input-checkbox:checked + .x-field-mask:after {
//Your style here
}
P.S. The above code is only for the check mark not the whole field.
but I dont know how to change the background color of the checkbox field on selecting it using purely CSS (the whole field)
You have to manipulate the .x-field-mask class. .x-field-mask:after is only used to draw the tick.
.x-field-mask {
background-color: green;
}
should do the trick.
I'm trying to duplicate an element in a page. I do not exactly how, is it possible with CSS or I need to use a script?
I imagine something like this:
#yan:before {
content: Get The Value Of(AN.element.inPage) !important;
font-size: 200% !important;
}
E.G.:
Let's say I want to get the title of a topic.
#yan:before {
content: Get The Value Of(h1.subject) !important;
font-size: 200% !important;
}
Then the topic title would appear 2 times in the page. Is it possible?
NOW This is my RIGHT code...
// ==UserScript==
// #name DUPLICATING - CLONE elements
// #namespace http://userscripts.org/scripts/show/109262
// #description EXPLAIN ME PLEASE
// #include http*://*answers.yahoo.com*
// #version 1
// ==/UserScript==
var yan = document.getElementById('yan'),
h1s = document.querySelectorAll('h1.subject');
[].forEach.call(h1s, function(node) {
// insert before
yan.parentNode.insertBefore(node.cloneNode(true), yan);
});
►►►► BUT now how do I set a position relative to the "#yan-related" element??
►►►► I want the newly created element to follow the #yan-related.
This is only possible with script, e.g.
var yan = document.getElementById('yan'),
h1s = document.querySelectorAll('h1.subject');
[].forEach.call(h1s, function(node) {
// insert before
yan.parentNode.insertBefore(node.cloneNode(true), yan);
});
Demo
You will have to use jquery. Check clone()
var a = $("#dashnav").clone
$("#dashnav").after(a)
No, CSS is for layout purposes, and cannot clone HTML elements. You will have to use JavaScript/jQuery for this purpose.
See related question on how to use .clone():
Is it possible to clone html element objects in JavaScript / JQuery?
If i I remove say
height:200
from my ExtJs panel and add a css class in its place
cls: "someclass"
My height property in my css class is overided because Extjs still puts in a style on the element for e.g. but with minimal value (2-4 px)
<div class="someclass" stlye="height:2px"></div>
Any idea how to stop that?
Thanks
Solution
using
bodyCls: "someclass"
is stronger than
cls: "someclass"
use bodyCls in your panel and set your css to the following:
.x-panel .someclass {
//css stuff in here
}
In Ext 3 you can use autoHeight: true in your config object to prevent Ext JS controlling it. See http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Panel-cfg-autoHeight for the docs.
For Ext 4 there doesn't seem to be an equivalent property, there is a discussion about this on the Ext forum: http://www.sencha.com/forum/showthread.php?133148-autoHeight-feature.
However in this case if you leave the height parameter out and add bodyCls : "someClass" to the config object, you can set the height using a css rule like: .someClass: { height: 200px; }.
Found it on a the Sencha forum
.someclass .x-panel-body {
height:600px;
}
dont ask me why :)
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
};