Tag Archives: javascript

Fechas en javascript

4 Abr

Esta vez escribo sobre un problema que tuve con Javascript y… Mozilla! (Sí, no fue con Internet Explorer!).

Si bien parece ser que tanto IE como Chrome reconocen esta expresión javascript como una fecha:

fecha_fin = new Date (“mm-dd-yyyy’); (Ej. fecha_fin = new Date (“01-22-2000′))

No ocurre lo mismo con Mozilla. Entonces, si tenemos que evaluar una fecha (para por ejemplo compararla con otra), una buena forma es transformar esa fecha a un formato “mm/dd/yyyy hh:mm:ss” . Para eso, si teníamos una fecha en formato “mm-dd-yyyy”, podemos hacer algo así:

fecha = “04-22-2000”;
re = new RegExp(“-“, “g”); // Creamos expresión regular para remplazar “-” por “/”
fecha_barra = fecha.replace(re,”/”); // reemplazamos
fecha_convertida = new Date fecha_barra +” 00:00:00″);
Bastante complicadito la verdad para algo que debería ser tan sencillo! Pero bueno, haciéndolo así, funciona en todos lados :D.

Anuncios

Algunos trucos para IE

3 Oct

Internet Explorer no cesa de sorprenderme. Los últimos dos temas que tuve, fueron con la función javascript addEvent, y con la función .innerHTML.

Respecto a addEvent, algunas versiones de IE revientan como una chinche cuando se carga la página, sin dar mayores explicaciones. La solución entonces, está en cambiar addEvent por attachEvent. No tengo muy clara la diferencia, peo con attachEvent IE se queda contento.

El otro tema fue al querer usar en una función javascript innerHTML para cargar las opciones de un select. Explorer corta el primer option. Parece que es un bug que está abierto desde hace unos 7 años. La solución, que encontré por acá:

http://elmicoxcodes.blogspot.com/2007/02/innerhtml-and-select-option-in-ie.html

Consiste en lugar de usar innerHTML, usar la función de más abajo. De manera que si antes teníamos:

document.getElementById(“my_select”).innerHTML = “<option value=’1′>not</option> <option value=’2′>work</option>”;

Ahora tendríamos:

var inner = “<option value=’1′>Now</option> <option value=’2′>work</option>”;
select_innerHTML(document.getElementById(“my_select”),inner);”


La función maravillosa:

function select_innerHTML(objeto,innerHTML){
 /******
 * select_innerHTML - corrige o bug do InnerHTML em selects no IE
 * Veja o problema em: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228
 * Versão: 2.1 - 04/09/2007
 * Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
 * @objeto(tipo HTMLobject): o select a ser alterado
 * @innerHTML(tipo string): o novo valor do innerHTML
 *******/
 objeto.innerHTML = ""
 var selTemp = document.createElement("micoxselect")
 var opt;
 selTemp.id="micoxselect1"
 document.body.appendChild(selTemp)
 selTemp = document.getElementById("micoxselect1")
 selTemp.style.display="none"
 if(innerHTML.toLowerCase().indexOf("<option")<0){//se não é option eu converto
 innerHTML = "<option>" + innerHTML + "</option>"
 }
 innerHTML = innerHTML.toLowerCase().replace(/<option/g,"<span").replace(/<\/option/g,"</span")
 selTemp.innerHTML = innerHTML
for(var i=0;i<selTemp.childNodes.length;i++){
 var spantemp = selTemp.childNodes[i];
if(spantemp.tagName){
 opt = document.createElement("OPTION")
if(document.all){ //IE
 objeto.add(opt)
 }else{
 objeto.appendChild(opt)
 }
//getting attributes
 for(var j=0; j<spantemp.attributes.length ; j++){
 var attrName = spantemp.attributes[j].nodeName;
 var attrVal = spantemp.attributes[j].nodeValue;
 if(attrVal){
 try{
 opt.setAttribute(attrName,attrVal);
 opt.setAttributeNode(spantemp.attributes[j].cloneNode(true));
 }catch(e){}
 }
 }
 //getting styles
 if(spantemp.style){
 for(var y in spantemp.style){
 try{opt.style[y] = spantemp.style[y];}catch(e){}
 }
 }
 //value and text
 opt.value = spantemp.getAttribute("value")
 opt.text = spantemp.innerHTML
 //IE
 opt.selected = spantemp.getAttribute('selected');
 opt.className = spantemp.className;
 }
 }
 document.body.removeChild(selTemp)
 selTemp = null
 }

Modificar el tamaño de letra con javascript

19 Oct

Estaba tratando de agregarle a Joomla un componente para agrandar y achicar el tamaño de letra. Si bien hay varios, ninguno funcionaba correctamente. Encontré entonces un script que funciona super bien, y que funciona para cuando tenemos los tamaños de letra en px (que es lo que uso habitualmente).

El script es el siguiente:

