Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var x = $("form").serializeArray();
        $.each(x, function(i, field){
            $("#results").append(field.name + ":" + field.value + " ");
        });
    });
});
</script>
</head>
<body>
​
<form action="">
  First name: <input type="text" name="FirstName" value="Mickey"><br>
  Last name: <input type="text" name="LastName" value="Mouse"><br>
</form>
​
<button>Serialize form values</button>
​
<div id="results"></div>
​
</body>
</html>
 
/*
Esta hoja de estilos es exclusivamente para la exporación a PDF, los nombres de las fuentes son los nombres del dompdf luego de importarlas.
*/
@charset "utf-8";
​
body {
    padding: 0;
    font: normal 9px;
    font-family: sans-serif, tahoma;
    color: #555;                     
    background: none repeat scroll 0 0 #F2F2F2;
    height: 100%;           
    margin: 0;
}
​
h1, h2, h3, h4, h5 {
    margin: 0px;    
    color: #817E88;
    font-family:sans-serif;
}
​
h1 {
    font-size: 28px;
    margin:0px;
    font-weight: bolder;
}
​
h2 {
    font-size: 17px;
    margin:0px;
    font-weight: normal;
}
​
h3 {
    font-size: 11px;
    margin:0px;
    font-weight: normal;
}
​
h4 {
    font-size: 8px;
    margin:0px;
    font-weight: normal;
}
​
h5 {
    font-size: 7px;
    margin:0px;    
    font-style: italic;
    font-weight: normal;
}
​
p, ol {
    margin: 0 0 0 0;
    text-align: justify;
    line-height: 26px;
    font-size: 9px;
}
​
a:link {
    text-decoration: none;    
    color: #003448;
}
​
a:hover, a:active {
    text-decoration: none;
    color: #003448;
}
​
a:visited {
    text-decoration: none;
    color: #003448;
}
​
img {
    border: none;
}
​
.page { 
    margin-top  : 30px;
    margin-bottom  : 20px;
    margin-right: 45px;
    margin-left : 45px;
    page-break-before:always; 
}
​
html, body { height: 100%; }
​
/**************************/
/******** Niveles  ********/
/**************************/
​
/*****Nuevas Usadas en tablas de datos*****/
​
​
​
.tablaValores{      
    padding: 0;
    margin: 0 auto;
    border-collapse: collapse;       
    /*border:0.5px solid #000000;*/
    table-layout: fixed;
}
​
.tablaValores thead tr th{
    color:#ffffff;
    background-color: #72a8ed;
    text-align: center;
    font-size: 6px;
    font-weight: normal;
    height: 14px;    
    border:0.1px solid #BDBDBD;
}
​
.tablaValores thead tr th.clear{
    background-color: #FFFFFF;
    border-top:0.1px solid #FFFFFF;
    border-bottom:0.1px solid #FFFFFF;
    max-width: 15px;    
}
​
.tablaValores thead tr td{
    background-color: #F1F1F1;
    color:#2A2727;
    text-align: center;
    font-size: 6px;
    font-weight: normal;
    height: 12px;
    border-bottom:0.1px solid #BDBDBD;
    border-right:0.1px solid #BDBDBD;
}
​
.tablaValores thead tr td.left{
    border-left:0.1px solid #BDBDBD;
}
​
.tablaValores thead tr td.clear{
    background-color: #FFFFFF;
    border-top:0.1px solid #FFFFFF;
    border-bottom:0.1px solid #FFFFFF;    
    width: 15px;    
}
​
.tablaValores tbody.indicadores tr td{
    color:#2A2727;
    font-size: 6px;
    font-weight: normal;
    height: 9px;
    border-right:0.1px solid #BDBDBD;
    border-bottom:0.1px solid #BDBDBD;
    border-left: 0.1px solid #BDBDBD;
    text-align: right;
    padding-right: 2px;
    width: 42px;
}
​
.tablaValores tbody.indicadores tr.nivel1 td.nivel1{
    text-align: left;    
    border-left: 0.1px solid #BDBDBD;
    padding-left: 5px;
    width: 70px
}
.tablaValores tbody.indicadores tr.destacada{
    background-color: #D9EDF7;
}
​
.tablaValores tbody.indicadoresB tr td{
    color:#2A2727;
    font-size: 6px;
    font-weight: normal;
    height: 9px;
    border-right:0.1px solid #BDBDBD;
    border-bottom:0.1px solid #BDBDBD;
    border-left: 0.1px solid #BDBDBD;
    text-align: right;
    padding-right: 2px;
    width: 38px;
}
​
.tablaValores tbody.indicadoresB tr.nivel1 td.nivel1{    
    text-align: left;    
    border-left: 0.1px solid #BDBDBD;
    padding-left: 5px;
    width: 70px
}
​
.tablaValores tbody.indicadoresC tr td{
    color:#2A2727;
    font-size: 6px;
    font-weight: normal;
    height: 9px;
    border-right:0.1px solid #BDBDBD;
    border-bottom:0.1px solid #BDBDBD;
    border-left: 0.1px solid #BDBDBD;
    text-align: right;
    padding-right: 2px;
    width: 37.5px;
}
​
.tablaValores tbody.indicadoresC tr.nivel1 td.nivel1{    
    text-align: left;    
    border-left: 0.1px solid #BDBDBD;
    padding-left: 5px;
    width: 70px
}
​
.tablaValores tbody.indicadores2 tr td{
    color:#2A2727;
    font-size: 6px;
    font-weight: normal;
    height: 10px;
    border-right:0.1px solid #BDBDBD;
    border-bottom:0.1px solid #BDBDBD; 
    border-left: 0.1px solid #BDBDBD;
    text-align: right;
    padding-right: 2px;
    width: 32px;    
}
​
.tablaValores tbody.indicadores2 tr td.titulo{
    color:#2A2727;
    font-size: 5px;
    font-weight: normal;
    padding-left: 2px;
    border:0.1px solid #BDBDBD;    
    text-align: left;
    width: 30px;    
}
​
.tablaValores tbody.indicadores2 tr td.subTitulos{
    color:#2A2727;
    font-size: 5px;
    font-weight: normal;
    padding-left: 2px;
    border-right:0.1px solid #BDBDBD;
    border-bottom:0.1px solid #BDBDBD; 
    border-left: 0.1px solid #BDBDBD;
    text-align: left;
    width: 60px;    
}
​
.tablaValores tbody tr td.clearColspan{    
    border-right: none;
    width:10px;
    height: 8px;
}
​
.tablaValores tbody tr td.clearColspanBottom{    
    border-bottom: none;
    border-right: none;
    border-left: 0.1px solid #BDBDBD;
    width:10px;
    height: 8px;
}
​
/*estilo para filas destacadas */
.tablaValores tbody tr.nivelTotal td.nivelTotal{
    text-align: left;
    padding-left: 5px;
    padding-right: 2px;
}
.tablaValores tbody tr.nivelTotal td{
    background-color: #D9EDF7;
    /*font-weight: bold;*/
}
.tablaValores tbody tr.nivelTotal td.clear{
    background: transparent;
    border-left:0.1px solid #BDBDBD;
    min-width: 0px;
    width: 15px;
}
​
/*estilo para fila final de la tabla */
.tablaValores tbody tr.filafooter td.filafooter{
    text-align: left;
    padding-left: 5px;
    padding-right: 2px;
}
.tablaValores tbody tr.filafooter td{
    background-color: #72a8ed;
    font-weight: bold;
}
.tablaValores tbody tr.filafooter td.clear{
    background: transparent;
    border-left:0.1px solid #BDBDBD;
    min-width: 0px;
    width: 15px;
}
​
​
​
​
​
.tablaValores tbody tr td.left{
    border-left:0.1px solid #BDBDBD;
}
.tablaValores tbody tr td.positivo{
    color: #4169E1; 
    padding-left: 0px;
}
.tablaValores tbody tr td.negativo{
    color: #DF1D1E;
    padding-left: 0px;
}
​
/*.tablaValores tbody tr.nivel1 td{    
    background-color: #FFFFFF;
}*/
​
/*.tablaValores tbody tr.nivel1 td.nivel1{
    text-align: left;
    border-left:none;    
}*/
​
.tablaValores tbody tr.nivel1 td.clear{
    background: transparent;
    border:none;
    min-width: 0px;
    width: 15px;
}
​
​
​
​
.tablaValores tbody tr.nivelTotalGA td{ 
    background-color: #DAE6F4;
    font-weight: bold; 
}
 
