JSFiddle - React, Tailwind, and code Playground

by je34429

HTML

<div class="contenedor">

  <div class="botonera">
        <div class="boton" id="boton1">boton1</div>
        <div class="boton" id="boton2">boton2</div>
        <div class="boton" id="boton3">boton3</div>
        <div class="boton" id="boton4">willy</div>
      
    </div>

    <div class="contenedorTextos">
        <div class="caja" id="caja1">contenido1</div>
        <div class="caja" id="caja2">contenido2</div>
        <div class="caja" id="caja3">contenido3</div>
        <div class="caja" id="caja4">hola will este tema funciona</div>
        <p class="alerta"></p>
    </div>

</div>
<h1>wrong model on jquery object collections for firefox and chrome</h1>
<div>ok maybe is not a bug but its something that should change to unify the query u make when builidng something with javascript right?, </div>
<div> more info here <a href="http://bugs.jquery.com/ticket/14235">ticket to jquery</a> u gota love the way it was answered</div>

CSS

.contenedor{ background:#ddd; width:800px; height:650px; margin:0px auto; position:relative;}
.botonera{position:absolute; left:25px; top:50px; width:280px; }
.contenedorTextos{position:absolute; right:0px; top:50px; width:480px; height:550px; background:#3FF;}
.boton{background:#9C0; border-radius:10px; padding:7px 25px; text-align:center; margin:10px 0px;}
.boton:hover{background:#0C0; cursor:pointer;}
.caja{width:480px; height:550px; position:absolute; top:0px; left:0px; background:#0CF; opacity:0;}
.alerta{position:absolute; z-index:1000; background:#fff; top:0px; left:0px; display:block; width:100%; height:50px;}

JavaScript

$( document ).ready(function() {
/*inicializa documento*/


var botones = $(".boton");





var firefox = botones[0].attributes[0].nodeValue;
    
var chrome = botones[0].attributes[1].nodeValue;
    

$("p.alerta").text(" this is the atribute will change depending on the browser " + chrome + " shouldn't they be unified? well seems like this guy of the ticket dont like the idea")


/*finaliza iniciador*/
});