var min=8;
var max=18;
function increaseFontSize() {

   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {

      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {

         var s = 12;
      }
      if(s!=max) {

         s += 1;
      }
      p[i].style.fontSize = s+"px"

   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {

      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {

         var s = 12;
      }
      if(s!=min) {

         s -= 1;
      }
      p[i].style.fontSize = s+"px"

   }
}
Y se usa, así:
<a href="javascript:decreaseFontSize();">-</a> 
<a href="javascript:increaseFontSize();">+</a>
(Tomado de: http://www.white-hat-web-design.co.uk/blog/controlling-font-size-with-javascript/)

Pasar Variable desde PHP a Javascript

24 Ene

Un tema y tip interesante: cómo pasar una variable en PHP a Javascript?

En mi caso, estamos armando un sistema multi-idioma, en el que tenemos un archivo de PHP que tiene una serie de constantes que son los textos para cada idioma. Tengo un archivo por idioma.

Lo que necesitaba hacer, es que un alert en Javascript tomara como mensaje una de esas constantes en PHP.

Para esto, lo que se hace es:

1. En el HTML de la página, se crea un input hidden, con el texto o la variable PHP que queremos pasarle a Javascript:

<input type=”hidden” name=”mensajeConfirmaBorrar” id=”mensajeConfirmaBorrar” value=”<?php echo _LISTADO_DOCUMENTOS_CONFIRMA_BORRAR; ?>” />

2. Luego en el script, simplemente se llama al value del hidden:

document.getElementById(“mensajeConfirmaBorrar”).value

(Solución tomada de: http://bytes.com/topic/php/answers/827223-passing-values-php-javascript )

Internet Explorer no puede abrir la página

3 Feb

Trabajando con un sitio en Joomla!, ocurría que funcionaba perfectamente en Mozilla, pero en IE 6, en algunas páginas, tiraba un error de que IE no podía abrir la página (y básicamente explotaba). Resulta ser que IE tiene un problema con el evento “domready”. (Hay una buena explicación en http://mootools.lighthouseapp.com/projects/2706/tickets/168-domready-event-and-ie). Para hacer el cuento corto, si hacemos que en vez de llamarse al evento domready, se llame al evento onload, se soluciona el problema.

(Sí, bueno, aparentemente eso hace que la página demore más en cargar o qué se yo, pero la cosa es que anda bien!)

En mi caso, sustituí en Joomla! en el archivo behaviour.php que está en \libraries\joomla\html\html la línea:

$tooltipInit = ‘        window.addEvent(\’domready\’, function(){ var JTooltips = new Tips($$(\”.$selector.’\’), ‘.$options.’); });’;

por:

$tooltipInit = ‘        window.addEvent(\’onload\’, function(){ var JTooltips = new Tips($$(\”.$selector.’\’), ‘.$options.’); });’;

(Es decir, cambié domready por onload).

🙂

Buscador dentro de una página

23 May

Este código está muy bueno. Salió de: http://www.dynamicdrive.com/dynamicindex11/findpage.htm Ahí se lo puede ver funcionando también. Nosotros lo usamos para Tarjeta Fútbol, en el buscador de Locales Adheridos.

Permite buscar dentro de una página web (igual a como si hicieras CTRL+F o CTRL+B). Lo mejor que tiene, es que funciona tanto en Mozilla como en IE.

<script>
<!– Hide from old browsers

/******************************************
* Find In Page Script — Submitted/revised by Alan Koontz (alankoontz@REMOVETHISyahoo.com)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* This notice must stay intact for use
******************************************/

//  revised by Alan Koontz — May 2003

var TRange = null;
var dupeRange = null;
var TestRange = null;
var win = null;
//  SELECTED BROWSER SNIFFER COMPONENTS DOCUMENTED AT
//  http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html

var nom = navigator.appName.toLowerCase();
var agt = navigator.userAgent.toLowerCase();
var is_major   = parseInt(navigator.appVersion);
var is_minor   = parseFloat(navigator.appVersion);
var is_ie      = (agt.indexOf(“msie”) != -1);
var is_ie4up   = (is_ie && (is_major >= 4));
var is_not_moz = (agt.indexOf(‘netscape’)!=-1)
var is_nav     = (nom.indexOf(‘netscape’)!=-1);
var is_nav4    = (is_nav && (is_major == 4));
var is_mac     = (agt.indexOf(“mac”)!=-1);
var is_gecko   = (agt.indexOf(‘gecko’) != -1);
var is_opera   = (agt.indexOf(“opera”) != -1);
//  GECKO REVISION

var is_rev=0
if (is_gecko) {
temp = agt.split(“rv:”)
is_rev = parseFloat(temp[1])
}
//  USE THE FOLLOWING VARIABLE TO CONFIGURE FRAMES TO SEARCH
//  (SELF OR CHILD FRAME)

//  If you want to search another frame, change from “self” to
//  the name of the target frame:
//  e.g., var frametosearch = ‘main’

//var frametosearch = ‘main’;
var frametosearch = self;
function search(whichform, whichframe) {

//  TEST FOR IE5 FOR MAC (NO DOCUMENTATION)

if (is_ie4up && is_mac) return;

//  TEST FOR NAV 6 (NO DOCUMENTATION)

if (is_gecko && (is_rev <1)) return;

//  TEST FOR Opera (NO DOCUMENTATION)

if (is_opera) return;

//  INITIALIZATIONS FOR FIND-IN-PAGE SEARCHES

if(whichform.findthis.value!=null && whichform.findthis.value!=”) {

       str = whichform.findthis.value;
       win = whichframe;
       var frameval=false;
       if(win!=self)
{

       frameval=true;  // this will enable Nav7 to search child frame
       win = parent.frames[whichframe];

}

   
}

else return;  //  i.e., no search string was entered

var strFound;

//  NAVIGATOR 4 SPECIFIC CODE

if(is_nav4 && (is_minor < 5)) {
  
  strFound=win.find(str); // case insensitive, forward search by default

//  There are 3 arguments available:
//  searchString: type string and it’s the item to be searched
//  caseSensitive: boolean — is search case sensitive?
//  backwards: boolean –should we also search backwards?
//  strFound=win.find(str, false, false) is the explicit
//  version of the above
//  The Mac version of Nav4 has wrapAround, but
//  cannot be specified in JS

 
        }

//  NAVIGATOR 7 and Mozilla rev 1+ SPECIFIC CODE (WILL NOT WORK WITH NAVIGATOR 6)

if (is_gecko && (is_rev >= 1)) {
  
    if(frameval!=false) win.focus(); // force search in specified child frame
    strFound=win.find(str, false, false, true, false, frameval, false);

//  The following statement enables reversion of focus
//  back to the search box after each search event
//  allowing the user to press the ENTER key instead
//  of clicking the search button to continue search.
//  Note: tends to be buggy in Mozilla as of 1.3.1
//  (see www.mozilla.org) so is excluded from users
//  of that browser.

    if (is_not_moz)  whichform.findthis.focus();

//  There are 7 arguments available:
//  searchString: type string and it’s the item to be searched
//  caseSensitive: boolean — is search case sensitive?
//  backwards: boolean –should we also search backwards?
//  wrapAround: boolean — should we wrap the search?
//  wholeWord: boolean: should we search only for whole words
//  searchInFrames: boolean — should we search in frames?
//  showDialog: boolean — should we show the Find Dialog?
}

 if (is_ie4up) {

  // EXPLORER-SPECIFIC CODE revised 5/21/03

  if (TRange!=null) {
  
   TestRange=win.document.body.createTextRange();

   if (dupeRange.inRange(TestRange)) {

   TRange.collapse(false);
   strFound=TRange.findText(str);
    if (strFound) {
        //the following line added by Mike and Susan Keenan, 7 June 2003
        win.document.body.scrollTop = win.document.body.scrollTop + TRange.offsetTop;
        TRange.select();
        }

   }
   else {

     TRange=win.document.body.createTextRange();
     TRange.collapse(false);
     strFound=TRange.findText(str);
     if (strFound) {
        //the following line added by Mike and Susan Keenan, 7 June 2003
        win.document.body.scrollTop = TRange.offsetTop;
        TRange.select();
        }
   }
  }
 
   if (TRange==null || strFound==0) {
   TRange=win.document.body.createTextRange();
   dupeRange = TRange.duplicate();
   strFound=TRange.findText(str);
    if (strFound) {
        //the following line added by Mike and Susan Keenan, 7 June 2003
        win.document.body.scrollTop = TRange.offsetTop;
        TRange.select();
        } 
   }
 }

 if (!strFound) alert (“String ‘”+str+”‘ not found!”) // string not found       
}
// –>
</script>

<!–  EXAMPLE FORM OF FIND-IN-PAGE SEARCH USING SUBMIT (ALLOWING ‘ENTER/RETURN’ KEY PRESS EVENT) –>
<form name=”form1″ onSubmit=”search(document.form1, frametosearch); return false”><input type=”text” name=”findthis” size=”15″ title=”Press ‘ALT s’ after clicking submit to repeatedly search page”> <input type=”submit” value=”Find in Page” ACCESSKEY=”s”></form>

 

Ventanas Pop-up

30 Abr

¿Cómo hacer una ventanita pop-up que tenga un determinado tamañano?

1. Se llama a la página pop-up como a cualquier otra página, teniendo en cuenta que va a ir a _blank (ejemplo: <a href=”mipopup.html” target=”_blank”>).

2. Se diagrama la ventana pop-up como una página cualquiera, teniendo en cuenta que en el body, vamos a usar una función javascript. De esta forma, el body en esa ventana sería de la forma: <body onLoad=”javascript:resizeTo(400,450)”> (En ese caso, la ventana pop-up va a tener un tamaño de 400×450)

 

A %d blogueros les gusta esto: