html

Alternate table row color using CSS?

by

$(document).ready(function() { $(“tr:odd”).css({ “background-color”:”#000″, “color”:”#fff”}); }); tbody td{ padding: 30px; } tbody tr:nth-child(odd){ background-color: #4C8BF5; color: #fff; } <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <table border=”1″> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>13</td> </tr> </tbody> </table> There is a CSS selector, really a pseudo-selector, called nth-child. In pure … Read more

Binding select element to object in Angular

by

<h1>My Application</h1> <select [(ngModel)]=”selectedValue”> <option *ngFor=”let c of countries” [ngValue]=”c”>{{c.name}}</option> </select> StackBlitz example NOTE: you can use [ngValue]=”c” instead of [ngValue]=”c.id” where c is the complete country object. [value]=”…” only supports string values [ngValue]=”…” supports any type update If the value is an object, the preselected instance needs to be identical with one of the … Read more

How to set input type date’s default value to today?

by

Like any HTML input field, the browser will leave the date element empty unless a default value is specified within the value attribute. Unfortunately, HTML5 doesn’t provide a way of specifying ‘today’ in the HTMLInputElement.prototype.value. One must instead explicitly provide a RFC3339 formatted date (YYYY-MM-DD). For example: element.value = “2011-09-29”

How do I keep two side-by-side div elements the same height?

by

Flexbox With flexbox it’s a single declaration: .row { display: flex; /* equal height of the children */ } .col { flex: 1; /* additionally, equal width */ padding: 1em; border: solid; } <div class=”row”> <div class=”col”>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> <div class=”col”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis … Read more

AngularJS ngClass conditional

by

Your first attempt was almost right, It should work without the quotes. {test: obj.value1 == ‘someothervalue’} Here is a plnkr. The ngClass directive will work with any expression that evaluates truthy or falsey, a bit similar to Javascript expressions but with some differences, you can read about here. If your conditional is too complex, then … Read more

target=”_blank” vs. target=”_new”

by

Use “_blank” According to the HTML5 Spec: A valid browsing context name is any string with at least one character that does not start with a U+005F LOW LINE character. (Names starting with an underscore are reserved for special keywords.) A valid browsing context name or keyword is any string that is either a valid … Read more

How to use the “required” attribute with a “radio” input field

by

TL;DR: Set the required attribute for at least one input of the radio group. Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons). To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to … Read more