How to print specific HTML content in a new page

/in , , /by

Update: if you want to do it easier and in the same page, check this out: How to print a specific HTML element.

If you want to print a specific HTML content, for example everything inside a div tag or a tag element with a particular identifier, you can use window.print() in a new window with just the content you want to. It’s easy but tricky, we would like an accessible print method for any HTML element but there wasn’t.

Don’t forget to add/link some CSS in your new window otherwise you will get the default style from your browser.

Note that write method is synchronous, however sometimes window tries to print before write has finished, it happens only in some browsers ¬¬, therefore trying to avoid this we have added a setTimeout. Yeah, no quite elegant but among all the different ways, it is the shortest that works across all updated browsers so far.

View, hide, type and generate password

/in , , /by

Love to make things as simple as possible xD A hint just inside the input (where you can type), then a button to show the password if you want to see it and finally a button to generate random passwords.

Infinite previous and next selection

/in , , /by

Select each element in a selection loop. If you go forward as soon as you finish the list of elements you will start selecting from the beginning and the same if you go in opposite direction.

Don’t forget to use nextElementSibling and previousElementSibling (DOM Elements) instead of nextSibling and previousSibling (DOM Objects). A DOM Object can be anything: comments, insolated text, line breaks, etc. In our example nextSibling would have worked if we had set all our HTML Elements together without anything between then:

<ul><li></li><li></li></ul>

Simon Game

/in , , , /by

Have you ever played to Simon? That game where you have to memorize an incremental sequence of colors. Today I’m bring to you this famous game in ES6 using CSS transformations and animations. Open it in a new browser window or tab and stretch or shrink the area to see how the game is always visible, there are not scroll bar at all, pure responsiveness, enjoy the play 🙂

Code once, run everywhere: Simon Game in Google Play

CSS Responsive Square

/in /by

I have seen many weird ways to create responsive squares, that’s why I would like to share an easy one. Go to JSFiddle and play resizing the result window.