Archive for the 'javascript' Category

Activado automático de control activex en Internet Explorer (IE ACA)

Hace un tiempo la gente de Microsoft decidio que para usar un control flash (hablando con propiedad serían los elementos APPLET, EMBED y OBJECT) en internet explorer primero habia que activarlo, se mostraba un mensaje “Click to activate and use this control” (en inglés) y “Haga click para activar y usar este control” (en castellano) tal como lo muestran estas imagenes:

Click to activate and use this control Haga click para activar y usar este control

Según Microsoft sacarian en Abril del 2008 un parche para no hacer este click. Por ahora nos dan un preview (para ir probando las aplicaciones), si descargas e instalas este parche de microsoft ya no será necesario que actives un control flash antes de usarlo.

Descargar el parche:

http://support.microsoft.com/kb/945007

Información acerca del componente ActiveX:

http://msdn2.microsoft.com/en-us/bb969055.aspx

Aunque algunos de nosotros ya sabiamos que usando javascript podiamos esquivar esta previa activación del control, de la siguientes formas:

Usando document.write:


var obHTML = '<object ...>' +
  '<param name="URL" value="example.mpeg">'+
  '<embed src="example.mpeg" ...>'+
  '<\/object>';
//the next line needs to be in an external file
document.write(obHTML);

Usando innerHTML


var obHTML = '<object ...>' +
  '<param name="URL" value="example.mpeg">'+
  '<embed src="example.mpeg" ...>'+
  '<\/object>';
//the next line needs to be in an external file
document.getElementById('containobj').innerHTML = obHTML;

Usando DOM


var newOb = document.createElement('object');
//the next line needs to be in an external file
document.getElementById('containobj').appendChild(newOb);
newOb.width = '100';
newOb.height = '100';
newOb.URL = 'example.mpeg';

También habia código de software propietario como Dreamweaver (antes Macromedia ahora Adobe). Insertaba una JS en tú página web:


<script src="AC_RunActiveContent.js" language="javascript"></script>

y luego insertaba las siguientes lineas donde querias insertar el objeto flash:


