Hace ya algún tiempo había creado un pequeño tutorial de como crear un sistema de pestañas independiente de frameworks Js. Para una iniciación no estaba mal, aunque tenía algúnas limitaciones que impedían añadir “subpestañas” o determinados tags usados en el script, lo que a la larga lo convertía en uno de tantos scripts que pasan al olvido.

Es por ello que decidí rehacer el código. Más sencillo, más claro y obviamente más útil. Este nuevo sistema permite añadir pestañas dentro de un panel, e incluso utilizar nuevos divs para el caso de que los contenedores a usar ya lo sean.

Empezamos creando el contenedor que tendrá nuestro sistema de pestañas. Un simple div nos valdrá.

<div id="panel"></div>

Dentro de este panel, añadiremos las pestañas. Al igual que en muchos sistemas, utilizaremos listas, aunque bien podríamos utilizar simples enlaces.

<ul id="tabs">
  <li>opción 1</li>
  <li>opción 2</li>
  <li>opción 3</li>
  <li>opción 4</li>
</ul>

Bien, ahora crearemos un panel donde se ubicarán las contenidos de cada pestaña. Una buena estructura sería una capa (div) principal, y otra tantas capa (div) por cada pestaña

<div id="paneles">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Todo junto nos quedaría así

<div id="panel">
  <ul id="tabs">
    <li>opción 1</li>
    <li>opción 2</li>
    <li>opción 3</li>
    <li>opción 4</li>
  </ul>
  <div id="paneles">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Lo interesante es crear los estilos y no depender de imágenes. Estos estilos aplicarán las esquinas redondeadas de las pestañas al igual que en los sistemas windows, con excepción – como no – a los explorer, que no disponen de propiedad de “redondeo”.

/* tamaño y forma del panel principal */
#panel {
  position: relative;
  width:400px;
  height: 300px;
  margin: 100px 0px 0px 100px;
}
/* configuracion de las pestañas */
#tabs {
  position:absolute;
  left: 0px;
  top: 0px;
  margin:0;
  padding:0;
  width: 400px;
  overflow: hidden;
  z-index: 20;
}
#tabs li {
  float:left;
  */
  esto produce compatibilidad al redondear
  en los distintos navegadores
  /*
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  */
  esto impide seleccionar el contenido
  de las pestañas eliminando ese feo
  efecto de selección al clickar y
  arrastrar
  */
  user-select: none;
  list-style: none;
  margin: 1px 1px 0px 0px;
  display: block;
  height: 21px;
  line-height: 21px;
  padding: 0px 8px;
  outline: 0px none;
  font-family: arial;
  font-size: 10px;
  text-decoration: none;
  color: #000;
  border: 1px solid #91A7B4;
  border-bottom-width: 0px;
  background: #fff;
  border-radius: 4px 4px 0px 0px;
  cursor: pointer;
}
#tabs li.active {
  margin-top: 0px;
  height: 21px;
  line-height: 19px;
  border-top: 3px solid #324A62;
  cursor: default;
}
/* Configuración de los paneles */
#panel #paneles {
  position:absolute;
  left: 0px;
  top: 23px;
  width: 398px;
  height: 275px;
  border: 1px solid #91a7b4;
  border-radius: 0px 4px 4px 4px;
  background: #fff;
  overflow: hidden;
}
#panel #paneles > div{
  margin:10px;
  width: 378px;
  height: 255px;
  font-family: arial;
  font-size: 12px;
  text-decoration: none;
  color: #000;
  overflow: auto;
}

Y el javascript que hace que funcione todo esto

function cm_tabs(options)
{
  if((options.tab && options.tab != '') &&
     (options.container && options.container != ''))
  {
    var tabs		= document.getElementById(options.tab).children;
    var containers	= document.getElementById(options.container).children;

    for(var i=0; i< tabs.length; i++)
    {
      tabs[i].i = i;
      containers[i].style.display = 'none';

      tabs[i].onclick = function()
      {
        for(var e=0; e < containers.length; e++)
        {
          tabs[e].className = ''
          containers[e].style.display = 'none';
        }
        tabs[this.i].className = 'active';
        containers[this.i].style.display = 'block';
      }
    }

    if(options.active && options.active <= tabs.length && options.active != '')
    {
      tabs[(options.active-1)].className = 'active';
      containers[(options.active-1)].style.display = 'block';
    } else {
      tabs[0].className = 'active';
      containers[0].style.display = 'block';
    }
  }
  return false;
}

