JSFiddle - React, Tailwind, and code Playground

by jnbdz

HTML

<ul>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2114.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2180.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2192.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2751.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2752.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2755.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2757.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2764.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2767.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2771.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2786.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2790.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2796.jpeg" alt=" "/></li>
    <li><img src="https://github.com/jnbdz/Element.serializeCoordinates/raw/master/Demo/assets/img/IMG_2798.jpeg" alt=" "/></li>
</ul>
<hr/>
<button class="clean-gray" id="act">Serialize Images Positions</button>
<div id="result"></div>

CSS

ul {
    list-style:none;
}

li {
    display:inline;
    margin:5px;
}

/* clean gray
*******************************************************************************/
button.clean-gray {
  margin-left:20px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ccc)); /*#d6d6d6*/
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #ffffff, #ccc);
  background-image: -moz-linear-gradient(top, #ffffff, #ccc);
  background-image: -ms-linear-gradient(top, #ffffff, #ccc);
  background-image: -o-linear-gradient(top, #ffffff, #ccc);
  background-image: linear-gradient(top, #ffffff, #ccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  color: #333;
  font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 8px 0;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  width:200px; }
  button.clean-gray:hover {
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(top, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd; }
  button.clean-gray:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0...

JavaScript

/*
---
description: Takes all the position of all the block element and puts it in a array.

authors:
  - Jean-Nicolas Boulay Desjardins (http://jean-nicolas.name)

license:
  - MIT-style license

requires:
 - core/1.4:   '*'

provides:
  - Element.serializeCoordinates
...
*/

Element.implement({
    serializeCoordinates: function(relative){
        var els = [];
        var i=0;
        console.log(this);
        this.each(function(el){
            els[i] = el.getCoordinates(relative);
            i++;
        });
        return els;
    }
});

document.id('act').addEvent('click', function(){
    document.id('result').set('text', $$('img').serializeCoordinates().toString());
});