var test = new Element("div", {"id":"text"});

a la forma más lenta:

  var test = new Element("div");
  test.setAttribute("id", "text");

y ya funcionará…

Podéis descargaros el código de aquí

El html:

<div id="fondo_pagina"><img id="imagen_fondo_pagina" title="Imagen ejemplo" src="foto.jpg" alt="Imagen ejemplo" /></div>

Nada que comentar, una capa al primer nivel del body y la imagen dentro, ambos con el id informado para poder hacer referencia desde el javascript.

El CSS:

body,html {padding:0px;margin:0px;}
#fondo_pagina img {position:fixed;top:0px;left:0px;bottom:0px;right:0px;z-index:-1;overflow:hidden;}

Posicionamos la imagen con el tipo fixed en la posición inicial arriba a la izquierda ocupando el máximo del navegador. Finalmente vemos el código javascript que será el mayor responsable de todo:

window.addEvent('load', function() {
	window.fireEvent('resize');
})
window.addEvent('resize', function() {
	var espacio_navegador_vertical = $(document.body).getSize().y;
	var espacio_navegador_horizontal = $(document.body).getSize().x
	var anchura_imagen = $("imagen_fondo_pagina").getSize().x;
	var altura_imagen = $("imagen_fondo_pagina").getSize().y;
 
	// Resize de foto de fondo y/o cambio de aspect ratio
	if (espacio_navegador_horizontal > anchura_imagen) {
		$("imagen_fondo_pagina").setStyles({'width' : '100%', 'height' : 'auto', 'left':0});
	}
	if (espacio_navegador_vertical > altura_imagen) {
		$("imagen_fondo_pagina").setStyles({'width' : 'auto', 'height' : '100%','top':0});
	}
 
	// Refrescamos los tamaños de la imagen
	anchura_imagen = $("imagen_fondo_pagina").getSize().x;
	altura_imagen = $("imagen_fondo_pagina").getSize().y;
 
	// Centrado de imagen vertical
	$("imagen_fondo_pagina").setStyle('top', -((altura_imagen-espacio_navegador_vertical)/2));
 
	// Centrado de imagen horizontal
	$("imagen_fondo_pagina").setStyle('left', -((anchura_imagen-espacio_navegador_horizontal)/2));
});

Hemos incluido todo el código al controlar el evento de redimensionado de la pàgina, para cambiar el ratio de la imagen de fondo cuando el usuario redimensione el navegador. Para ser llamado al cargar la página, sólo tenemos que disparar el evento de redimensionado para que se se procese todo.

El funcionamiento del algoritmo es sencillo, primero comprobamos si el ancho de la pantalla es mayor que el ancho de la imagen. Si es así, redimensionamos la imagen para que sea tan ancha como la pantalla. Entonces pueden pasar dos cosas: que la imagen sea suficientemente alta para cubrir todo el alto del navegador o que no lo sea. Si no lo es, entonces ajustamos la imagen a la máxima altura del navegador (el ancho nos lo cubrirá seguro).

Después, lo único que nos queda por hacer es centrar la imagen en el navegador para que siempre se vea la parte central de la misma y no la parte superior izquierda.

Os podéis descargar el ejemplo aquí

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

$$(".maxlines").each(function(element) {
    var numLines = element.getProperty("rel").substring(element.getProperty("rel").indexOf('[')+1,element.getProperty("rel").indexOf(']'));
    var htmlCode = $(element).get('html');
    // determinamos altura una linea
    $(element).set('html', '-');
 
    var oneLineHeight = element.getStyle('height').toInt();
    element.set('html', htmlCode);
    // Si tenemos más lineas que las permitidas
    if (element.getStyle('height').toInt() / oneLineHeight > numLines) {
 
        point1 = 0;
        point2 = Math.round(htmlCode.length/2);
        point3 = htmlCode.length;
 
        var i = 0;
        // Recortamos texto hasta que coja
        do{
            var newHtml = htmlCode.substring(0, point2) + '...';
            element.set('html', newHtml);
            if((element.getStyle('height').toInt())/oneLineHeight > numLines){
                point3 = point2;
            }else{
                point1 = point2;
            }
 
            point2 = Math.round((point3-point1)/2)+point1;
 
        }while ((point3-point1)>1);
 
        if((element.getStyle('height').toInt())/oneLineHeight > numLines){
            element.set('html', htmlCode.substring(0, point3-1) + '...');
        }
 
    }
});

