Change background color of every other row - javascript

I'm trying to replicate the default settings of ag-grid which paints every other rows background in a slightly different color. But when I try to reorder columns clicking on headerColumn the background colors doesn't reorder.
This is my current approach that isn´t working
cellStyle(params) {
let backgroundColor = #FFFFFF;
if (params.node.rowIndex % 2 === 1) backgroundColor = #E04F00;
}
https://plnkr.co/edit/bHLEmECLNby3obIT, this example shows the desired behavior.
Is there a way to acces and change those default colors?

I found out that the default themes of ag-grid already did what I wanted, the thing is that the theme I'm using has two colors that are very similar, what I really needed was to change that default color.
I was able to achieve that by overriding theme's variable
.ag-theme-balham {
--ag-odd-row-background-color: #E04F00;
}
.ag-theme-balham .ag-row-odd {
background-color: var(--ag-odd-row-background-color);
}
I followed their documentation, first here https://www.ag-grid.com/javascript-grid-styling/, that took me to https://github.com/ag-grid/ag-grid-customise-theme, where I discovered which variable I should edit.

Checking the working example you are showing here, each .ag-row div has an additional class .ag-row-odd or .ag-row-even. So basically those classes mimic the behavior you could achieve by using .ag-row:nth-child(odd) and .ag-row:nth-child(even).
What might be happening in this case is that when you reorder the .ag-row elements the classes are not being updated, instead just moved around. What that would represent is something like this:
<!-- Default //-->
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<!-- Sorted //-->
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
So in this case what I would recommend is either to change the styles to:
.ag-row:nth-child(odd) {
background-color: #fcfcfc;
}
.ag-row:nth-child(even) {
background-color: #ffffff;
}
If that's not an option than you should review the script that reorders the .ag-row elements as it's probably not changing the classes accordingly.
UPDATE
I think I found your issue. I checked this example
And while inspecting elements I saw that when you reorder, each row has these two attributes.
<div row-index="3" aria-rowindex="7"></div>
From what I was able to determine even if you change your sort parameters, those two attributes don't actually change. So if you base your row styles on them, like you do with the row-index parameter, you'll never get a correct order, because sometimes you get:
<div row-index="3" aria-rowindex="7"></div>
<div row-index="5" aria-rowindex="9"></div>
<div row-index="7" aria-rowindex="11"></div>
As this is not incorrect, the styles are applied, but not in the order you would prefer. The script is doing its job as intended, it's just that your condition for the colors is not working.
The solution to this I think would be 100% css and for you to remove the cellStyle definition, because I think the problem lies there.

CSS is going to be the easiest solution to this. I don't see your html, but essentially you will want to reference the html table's rows, and then add a css nth-child(even) and nth-child(odd) to them. Here is an example:
p:nth-child(odd)
{
background: #ccc;
}
p:nth-child(even)
{
background: #fff;
}
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
And here are some more examples from w3:
Depending on what your specific code looks like, there may be different ways of doing this. I noticed you have js in your question, but since there was the css tag, I gave a css answer.

Related

Locate duplicate div ID names on page and append a number using Javascript orr jQuery

I am required to use a specific plugin in Wordpress for a project. It outputs several DIVs, each with identical IDs.
However, I need to isolate them individually, so that I style them in CSS separately.
Normally I would either alter the PHP or use nth-child...but this plugin basically makes both of these options impossible...long (and frustrating) story.
So I am looking for a Javascript/jQuery solution that I can plug into a global .js file and execute using a $(document).ready statement after page load instead.
I just can't seem to figure it out. The js/jquery code would need to alter the html output by this plugin after it's finished loading. It would scan the page, locate each instance of #commonName, and append a number onto it OR add a class name to it. Doesn't matter how it's done, as long as each DIV becomes unique in name.
The plugin outputs something like this on the page (simplified):
<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>
I would like my Javascript or jQuery code to locate and change every instance of this ID, and turn it into this:
<div id="commonName" class="copy-1"></div>
<div id="commonName" class="copy-2"></div>
<div id="commonName" class="copy-3"></div>
Or this would be fine too:
<div id="commonName-1"></div>
<div id="commonName-2"></div>
<div id="commonName-3"></div>
Thanks for your help everyone!
This will take all of the ids that have the id value of commonName
The using an each loop, we can change the id value using the attr function.
Hope this helps :>
$("[id='commonName']").each((i,el)=>$(el).attr('id','commonName-'+i))
console.log($("body").children())
body div {
width: 50px;
height: 50px;
display: inline-block;
}
#commonName-0{
background: red;
}
#commonName-1{
background: green;
}
#commonName-2{
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>

