Pag_Consulta_03

In this example below you will see how to do a Pag_Consulta_03 with some HTML / CSS and Javascript

Missing * Deteccion browser por JS * tabla * estadisticas * Seleccion idiomas * Links a archivo * Colorear automaticamente palabras

Thumbnail
This awesome code was written by a3057759, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright a3057759 ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/></script>
</head>
<body>

<script src="script.js"/></script> 

<div id='wrapper' class="Titulo">
  <h1>Indexador online de corpus médicos</h1>
  <div class="Idioma">
    <ol class='clearfix'>    <li class="idiom activa" onclick="javascript:alert(1)" >Español</li>
      <li class="idiom" onclick="javascript:alert(1)">Japonés</li>
      <li class="idiom" onclick="javascript:alert(1)">Árabe</li>
    </ol>
  </div>
</div>
<br>
<div class="share blue">
  <a id="forma_o_lema" href="#">forma</a>
  <div>
    <ul>
      <li><a id="boton_select"  href="#">forma</a></li>
      <li><a id="boton_select"  href="#">lema</a></li>
    </ul>
  </div>
</div>
<div class="share yellow">
  <a id="tipo_busqueda" href="#">coincide con</a>
  <div>
    <ul>
      <li><a id="boton_select" href="#">coincide con</a></li>
      <li><a id="boton_select" href="#">empieza por</a></li>
      <li><a id="boton_select" href="#">termina en</a></li>
      <li><a id="boton_select" href="#">contiene</a></li>
    </ul>
  </div>
</div>
<input class="palabra" type="text" id="palabra" style="color: LightGrey;" value="palabra" name="palabra" onclick="this.value=''" size="14">

<div class="share morado">
  <a id="categoria" href="#">categoría: ADV</a>
  <div>
    <ul class="share morado aa">
      <li><a id="boton_select_2"  href="#">ADV</a></li>
      <li><a id="boton_select_2"  href="#">MD</a></li>
      <li><a id="boton_select_2" href="#">C</a></li>
      <li><a id="boton_select_2"  href="#">P</a></li>
      <li><a id="boton_select_2"  href="#">NC</a></li>
      <li><a id="boton_select_2" href="#">DET</a></li>
      <li><a id="boton_select_2"  href="#">N</a></li>
      <li><a id="boton_select_2"  href="#">Q</a></li>
      <li><a id="boton_select_2" href="#">PUNCT</a></li>
      <li><a id="boton_select_2"  href="#">REL</a></li>
      <li><a id="boton_select_2"  href="#">V</a></li>
      <li><a id="boton_select_2" href="#">AUX</a></li>
      <li><a id="boton_select_2"  href="#">ADJ</a></li>
      <li><a id="boton_select_2" href="#">PREP</a></li>
      <li><a id="boton_select_2" href="#">PPER</a></li>
    </ul>
  </div>
</div>

<input class="consulta" type="submit" value="Consulta" />

<p></p>

 <input class="opciones" type="submit" value="Asociaciones" />
 <input class="opciones" type="submit" value="Distribuciones" />
<br>
<br>
<br>
<hr>
<table class="cabecera">
  <tbody>
    <tr>
      <td class="izquierda">
         <a  href="#" class="boton negro redondo">&#171;&nbsp; Anteriores</a>
        <a href="#" class="boton negro redondo">Siguientes&nbsp;&#187;</a>     
      </td>
      <td class="derecha">
        <div class="container"> 
          <ul class="tags blue">
            <li><a href="#">documentos           <span>50000</span></a></li>
            <li><a href="#">concordancias <span>1000000</span></a></li>
            <li><a href="#">palabras por millón <span>65</span></a></li>
         </ul>
        </div>
       </td>
    </tr>
  </tbody>
 </table>