y en el html lo debemos usar así:

1
2
3
4
5

<div class="maxlines">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

la capa del texto debe incluir el class=”maxlines” y la propiedad rel=”maxLines[]” donde la cifra entre corchetes es el número de líneas que se tienen que mostrar.

El funcionamiento básico del script es el siguiente:

• Coloca en la capa un sólo carácter.
• Calcula la altura de esta capa.
• Usando el algoritmo de divide y vencerás vamos reduciendo a mitades la cadena para encontrar rápidamente por donde partir el texto.

y listos… se acaba de maquetar añadiendo puntos suspensivos y listos.

Todo esto funciona conjuntamente con la versión 1.2.2 de Mootools

1

if ($("elemento")) { alert("adelaaaaaaaanteee");  }

Pero si pasamos a jQuery, vemos que si lo hacemos así, la expresión siempre devolverá cierto. Ya que la función $(“”) en jQuery siempre devuelve un array de elementos. Sabiendo esto, lo que tenemos que comprobar para saber si un elemento existe, es comprobar la longitud del array que nos devuelve:

1

if ($("elemento").length > 0) { alert("adelaaaaaanteee"); }

Ya puestos, en dojo tendríamos que hacer esto:

1

if (dojo.byId('elemento'))  { alert("adelaaaaaanteee"); }

Uno de ellos son las vistas parciales (PartialView) que permiten separar una parte de la presentación y aislarlas del contexto. Esto nos permite reutilizar una porción de html y definir un contexto concreto para cada llamada.

El contexto es otro mecanismo que también nos permite ejecutar un código discriminando la salida. El siguiente ejemplo utiliza AjaxContext, un helper que hereda de ContextSwitch y que se especializa en llamadas Ajax.

Para empezar, tendremos que inicializar el contexto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class ControladorController extends Zeb_Controller_Action{
 
  public function init(){
    $ajaxContext = $this -> _helper -> getHelper('AjaxContext');
    $ajaxContext -> addActionContext('index','html')
                 -> initContext();
    parent::init();
  }
 
  public function indexAction(){
    ...
  }
 
}

addActionContext() nos permite añadir un nuevo contexto a un action (en este caso index). El primer parámetro es el nombre del action y el segundo el tipo de contexto. initContext() inicializa el contexto.

Sólo con estas lineas ya habremos definido e inicializado un nuevo contexto. Toda las llamadas al action index se trataran de la forma habitual, excepto aquellas que cambien de contexto. ¿Y cómo cambiamos de contexto? El siguiente ejemplo de código JavaScript utiliza Mootools para realizar una llamada Ajax activando el contexto:

1
2
3
4
5
6

...
var myRequest = new Request.HTML({
  url : requestUrl,
  update : 'content-div'
}).get({'format':'html'});
...

Donde requestUrl será la url de nuestro action (Controlador – index) y content-div la capa que se actualizará con el resultado de la llamada. El parámetro format es el que activará el cambio de contexto en nuestro action.

Al realizar esta llamada nuestro action ejecutará el código e irá a buscar una view con el formato de nombre /[controlador]/[action].ajax.phtml en lugar del habitual /[controlador]/[action].phtml. Además desactivará los layouts por defecto, siendo la situación ideal para una llamada de este tipo.

Ya está todo preparado. A partir de ahora las llamadas a /controlador/index se gestionarán como siempre, pero cuando realicemos una llamada desde Ajax podremos mostrar sólo una vista parcial. Esta solución es perfecta para mostrar una ficha: al realizar la llamada /controlador/index mostramos la ficha con cabecera, menú, pie, etc.. y al llamar por Ajax cambiamos de vista y sólo mostramos el contenido del elemento para incluirlo en otra vista.

Unas consideraciones finales:

• AjaxContext añade un tercer contexto html a los dos (json y xml) ofrecidos por ContextSwitch, aunque podemos crear nuestros propios contextos.
• Una llamada con el parámetro format no cambiará al contexto AjaxContext si no se ha realizado mediante XmlHttpRequest (que es lo que nos interesa)
• Zend proporciona una serie de métodos para afinar nuestro código y que nos permitirán añadir headers, serializar respuestas Json, activar layouts, etc… en función del contexto