Problems with the last chrome update - CSS

so, i'm an intern on my company, and need to deal with some stuff that i'm not 100%.
The thing is, the last google chrome update crashed some css in my java web app. We do work with a table, based on scrum. Basicly a taskboard, where you can set a task, remove it, set is as "to do, doing and done". But, since 12/12 +/- your task was missing from the taskboard. We didn't knew what was going on at the begining, but after a little research we found out that the style of the 'height:100%' of tr td was crashing, and making everything desapear. It works fine in firefox and also in IE. when we did remove the height, the tasks appeared. But the thing is, without the height:100% the jquery droppable ui, that we use to move the tasks inside the table was set to the height automatically, even when it is with height 100%.
We don't want to set a minimal height, because it was supposed to work pretty fine.
Here is the code, it's a little big to text in here, so i typed it on jsfiddle.
https://jsfiddle.net/rychardgoltara/bvw1hkxg/
<tr data-bind="attr:{id: sequencial}" id="2093" class ="selectable">
<td class ="historia" style="height:1px">
<div class="colapsada" style="display:none;">
</div>
<div class="expandida">
<div class="historiaLayout">
<span id=""></span>
</div>
</div>
</td>
<!-- ko foreach: {data: $root.fases, as : 'fase'} -->
<td data-bind="css : 'fase-' + id" class="fase-7">
<div class="colapsada"></div>
<div class="expandida tarefaExpandida">
<div class="nomeFase fase">
<span class="tamanhoVariavel sh-tooltip" data-bind="text: titulo, attr: {'aria-label': titulo}" aria-label="A Fazer">A Fazer</span>
}
.tabelaQT tbody tr td {
border-right: 1px #ccc solid;
height: 100%;
}
.tarefaExpandida {
margin: 5px;
overflow: auto;
height: 100%;
One of our solutions was setting the height:100% on tr td and also setting it to height:-webkit-calc(0px). So it can work fine on chrome without affecting other browsers. But the thing is, this solution is the real solution? Am i missing something? And if this is the solution, why is it? I don't know how to explain the solution to my boss. Here is a pic of what is looks like, and what should looks like.
https://imgur.com/a/DXthL

How to select or identify an element that has a class that begins with a specific pattern in the midst of other irrelevant classes?

$('[class*=" col-"], [class^="col-"]').css('text-decoration','underline');
[class*=" col-"], [class^="col-"]
{
background: #39F;
color: #FFF;
border: 10px solid #16A;
height: 50px;
text-align: center;
line-height: 28px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="first-class col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="start-with-something-else col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="so many classes
col-xs-6">.col-xs-6</div>
<div class="bootstrap spam helper classes
col-xs-6">.col-xs-6</div>
</div>
</div>
So a very similar question has been asked in the past, but I guess my question involves a little more, namely I'm wondering if this is yet another example that using bootstrap on a production site is a bad idea.
In jQuery( or CSS) you can use the [class^="foo-"] to select elements via the beginning of their selector. But sometimes the target class I'm looking for isn't the first class in the array of classes.
For instance in bootstrap you use a number of helper classes to build up your site. And I'd like to test if an element has any one of the numerous col-* classes that bootstrap uses. But the same elements could have any number of other classes applied. So using mySelectedJqueryElement.is('[class^="col-"]') almost always returns false even when the item has a class that starts with col-.
In this answer to this very similar question they first suggest making a class for just that prefix, however for the same reason you select a framework like bootstrap, I'd rather not edit the core bootstrap code. It that answer they then go on to suggest using a starts with and a contains selector... While that might work, I was wondering if there is any way to explicitly look through the array of classes for any class that starts with col- or foo-, if you will. I do realize that I could write a function that extracts the array of classes and runs a regex function to manually check the beginning of each of the classes in the array to see if any of them start with a predetermined pattern. This just seems like something that should exist in javascript or jQuery.
There are a few other questions and answers that are similar, but none of them solve this problem entirely and accurately.
Marked as a duplicate of an included question... And I know it is similar, but I guess I'm asking two questions here which is bad practice. One, I was wondering if there was any better answer to the problem of selecting the elements by checking the prefix of all classes. The current answer is using two selectors to accomplish a single task if this is really the only way then I guess I can live with it however it seems inefficient and non-specific. In theory the wildcard selector with whitespace should never find anything that you don't want it to, but it seems heavy handed. Secondly I assumed that the virtual DOM stored classes in an array, but apparently I was mistaken. I definitely feel that this is a bad practice to store a series of variables as a single string.
My second question is if there is any quick fix to bootstrap that could solve this problem more like what was suggested in the "duplicate" question where they suggest to make "apple-" a new class. Would there be a quick regex replace I could run that would make "col" a class on its own? That sounds like a better solution to this problem, but that would make Bootstrap classes even less "object-oriented" which is why I think I'll be dumping them all together.
Atribute contains string selector:
http://api.jquery.com/attribute-contains-selector/
from the jQuery api:
This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~="word"]), which is more appropriate in many cases.
The contains word selector (for comparison):
http://api.jquery.com/attribute-contains-word-selector/
From the research I've done and the responses to this question, I've determined that at this point in time there is no clean way to perform this action. So I have resigned to using a hack job that breaks the classes down into an array and performs a check on the start of each class for the string.
$.fn.hasClassStartingWith = function(needle){
var found_match = false;
$(this).each(
function(i){
var classlist = this.className.split(/\s+/);
$.each(classlist,function(){
if(this.startsWith(needle))
{
found_match = true;
}
});
}
);
return found_match;
}
$("*").each(function(){
if($(this).hasClassStartingWith('col-'))
{
$(this).css('background','#39F');
}
});
[class*=" col-"], [class^="col-"]
{
background: red;
color: #FFF;
border: 10px solid #16A;
height: 50px;
text-align: center;
line-height: 28px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="first-class col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="start-with-something-else col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="so many classes
col-xs-6">.col-xs-6</div>
<div class="bootstrap spam helper classes
col-xs-6">.col-xs-6</div>
</div>
</div>
<p>If the javascript worked then the above column elements have a background of blue instead of red.</p>

load some content from txt and add to html markup

Have some markup
<div class="container">
<aside class="left">
<div class="item"><p>lorem ipsum</p></div>
</aside>
<aside class="right">
<div class="item"></div>
</aside>
</div>
<button>load more</button>
css
aside {
display: inline-block;
width: 40%;
border: 1px solid red;
margin: 2%;
vertical-align: top;
}
.item {
border-bottom: 1px solid black;
}
I need to load some html content from .txt file when clicking button and add that markup inside both aside. In .txt file markup like this
<div class="item"><p>lorem ipsum1</p></div>
<div class="item"><p>lorem ipsum2</p></div>
<div class="item"><p>lorem ipsum3</p></div>
<div class="item"><p>lorem ipsum4</p></div>
I want "drag" and paste first div with class .item to aside.left, second div with class .item in aside.right, third div with class .item in aside.left and so on...
Is there any solution? I don't know how paste .item divs in both columns..
Thanks for any help
Here is JsFiddle DEMO
upd: I'm only use css+html+some jquery, I dont know any things on php or server technology.. but programmer who work with my markup says that I need to demonstrate how content will be added on click.. So I dont know is this my work, or this is programmer need to do.. I need your answer about this..
If that helps, here is LINK you can see site. In bottom you can see arrow, onclick on that there need add content in columns..
P.S. Programmer works with Yii framework.
Since you already seem to know about AJAX (you added the tag), I think you have your answer there.
You can just use AJAX to get any chunk of data from the server and add it to the page.
Since you are working together with a server-side programmer, I think each of you could build their own part independantly.
All you need is an API that you can use, to which you can specify the offset of items to load, so you could call /getitems?offset=12&count=4 to get the next 4 items from item 12.
You can then just make a simple page that returns dummy data. getitems.php can just return the same constant items every time, and all you need to do is add those items at the bottom of your list.
At the same time, the PHP programmer can actually implement that page so it returns the same data. He can make it in such a way that it also works for non-AJAX request, so he can easily test it without needing your front-end code.

mootools: How can i put 10,000 < div > tags in a single page

I have developed an application in mootools. But its going little slow coz of number of tags it contains are almost 10,000. and every tag's structure is like:
<div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
<img src=""> <p>name</p> <p>Gender</p> <p>Mood</p>
</div>
in following container
<div id="tags_container" style="overflow: scroll;height: 700px;">
<div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
<img src=""> <p>name</p> <p>Gender</p> <p>Mood</p>
</div>
<!-- tag-2 -->
.
.
.
<!-- all tags one after another -->
</div>
i m showing these tags in rows and columns format ( 5 columns and 2000 rows).
The id="tags_container" < div > has vertical scrollbar. but when i try to scroll down in that division to see further tags it scrolls little slow.
what should i do about it?
should i change the implementation method from < div > tags to < table > tag?
what are the options to make it any faster?
In few previous questions, i was advised not to use those many tags in one single document but there is gonna be those many tags so what should i do about it.?
I've done something like this before. Use more CSS classes and fewer elements, and remove everything unnecessary (like comments). Though the data was tabular in nature, I found it much easier to create a pixel-perfect layout using <div>s.
Markup
<div class="cell">
<img src=""> <p>name</p> <p>Gender</p> <p>Mood</p>
</div>
CSS
div.cell {
float: left;
padding: 5px;
margin: 6px;
}
If possible, it may also be quicker to use CSS spriting for the images, rather than 10k more elements for the images. Something like:
Markup
<div class="cell" style="background-position: 0px 0px;">
<p>name</p> <p>Gender</p> <p>Mood</p>
</div>
CSS
div.cell {
float: left;
padding: 5px;
margin: 6px;
background-image: url(path/to/sprite);
background-repeat: no-repeat;
}
Edit If you need to do any sort of DOM manipulation of these elements, I recommend loading all of them up into a JS array — once — and then accessing them by index from the array. Repeatedly querying the DOM for the same elements will wreck performance.
If possible, also remove the <p> elements within each <div>. If you've got 10k <div> elements, each containing 3 <p>s, then you're really working with a minimum of 40k elements.
That's a lot of DOM, baby.
If you can figure out how to get the same layout removing even just 1 or 2 <p>s from each <div>, you're instantly down to 20k or 30k elements.
Why not use a table? It looks like you're trying to build a table with divs.
Sounds like a tabular document to me. Why not use a table?
Note that even with a table you may have some trouble, but I suspect it will be faster.
You should also consider using a class for your styling, rather than doing it manually for each row.
That seems to be the exact reason tables were created in the first place - tabular style data. Any reason you aren't using tables already?
A large amount of tabular data renders fastest if you break it up into separate tbodies, and set table-layout to fixed. Keep all the style info out of the html and in a style element or linked stylesheet.
Is it necessary to show all 10,000 rows on the page at once? Perhaps you could look at implementing the ScrollSpy plugin developed by David Walsh. This will allow you to load a smaller initial record set then access more records when required.

Categories

Resources