Finalmente ejecutamos el javascript con los parámetros que más nos convengan.

<script type="text/javascript">
  cm_tabs({tab : 'tabs', container : 'paneles', active : 1});
</script>

Donde la propiedad “tab” representa el ID del contenedor de las pestañas, “container” de los paneles que conforman el contenido de las pestañas. Esto nos permitiría dado el caso, colocar las pestañas en un lado y el contenedor en otro. Finalmente “active” representa la pestaña que queremos se muestre como activa el ejecutar el script. Así de sencillo.

El código completo y listo para funcionar lo podéis obtener de los siguientes enlaces:
[ ejemplo de pestañas ] [ otro ejemplo más complejo ] [ descargar ]

Tags: css,, javascript

En Javascript el objeto “location” tiene algunas propiedades más que útiles para poder llegar al resultado deseado sin tener que crear una función como la anterior.

Estas propiedades son las siguientes :

• href
  Es una cadena que contiene la URL completa.
• hash
  Cadena que contiene el nombre de la URL (aparece a la derecha de # en caso de tenerla)
• protocol
  Cadena que contiene el protocolo utilizado(dos puntos incluídos).
• host
  Cadena que contiene el nombre del host y el puerto.
• hostname
  Cadena que contiene el nombre de dominio o IP.
• pathname
  Cadena que contiene la URL sin nombre de dominio, protocolo y hash.
• port
  Cadena que nos devuelve puerto del servidor.
• search
  Cadena que guarda las variables que pasemos por la URL

Click para ver un ejemplo

Tags: javascript

La solución: capturar la url actual, separar el protocolo por un lado y el dominio junto con sus subdominios por otro lado (si los hubiere), y separar estos últimos, siendo el primier elemento resultante el nombre del dominio.

El resultado es algo así.

<script type="text/javascript">

function dominio_base()
{
    // capturamos la url
    url_site      = document.location.href

    // La separamos por la doble barra
    url_pos      = url_site.indexOf('//');

    // por un lado tenemos la url sin protocolos
    url_limpia   = url_site.substr(url_pos+2);

    // y por otro lado el protocolo usado
    url_prot    = url_site.substr(0,url_pos+2);

    // separamos todas las posibles carpetas
    url_split 	  = url_limpia.split('/');

    // y obtenemos el dominio actual
    url_base 	= url_prot + url_split[0];

return url_base;
}

</script>

Al llamar a la función, simplemente nos devuelve el dominio

<script type="text/javascript">
    // mostrarlo en un alert
    alert(dominio_base());

    // escribirlo en un documento
    document.writeIn('mi dominio es ' + dominio_base());
</script>

Tags: javascript

Es cierto que a medida que internet evoluciona, aparecen herramientas que nos hacen la vida más fácil. Los gestores de contenidos, los framework, y desde no hace mucho, los gestores de edición de imágenes. Estas últimas me atraen de forma especial. Te permiten realizar funciones básicas de edición sin necesidad de abrir un photoshop.

Son varios los que hay en el mercado y mucho se ha hablado de ellas, aunque su principal pega (a mi parecer) es que están en servidores externos y no es posible tocar código para mejorar o añadir nuevas funcionalidades.

Y así era hasta hoy. Por medio de webintenta, me entero que existe AIE (Ajax Image Editor). Es un completo editor de imágenes listo para descargar e instalar en tu propio servidor. Está basado en ExtJs e ImageMagic y la verdad es que le vo muchas utilidades, y como valor añadido para instalar en nuestros CMS.

[ AIE ] [ Demo ]

Tags: diseño, javascript, php

De forma similar a como cambiabamos los campos de tipo file, debemos crear una estructura alrededer de los campos selectBox de una forma parecida a esta

<div class="selectBox">
   <div class="box" id="box">Plantar un arbol</div>
   <select name="mySelectBox" id="mySelectBox">
      <option value="1" class="primero">Plantar un arbol</option>
      <option value="2">Escribir un libro</option>
      <option value="3" selected="selected">Ser Padre</option>
      <option value="4">Hacer un Blog</option>
      <option value="5" class="ultimo">Un texto largo para ver que efecto produce</option>
   </select>
</div>

Donde el div principal es el contenedor del Select, y el div “box” donde escribiremos la selección del combo. Para poder realizar la última acción, crearemos un evento “onchange” que aplicaremos a nuestro comboBox para poder pasar los datos de la selección al div “box”.

onchange="this.parentNode.getElementsByTagName('div')[0].innerHTML=this.options[this.selectedIndex].text"

Y evidentemente le daremos unos “colorines” para que quede “bonito”.

<style type="text/css">
div.selectBox {
   position: relative;
   width: 150px;
   height: 22px;
   border: 1px solid #036;
   background: url(button.png) 130px center no-repeat;
}
   div.selectBox div.box {
      position: absolute;
      left: 3px;
      top: 3px;
      width: 124px;
      height: 16px;
      line-height: 16px;
      font-family: arial;
      font-size: 11px;
      color: #036;
      overflow: hidden;
   }
   div.selectBox select {
      position: absolute;
      left: -1px;
      top: -1px;
      width: 152px;
      height: 24px;
      border: 1px solid #036;
      opacity: 0;
      filter: alpha(Opacity=0);
      -moz-opacity: 0;
      cursor: pointer;
      z-index:100;
   }
      div.selectBox select option{
         padding: 4px;
         font-size: 11px;
         color: #036;
         border-bottom: 1px solid #eee;
         cursor: pointer;
      }
      div.selectBox select option.ultimo{
         border-bottom: 0px none;
      }
</style>

Para complementar estos estilos, añadimos la siguiente imagen que hará las veces de botón

El resultado funciona en todos los navegadores, exceptuando nuestro querido amigo “Explorer6″ donde no sé si se verá correctamente al tener una “emulación” del mismo.

[ demo ] [ descargar ]

Tags: css, diseño, javascript, tips

De la misma manera, el equipo de tinyMCE, estrena nueva web, y con tal motivo, han sacado a concurso la realización de su Logo, que cuenta con un premio de 1000$.

Tags: javascript, tinymce

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

Y eso que me prometí no hablar de él !

Tags: javascript, chrome

Y eso era hasta hoy, que he descubierto un plugin para JQuery que hace exactamente lo mismo, aunque de distinta manera. Su nombre es “Docking Layout Manager“.

Su función es la de generar un Layout que ocupe toda la pantalla, de forma que es posible emular en funcionalidad a las aplicaciones de escritorio.

[ Proyecto en JQuery ] [ Sitio Oficial y ejemplos ]

Tags: javascript, dom, jquery, layout

Después de un tiempo de vacaciones del equipo de desarrollo de tinyMCE, vuelven con fuerza y sacan nueva versión, la 3.1.1.

Esta versión trae como novedades los nuevos métodos “getSize” para obtener mediante DOM las dimensiones de un elemento, y “Alert/Confirm” para generar avisos. También estrenan nuevo plugin para previsualizar el contenido en ventana emergente (div) y la opción de solo lectura.

Asimismo y como siempre, arreglan algunos errores de la antigua versión.

[ changelog ] [ descargar tinyMCE ] [ demo ]

Tags: javascript, tinymce

Me hacen mucha gracia las reuniones de las “instituciones” o “individuos” que tratan de modernizar las tecnologías como html y css, y todos los post relacionados que piden cosas de las que realmente podemos prescindir, y de las que llegamos a ellas por otras vías – pienso – más lógicas, como integrar javascript con css, variables en las css, y un largo etc.

Y digo yo, por que no reunirse para cosas más lógicas y necesarias como por ejemplo poder jugar con medidas en tantos por cien y la posibilidad de poder restarle valores absolutos ?

Yo vería muy lógico el poder darle una vuelta de tuerca a todo esto, y poder llegar a algo como

   #header    { height: 150px; }
   #content   { height: 100%-250px; }
   #footer    { height: 100px; }

Creo que eso es bastante más útil que otras cosas que realmente pienso que no sirven más que para acarrearnos más problemas. Quién no se ha peleado con un layout y ha tenido que tirar finalmente de javascript porque lo que pretendía hacer no era posible sólo con css ?

Después está el tema del famoso ACID test. Tanta cosa para poder llegar al 100%. No será más fácil hacer propuestas – ellos que pueden – para conseguir cosas útiles ? No voy a ser yo – entre otras cosas – el que vaya a hacer una web con un smiley compuesto de formas ilógicas de encontrar en una web.

En fin, lo que en principio iba a ser un post para hacer mi propuesta de layout al 100% de alto, se convirtió en una pequeña pataleta fruto de la pelea que mantuve anteayer con una interface rebelde e “imposible” de hacer sin javascript – por lo menos si la quería hacer compatible con “otros” navegadores.

Y no voy a seguir, sinó pediría una orden de alejamiento para los programadores de explorer. Calla, calla, que te pierdes.

Tags: css, javascript, pataletas