Call a data attribute in the front end

The best exemple is still the thead to hide in the mobil version.

In the markup we create a data like:

<td data-th=“Pasajeros”>

We call it data-th in this case because it seams the most understandable. We could call it data-fulanito, data-jane-doe,…

We call it with the css to display the word Pasajero it in the front end.

table td:before {
   content: attr(data-th);
   display: inline-block;
 }

:before will display it before the td, we could have put :after


Version desktop:

Version mobil:

Video: start and end at a specific time

To do that, just add a little information at the end of the url located in the source tag:

<source src="video/chrome.webm#t=5,10" type="video/webm">

in this example, the video will start at the second 5 and end at the second 10.

New attribute in input and video tag

What I’ve recently discovered during my monthly reading to keep myself up-to-date

<input type=“range”>

image

Creates a range for number. User can define the range min – max (price for instance) thank to button which slides.

Of course it necesary to define the down and top value of the rage like in this example:

<input type=“range” name=“points” min=“0” max=“10”

Not supported in Internet Explorer 9 and less


<input list>

image

Is a easy autocomplete field. It has a similar markup as the <select> tag, in fact it uses <option> tags to define the list of autocomplete.

Usefull when there’s a few options to choose from. The options have to be included inside a <datalist> tag 

<input list=“browsers” name=“browser”>
 <datalist id=“browsers”>
   <option value=“Internet Explorer 6”>
   <option value=“Internet Explorer 8”>
  <option value=“Internet Explorer 10”>    
  <option value=“Firefox”>
  <option value=“Chrome”>
 </datalist>

Not supported in Internet Explorer 9 and less



<video poster=“”>

image

Allow the display of an image exctracted from the video. Usefull when the video doesn’t load. Visually friendlier and more informative than an ugly icon or a black screen.

<video controls poster=“/images/w3html5.gif”>
  <source src=“movie.mp4” type=“video/mp4”>
  <source src=“movie.ogg” type=“video/ogg”>
</video>

Make divs with a same height fluid – css only

I’m working on the new website of mundojoven.com. I’m a front end integrator on this project. I am not the graphic designer on it. I had to resolve some common issues which, wierdly, I never had to resolve before. 

I’ve learned a lot and here is another memo post for me to remember, and to to take advantage of.

To give to two or more divs next to each other the same height, whatever is the amount of content they have, we need to use the following css property:value

 display:table and display:table-cell attribute.

The key element here, to successfully implement the trick, is to set the affected  the div a float:none;

Here the 3 divs included in the <article> will have the same height, whatever is the quantity of text. In the following capture, there’s more text:

See the css:

article {display:table; height:100%;}

    article div {display: table-cell; height:100%; float:none; }

That’s it!

See the editable code and the live exemple here:

https://jsfiddle.net/clemencizm/r26b8d1c/29/