<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js");
} else {
AC_FL_RunContent(
'codebase', 'https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width', '200',
'height', '200',
'src', 'yourswffile',
'quality', 'high',
'pluginspage', 'https://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'false',
'scale', 'noscale',
'wmode', 'window',
'devicefont', 'false',
'id', 'flash-animations',
'bgcolor', '#eeeeee',
'name', 'yourswffile',
'menu', 'false',
'allowScriptAccess','sameDomain',
'movie', 'yourswffile',
'salign', ''
);
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="200" height="200" id="flash-animations" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flash-animations.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#eeeeee" />
<embed src="flash-animations.swf" loop="false" menu="false" quality="high" bgcolor="#eeeeee" width="200" height="200" name="flash-animations" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>

Descargar ejemplo y archivos javascript de adobe (macromedia):
http://download.macromedia.com/pub/developer/activecontent_samples.zip

Información de Adobe:
http://www.adobe.com/devnet/activecontent/articles/devletter.html

Información de microsoft:
http://msdn2.microsoft.com/en-us/library/ms537508.aspx

Post de IEBlog:
http://blogs.msdn.com/ie/archive/2007/11/08/
ie-automatic-component-activation-changes-to-ie-activex-update.aspx
click_to_activate_calendar

Información de adobe:
http://kb.adobe.com/selfservice/viewContent.do?externalId=7c29e252&sliceId=1

Links de referencia:
http://www.amarasoftware.com/flash-problem.htm
http://www.howtocreate.co.uk/noclicktoactivate.html

Tal parece que algunos han tenido problemas con el javascript del dreamweaver y usan como alternativa el:

SWFObject: Javascript Flash Player detection and embed script

Incluir la cabecera del JS


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

Poner un div en caso no se pueda visualizar contenido en flash


<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>

y luego utilizar la función javascript para mostrar flash:


<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
   so.write("flashcontent");
</script>

Descargar:
http://blog.deconcept.com/swfobject/swfobject.zip

Página oficial:
http://blog.deconcept.com/swfobject/

JSLint - Javascript - Operadores de comparación - igual y no es igual

JSLint es una herramienta escrita por Douglas Crockford para validar nuestro código javascript, nos muestra advertencias, errores y mensajes de como reemplazar una linea de codigo por otro más robusto, es el caso de los operadores de comparación (en inglés: comparison operators) también llamados operadores condicionales, el caso concreto de “es igual” y de “no es igual”.

Para dar un poco más de información de JSLint se debe decir que también fue incluida en la pestaña “Tools” de la extensión YSlow (extensión para firebug).

Bueno sigamos con los operadores de comparación, JSLint nos recomienda que cuando comparemos una variable con un valor booleano ó null ó undefined debemos hacerlo con los operadores de “igualdad absoluta” y la de “no igualdad absoluta”, en los dos comparadores anteriores se compara tanto en valor como en tipo, mientras que en los comparadores “es igual” y “no es igual” solo se compara por valor, para demostrarlo hagase un pequeño ejemplo:


var x = 5;
var y = "5";

alert( x == y );        // true
alert( x === y );       // false

Esto sucede debido a que en la primera comparación verifica que tienen el mismo valor, y en la segunda comparación verifica ademas de su valor el tipo.Es por este motivo que JSLint nos recomienda que debemos usar la comparación absoluta, cuando deseamos que un valor booleano se corresponda con lo que nosotros esperamos de la comparación. Otros ejemplos más avanzados serian:


var x = undefined;

alert( x == null );        // true
alert( x === null );       // false

Por esta razón dependendiendo del resultado de esta condición que necesitemos nos convendrá segun que operador utilizar. Por supuesto apostando por las buenas practicas se recomienda, que al comparar con boolenaos, null y undefined se utilice la comparación absoluta, sobre todo cuando tenemos un “else” que depende de la condicion del “if” es decir:


if ( x === true)
if ( x === false)
if ( x === "" )
if ( x === null )
if ( x === undefined )

if ( x !== true)
if ( x !== false)
if ( x !== "" )
if ( x !== null )
if ( x !== undefined )

Pagina Oficial de JSLint:
http://www.jslint.com/Página de Douglas Crockford:
http://www.crockford.com/

Scripteka - extensiones javascript basadas en Prototype y Script.aculo.us

Creada por Juriy Zaytsev y Maxim Chernyak. En esta página encontraras un extenso listado de extensiones basadas en las librerías Prototype y Script.aculo.us, ordenadas alfabeticamente (a la izquierda de la pantalla) ó también agrupadas por las más votadas “Popular” y las últimas “Latest” (a la derecha de la pantalla).

Scripteka

Página Oficial:
http://scripteka.com/

AccDataGrid - Una librería para paginar registros en tablas con Ajax

Albert Coronado Calzada ha desarrollado un proyecto llamado AccDataGrid, que nos servirá para paginar registros mostrados en tablas html utilizando Ajax, pero claro habra que resaltar que la tecnologia de servidor que él utiliza es php, habria que desarrollar nuestra página que devuelve los datos según la tecnologia a utilizar: jsp, asp, etc. Pero esta claro que la forma en que devolvemos los datos debe tener la misma sintaxis que la función de javascript necesita para pintar los datos en pantalla. Es decir de esta manera:


xxxxyyyy = {
	head: [ "Column0","Column1","Column2","Column3","Column4" ],
	dades: [
		    [" Row 0 Col 0 ",
                     " Row 0 Col 1 ",
                     " Row 0 Col 2 ",
                     " Row 0 Col 3 ",
                     " Row 0 Col 4 "],
		    [" Row 1 Col 0 ",
                     " Row 1 Col 1 ",
                     " Row 1 Col 2 ",
                     " Row 1 Col 3 ",
                     " Row 1 Col 4 "]
		],
	pageCount: 1
}

Donde head contiene los nombres de las columnas, dades sera la matriz multidimensional de registros devueltos del servidor. Una vista de como se ve el ejemplo:

accTable

Pero se pueden modificar los estilos y darle una mejor presentación, lo importante es que el motor de paginación ya esta hecho, ahora solo queda un poco de diseño y listo.

Esta librería es muy interesante a la par que recomendable.

Página Oficial:
http://acctable.lostsys.com/

Visto en:
http://www.webintenta.com/accdatagrid-una-libreria-para-paginar-tablas.html

Calendar - date picker - campo fecha - Una clase javascript para Mootools

Esta clase nos permite tener un campo fecha en nuestro formulario, con mucho estilo, fácil de personalizar, sobre todo resaltar que es accesible y no intrusivo. Es a su vez una compilación de date-pickers hechos por el autor Aeron Glemann y completamente re-escrito especialmente para Mootools.

calendar2.png

Según nos cuenta su autor ha sido probado satisfactoriamente en Safari, Firefox, Opera, Internet Explorer. La clase requiere Mootools 1.1 con Fx.Style, Element y Window. Y si se quiere habilitar el efecto de arrastrar y soltar (Drag&Drop), deberiamos añadir el componente Drag.

Página Oficial:
http://www.electricprism.com/aeron/calendar/

Visto en:
http://www.webappers.com/2007/11/22/
impressive-and-beautiful-css-styling-mootools-calendar/

Entradas siguientes »