<table class="tabla">
  <thead>
    <tr>
      <th>Referencia </th>
      <th>Concordancia</th>
      <th>Archivo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>1</strong></td>
      <td id="texto">Además , el bloqueo de rama izquierda se asocia a un mal <font style="color:rgb(204, 0, 0); font-size:11pt"><b>patata</b></font>pronóstico y a un aumento de la morbilidad ( Baldasseroni et . , 2002 )</td>
      <td>Médico</td>
    </tr>
    <tr>
      <td><strong>2</strong></td>
      <td id="texto">La hidroxicarbamida se ha eliminado de la lista de posibles fármacos a considerar como parte de una pauta terapéutica , ya que el panel de directrices prefiere limitar su comentario a fármacos aprobados por la Food and Drug Administration estadounidense e indicados para el tratamiento de la infección por el VIH</td>
      <td>Médico</td>
    </tr>
    <tr>
      <td><strong>3</strong></td>
      <td id="texto">Además , el bloqueo de rama izquierda se asocia a un mal pronóstico y a un aumento de la morbilidad ( Baldasseroni et . , 2002 )</td>
      <td>Médico</td>
    </tr>
    <tr>
      <td><strong>4</strong></td>
      <td id="texto">'linear'</td>
      <td>Médico</td>
    </tr>					
    <tr>
      <td><strong>5</strong></td>
      <td id="texto">Además , el bloqueo de rama izquierda se asocia a un mal pronóstico y a un aumento de la morbilidad ( Baldasseroni et . , 2002 )</td>
      <td>Médico</td>
    </tr>
    <tr>
      <td><strong>6</strong></td>
      <td id="texto">Además , el bloqueo de rama izquierda se asocia a un mal pronóstico y a un aumento de la morbilidad ( Baldasseroni et . , 2002 )</td>
      <td>Médico</td>
    </tr>
    <tr>
      <td><strong>7</strong></td>
      <td id="texto">Además , el bloqueo de rama izquierda se asocia a un mal pronóstico y a un aumento de la morbilidad ( Baldasseroni et . , 2002 )</td>
      <td>Médico</td>
    </tr>
    <tr>
      <td><strong>8</strong></td>
      <td id="texto"> Además , el bloqueo de rama izquierda se asocia a un mal pronóstico y a un aumento de la morbilidad ( Baldasseroni et . , 2002 )Además , el bloqueo de rama izquierda se asocia a un mal pronóstico y a un aumento de la morbilidad ( Baldasseroni et . , 2002 )Además , el bloqueo de rama izquierda se asocia a un mal pronóstico y a un aumento de la morbilidad ( Baldasseroni et . , 2002 )Además , el bloqueo de rama izquierda se asocia a un mal pronóstico y a un aumento de la morbilidad ( Baldasseroni et . , 2002 )Además , el bloqueo de rama izquierda se asocia a un mal pronóstico y a un aumento de la morbilidad ( Baldasseroni et . , 2002 )</td>
      <td>Médico</td>
    </tr>
    <tr>
      <td><strong>9</strong></td>
      <td id="texto">Además , el bloqueo de rama izquierda se asocia a un mal pronóstico y a un aumento de la morbilidad ( Baldasseroni et . , 2002 )</td>
      <td>Médico</td>
    </tr>
  </tbody>
</table>
<br>
<br>
<table class="cabecera">
  <tbody>
    <tr>
      <td class="izquierda">
         <a  href="#" class="boton negro redondo">&#171;&nbsp; Anteriores</a>
        <a href="#" class="boton negro redondo">Siguientes&nbsp;&#187;</a>     
      </td>
      <td class="derecha">
        <a class="guardar red">
          <div class="arrow">
            <span class="top"></span>
            <span class="bottom"></span>
            <span class="bottomShadow"></span>
          </div>
          <span class="bar"></span>
           Download
        </a>
       </td>
    </tr>
  </tbody>
 </table>


<form id="target" method="get">
</form>

<div class="avgrund-cover"></div>

<aside class="avgrund-popup">
	<h2>Navegador no soportado</h2>
	<p>
		El navegador que esta utilizando no esta soportado. Utilice uno de los siguientes navegadores
	</p>
	<button class="boton_popup"  onclick="avgrund.deactivate();">Close</button>
</aside>

</body>
</html>

/*Downloaded from https://www.codeseek.co/a3057759/pag_consulta_03-IJdFH */
    body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-variant: normal;
	font-weight: 300;
	margin: 15px;
	color: #373737;
}

