POPUP WINDOW.OPEN

Código para crear el famoso POPUP de 'Las condiciones de uso'

Al hacer click en (Ver condiciones) se abrirá el popup con el contenido que nosotros queramos.
El código que pondré a continuación es php por lo que no se puede crear en blogger pero quizás les sea de utilidad si tienen alguna web o algún dia crean una.

Tendremos 2 ficheros: prueba.php y CondicionesUso.html

En el fichero prueba.php tendremos el siguiente código:

<input type="checkbox" />
He leido y acepto las condiciones
<span style="cursor:pointer" onclick="javascript:window.open('condicionesUso.html','Condiciones',
'width=660,height=500, left=50,top=50,Scrollbars=YES,Resizable=YES')">
(Ver condiciones)
</span>


En el fichero condicionesUso.html tendremos el texto:

blablabla.....

Inspiración de Juanxo!!! ;) ->Time Ahnuncios

CONTADOR DECRECIENTE TEXTAREA

La idea es la de crear un contador para saber el número de caracteres introducidos en un textarea. En este caso en concreto el contador será decreciente ya que el número de caracteres es limitado.

La función para controlar esto mediante javascript es la siguiente:

function cuenta(){

maximo=800;
if (document.formulario.descripcion.value.length > maximo){
document.formulario.descripcion.value = document.formulario.descripcion.value.substring(0, maximo);
}
else
document.formulario.caracteres.value=maximo- document.formulario.descripcion.value.length;
}


En la parte del formulario tendremos lo siguiente:

<div class="filaFormBig2">
<label>Descripción</label><textarea class="inputs2" style="height:100px" id="descripcion" name="descripcion" onKeyDown="cuenta()" onKeyUp="cuenta()">

Espero que os sea de utilidad ;)

CAMBIO DE MINIATURAS

Esto es una funcioncita un poco tonta pero que no la encontré por ningún sitio, el escenario es el siguiente, una imagen principal y unas miniaturas.


Lo que se desea es que al hacer click en la imagen inferior se cargue la imagen en la parte superior, el objetivo es poder ir recorriendo las imagenes.

<?php for($i=0;$i<$numImagenes;$i++){ ?>
<img class="imagenPeq" id="imagen<?php echo $i;?>" src="<?php echo $datosImagenes['url']?>" onclick="cambiarImagenPrincipal(this.id)"/>
<?php $datosImagenes=mysql_fetch_array($rsImagenes);}?>

La función cambiarImagenPrincipal es la siguiente:

function cambiarImagenPrincipal(id){
var imagenPrincipal=document.getElementById('AnuncioimagenPrincipal').src;
document.getElementById('AnuncioimagenPrincipal').src=document.getElementById(id).src;
document.getElementById(id).src=imagenPrincipal;
}

Esto no funciona en blogger ya que no permite codigo php, la finalidad de este codigo es para webs.

SELECCIONAR DISTINTOS ESTILOS

Cursando una asignatura me enseñaron algo muy util y querria compartirlo con vosotros, no va orientado a los que tienen blogger, blogger como todos sabemos tiene ciertas limitaciones y una de ellas es que no podemos alojar diferentes hojas de estilo, me imagino que debe de haber alguna alternativa que ciertamente ahora no se me ocurre.

Bueno lo que propongo es que los visitantes puedan cambiar el estilo de la pagina mediante un pequeño 'menu'. En general las buenas webs tienen definidos diferentes estilos, normalmente se crean uno de alto contraste para discapacitados visuales, otro de impresión y uno principal y alternativo. Firefox tiene la opción de seleccionar el estilo desde Ver->Estilo de pagina, el problema venia como siempre con IE que no poseia esta opción, por tanto los diseñadores tenian que crear una alternativa para que todo el mundo pudiera seleccionar los distintos estilos. Debo resaltar que en la última versión (8.0) de IE si que la incorpora pero como siempre tenemos que diseñar para todos y desgraciadamente aún hay mucha gente con versiones antiguas de IE.

Por ejemplo en nuestra web tenemos los links a las distintas hojas de estilo de la siguiente forma:

<link rel="stylesheet" type="text/css" href="Principal.css" title="Predeterminado" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="Secundario.css" media="screen"
title="Secundario" />
<link rel="stylesheet" type="text/css" href="print.css" title="Impresion" />

Tenemos 3 estilos resaltados en negrita.

Ahora definiremos un par de enlaces en los que daremos la opción de simplemente haciendo click encima cambiará el estilo de nuestra pagina:

<p><b>Elige tu estilo</b></p><br />
<a href="Javascript:estilo('Predeterminado')">Principal</a><br /><br />
<a href="Javascript:estilo('Secundario')">Secundario</a>

Llegado a este punto tan solo tendremos que insertar nuestra función Javascript que permitirá cambiar de un estilo a otro.

function estilo(titulo) {//Para cambiar el estilo.

var arrayLink = document.getElementsByTagName("link");
for(var i = 0; i < arrayLink.length; i++) {
// Sólo aquellas etiquetas link que hacen referencia a un estilo
// y que no sea para impresión
if(arrayLink[i].getAttribute("rel") != null &&
arrayLink[i].getAttribute("rel").indexOf("stylesheet") != -1 &&
arrayLink[i].getAttribute("media") != "print") {
// Si tiene título es un estilo preferido o alternativo,
// si no tiene título es un estilo
// predeterminado y siempre tiene que utilizarse
if(arrayLink[i].getAttribute("title") != null &&
arrayLink[i].getAttribute("title").length > 0) {
if(arrayLink[i].getAttribute("title") == titulo)
arrayLink[i].disabled = false;
else
arrayLink[i].disabled = true;
}}}}

A esta función lo que le entra es el nombre del estilo seleccionado y busca dentro de las etiquetas link, cuando la encuentra lo activa poniendolo a true. Cuidado con el disabled, disabled=true es que está deshabilitado!!.


Ebook

VALIDAR RADIO BUTTON CON JAVASCRIPT

Llevo unos dias trabajando con Javascript y me encontré con este pequeño problema, necesitaba validar el típico radio button con el sexo:


Es muy común en los formularios y el requisito que debe de cumplir es que se seleccione uno de los 2 generos, masculino o femenino. La forma con la que yo lo he validado es la siguiente:

//---Validar sexo Radio
var s="no";

if(document.f2.sexo[1].checked)
alert("Marcado");
for ( var i = 0; i < document.f2.sexo.length; i++ )
{
if ( document.f2.sexo[i].checked ){
alert("Entra");

s= "si";
break;
}
}
if ( s == "no" ){
alert( "Debe seleccionar hombre o mujer" ) ;
}
//---Fin validar sexo.

Este es el código que funciona correctamente, como notas deberéis saber que f2 se corresponde con el nombre del formulario y sexo es el nombre del radio button, para que lo veáis mas claramente, os muestro como definí el radio button.

<b>Sexo:</b>
<input type="radio" name="sexo" value="hombre">Masculino
<input type="radio" name="sexo" value="mujer">Femenino<br />


Bueno espero que os sirva a aquellos que tengais que validar formularios.