A very stripped down example here.
Code:
function changeBackground() {
var testDiv = Ext.get("test");
var allStyleDivs = testDiv.select("*[style*='background-color'], *[style*='BACKGROUND-COLOR']");
allStyleDivs.each(replaceBackground);
}
function replaceBackground(element) {
element.setStyle('background-color','blue');
}
In FF, IE8, Chrome this page works fine. IE7 says Object doesn't support this property or method. What's the dealy yo?
See this post on the ExtJs Forum
Related
I have a react webapp that renders 2 text areas which are resize-vertical (using CSS). My requirement is that when one text area is resized by the user, the code captures it and apply the height to the other text area.
Based on my research, currently, there isn't a convenient method like textarea.onResize(). So, I am using MutationObserver. The API is very elegant and exactly what I need. I was able to configure it properly, capture the change in style attribute and apply it to other text area. This works fine in Google Chrome (Version 76.0.3809.132 (Official Build) (64-bit)) and Mozilla FireFox (Version 68.0.1esr (64-bit)). All this testing was done on Mac OS High Sierra (Version 10.13.6).
The problem
Although, when it comes to Safari browser (Version 12.1.2 (13607.3.10)), it doesn't seem to work as expected.
Upon debugging, I found out that when user resize a given text area, style attribute gets appended to it, with some assigned height and for each change, MutationObserver observes the change produces a MutationRecord, which I capture in my callback to take appropriate actions (in this case, apply height to other text area). Although, Safari browser does not produce MutationRecord for change in style attribute when text area is resized by the user.
Two things:
If I inspect the text area in developer mode of the browser and make a change to the style attribute of the element, MutationRecord is produced correctly and my callback does indeed execute, which is very weird.
I created an example in JS Fiddle, where, in Safari if you resize the text area, no MutationRecord is produced and you won't see any alerts but if you inspect and make a change manually, you will see the alert (appropriate MutationRecords are produced). In Chrome or Firefox, resizing the text area will produce the window alert without needing to make changes by inspecting the element.
Code
CSS
.textField textarea {
resize: vertical;
}
componentDidMount()
componentDidMount() {
if ('MutationObserver' in window) {
const config = {
attributes: true,
subtree: true,
attributeFilter: ['style'],
attributeOldValue: true
};
const sourceTextArea = window.getElementById('sourceTextArea');
this.sourceObserver = new MutationObserver(this.handleManualSourceTextAreaResize);
this.sourceObserver.observe(sourceTextArea, config);
const targetTextArea = window.getElementById('targetTextArea');
this.targetObserver = new MutationObserver(this.handleManualTargetTextAreaResize);
this.targetObserver.observe(targetTextArea, config);
}
}
Callback for source text area
handleManualSourceTextAreaResize = (mutationsList, observer) => {
const sourceTextArea = getElement('sourceTextArea');
const targetTextArea = getElement('targetTextArea').children[0];
if (!this.isStopPropagation) {
targetTextArea.setAttribute('style', 'height: ' + sourceTextArea.offsetHeight + 'px');
this.isStopPropagation = true;
} else {
this.isStopPropagation = false;
}
}
Callback for target text area
handleManualTargetTextAreaResize = (mutationsList, observer) => {
const sourceTextArea = getElement('sourceTextArea').children[0];
const targetTextArea = getElement('targetTextArea');
if (!this.isStopPropagation) {
sourceTextArea.setAttribute('style', 'height: ' + targetTextArea.offsetHeight + 'px'');
this.isStopPropagation = true;
} else {
this.isStopPropagation = false;
}
}
I have this code
var input = element.find('input').eq(0);
scope.focus = function() {
if (!input.length) return;
input[0].focus();
input[0].select();
var divWrapper = input.parent('.tags')[0];
divWrapper.scrollLeft = divWrapper.scrollWidth;
console.log(divWrapper.scrollWidth);
console.log(divWrapper.scrollLeft);
};
This is inside a directive fnLink and focus is called when ui is changed this because use overflow: hidden and input disapear when many items on left... so I need to scroll to far right and keep input visible.
The
divWrapper.scrollLeft = divWrapper.scrollWidth;
works fine on chrome dev tools but when focus is called don't update the scrollLeft attribute.
We are working on an application in which we are using Angularjs + webapi and making a Single Page App.
We have quite few Modal Pop-ups from Bootstrap used in the app, but we are facing an issue
-> on click of the modal button, the backdrop initializes and then is stuck with no modal. and we have to force refresh the browser. We are pulling the templates from other files into the modals.
initially for closing the modal, I've used $(".modal.in").hide(); and the close is fine with out the "Stuck" on grey screen.
then later for init the modal itself it started to appear then I removed the fade class and removed the animations from the css but didn't help much.
Really need a promising fix.
$.support.transition = (function () {
var thisBody = document.body || document.documentElement
, thisStyle = thisBody.style
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined
return support
})()
// set CSS transition event type
if ( $.support.transition ) {
transitionEnd = "TransitionEnd"
if ( $.browser.webkit ) {
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla || $.browser.msie ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
}
The above code snippet was advised in some forums.
But in the Bootstrap.js Bootstrap v3.2.0 (http://getbootstrap.com)
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
You can create a directive that includes the templates you want and launch and then control the boostrap modals from with in that directive. the external communication can be achieved in many ways my favorite using custom events watched by the directive to know when to hide or show the modals that way you can use all the bootstrap code you already have from INSIDE your directive. this can also be done through a service, not my favorite solution, but is also accepted. for more ideas look at the angular-ui project and the modal service
http://angular-ui.github.io/bootstrap/
I m trying to set value to combobox in extjs, this is working in chrome but not in firefox. I used the following code:
function callFromController(comboitemid,itemvalue) {
Ext.ComponentQuery.query(comboitemid)[0].setValue(itemvalue);
};
AS a general guidence I would use:
function callFromController(comboitemid,itemvalue) {
// make sure you add a # to your Id string or use Ext.getCmp insted.
var foundComponents = comboitemid && Ext.ComponentQuery.query(comboitemid);
if (foundComponents.length) {
// I would add to see in your console.log('foundComponents[0]=%o',foundComponents[0])
// to check the value of the found component
foundComponents[0].setValue(itemvalue);
}
};
scope.resetall = function () {
$scope.website.forEach(function (web) {
web.CouponID = false;
});
};
i try to reset radio button using forEach.Its working fine in all browser except IE8.
I am using angular js 1.2.17
After a quick research, I found out that forEach doesn't work well on IE8, try using a good old for loop:
for(var i=0; i < $scope.website.length; i++){
$scope.website[i].CouponID = false;
}