.tablaValores tbody tr.nivelTotalGA td.nivelTotal{
    text-align: left;
    padding-left: 5px; 
}
​
.tablaValores tbody tr.nivelTotalGA td.clear{
    background: transparent;
    border-left:0.1px solid #BDBDBD;
    min-width: 0px;
    width: 15px; 
}
 
/** PORTADA **/
​
.divPortada{
    width:700px;    /* 792px es el ancho máximo*/
    text-align:right; 
}
 
.divPortadaTitulo h1{ 
    margin-top: 50px;
    padding-left: 50px;
    font-weight: bold; 
    font-size: 35px;
}
 
.divPortadaTitulo h2{ 
    padding-left: 52px; 
    font-size:  15px;
    font-weight: normal; 
    margin-bottom: 50px;
}
​
.divPortadaLínea0{ 
    width:700px;
    height: 2px;
    background-color: #FFFFFF; 
}
 
.divPortadaLínea1{ 
    width:700px;
    height: 3px;
    background-color: #D7D7D7; 
}
​
.divPortadaLínea2{ 
    width:660px;
    height: 3px;
    background-color: #E1E1E1; 
}
​
.divPortadaLínea3{ 
    width:620px;
    height: 3px;
    background-color: #EBEBEB; 
}
​
.divPortadaLínea4{ 
    width:580px;
    height: 3px;
    background-color: #F5F5F5;  
}
​
​
/**** GA ****/
​
​
.divPortadaLínea1GA{ 
    width:700px;
    height: 3px;
    background-color: #7166ff; 
}
​
.divPortadaLínea2GA{ 
    width:660px;
    height: 3px;
    background-color: #8d84ff; 
}
​
.divPortadaLínea3GA{ 
    width:620px;
    height: 3px;
    background-color: #a9a3ff; 
}
​
.divPortadaLínea4GA{ 
    width:580px;
    height: 3px;
    background-color: #c6c1ff; 
}
 
.divPortadaFecha{ 
    width:700px; 
    text-align:right; 
    /*color: #3d85fe;*/
    font-size: 20px;
    font-weight: bold; 
    margin-top: 30px;
    color: #817E88;  
}
/*.tablaValores .nivel1 tbody tr:nth-child(odd){ 
     background: #FFFFFF;
    color: #D9EDF7;
} 
.tablaValores .nivel1 tbody tr:nth-child(even){
    background: #D9EDF7;
    color: #FFFFFF;
}*/
  
/*.tablaValores tbody tr:nth-child(odd){
 
   background: #FFFFFF;
   color: #D9EDF7;
}
 
.tablaValores tbody tr:nth-child(even){
    background: #D9EDF7;
    color: #FFFFFF;
}*/
 
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
slotbitepro
0viewers