tl/dr:
There is not any setter for labelStyle. So how can I change it's value on a function?
I've a afterrender listener and aim to set color of fieldLabel as white and set a emptyText instead of fieldLabel and meanwhile I need to change fieldLabel color to be white! So I need to access current component's lableStyle property. I've try to go within config but couldn't find it. As well tried to use Ext.apply() to set a property for related combo but this is not work either.
How can I achieve my aim over here?
//Related component `listeners`;
listeners : {
afterrender: 'removeLabel',
focusenter: 'createLabel'
},
//Related function;
removeLabel: function () {
let formComponent = ['foocombobox', 'bartextfield', 'zetdatefield'];
Ext.each(formComponent, function (eachComp) {
let currentComp = Ext.ComponentQuery.query(eachComp)[0];
if (currentComp.value === '')) {
let currentLabel = currentComp.fieldLabel;
currentComp.setEmptyText(currentLabel);
//This can not work because of I've reach constructor config. So how can I reach?
//currentComp.labelStyle = "color:red;";
//I tried to manipulate through Ext.apply but did not effect;
//Ext.apply(currentComp, {labelStyle: "color:red;"});
}
});
},
I get dom node by currentComp.labelTextEl.dom and then run setAttribute function:
FIDDLE
if (!currentComp.value) {
urrentComp.setEmptyText(currentComp.fieldLabel);
currentComp.labelTextEl.dom.setAttribute('style', 'color:white;');
}
Related
I have a table which has the column name "12" Instead of that value I want to pass it dynamically and for that I have a created item "P_Itm_val" see attached image for reference.
$('td[headers = "12"]').each(function() {
$(this).css({"background-color":"whitesmoke"});
$(this).css({"color":"green"});
$(this).css({"font-weight":"bold"});
});
image
Just put the value there instead of "10"
$('td[headers = P_Itm_val]').each(function() {
$(this).css({"background-color":"whitesmoke"});
$(this).css({"color":"green"});
$(this).css({"font-weight":"bold"});
});
If that doesn't work, try appending the value into the call
$('td[headers = "'+P_Itm_val+'"]').each(function() {
$(this).css({"background-color":"whitesmoke"});
$(this).css({"color":"green"});
$(this).css({"font-weight":"bold"});
});
I'm not quite sure what I did for this however, I've done something similar to this.
I want to toggle the width of an element on click of another.
I've used the script someone has made here: http://jsbin.com/ohOZEYI/1/edit?html,css,js,output
and just replaced it with my own elements:
function a(el){
$(el).animate({width: "10%"}, 1500);
}
function b(el){
$(el).animate({width: "100%"}, 1500);
}
$("#mybtn").click(function() {
var el = $('#container');
return (el.t = !el.t) ? a(el) : b(el);
});
The first function (a) works fine and shrinks the element to 10% width. But the 2nd function doesnt work.
Would anyone know why?
The jQuery function doesn't return DOM nodes. It returns an object that contains a collection of DOM nodes.
var el = $('#container');
creates a new instance of an object which happens to contain a reference to the DOM node with an ID of container. Every time the function gets called, you get a brand new instance of el, which means your toggle can never toggle.
To fix this, you're going to want to store the toggle data on the DOM node.
Use the .data() method:
var t = el.data('toggle');
if (t) {
a(el);
} else {
b(el);
}
el.data('toggle', !t);
I've a component (parms-bar.component.js) which is supposed to update when I click on the button (box.component.js), but it's not happening. I'm trying to let them communicate using the "selected" variable in the service (main.service.js).
When you launch the app "test node" is displayed by my "parms-bar" component. On the button click it should change to "Box", but it's not.
Here you can see a live example
I've also read the answer to this question which says that I'm probably replacing the memory location that my selected is associated to every time I assign it a new value while the scope is stuck pointing to the old location.
But even trying to modify only its name property, rather than assign a new object, I got no joy.
You're having object reference issues. The easiest way to fix this is to change your service to return a setter and getter.
main.service.js
angular.module('app').service('mainService', function(){
var selected = {name: "test node"};
var service = {
get selected(){
return selected;
},
set selected(value){
selected = value;
}
}
return service;
});
Now you can change your other modules to get and set this object directly.
box.component.js
angular.module('box').component('box', {
templateUrl: 'box.template.html',
controller: function boxController(mainService){
this.addBox = function () {
var box = mainService.selected;
//Set custom properties
box.name = "Box";
//Set as selected
//mainService.selected = box; <-- This is not needed
}
}
});
parms-bar.component.js
angular.module('parms-bar').component('parmsbar', {
templateUrl: 'parms-bar.template.html',
controller: function parmsController(mainService){
this.selected = mainService.selected;
}
});
And then use the object in your parms-bar.template.html
<div id="parms-bar">
<a>
{{$ctrl.selected.name}}
</a>
</div>
Code snippet from my angular directive class:
if (currentIndex < newMessages.length) {
scope.message = newMessages[currentIndex];
} else {
scope.message = newMessages[0];
}
$timeout(function () {
var msgText = $('#msg-text');
console.log("xx:" + msgText.attr('class'));
// has-image no-desc no-desc-remove
});
When I change the scope.message, angular refreshes the template, and $timeout ensures that its containing function is called after the template is updated with new elements, etc. Right?
It seems it's working, but the problem is, I got classes like "has-image no-desc no-desc-remove". Later it's changed to "has-image".
How can I catch and event, where the classes are fully updated? Because This is no good for my code logic.
How can I catch and event, where the classes are fully updated? Because This is no good for my code logic.
By you code and requirement, you need to know the moment when your $scope.message.imageURL and $scope.message.Description updated. For the most basic way you can go with $scope.$watchGroup()
Example of $watchGroup. (Here I put the condition for both has some value you can adjust the condition in the way you wanted)
$scope.$watchGroup(['message.imageURL', 'message.Description'], function (newValues, oldValues){
// newValues[0] => is => $scope.message.imageURL
// newValues[1] => is => $scope.message.Description
// case of both having some value
if(newValues[0] && newValues[1]){
console.log('things has been changed');
}
});
Turns out I had angular-animate.js included in my html, and it automatically does "Class and ngClass animation hooks". More here https://docs.angularjs.org/guide/animations. Disabled it where needed with $animate.enabled(false, myElement);
I have a HTML element to which I have attached a webkitTransitionEnd event.
function transEnd(event) {
alert( "Finished transition!" );
}
var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );
Then I proceed to change its CSS left and top properties like:
node.style.left = '400px';
node.style.top = '400px';
This causes the DIV to move smoothly to the new position. But, when it finishes, 2 alert boxes show up, while I was expecting just one at the end of the animation. When I changed just the CSS left property, I get one alert box - so this means that the two changes to the style are being registered as two separate events. I want to specify them as one event, how do I do that?
I can't use a CSS class to apply both the styles at the same time because the left and top CSS properties are variables which I will only know at run time.
Check the propertyName event:
function transEnd(event) {
if (event.propertyName === "left") {
alert( "Finished transition!" );
}
}
var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );
That way, it will only fire when the "left" property is finished. This would probably work best if both properties are set to the same duration and delay. Also, this will work if you change only "left", or both, but not if you change only "top".
Alternatively, you could use some timer trickery:
var transEnd = function anon(event) {
if (!anon.delay) {
anon.delay = true;
clearTimeout(anon.timer);
anon.timer = setTimeout(function () {
anon.delay = false;
}, 100);
alert( "Finished transition!" );
}
};
var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );
This should ensure that your code will run at most 1 time every 100ms. You can change the setTimeout delay to suit your needs.
just remove the event:
var transEnd = function(event) {
event.target.removeEventListener("webkitTransitionEnd",transEnd);
};
it will fire for the first property and not for the others.
If you prefer it in JQuery, try this out.
Note there is an event param to store the event object and use within the corresponding function.
$("#divId").bind('oTransitionEnd transitionEnd webkitTransitionEnd', event, function() {
alert(event.propertyName)
});
from my point of view the expected behaviour of the code would be to
trigger an alert only when the last transition has completed
support transitions on any property
support 1, 2, many transitions seamlessly
Lately I've been working on something similar for a page transition manager driven by CSS timings.
This is the idea
// Returs the computed value of a CSS property on a DOM element
// el: DOM element
// styleName: CSS property name
function getStyleValue(el, styleName) {
// Not cross browser!
return window.getComputedStyle(el, null).getPropertyValue(styleName);
}
// The DOM element
var el = document.getElementById('el');
// Applies the transition
el.className = 'transition';
// Retrieves the number of transitions applied to the element
var transitionProperties = getStyleValue(el, '-webkit-transition-property');
var transitionCount = transitionProperties.split(',').length;
// Listener for the transitionEnd event
function eventListener(e) {
if (--transitionCount === 0) {
alert('Transition ended!');
el.removeEventListener('webkitTransitionEnd', eventListener);
}
}
el.addEventListener('webkitTransitionEnd', eventListener, false);
You can test here this implementation or the (easier) jQuery version, both working on Webkit only
If you are using webkit I assume you are mobilizing a web-application for cross platform access.
If so have you considered abstracting the cross platform access at the web-app presentation layer ?
Webkit does not provide native look-and-feel on mobile devices but this is where a new technology can help.