/* Título y botones de idiomas */
div.Titulo{
    position:relative;
    top:-15px;
    height: 90px;
    background: -webkit-linear-gradient(bottom, #777, #444);
    background: -moz-linear-gradient(bottom, #777, #444);
    background: -o-linear-gradient(bottom, #777, #444);
    background: linear-gradient(to top, #777, #444);
    box-shadow: 0.5em 0.5em 0.3em #999;
    border-radius:0.3em;   
}

h1 {
    position:relative;
    top: 2px;
    color: white;
    font-family: "Traditional Arabic";
    font-size: xx-large;
    font-weight: bold;
    text-align: center;
}


div.Idioma{
   position:relative;
   width:1000px;
   left:808px;
   top:-35px;
}

.clearfix {
  cursor: pointer;
}

.clearfix:after {
 	content:"";
  display:table;
  clear:both;
}

ol.clearfix {
 	list-style:none; 
  position:relative;
}

ol.clearfix:after{
 	content:"";
  display:block;
  position:absolute;
  top:50%;
  width:30%;
  z-index:-1;
  border-top:1px solid rgba(0,0,0,0.3);
  border-bottom:1px solid rgba(255,255,255,0.1);
  height:0;
}

li.idiom {
  display:inline-block;
 	padding:10px 10px 10px 45px;
  counter-increment: section;  
  margin:10px;
  color:#737273;
  position:relative;
  border-radius:0.3em;
  background:#444;
  border:1px solid rgba(0,0,0,0.4);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.3),
    0 1px 0 rgba(255,255,255,0.1);
  overflow:hidden;
}

li.idiom:before {
 	content:counter(section);
  position:absolute;
  left:-13px;
  top:-7px;
  font-size:20px;
  border-radius:50%;
  border:5px solid rgba(255,255,255,0.1);
  padding:5px;
  width:35px;
  height:35px;
  text-align:center;
  line-height:35px; 
  color:#737273;  
  transition:all 0.2s ease-out;
}

li.idiom:hover:before {
 	color:#bbb; 
  border-color:#bbb; 
}

.idiom.activa {
  color:white;
  cursor:pointer;
  cursor:default;
}

.idiom.activa:before {
 	border-color:white; 
  color:white;
}

.idiom.activa:hover:before {
  border-color:white; 
  color:white;
}


.share {
	position: relative;
	display: inline-block;
}

.share a {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	text-decoration: none;
	text-align: center;
	padding: 5px 0;
}

.share.morado.aa a {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 9px;
	text-decoration: none;
	text-align: center;
	padding: 5px 0;
}

.share > a {
	display: inline-block;
	width: 100px;
	z-index: 1;
	font-weight: bold;
	color: #616267;
	border: 1px solid #8F8F8F;
	border-radius: 3px;
	background: #fff;
	background-image: -webkit-linear-gradient(top, #FAFBFD, #F6F7FC);
	background-image: -moz-linear-gradient(top, #FAFBFD, #F6F7FC);
}

.share.morado > a {
	width: 130px;
}

.share div {
	position: absolute;
	width: 100px;
	height: 8px;
	overflow: hidden;
	left: 2px;
	top: 28px;
	-webkit-transition: all 150ms linear;
	-moz-transition: all 150ms linear;
	-o-transition: all 150ms linear;
	transition: all 150ms linear;
}

.share.morado div {
	width: 128px;
}


.share:hover div {
	height: 94px;
	/*
	 * 26px (height of <li>) times the number of <li>s, plus 16px for grippy
	 */
}
.share.blue:hover div {
	height: 68px;
	/*
	 * 26px (height of <li>) times the number of <li>s, plus 16px for grippy
	 */
}
.share.morado:hover div {
	height: 346px;
	/*
	 * 22px (height of <li>) times the number of <li>s (15), plus 16px for grippy. 22*15 + 16==286
	 */
}
.share.yellow:hover div {
	height: 120px;
	/*
	 * 26px (height of <li>) times the number of <li>s, plus 16px for grippy
	 */
}

.share ul {
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 96px;
	background: #56A0F9;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.15), transparent);
	margin: 0;
	padding: 2px 0 9px;
	border-radius: 0 0 3px 3px;
	border: 1px solid rgba(0,0,0,0.25);
	border-width: 0 1px 1px;
	box-shadow: 0 -1px 0 rgba(255,255,255,0.5) inset;
	z-index: 9999;
}

.share.morado ul {
	width: 125px;
}

.share ul::before {
	content: '.';
	text-indent: -9999px;
	display: block;
	background: #56A0F9;
	width: 15px;
	height: 15px;
	position: absolute;
	bottom: -4px;
	left: 38px;
	border-radius: 15px;
	box-shadow:
		0 -1px 0 rgba(255,255,255,0.5) inset,
		0 1px 0 #666;
	z-index: 0;
}

.share.morado ul::before {
	left: 58px;
}

.share ul::after {
	content: '.';
	text-indent: -9999px;
	display: block;
	background: #fff;
	width: 5px;
	height: 5px;
	position: absolute;
	bottom: -2px;
	left: 42px;
	border-radius: 15px;
	border: 1px solid #666;
	box-shadow: 0 -1px 0 rgba(255,255,255,0.5);
	z-index: 0;
}

.share.morado ul::after {
	left: 62px;
}

.share.morado ul {
	background: #de6ade;
}

.share.morado ul::before {
	background: #de6ade;
}

.share.yellow ul {
	background: #B4E12C;
}
.share.yellow ul::before {
	background: #B4E12C;
}

.share.black ul {
	background: #2C2D32;
}
.share.black ul::before {
	background: #2C2D32;
}

.share:hover ul {
	bottom: none;
}

.share ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.share ul li a {
	display: block;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

.share ul li a:hover {
	text-decoration: underline;
}

/* campo de texto */

input.opciones, input.consulta, input.palabra{
    border-radius: 7px 7px 7px 7px;
    font-size: medium;
  	padding: 3px 6px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
}

input.opciones:focus, input.consulta:focus, input.palabra:focus {
    border-color: #9ECAED;
    box-shadow: 0 0 10px #9ECAED;
    outline: medium none;
}


input.consulta{
    Position:Absolute; 
    left:40%;
}
/* botones de avanzar y retroceder */
/* Botón */

.boton {
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: baseline;
    text-decoration: none;
    font: 13px 'Helvetica Neue';
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.boton:hover { 
  text-decoration: none;
}

/* Redondez */

.boton {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
 
/* Color */

.negro {
    color: #fff;
  	border-left: 1px solid #555;
	  border-right: 1px solid #777;
	  border-top: 1px solid #555;
	  border-bottom: 1px solid #333;
    box-shadow: inset 0 1px 0 #999;
    font-weight: bold;
	  padding: 2px 7px;
	  position: relative;
	  text-shadow: 0 1px 0 #000;	
    text-align: center;
    background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#444));
    background: -moz-linear-gradient(top,  #777,  #444);
}

.negro:hover {
    background: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
    background: -moz-linear-gradient(top,  #444,  #000);
}


/* botones de consulta */
ol, ul {
    list-style: none outside none;
}
strong {
	font-weight: bold; 
}

.container {
  margin: 5px 60%;
  width: 480px;
}

.tags {
  zoom: 1;
  font: 100%/30px 'Helvetica Neue', helvetica, arial, sans-serif;
  font-weight: bold; 
}

.tags:before, .tags:after {
  content: '';
  display: table;
}

.tags:after {
  clear: both;
}

.tags li {
  position: relative;
  float: left;
  margin: 0 0 0 12px;
}

.tags li:active {
  margin-top: 0px;
  margin-bottom: 0px;
}

.tags li:after {
  content: '';
  z-index: 2;
  position: absolute;
  top: 10px;
  right: -2px;
  width: 5px;
  height: 6px;
  opacity: .95;
  background: #eb6b22;
  border-radius: 3px 0 0 3px;
  -webkit-box-shadow: inset 1px 0 #99400e;
  box-shadow: inset 1px 0 #99400e;
}

.tags a, .tags span {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.tags a {
  height: 26px;
  line-height: 23px;
  padding: 0 9px 0 8px;
  font-size: 12px;
  color: #555;
  text-decoration: none;
  text-shadow: 0 1px white;
  background: #fafafa;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: #dadada #d2d2d2 #c5c5c5;
  border-radius: 3px 0 0 3px;
  background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -
    moz-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: linear-gradient(to bottom, #fcfcfc, #f0f0f0);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tags a:hover span {
  padding: 0 7px 0 6px;
  max-width: 400px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.tags span {
  position: absolute;
  top: 1px;
  left: 100%;
  z-index: 2;
  overflow: hidden;
  max-width: 0;
  height: 24px;
  line-height: 21px;
  padding: 0 0 0 2px;
  color: white;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  background: #eb6b22;
  border: 1px solid;
  border-color: #d15813 #c85412 #bf5011;
  border-radius: 0 2px 2px 0;
  opacity: .95;
  background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -moz-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -o-linear-gradient(top, #ed7b39, #df5e14);
  background-image: linear-gradient(to bottom, #ed7b39, #df5e14);
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  -webkit-transition-property: padding, max-width;
  -moz-transition-property: padding, max-width;
  -o-transition-property: padding, max-width;
  transition-property: padding, max-width;
}


.tags.blue li:after {
  background: #777;
  -webkit-box-shadow: inset 1px 0 #444;
  box-shadow: inset 1px 0 #444;
}

.tags.blue span {
  background: #56a3d5;
  border-color: #444;
  background-image: -webkit-linear-gradient(top, #777, #444);
  background-image: -moz-linear-gradient(top, #777, #444);
  background-image: -o-linear-gradient(top, #777, #444);
  background-image: linear-gradient(to bottom, #777, #444);
}

/* tabla */
table.cabecera{
  margin: -15px auto;
  width: 100%;
}

td.izquierda{
  align="left";
  width: 16%;
}
td.derecha{
  align="right";
  text-align:right;
}


table.tabla {
  font: 100%/30px 'Helvetica Neue', helvetica, arial, sans-serif;
	background: #f5f5f5;
	border-collapse: separate;
	box-shadow: inset 0 1px 0 #fff;
	font-size: 12px;
	line-height: 24px;
	margin: -15px auto;
	text-align: left;
	width: 100%;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}	

table.tabla th {
  background: -webkit-linear-gradient(top, #777, #444);
  background: -moz-linear-gradient(top, #777, #444);
  background: -o-linear-gradient(top, #777, #444);
  background: linear-gradient(to bottom, #777, #444);
	border-left: 1px solid #555;
	border-right: 1px solid #777;
	border-top: 1px solid #555;
	border-bottom: 1px solid #333;
	box-shadow: inset 0 1px 0 #999;
	color: #fff;
  font-weight: bold;
	padding: 10px 15px;
	position: relative;
	text-shadow: 0 1px 0 #000;	
  text-align: center;
  border-radius: 3px;
}

table.tabla th:after {
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
	content: '';
	display: block;
	height: 25%;
	left: 0;
	margin: 1px 0 0 0;
	position: absolute;
	top: 25%;
	width: 100%;
}

table.tabla th:first-child {
	border-left: 1px solid #777;	
	box-shadow: inset 1px 1px 0 #999;
}

table.tabla th:last-child {
	box-shadow: inset -1px 1px 0 #999;
}

table.tabla td {
	border-right: 1px solid #fff;
	border-left: 1px solid #e8e8e8;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #e8e8e8;
	padding: 10px 15px;
	position: relative;
	transition: all 300ms;
  border-radius: 3px;
}

table.tabla td:first-child {
	box-shadow: inset 1px 0 0 #fff;
  text-align: center;
}	

table.tabla td:last-child {
	border-right: 1px solid #e8e8e8;
	box-shadow: inset -1px 0 0 #fff;
}	

table.tabla tr {
	background: lightgrey;	
}

table.tabla tr:nth-child(odd) td {
	background: #f1f1f1;	
}

table.tabla tr:last-of-type td {
	box-shadow: inset 0 -1px 0 #fff; 
}

table.tabla tr:last-of-type td:first-child {
	box-shadow: inset 1px -1px 0 #fff;
}	

table.tabla tr:last-of-type td:last-child {
	box-shadow: inset -1px -1px 0 #fff;
}	

table.tabla tbody:hover td {
	color: transparent;
	text-shadow: 0 0 3px #aaa;
}

table.tabla tbody:hover tr:hover td {
	color: #444;
	text-shadow: 0 1px 0 #fff;
}

/* Boton de guardar */
a.guardar {
    position: relative;
    height: 12px;
    padding: 6px 10px 10px 40px;
    cursor: pointer;
    text-align: Right;
    font-weight: bold;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    -moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    display: inline-block !important;
    font: 13px 'Helvetica Neue';

    position: relative;
    text-decoration: none;
    transition: background-position .2s ease, margin .1s ease;
    -webkit-transition: background-position .2s ease, margin .1s ease;
    -moz-transition: background-position .2s ease, margin .1s ease;
    background-repeat: repeat-x;
}

a.guardar:hover { background-position: 0 10px }

a.guardar:active {
    -webkit-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    -moz-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    margin: 2px 0 20px 10px;
}

a.guardar span.bar {
    width: 1px;
    height: 19px;
    position: absolute;
    background: black;
    top: 4px;
    left: 33px;
}

a.guardar div.arrow {
    position: absolute;
    left: 13px;
    top: 6px;
}

a.guardar div.arrow span.top {
    position: absolute;
    width: 6px;
    height: 9px;
    background: #000;
    top: 0;
    left: 3px;
}

a.guardar div.arrow span.bottom,
div.arrow span.bottomShadow {
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid black;
    top: 9px;
    left: -2px;
    z-index: 2;
}

a.guardar div.arrow span.bottomShadow {
    z-index: 1;
    left: -1px;
}


/* RED
   ================================================== */
 
a.red {
    background-color: #ee5f5b;
    background-image: -webkit-linear-gradient(top, #ee5f5b, #973431);
    background-image: -moz-linear-gradient(top, #ee5f5b, #973431);
    background-image: -ms-linear-gradient(top, #ee5f5b, #973431);
    background-image: -o-linear-gradient(top, #ee5f5b, #973431);
    background-image: linear-gradient(top, #ee5f5b, #973431);
    text-shadow: 1px 1px 1px #ed5d69;
    border-top: 1px solid #ed8d69;
}

a.red span.bar {
    -webkit-box-shadow: 1px 1px 1px #ed5d69;
    -moz-box-shadow: 1px 1px 1px #ed5d69;
    box-shadow: 1px 1px 1px #ed5d69;
}

a.red div.arrow span.top {
    -webkit-box-shadow: 1px 1px 1px #ed5d69;
    -moz-box-shadow: 1px 1px 1px #ed5d69;
    box-shadow: 1px 1px 1px #ed5d69;
}

a.red div.arrow span.bottomShadow { border-top: 8px solid #ed5d69 }


//modal box
button.boton_popup {
	border: 0px;
	padding: 8px 10px;
	margin: 5px 0px;
	border-radius: 1px;

	cursor: pointer;
	color: #fff;
	background: #7aa76d;
	font-size: 15px;

	-webkit-transition: 0.15s background ease;
	   -moz-transition: 0.15s background ease;
	    -ms-transition: 0.15s background ease;
	     -o-transition: 0.15s background ease;
	        transition: 0.15s background ease;
}
	button.boton_popup:hover {
		background: #91cd85;
	}
	button.boton_popup:active {
		background: #60895a;
	}
	button.boton_popup+button {
		margin-left: 5px;
	}

.sharing {
	margin-top: 50px;
}

.avgrund-cover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	background: rgba( 0, 0, 0, 0.5 );
}
.avgrund-active .avgrund-cover {
  visibility: visible;
  opacity: 1;
}

.avgrund-popup {
	position: absolute;
	width: 340px;
	height: 130px;
	left: 50%;
	top: 50%;
	margin: -130px 0 0 -190px;
	visibility: hidden;
	opacity: 0;
	z-index: 2;
	padding: 20px;

	background: white;
	box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
	border-radius: 3px;

	-webkit-transform: scale( 0.8 );
	   -moz-transform: scale( 0.8 );
	    -ms-transform: scale( 0.8 );
	     -o-transform: scale( 0.8 );
	        transform: scale( 0.8 );
}
	.avgrund-active .avgrund-popup {
		visibility: visible;
		opacity: 1;

		-webkit-transform: scale( 1.1 );
		   -moz-transform: scale( 1.1 );
		    -ms-transform: scale( 1.1 );
		     -o-transform: scale( 1.1 );
		        transform: scale( 1.1 );
	}
	.avgrund-popup.stack {
		-webkit-transform: scale( 1.5 );
		   -moz-transform: scale( 1.5 );
		    -ms-transform: scale( 1.5 );
		     -o-transform: scale( 1.5 );
		        transform: scale( 1.5 );
	}
	.avgrund-active .avgrund-popup.stack {
		-webkit-transform: scale( 1.1 );
		   -moz-transform: scale( 1.1 );
		    -ms-transform: scale( 1.1 );
		     -o-transform: scale( 1.1 );
		        transform: scale( 1.1 );
	}


.avgrund-ready body,
.avgrund-ready .avgrund-contents,
.avgrund-ready .avgrund-popup,
.avgrund-ready .avgrund-cover {
	-webkit-transform-origin: 50% 50%;
	   -moz-transform-origin: 50% 50%;
	    -ms-transform-origin: 50% 50%;
	     -o-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;

	-webkit-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
	   -moz-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
	    -ms-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
	     -o-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
	        transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.avgrund-ready .avgrund-popup.no-transition {
	-webkit-transition: none;
	   -moz-transition: none;
	    -ms-transition: none;
	     -o-transition: none;
	        transition: none;
}

//asdfasdf



/*Downloaded from https://www.codeseek.co/a3057759/pag_consulta_03-IJdFH */
    //Modal box. https://codepen.io/hakimel/pen/wFfGs
$(document).ready(function(){  

(function(){

  var container = document.documentElement,
		popup = $('.avgrund-popup' ),
		cover = $('.avgrund-cover' ),
    currentState = null;

    $('*' ).addClass('avgrund-ready' );

	// Deactivate on ESC
	function onDocumentKeyUp( event ) {
		if( event.keyCode === 27 ) {
			deactivate();
		}
	}

	// Deactivate on click outside
	function onDocumentClick( event ) {
		if( event.target === cover ) {
			deactivate();
		}
	}

	function activate( state ) {
		$('.avgrund-popup' ).removeClass(currentState );
		$('.avgrund-popup' ).addClass('no-transition' );
		$('.avgrund-popup' ).addClass(state );

		//setTimeout( function() {
			$('.avgrund-popup' ).removeClass('no-transition' );
			$('*' ).addClass('avgrund-active' );
		//}, 0 );

		currentState = state;
	}

	function deactivate() {
		$('*' ).removeClass('avgrund-active' );
	}

	function disableBlur() {
		$('*' ).addClass('no-blur' );
	}


	window.avgrund = {
		activate: activate,
		deactivate: deactivate,
		disableBlur: disableBlur
	}

})();
});

$(document).ready(function(){ 
 $("a#boton_select").click(function(){
   var hijo=$(this).get(0);
   var padre=$(this).parent().parent().parent().parent().get(0);
   padre.firstElementChild.firstChild.data=hijo.childNodes[0].data; 
 });
});    
$(document).ready(function(){
 $("a#boton_select_2").click(function(){
   var hijo=$(this).get(0);
   var padre=$(this).parent().parent().parent().parent().get(0);
   padre.firstElementChild.firstChild.data="categoría: "+hijo.childNodes[0].data; 
 });
}); 
$(document).ready(function(){
 $("input").click(function(){
   $(this).css({"color": "#616267"});
 });
}); 

//Form submit (Consulta/Asociaciones/Distribuciones)
$(document).ready(function(){
 $('input').click(function() {
   if ($(this)[0].className=="palabra") 
    return;
   // Paso 1: Input validation
   /************
    TODO
    *********/
   // Paso 2: Getting info
   var var_forma_o_lema=$("a#forma_o_lema")[0].childNodes[0].data;
   var var_tipo_busqueda=$("a#tipo_busqueda")[0].childNodes[0].data;
   var var_categoria=$("a#categoria")[0].childNodes[0].data.split(" ")[1];   
   var var_palabra=$("input#palabra")[0].value;
   var var_tipo_consulta=$(this)[0].value;
   // Paso 3: Submit 
   $("form").empty();
   //campo forma/lema
   $('<input>').attr({ type: 'hidden',name: 'forma_o_lema', value: var_forma_o_lema}).appendTo('form');
   //campo tipo_busqueda
   $('<input>').attr({ type: 'hidden',name: 'tipo_busqueda', value: var_tipo_busqueda}).appendTo('form');
   //campo categoria
   $('<input>').attr({ type: 'hidden',name: 'categoria', value: var_categoria}).appendTo('form');
   //campo palabra
   $('<input>').attr({ type: 'hidden',name: 'palabra', value: var_palabra}).appendTo('form');
   //tipo consulta
   $('<input>').attr({ type: 'hidden',name: 'tipo_consulta', value: var_tipo_consulta}).appendTo('form');
   //Submit()
   $("form").submit();
 });
});
//Botones atras/avanzar
$(document).ready(function(){
 $('a.boton').click(function() {
   // Paso 1: Input validation
   /************
    TODO
    *********/
   // Paso 2: Getting info
   var var_forma_o_lema=$("a#forma_o_lema")[0].childNodes[0].data;
   var var_tipo_busqueda=$("a#tipo_busqueda")[0].childNodes[0].data;
   var var_categoria=$("a#categoria")[0].childNodes[0].data.split(" ")[1];   
   var var_palabra=$("input#palabra")[0].value; 
   var var_tipo_consulta=$(this).get(0).childNodes[0].data;
   if (var_tipo_consulta.match("Anteriores")) {
    var_tipo_consulta="Anteriores";
   }
   else {
    var_tipo_consulta="Siguientes";
   }
   console.log(var_tipo_consulta);                                     
   // Paso 3: Submit
   $("form").empty(); 
   //campo forma/lema
   $('<input>').attr({ type: 'hidden',name: 'forma_o_lema', value: var_forma_o_lema}).appendTo('form');
   //campo tipo_busqueda
   $('<input>').attr({ type: 'hidden',name: 'tipo_busqueda', value: var_tipo_busqueda}).appendTo('form');
   //campo categoria
   $('<input>').attr({ type: 'hidden',name: 'categoria', value: var_categoria}).appendTo('form');
   //campo palabra
   $('<input>').attr({ type: 'hidden',name: 'palabra', value: var_palabra}).appendTo('form');
   //tipo consulta
   $('<input>').attr({ type: 'hidden',name: 'tipo_consulta', value: var_tipo_consulta}).appendTo('form');
   //Submit()
   $("form").submit();
 });
});

//Form Descarga
$(document).ready(function(){
 $('a.guardar').click(function() {
   // Paso 1: Input validation
   /************
    TODO
    *********/
   // Paso 2: Getting info
   var var_forma_o_lema=$("a#forma_o_lema")[0].childNodes[0].data;
   var var_tipo_busqueda=$("a#tipo_busqueda")[0].childNodes[0].data;
   var var_categoria=$("a#categoria")[0].childNodes[0].data.split(" ")[1];   
   var var_palabra=$("input#palabra")[0].value;
   var var_tipo_consulta="Descargar";
   // Paso 3: Submit 
   $("form").empty();
   //campo forma/lema
   $('<input>').attr({ type: 'hidden',name: 'forma_o_lema', value: var_forma_o_lema}).appendTo('form');
   //campo tipo_busqueda
   $('<input>').attr({ type: 'hidden',name: 'tipo_busqueda', value: var_tipo_busqueda}).appendTo('form');
   //campo categoria
   $('<input>').attr({ type: 'hidden',name: 'categoria', value: var_categoria}).appendTo('form');
   //campo palabra
   $('<input>').attr({ type: 'hidden',name: 'palabra', value: var_palabra}).appendTo('form');
   //tipo consulta
   $('<input>').attr({ type: 'hidden',name: 'tipo_consulta', value: var_tipo_consulta}).appendTo('form');
   //Submit()
   $("form").submit();
 });
});

// GetURLParam
$.urlParam = function(name){
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

// TODO: Colorear y mantener busqueda anterior
$(document).ready(function(){
  //Get previous values
  if ($.urlParam('tipo_busqueda') != "") {    //Get tipo de busqueda
    $("a#tipo_busqueda")[0].childNodes[0].data= $.urlParam('tipo_busqueda');
  }   
  if ($.urlParam('forma_o_lema') != "") {    //Get forma o lema
    $("a#forma_o_lema")[0].childNodes[0].data= $.urlParam('forma_o_lema');
  }
  
  if ($.urlParam('categoria') != "") {    //Get categoria
    $("a#categoria")[0].childNodes[0].data= "categoría: "+$.urlParam('categoria');
  }  
  
  if ($.urlParam('palabra') != "") {    //Get palabra buscada
    $("input#palabra")[0].value= $.urlParam('palabra');
    //$.each($("td#texto"), function(k, v) {
      //alert(v[0].childNodes[0].data);
    //});

       
  }  
  //Colorear palabra
  //<font style="color:rgb(204, 0, 0); font-size:11pt"><b>patata</b></font>
  //
  //var palabra= $.urlParam('palabra');
  //v[0].childNodes[0].data.replace(palabra,"<font style=\"color:rgb(204, 0, 0); font-size:11pt\"><b>"+palabra+"</b></font>")
  
});
$.todoCOLOREA = function(name){
  var font = document.createElement("font");
  var my_b = document.createElement("b");
  my_b.appendChild(document.createTextNode($.urlParam('palabra')))
  font.setAttribute('style', 'color:rgb(204, 0, 0); font-size:11pt; font-weight: bold');
  font.appendChild(my_b);
  $("td#texto").get(i).appendChild(font);
}
  
// TODO: Detectar Navegador
/* ===== Firefox ===== */
$(document).ready(function(){  
//avgrund.activate( 'stack' ); 
  // Select Firefox
  if (!$.browser.mozilla && !$.browser.chrome /*&& !$.browser.safari&& !$.browser.opera */) {
      alert("Unsupported browser");
  }
});

Comments