We Keep Coding

How to achieve alternative row color in grid

How to achieve alternative row color in extjs 5 grid. As i know we have to apply x-grid-row-alt class in css to achieve this. Its working in extjs 4 but not in Extjs 5. Any Ideas on this?

You can use stripeRows (set it on the viewConfig of the grid):
True to stripe the rows.
This causes the CSS class x-grid-row-alt to be added to alternate rows
of the grid. A default CSS rule is provided which sets a background
color, but you can override this with a rule which either overrides
the background-color style using the !important modifier, or which
uses a CSS selector of higher specificity.
If you want to customize it try using x-grid-item-alt instead (it's the default of altRowCls).
You can also change the scss background color variable $grid-row-cell-alt-background-color.

Use getRowClass method in viewConfig of your grid.
viewConfig: {
getRowClass: function(record, index, rowParams)
{
return (index % 2 == 0) ? 'grid-row1' : 'grid-row2';
}
},
CSS
tr.grid-row1 td{
background-color: #d6f0f9;
}
tr.grid-row2 td{
background-color: #F2F2F2;
}
Working JSFiddle

Angular an Independent Block of CSS

I have a factory I call that returns some HTML. I would like to display this HTML in a section of my app, but I don't want its CSS to affect the site's, nor do I want the site's to affect it. It needs to be an iframe more or less but I feel like there's a better way to do it in Angular.
I essentially have something like this (Angular 1.2)
var promise = myFactory.getHtml();
getTemplate.then(function(data) {
$scope.mine.html = $sce.trustAsHtml(data.data);
});
I can display this HTML no problem, but it looks terrible inside of my app. How can I make it independent?

Select your element (say using an id selector) and use the following rule to reset all its properites
all: initial;
see https://developer.mozilla.org/en/docs/Web/CSS/all
and then apply the specific properties for your div. For example
CSS
div {
color: red;
background-color: blue;
}
#a {
all: initial;
color: blue;
}
HTML
<div id="a">asdf</div>
The fact that it is an angular template need not come into the picture.

Drawing links among words in a web page

I would like to know if something like this (see the picture above) is possible in HTML/CSS/Javascript and if so, what are the frameworks/technology that I should look at.
I have a text in a HTML page and I would like to highlight some words in it using different colours according to different meanings (let's say 3 types, 'name of software': blue, 'numbers': grey, 'name of people: 'red'). Then, an this is the tricky part for me, I would like to draw directed arrows among these highlighted words in a way that resizing the window will automatically keep anchored the arrows regardless to the changed position of the words.
Right now I am solving the highlighting part using a particular tag for the words to be highlighted and an ad-hoc CSS decorator with the property background colour accordingly set. The linking part is literally a mystery for me.
I thank you all for your help,
michele.
PS. I would prefer doing that on the client side.

You need to do loads of JavaScript code for this but I will simply tell you the steps. To achive your goal you need to:
parse every word in your paragraph by using split() method.
var words = yourparagraph.split(" ");
create an array that contains called name_of_software and push the software names in this array.
do the very above thing for people names and call the array people_names.
var name_of_software = ["html", "css", "javascript"];
var people_names = ["michele", "george", "john"];
create corresponding css for the highlightings.
span.red { background: red; overflow: hidden; display: block; }
span.grey { background: grey; overflow: hidden; display: block; }
span.blue { background: blue; overflow: hidden; display: block; }
Do a loop like this:
.
for(var i = 0; i < words.length; i++)
{
if($.inArray(words[i].toLowerCase(), name_of_software)) {
// The word is a name of a software. Give blue class.
} else if($.inArray(words[i].toLowerCase(), people_names)) {
// The word is a name of a person. Give red class.
} else if(isNaN(words[i])) {
// The word is a number. Give grey class.
}
}
I didn't test it or create a working version of it. Hope this steps will guide you to achive your goal.

Faking a css property with LESS (and replacing it with a real property on parse)

Let's say I want to create a "fake" (not browser-supported, such as { dimensions: 3; } ) css property with some arbitrary values and upon parsing it through LESS, want this fake css property to be replaced with any real css property (such as { background: red; }) -- does anyone know how something like this would be done?

Not entirly sure what you are trying to achieve here... My suggestion though would be to do something like this:
.dimension {
background: red;
}
.realClassOne {
font-size: 14px; /* some normal css */
...
.dimension; /* will apply all styles in dimension to this class */
}
I guess this is what you are looking for. Should work just fine.
You might also want to have a look at parametric mixins for more complex and powerful behavior (this is where less really comes to live!) http://lesscss.org/#-parametric-mixins

Update CSS rule property value

I have a html element which is styled (using jquery) with a background image targeted thru its class name.
When I remove the class the background image stays - which is not what I expected or want.
test.html
<div id='log' class='tile'>HELLOWORLD</div>
test.css
.tile{
background: none;
}
test.js
$('.tile').css("background-image", "url(tile.jpg)"); // We see image
$('#log').toggleClass('tile'); // We still see image
After banging my head I think I know whats happening. The css is being applied to the element - NOT to the 'class'.
How can I target a specific css rule so that its key values can be updated?
If that makes sense.

If you wan to change the css rules of the ".tile" class, then you can do it.
There is a post that explains it very well :
function changeBackgroundImage(className, value){
var ss = document.styleSheets;
for (var i=0; i<ss.length; i++) {
var ss = document.styleSheets;
var rules = ss[i].cssRules || ss[i].rules;
for (var j=0; j<rules.length; j++) {
if (rules[j].selectorText === className) {
rules[j].style.backgroundImage = value;
}
}
}
}
You can call it like this :
changeBackgroundImage(".tile","url(tile.jpg)");

The problem is that you´re setting the background-image as an inline stlye that overrides any stylesheet rules. Toggling the class won´t have any affect.
You can either have set the background through a styleheet rule and then add a class that removes it;
#log {
background-image: url(tile.jpg);
}
#log.tile {
background: none;
}
or you could just use !important as;
.tile {
background: none !important;
}
...it might be the other way around but you get the point? :)

try removing class tile and applying new class with bg: none
in effect - when needed apply class with bg, when not needed - without

No need for jQuery in this case. You can use plain old JavaScript. Check out this tutorial:
javascriptkit.com - Changing external style sheets using the DOM

You can't change the class itself without re-writing that declaration in the stylesheet, you ARE working only with the element in the selector.
Try:
$('.tile').css("background-image","none")

$('#log').toggleClass('tile',true);

I would make the background image part of the class as a css style:
.tile {background-image: url('tile.jpg')};
and then remove the class when necessary with jquery
$('#log').removeClass('tile');

you could have two classes in your css...
.tile{
background: none;
}
.tile-w-image
{
background-image: url(tile.jpg);
}
and then with jquery just toggle the classes...
$("#log").toggleClass('tile').toggleClass('tile-w-image');
I'm sure this is just one of many ways of doing this. I hope it helps.

You are very close.
It seems like you are adding inline CSS to your element and then trying to toggle the class. You should keep CSS styling separate in most cases:
HTML:
<div id='log' class='tile'>HELLOWORLD</div>
jQuery (I imagine this should be done on click or another event):
$('#log').toggleClass('tile'); // We still see image
If the "tile" class is already written to the HTML, then toggle-ing it will remove it.
CSS:
.tile{
background-image: url(tile.jpg);
}