Mostrando entradas con la etiqueta js. Mostrar todas las entradas
Mostrando entradas con la etiqueta js. Mostrar todas las entradas

miércoles, 21 de marzo de 2007

Confirmación de cancelar usando js

Problema:
Quiero que al pulsar un botón que en mi aplicación sirve para cancelar, me salga un popup para confirmar que lo deseo hacer.

Solución:
1.-Agrego una función javascript

/**
* Función para confirmar la cancelación de trámite
*/
function confirmCancel()
{
var message = "Ha seleccionado cancelar el proceso de solicitud que esta realizando.\n"
+ "?Desea cancelar realmente el proceso de solicitud?";
if (window.confirm(message))
{
document.forms[0].submit();
}
else
{
return (false);
}
}


2.-Hago la llamada de la función en mi botón (en mi caso es un html:submit, pero podría hacerse en el input de tipo submit normal y corriente), en el onclick: (quitar los espacios luego del <)



< html:submit property="buttons[14]"
altKey="boton.cancelar"
titleKey="boton.cancelar"
onclick="return confirmCancel();">

< /html:submit>

Poner dd/mm/aaaa en un text con javascript

Problema: Quiero colocar en un input para poner la fecha de nacimiento lo siguiente: dd/mm/aaaa, y que cuando el usuario escriba, este texto desaparezca.

Solución:
1.-En un fichero de funciones js coloco las siguientes:

//funcion para borrar el valor del campo de fecha
function clearFecha(){
if(document.getElementById("dateOfBirth").value=="dd/mm/aaaa"){
document.getElementById("dateOfBirth").value = "";
document.getElementById("dateOfBirth").style.color = "#000";
}
}

//funcion para cargar el valor del campo fecha como "dd/mm/aaaa", se coloca directamente en el texto con el identificador 'fechaNacimiento'
function loadFecha(){
if((document.getElementById("fechaNacimiento").value=="")||(document.getElementById("fechaNacimiento").value==null)||(document.getElementById("fechaNacimiento").value=="dd/mm/aaaa")){
document.getElementById("fechaNacimiento").value = "dd/mm/aaaa";
document.getElementById("fechaNacimiento").style.color = "#CCC";
}
}


2.-Hago las llamadas desde la página: (Quitar los espacios luego de '<')

< html:text name="miForm" onfocus="clearFecha();" styleId="fechaNacimiento" property="fechaNacimiento" size="10" maxlength="10" readonly="false"/>
< span onclick="clearFecha();">


3.-Recordar hacer el include en la jsp, algo como: (Quitar los espacios luego de '<')

< script src="scripts/empleo.js" type="text/javascript">< /script>

jueves, 22 de febrero de 2007

Altura mínima y dinámica de divs de css usando js

Muchas veces tenemos, por ejemplo, un menú lateral con un determinado fondo y queremos que cuando el contenido central vaya creciendo pues el color del menú se extienda hasta abajo.

Esto se logra con un js que me encontré, para llamarlo basta citarlo con la ruta correspondiente (quitar los espacios después del '<'):

< script language="JavaScript" src="./column.js">< /script>


...ahora sí: la función js:


// by Paul@YellowPencil.com and Scott@YellowPencil.com
// feel free to delete all comments except for the above credit

function setTall() {
if (document.getElementById) {
// the divs array contains references to each column's div element.
// Replace 'center' 'right' and 'left' with your own.
// Or remove the last one entirely if you've got 2 columns. Or add another if you've got 4!
var divs = new Array(document.getElementById('contenido'), document.getElementById('enlaces'), document.getElementById('menu'));

// Let's determine the maximum height out of all columns specified
var maxHeight = 0;
for (var i = 0; i < divs.length; i++) {
if (divs[i].offsetHeight > maxHeight) maxHeight = divs[i].offsetHeight;

}

// Let's set all columns to that maximum height
for (var i = 0; i < divs.length; i++) {
divs[i].style.height = maxHeight + 'px';

// Now, if the browser's in standards-compliant mode, the height property
// sets the height excluding padding, so we figure the padding out by subtracting the
// old maxHeight from the new offsetHeight, and compensate! So it works in Safari AND in IE 5.x
if (divs[i].offsetHeight > maxHeight) {
divs[i].style.height = (maxHeight - (divs[i].offsetHeight - maxHeight)) + 'px';
}
}
}
}

window.onload = function() {
setTall();
}

window.onresize = function() {
setTall();
}

viernes, 16 de febrero de 2007

Abrir automáticamente una impresión de una página html

Muchas veces al abrir una ventana queremos que se lance la ventana de impresión automáticamente, esto se consigue con un iframe oculto (accesibilidad=0).

1.-Función js para detectar el tipo de navegador, porque la impresión se lanzará de manera diferente (hace uso de la función para detectar el navegador que tengo en otro post):

/*Función que imprime el frame oculto*/
function imprimoFrame(){
var tipo = tipoNavegador();
if (tipo==1){
window.frames["popUpImpresion"].focus();
window.frames["popUpImpresion"].print();
}else{
if (tipo==2){
document.popUpImpresion.focus();
document.popUpImpresion.print();
}else{
if (tipo==3){
document.popUpImpresion.focus();
document.popUpImpresion.print();

}
}
}
}

2.-Coloco en mi página el iframe: (quitar el espacio luego del '<')

< iframe class="marcoOculto" src="/aplicacion/action/confirmPopUp" name="popUpImpresion" id="popUpImpresion" onload="imprimoFrame()">
Su navegador no soporta IFrame
< /iframe>


3.-La class marcoOculto de css tiene lo siguiente:

/*oculta un iframe, en realidad pone ancho y alto a 0*/
iframe.marcoOculto{
border:none;
width:0em;
height:0em;
}


4.-El action /aplicacion/action/confirmPopUp lo que hace es llevar a la tile aplicacion.respuestaHTML que en realidad es la página html a imprimir. En realidad, se podía haber colocado la página directamente, pero esta forma es más elegante.



detectando navegador con js

/*Función que detecta el tipo de navegador: firefox=1, ie7=2, ie6=3.*/

function tipoNavegador(){
var version=0;
if (window.XMLHttpRequest) {
if(document.all){
//IE7
version=2;
}else{
//mozilla, safari, opera 9, etc
version=1;
}
} else {
// IE6, o viejos navegadores
version=3;
}
return version;
}