Jun
18
2010
Estoy currandome una web y me ha surgido un problemilla de diseño. El problema es el siguiente: la pagina está dividida mediante div en dos: el div Left y el div Right. En el Left tengo la navegacion de la web y en el Right el contenido. Pues bien, yo quería que hubiese una línea que separase ambos div, así que, mediante CSS le he puesto al div Left lo siguiente:
1
| border-right: 1px solid black; |
Y esto funciona siempre y cuando la height de la Left sea mayor que la de la Right, pero si la de la Right es mayor la línea solo abarca la altura de la Left. Así que lo que he hecho es modificar esta height mediante javascript para que en caso de que la Left sea menor, tenga el tamaño de la Right:
1
2
3
4
5
6
| var heightR = document.getElementById('Right').offsetHeight;
var heightL = document.getElementById('Left').offsetHeight;
if(heightL<heightR)
{
document.getElementById("Left").style.height=heightR;
} |
Como podeis ver primero cojo el valor de la Height de ambos div. Para conocer este valor utilizo lo siguiente:
element.offsetHeight
Y luego ya con un simple if compruebo si es menor, y en caso de serlo le doy el valor de la Right y todos tan contentos ;p
Jul
28
2009
En una de las page de la aplicación pal Nafarroa Oinez, tenía que ver que checkboxes estaban checkeadas y cuales no. Mirando el como hacerlo en JavaScript, encontré la forma de recorrer todos los elementos que hay en el form de la page. Así que lo que hago es recorrérmelos, pregunto si el tipo es checkbox y si lo es ya hago lo que tenga que hacer:
1
2
3
4
5
6
7
8
9
10
11
| //formu es el nombre del form de la page
function RecorrerAreak()
{
for(var i=0;i<document.formu.elements.length;i++)
{
if(document.formu.elements[i].type=="checkbox")
{
//Lo que haya que hacer
}
}
} |
Jul
20
2009
Seguimos currando con el proyecto web pal Nafarroa Oinez 09 (a las mañanikas, que a comer nos vamos a la piscina), y me he encontrado con esta txorradika a solucionar. En la page para modificar los datos de los voluntarios y las voluntarias del Oinez, hay una serie de combos, y claro, debe aparecer seleccionada la opcion que se ha guardado anteriormente en la BBDD, para lo cual, me he creado esta función de javascript:
1
2
3
4
5
6
7
8
| function AukeratuZuzena(Izena,Id)
{
for (var i=0;i<document.getElementById(Izena).length;i++)
{
if(document.getElementById(Izena).options[i].value==Id)
{document.getElementById(Izena).options[i].selected=true;}
}
} |
Como podeis ver, la función tiene dos parámetros: Izena, donde le paso el nombre de la combo, e Id que es lo que queremos buscar en la value de las option. Bueno que ya es tarde y mañana hemos quedado prontico pa seguir currando.
May
26
2009
Ya os comente que estamos currando una page pal Nafarroa Oinez 09 que gestione ciertas historias. Como no podía ser de otro modo esta llenito de formularios. Como semos programadores y no diseñadores, en esto de dejarlos bonitos y chulos, como que no andamos muy finos, pero bueno, algo ya hacemos. Pues bien, de cara a ordenar un poco las textbox diferentes del formulario he utilizado lo siguiente:
1
2
3
4
5
| <fieldset>
<legend id="MiTexto">Codigo Familia:</legend>
<label>Familia:</label>
<!-- Aquí irian las cajas de texto -->
</fieldset> |
Pues bien, por motivos que no vienen a cuento, tengo que cambiar el contenido del texto que esta entre las etiquetas legend. Y para ello esta la propiedad innerHTML. La biblia de JavaScript dice lo siguiente: “Establece o retrae el contenido HTML, (todo, no solamente textos) que hay entre las etiquetas de inicio y final del elemento“.
La función de JavaScript sería el siguiente:
1
2
3
4
5
6
7
| function PersonaGrupo(Cual)
{
if(Cual=="Grupo")
{document.getElementById("MiTexto").innerHTML = "Codigo Grupo";}
else
{document.getElementById("MiTexto").innerHTML = "Codigo Familia";}
} |
Hay controversia sobre el uso o no de innerHTML. Mi opinión, cada cosa en su justa medida.
May
06
2009
Estamos haciendo una page pal Nafarroa Oinez para controlar la distribución de los curros en tecnología WAMP. Pues bien, a la izquierda tenemos una sidebar para acceder a los diferentes formularios, los cuales estan agrupados por módulos. Como son un ciento y la madre, hemos decidido que esten ocultos y sólo aparezcan cuando el usuario pinche en el nombre del módulo, para lo cual hemos creado una función en javascript para controlar esto.
Primero en HTML hemos puesto lo siguiente:
1
2
3
4
5
6
7
8
| <h4 onclick="MostrarOcultar('OinezEguna');">Oinez Eguna</h4>
<ul id="OinezEguna" style="display:none;">
<li>Guneak
<ul>
<li><a href="" title="Berria">Berria</a></li>
<li><a href="" title="Aldatu/Ezabatu">Aldatu/Ezabatu</a></li>
</ul>
</li> |
Y esta es la función de javascript a la que llama el método onclick:
1
2
3
4
5
6
7
| function MostrarOcultar(Cual)
{
if(document.getElementById(Cual).style.display!="none")
{document.getElementById(Cual).style.display="none";}
else
{document.getElementById(Cual).style.display="block";}
} |
Mar
11
2009
Creo que ya os conté que estaba haciendo la page de la tienda de la moza aka opolin. Estoy currandome ahora la parte de la administración de la misma. La estoy haciendo en PHP con MySQL, pero… ¿que sería una page sin su ración de javascript? Pues bien, necesitaba validar que una entrada en una input de tipo text sea un numérico entero, y validarlo en la parte cliente, y el resultado es la siguiente función de javascript:
1
2
3
4
5
6
7
8
| function EsNumericoEntero(caja)
{
var er = /^[0-9]+$/;
if(caja.value.match(er))
{return true;}
else
{return false;}
} |
La función .match() devuelve null si el contenido de la caja no se ajusta a la expresion regular. En nuestro caso, si no es numérico te casca un null como una casa.
Espero que os sirva. Os seguiré comentado las cosicas que me estoy encontrando de PHP etc… jiji es divertido.