JMiur [E]

Hace ya un tiempo, Gem@ me envió un email, sugiriéndome que viera un efecto que habían implementado en la sidebar de una página web. Eran botones que se expandían y contraían pero al que se les había agregado un efecto de animación que hacía que esto se hiciera suavemente, pixel por pixel.

Después de tratar de entenderlo, me di por vencido porque estaba utilizando MooTools, una extensión escrita en Ajax y, por ahora, no era un tema en el cual quisiera involucrarme. Pero, el efecto era lindo ... una pena.

Buscando un poco, en Dynamic Drive encontré una página donde se mostraba un script llamado Animated Collapsible DIV que hacía más o menos lo mismo y cuya implementación es muy sencilla [descargar ]

El script funciona tanto con DIVs que tengan el atributo CSS height definido como con aquellos que no lo tengan y "recuerda" qué DIVs están expandidos y cuáles están contraídos así que, al volver a la página, vuelve a mostrarlos tal como los dejamos.

Dentro del mismo archivo hay tres diferentes funciones que pueden usarse y todas ellas permiten establecer la duración del efecto para cada bloque. El tiempo se define en forma absoluta, quiere decir que, no depende del tamaño del bloque lo que hace muy agradable.

Para implementarlo, debemos descargar el archivo animatedcollapse.js y alojarlo en un servidor propio. Luego, insertamos el siguiente código en la plantilla de Blogger, justo antes de la etiqueta <:/HEAD>:
<script type="text/javascript" src="URL_animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
El código para implementar un bloque expandible es el siguiente:
<a href="javascript:nombreVAR.slideit()" style=" [estilo del botón] "></a>
<div id="nombreID" style="width:100%;">
<div style=" [estilo del contenido] "> [contenido] </div>
</div>
<script type="text/javascript">
var nombreVAR=new animatedcollapse("nombreID", tiempo, estadoinicial)
</script>
Los nombres nombreVAR y nombreID deben ser únicos, si se colocan varios bloques expandibles, cada uno debe ser diferente.

El contenido de STYLE del DIV nombreID puede ser cualquier otro. Utilizando width:100% abarca el total de la sidebar pero podría utilizarse en cualquier otro lugar de una página web, por ejemplo:
style="width: 300px; height: 110px; background-color: #99E0FB;"

tiempo indica la duración del efecto y es un valor expresado en milisegundos (1000 = 1segundo)

estadoinicial puede ser true o false e indica el estado inicial del bloque. Si es true, estará expandido y si es false, estará contraido.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  • Ut wisi enim ad minim
  • Quis nostrud exerci
  • Suscipit lobortis nisl
  • Ex ea commodo

UN EJEMPLO
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

OTRO EJEMPLO
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Hay dos limitaciones a tener en cuenta. Si no establecemos la propiedad height, deberemos esperar a que se cargue la página, si hacemos click antes, aparecerá una ventana de advertencia:


La segunda no es tanto una limitación del script como del mismo Blogger. El tiempo a indicar deberá ser probado y fijarlo en el menor valor posible. En los ejemplos, hay valores de 10, 100, 500 y 700, pero, dependiendo de la hora y el momento, el efecto, a veces tiende a ser más lento de lo esperable.

Si bien todos los ejemplos anteriores se basan en la función slideit() que permuta los estados expandido/contraido del DIV, hay otras dos en el mismo script que pueden utilizarse de manera similar: slidedown() expande el bloque y slideup() contraer el bloque:

EXPANDIR | CONTRAER


Este es el contenido del DIV.
<a href="javascript:nombreVAR.slidedown()">EXPANDIR</a> |
<a href="javascript:nombreVAR.slideup()">CONTRAER</a>
<div id="nombreID" style="width: 300px; height: 100px; background-color: #99E0FB;">
<div style=" text-align: center;"> [contenido] </div>
</div>
<script type="text/javascript">
var nombreVAR=new animatedcollapse("nombreID", tiempo, estadoinicial)
</script>
Como, por defecto, el script contrae todos los bloques al cargarse la página, si se quiere que aparezca expandido, el código es similar pero, le agregamos el parámetro "block" (comillas incluidas):

EXPANDIR || CONTRAER


Este es el contenido del DIV.
<a href="javascript:nombreVAR.slidedown()">EXPANDIR</a> |
<a href="javascript:nombreVAR.slideup()">CONTRAER</a>
<div id="nombreID" style="width: 300px; height: 100px; background-color: #99E0FB;">
<div style="color: #000000; text-align: center;"> [contenido] </div>
</div>
<script type="text/javascript">
var nombreVAR=new animatedcollapse("nombreID", tiempo, estadoinicial, "block")
</script>
POST EDICION: A sugerencia de Gem@ y debido a que se encuentran con algunas dificultades, he subido un archivo de texto que contiene el código fuente de todos los ejemplos para que puedan utilizarlos como guía. Descargar aquí.

El archivo contiene el código fuente tal y como está en el post, incluyendo los vínculos al script y las imágenes. Lo único diferente es que ha sido formateado para que sea más fácil de leer y que, si quiere implementarse en un post, deben eliminarse los saltos de línea. En caso de usarlo en la sidebar, esto no tiene importancia.

Siempre y cuando, la página HTML tenga definido su tipo como:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

cosa que es así en Blogger, basta copiar y pegar el contenido del archivo para que funcione.

Algunas sugerencias para analizarlo y personalizarlo:
  • Identificar las imágenes. Cambiarlas por propias.
  • Identificar los colores. Cambiarlos.
  • Identificar los textos. Cambiarlos.
  • Ir eliminando o modificando los estilos y ver el resultado, anchos, fuentes, márgenes.
  • Trabajar "a lo bruto" si la fuente es 10px no probar 11px, probar con 24px, si el margen es 5px poner 50px: hay que verlo bien :D
  • Usar colores chillones, luego, cuando sabemos cuál es cual, elegimos el color final.
  • Usar la propiedad border para recuadrar los bloques y "ver" donde empiezan y donde terminan. Luego, los sacamos.
  • Lo mismo podemos hacer con la propiedad background-color, si no está, ponerla para "ver" el bloque.
  • Ir guardando copias de los resultados a medida que avanzamos y siempre mantener el original intacto.
Espero que les ayude.

106 comentarios:

CaTa  

Qué increíble. Justo esta madrugada le consultaba a Gema por algo similar para usar en mi side. Pregunto, se pueden usar los bloques animados para ocultar y exponer videos, textos, imagenes en ellos?

Responder
JMiur  

Sí, Cata, se puede usar para "ocultar" y "mostrar" cualquier tipo de código.

Responder
Darwin  

Desde luego un truquillo así en nuestros blogs queda muy chulo!!!. Gracias por exponer tus conocimientos y/o cualquier cosilla interesante para compartir con el resto. Un saludo Gran Jmiur!!!

Responder
Darwin  

He intentado descargar el script desde el enlace que indicas, pero parece que hay problemas, al parecer el enlace está roto ;(

Responder
rockorn  

Hola jamiur mira q tu blog es de mucha utilidad pero las explicaciones de los comentarios recientes no me quedaron claraas tengo los comentarios recientes en mi blog pero lo pone en ingles
como hago para hacerlos en español como en tu blog
mi mail :ukbar90@hotmail.com
respondeme aqui o a mi mail
gracias de antemano ahhh y voten por machupicchu solo es hasta el sabado 6pm
http://vagabundia.blogspot.com/2007/04/ultimos-comentarios-ya-mismo.html

Responder
JMiur  

Darwin: tienes razón, el enlace está roto. Ya he subido el archivo a un servidor personal y puedes descargarlo desde AQUI

Por las dudas, también te lo he enviado por mail.

Rockorn: para que esté en castellano, es necesario modificar el script y subirlo a un servidor propio, por ejemplo, Google Pages.

También te he contestado por mail y te he adjuntado copias de los archivos modificados.

Responder
Gem@  

Sabía que te gustaría y también sabía que cualquier día nos mostrarías la forma de hacerlo.
El efecto queda chulísimo lo probaré y te cuento.
Déjame decirte que te superas cada día ;)
(Me suscribí para recibir las actualizaciones de Vagabundia en mi mail, pero me da la sensación que si bien llegan en el mismo día lo hacen con bastante retraso, a no ser que el problema sea el cambio de horario)

Responder
JMiur  

Gracias, Gema@.

Lo de la suscripción por mail para mi es nuevo y no tengo idea de como funcionan otros servicios.

Trataré de ver que averiguo del tema ¿Alguna sugerencia?

Responder
Darwin  

Aunque leo tu blog a diario, también me voy a suscribir(por si acaso jejeje). Desde ya tengo tu blog como una fuente de consulta y de búsqueda de noticias curiosas e interesantes sin lugar a duda este es uno de los mejores blogs que he visto(y sin hacer la pelota ehhh :P).

Un saludo,

Responder
JMiur  

Gracias Darwin, tantos elogios me hacen poner colorado :D

Espero que eso de la suscripción funcione.

Responder
Gem@  

Bien, retiro todo lo anterior sobre la tardanza en llegar a mi mail las actualizaciones, debe ser mi impaciencia (uno de mis grandes defectos)
Me encanta eso de saber tus "novedades" nada más sentarme frente a mi correo.

Responder
JMiur  

¡Qué bueno, Gema@, me sacas un peso de encima!

Ya estaba averiguando sobre otras posibilidades pero, para mi, son todas demasiado misteriosas :D

Responder
sl4ught3r  

Ufff No hay manera de conseguir un bloque deslizante..
¡¡¡ ME ESTOY VOLVIENDO LOCO !!!
He insertado entre "head" y "/head" el trozo de codigo de

script src='DIRECCION DEL ANIMATEDCOLLAPSE.JS' type='text/javascript'>
/script>

y despues he creado un nuevo elemento en de HTML/JAVA y le he pegado el codigo

a href="javascript:nombreVAR.slideit()" style=" [estilo del botón] "> /a>
div id="nombreID" style="width:100%;">
div style=" [estilo del contenido] "> [contenido] /div>
/div>
script type="text/javascript">
var nombreVAR=new animatedcollapse("nombreID", tiempo, estadoinicial)
/script>

(He quitado los "<" iniciales de cada orden para poder publicar el post)

modificandole "nombreVAR", "nombreID" y los valores de tiempo y estadoinicial.
Para el estilo he puesto:
style="width: 300px; height: 110px; background-color: #99E0FB;"


¿¿¿ QUÉ ESTOY HACIENDO MAL???

GRACIASSSSSSS

Responder
JMiur  

Primero, lo más sencillo, para escribir el carácter < hay que escribir &lt;. De cuaqluier modo, lo que pusiste, se entiende perfectamente.

Imagino que en:
<script src='DIRECCION DEL ANIMATEDCOLLAPSE.JS' type='text/javascript'>
/script>

DIRECCION DEL ANIMATEDCOLLAPSE.JS es una URL válida, es decir:
http://tuservidor/animatedcollapse.js

Lo que necesitaría es que me digas la dirección de tu blog y, si es posible, que dejes colocado el código, aunque no funcione.

Responder
sl4ught3r  

Mi blog es

http://warmsoundfallingslowly.blogspot.com

Y el archivo ANIMATEDCOLLAPSE.JS lo cojo de donde tú lo tienes colgado para descagar, es decir, de
http://vagadata.googlepages.com/animatedcollapse.js

Como me enfadé de tanto probar, borré entero el que tenía hecho, pero sigo exactamente la misma estructura que tenes puesta en la explicación
Tanto para el /head como para la creación del HTML/Java en el blog

Responder
JMiur  

OK, ya tengo la dirección.

Cuando puedas, vuelve a insertarlo, es la única forma en que pueda comprobarlo. Avísame.

Responder
Gem@  

Yo sé que lo primordial es entender la base de lo que explicas, para luego hacerlo nosotros mismos pero.....

¿No sería posible que añadieras el código del ejemplo tal y como lo tuviste que añadir a la entrada para ver el efecto?
De esa forma podríamos ver las diferencias entre nuestro código y el tuyo o simplemente modificarlo a nuestra necesidad.

Responder
Gem@  

Aquí le llaman a eso empezar la casa por el tejado :(

Responder
JMiur  

Bien, he seguido tu sugerencia, Gem@ y agregado unas líneas al post.

He subido un archivo de texto que contiene el código fuente de todos los ejemplos para que puedan utilizarlos como guía:

Descargar aquí.

Responder
Gem@  

Te pasaste con la explicación, así es imposible que no resulte bien.
Gracias genio ;)

Responder
JMiur  

Espero que sirva, Gem@.

¡Y quiero verlo en tu sidebar!!!!!!!!!!! está pensado justo para ese lugar :D

Responder
Gem@  

¿Pero es que lo dudabas?
Tus deseos son ordenes jajaja faltaba más, después de ese gran post y esa explicación digna de un decano de la facultad no era para menos, en mi sidebar tienes una muestra, mejor dicho el resultado de tu paciencia.
(Sé añadirle borde y fondo pero me gustó más como está)te lo digo por si eso sube la nota ;)
Me voy a la playa a descansar, que tengáis un buen fin de semana.
Pero regreso ehhhhhhhh

Responder
Gem@  

Me olvidaba... lo encontrarás donde dice "Introducción"

Responder
CaTa  

bien, en fin..será!!

Responder
JMiur  

Excelente, Gem@, funciona perfecto :D

Responder
sl4ught3r  

Ahora si lo he conseguido!
Copié íntegro un ejemplo y lo personalicé!
Acá tienen el resultado,
http://warmsoundfallingslowly.blogspot.com/
Dentro del bloque deslizante de la derecha he incluido un reproductor MP3 para mi grupo favorito de música

GRACIAS MIL, OS AMO

Responder
sl4ught3r  

Por cierto!
Me acabo de dar cuenta de un problema..

Cuando clickeo en el botón para expandir, el reproductor que está dentro aparece DE REPENTE, no aparece con animación como el bloque..

Saben si eso se puede corregir para que vaya apareciendo el reproductor a la vez que se va deslizando el bloque?

:)

Responder
JMiur  

Lo he visto funcionando: hay que hacer una fiesta y festejar :D

Eso que "parece aparecer" de repente es un problema de velocidades de conexión y caché del navegador.

Puede ocurrir que el Flash del reproductor tarde más tiempo en cargarse que el tiempo que tarda la animación y entonces, aparece de pronto.

Por lo que visto, no es lo que me pasa en tu blog, lo veo deslizarse y aparecer lentamente como el resto. Fijate si esto te pasa siempre o sólo la primera vez que se usa. Cuando se abre y luego se cierra. Ya, la segunda vez no es cargado, está ahí y deberías verlo bien.

Una alternativa, también puede ser reducir la velocidad de la animación para hacerla más lenta y darle al Flash más tiempo de cargarse.

Responder
CaTa  

Logré hacer "una cosilla" , pero no sé como ordenar el texto para que se lea bien lo que puse..pero, avanzo

Responder
JMiur  

Estuve curioseando y funciona perfectamente :D

Mi Favorito: Benedetti

Ideas sueltas:

Podrías ampliar el ancho, hasta 240 pixeles más o menos y así usar toda la sidebar. Por la imagen del botón no te preocupes, también puedes ponerle width:240px y en la propiedad background, cambiar no-repeat por repeat-x.

En el <div id="E21" pones height: 830px, la altura, no es necesaria, puedes no definirla y el bloque se amoldará perfectamente.

Tal vez, para los textos, podrías usar un tamaño de fuente más pequeño.

Son todas cosas que se me ocurren, estoy hablando en voz alta mientras jugueteo un poco con el blog: CAPTURA

No me hagas caso, ahora que haz logrado que funcione, el resto son detalles subjetivos :)

Responder
CaTa  

eso, eso quiero precisamente. Que la letra sea mas pequeñita pero no se como cambiarla. En cuanto al fondo, no se cómo hago porque este cambia cada vez que le agrego un elemento . (ah, cambie el codigo..)

Responder
sl4ught3r  

He variado la velocidad de apertura del bloque, he probado más velocidad y también menos, pero nada, el player siempre se carga de repente y queda muy feo que esté ya abierto mientras el bloque se está aún deslizando

He probado a usar Mozilla Firefox en lugar de Safari (tengo Mac, no Windows), pero sigue ocurriendo lo mismo

:_(

Responder
sl4ught3r  

Como dicen en mi tierra.. "Me crecen los enanos por todos sitios" !!!

Más problemas!

He añadido a continuación otro bloque deslizante con otro player dentro, para otro grupo de música, y ahora el nuevo aparece abierto y no se puede contraer, mientras que el primero aparece cerrado y no se puede abrir.. Ninguno se desliza ahora

Creo que voy a echarme a llorar !!!

Responder
JMiur  

sl4ught3r:
Sobre el segundo problema, revisa que los nombres:
href="javascript:collapseE31.slideit()"
id="E31"
var collapseE31=new animatedcollapse("E31", 350, false)

sean diferentes en cada bloque.
Lamentablemente en este momento no está colocado en el blog y sólo puedo ver uno.

Sobre el primer tema, no sé que contestare, en Windows, tanto con Firefox como con IE se abre lentamente con un buen efecto ¿será una característica de Mac? Si tenés alguna otra PC donde mirarlo sería bueno para que lo comprobaras.

Parece que, mientras escribo esto estás cambiando cosas e incluso ha mejorado, el botón no se veía completo y ahora sí :D

Responder
JMiur  

Cata:

Para cambiar el tamaño de la fuente, fijate en:
<div style="color: rgb(157, 136, 81); font-size: 10px;">
<ul>
<li>Mundo que se deshace</li>

con esa propiedad, controlas el tamaño de la fuente de ese bloque. Por supuesto, puedes usar cualquier valor. El valor actual es de 12px.

Recuerda que los colores de tu sidebar los controla un script, (pares e impares). Si quieres que el color del fondo sea igual al color de la sidebar, simplemente elimina la propiedad background-color del div id="E2" y de todos los que crees.

Responder
sl4ught3r  

WOW GRACIAS!!!

El fallo era que ambos tenían el mismo nombre, y claro, así se volvía loco!!

En el último rato he aprendido a ponerle una imágen al bloque con el logo del grupo!

Respecto a lo de que el reproductor se carga antes.. Probaré en un PC, seguramente sea alguna configuración de mi mac!

Quizás la última pregunta para dejarlo todo finalizado!
Al expandir, se abre el reproductor con la playlist, pero la playlist solo muestra 5 canciones.. ¿Podría ser posible modificar el tamaño de la playlist para que muestre las 8 sin barra de desplazamiento alteral?
¿O ese parámetro es propio del "reproductor.swf" y es inalterable?

Responder
JMiur  

Cada vez que entro en tu blog me encuentro con novedades, parece que es un fin de semana activo :D

Me gustaría hacer un video para mostrate lo que yo veo pero ... no puedo, lo mejor eso eso, probar en una PC para descartar problemas.

Sobre el resproductor, hay dos maneras de poner una playlist, colocar los temas uno detrás del otro, como lo has hecho o, crear un archivo de texto y subirlo al mismo servidor donde está el reproductor. En ese caso, fijate en el post original para la sintaxis, es muy simple.

Hasta donde he podido ver, el SWF tiene un tamaño máximo que es ese que se muestra y, cuando la lista excede el área, aparece la barra de desplazamiento. Ese modelo no tiene otras alternativas.

Responder
CaTa  

Ya , ahora mis letras son mas pequeñas y el background ya se como arreglarlo. Me gusta como quedó, espero llegar a comprender como funcionan los demás.Una vez mas, gracias:)

Responder
JMiur  

Perfecto, Cata :D

PD: este post ya parece un foro :D

Responder
Cata  

jajaja es que Vagabundia, envicia!!

Responder
sl4ught3r  

Hola!!

A pesar de haber llegado a tener un blog medio decente, he decidido cambiar por completo la plantilla y volver a empezar

Pero al colocar en la sidebar el bloque deslizante que tenía antes, ya no se me abre..
Y eso que definí la función

script type="text/javascript" src="http://vagadata.googlepages.com/animatedcollapse.js">
/script>


antes de /head en el el HTML de la plantilla..


¿Por qué no me funciona ahora si ya he definido la función y no he variado nada del código?

:(

Aquí te linkeo mi plantilla completa:
http://www.fileden.com/files/2007/7/13/1263116/Plantilla%20sl4ught3r.txt

Responder
JMiur  

El código no se ve claramente pero, en tu blog (salvo que hayas cambiado la URL) no se ve ningún elemento en la sidebar.

De cualquier manera, si el código fue insertado en un elemento de la sidebar, tampoco se vería en el código de la plantilla.

Lo mejor, igual que te dije antes es que lo coloques aunque no funcione para que lo ve. Y confirmame la URL. Debe ser algún error menor.

Responder
Eloy :: Samurai Socialista ::  

mmh, recien me encuentro con este blog, y este post es justo lo que buscaba (revizando por arriba algunos post, hay muchas cosas las cuales buscaba, y cosas que no buscaba, pero que veo que pueden ser muy utiles, felicitaciones al webmaster), mi problema es que no se javascript y tenia una duda:

No se si se pueda hacer directo desde la plantilla o habria que modificar el *.js. Se podra poner algun fragmento de html (imagen o texto), que cambie cuando esta y cuando no esta expandido
____________
ej:
que de
Titulo [expander]

pase a

Titulo [contraer]
______________


cuando desplegamos el div?
seria muy util (o la tipica flechita para arriba o para abajo, en fin, cualquier pedacito de html)

Desde ya, gracias por la info del post, lo probe, y funciona de maravillas, aunque para dejarlo implementado estoy viendo como se puede hacer lo que pregunte.

Saludos, Eloy

Responder
JMiur  

Eloy:

Te doy una idea pero mucho depende del tipo de vínculo que estés usando para expandir y contraer. Voy a suponer que es una imagen.

Se necesitaría tener un script que controlara la permutación de la imagen. Algo así:

<script type="text/javascript">
function permutarLink(cualID) {
imagenLink=document.getElementById(cualID)
if (imagenLink.style.backgroundImage=='url(URL_imagen2)') {
imagenLink.style.backgroundImage='url(URL_imagen1)';
} else {
imagenLink.style.backgroundImage='url(URL_imagen2)';
}
}
</script>

En el código del botón, donde se hace click para expandir/contraer, habría que agregar dos cosas:

<a id="nombreUNICO"
href="javascript:collapseVAR.slideit();permutar('nombreUNICO');"
style="..."></a>

A la etiqueta A le agregamos un ID (un nombre único) y ejecutamos no una, sino dos scriptrs, primero la común y luego la nueva que, en este caso es permutar('nombreUNICO') donde nombreUNICO es el nombre del ID.

El script, sólo comprueba qué imagen estamos usando (la 1 es contraida, la 2 la expandida) y, las permuta (si es 1 pone la 2 y viceversa).

Es complicado escribirlo acá así que cualquier cosa, envíame un mail.

Responder
sl4ught3r  

Hola de nuevo!
Resuelto el tema de los bloques deslizantes!
Gracias!!!

Ahora me encuentro con otro pequeño obstáculo, pero que a mi se me está haciendo muy grande..

Éste es el esquema de mi blog, para crear nuevos elementos..

El elemento añadido que se llama "HTML/Javascript" justo encima de las entradas del blog, es un reproductor con una canción

El que está por encima con el nombre "Text" es sólamente un texto con el título de la canción

Mi problema es que en mi se ve que queda desplazado el texto respecto al reproductor..

He mirado y remirado el codigo HTML de mi blog y he cambiado miles de parámetros, pero ninguno parece desplazar el texto para poder colocarlo bien..

¿Qué parte del código controla los elementos añadidos?

GRACIAS!!!

:)

Responder
JMiur  

Primero que nada, hay una definición de estilo general que parece molestar porque interfiere con todo lo que agregues:

#Feed1, #Feed2, #NewsBar1, #NewsBar2, #HTML1,
#HTML2, #HTML3, #HTML4, #Text1, #Text2,
#LinkList1, #LinkList2, #TextList1, #TextList2,
#BlogArchive1, #Label1, #Label2 {
padding:5px 0px 100px;
}

Lo que hace eso es separar todos los elementos 100 pixeles del elemento inferior. Me parece un poco exagerado. Fíjate sacarlo y mira el resultado. Si, algún elemento requiere esa separación, lo razonable es ponerla en ese pero no en todos.

Ahora bien, los elementos que estás usando, no tienen propiedades de estilo así que, para controlarlos, habrá que crear unas.

El texto tiene un ID (nombre): id="Text1"
El reproductor tiene un ID (nombre): id="HTML1"

En la plantilla, aparecerán como, por ejemplo:
<b:widget id='HTML1' locked='false' title=''
type='HTML'/>

Podríamos agregarle a esa instrucción un estilo:

<b:widget id='HTML1' locked='false' title=''
type='HTML' style='..........'/>

o, para hacerlo más fácil de modificar, colocarlo, dentro de <b:skin> </b:skin>

#Text1 {............}
#HTML1 {............}

Las propiedades que puedes usar son:

text-align:VALOR;
donde VALOR es center, left o right

padding: VALOR VALOR VALOR VALOR;
donde VALOR es la separación y el orden es arriba, derecha, abajo, izquierda

eventualmente, puedes usar:
margin: VALOR VALOR VALOR VALOR;
lo mismo

Con esas tres, podrás controlar la separación y la alineación.

Si usas Firefox, y ya que estás experimentando con las propiedades, hay un par e extensiones que te permiten ver las propiedades de estilo de cada elemento e, incluso, modificarlas online para ir viendo los resultados. Te pueden llegar hacer la tarea mucho más simple y no afectan la plantilla porque sólo "simulan" los cambios.

No sé si ha quedado claro, tengo mis dudas :)

Responder
sl4ught3r  

OH MY GOD !!!

No sólo me ahs resuelto la duda al 100% sino que además me has dado la clave para poder seguir modificando y resolviendo nuevas dudas que se me vayan presentando..

De verdad, no se cómo agradecértelo!

Bueno, hace poco ayudé a un amigo con algunas dudas que tenía con su plantilla..
Supongo que ésto es como el karma..
Ayudar como te han ayudado

:)

Responder
JMiur  

Ese es el karma, amigo :D

Me alegro haberte sido útil, por un momento, temí que mi respuesta fuera un poco confusa.

Responder
Gem@  

Me ha gustado eso del ... Karma

Responder
JMiur  

A mi también, Gem@, es una buena palabra :)

Responder
Gem@  

Me llevo prestada parte de esta entrada, sé que me vas a perdonar.
Que tengas un buen fin de semana genio ;)

Responder
JMiur  

¿Perdonarte? ¡Es un honor! :$

Un abrazo.

Responder
pescaboy  

Hola Jmiur! este es mi primer comentario en tu blog, y ante todo darte las gracias por lo mucho que estoy aprendiendo gracias a ti!

la cuestión es que cada vez que añado una imagen en el Sidebar, en este caso es la imagen del bloque, que al hacer click en ella aparecen unos puntitos blancos que son horrible, la verdad.
y me he fijado que no no tienes ese problema...

¿hay alguna forma de evitar eso?.

muchas gracias por todo!

Responder
JMiur  

Saludos pescaboy:

Imagino que te refieres a la línea punteada que aparece cuando una imagen es un enlace y haces click sobre ella.

Eso, sólo es posible eliminarlo en Firefox. AQUÍ hay una explicación del tema.

Responder
pescaboy  

Muchas gracias por responder! pero me lo he tomado como un reto personal y al final lo he solucionado cambiando de Script...

He puesto el otro que publicaste con botones pero lo he modificado un poco hasta que lo he logrado.

no hay nada como la satisfacción de un trabajo bien hecho.

saludos JMiur!

Responder
JMiur  

Cualquier método es válido, amigo, sobre todo, cuando funciona :D

Responder
pescaboy  

Si, hasta hace un momento pensaba igual, pero ahora el problema es que no funciona el Script con el explorer...

ahora me he quedado a medias.

Responder
JMiur  

Creo que el problema es que has utilizado el código de manera literal.

<unaetiqueta class="elementoOculto" id="playboy">

unaetiqueta es una forma de decir que ahí va una etiqueta HTML, por ejemplo DIV

cámbialo así:

<div class="elementoOculto" id="playboy">
..........
</div>

o sea, reemplaza las palabras unaetiqueta por div

o por cualquier etiqueta HTML (img, form, table); en tu caso, div es lo lógico.

Responder
pescaboy  

Muchas gracias!!! ahora funciona perfectamente... Me has ahorrado más dolor de cabeza, porque vaya día que llevo.

Bueno, muchas gracias por todo y como no podia ser menos te he incluido entre las páginas de innterés de mi blog.

saludos amigo!

Responder
JMiur  

Por suerte se resolvió :D

Responder
Luzbelito  

una duda que me viene de otro post, pero tambien sirve para este.

A que te refieres a subir a un servidor propio en este caso el enlace. Se que puede resultar basico pero una imagen si la subo pero ya esto supera mi nulo conocimiento.

Responder
JMiur  

Así como servidores externos para alojar imágenes (Flickr, Photobucket, ImageShack, etc) hay otros que permiten alojar archivos JS o CSS pero, son menos.

Uno de los más sencillos de usar es Google PAges y AQUI hay un tutorial sobre cómo hacerlo.

Responder
Ispilatze  

Impresionante!! Realmente me llevará días aplicarlo. He llegado a ti a través del blog de gema y no es la primera vez que recurro a tus "sorpresas". Intento hacer un desplegable en la sidebar con 100 colores (y su correspondiente código #------)para tenerlo "a mano" cuando alguien quiera crear o cambiar algo (para empezar yo misma!!). Con las cositas de "diseño" me apaño medio bien, pero lo del lenguaje html me queda grandísimo aún y voy despacito despacito, probando, interpretando y consiguiendo... mis primero pinitos. ¡¡Gracias, maestro!!
De todas formas, si no lo consigo, ¿puedo dirigirme a ti por mail? De momento voy a ir probando.
ispilatze@gmail.com
ispilatze@hotmail.com

Responder
JMiur  

Ispilatze:

Me gusta tu idea y sí, cualquier problema, no dudes en enviarme un mail y veremos qué puede hacerse :)

Responder
RoMe  

Hola ya tengo el truco listo en mi blog, lo malo es que va muy lento, no se si será por mi conexión, si puedes provarlo y me cuentas, tengo pensado publicar un post(con tu permiso) de lo que yo he puesto, que sea un poco mas facil que el tuyo, gracias por el truco, no sé si lo seguire utilizando por la lentitud, busacaba esconder los elementos en la sidebar, por que fuera mas rápido al cargar la página.

echa un vitazo:

Responder
RoMe  

perdona el link está aqui:
http://encuentraelinterruptor.blogspot.com/

Responder
JMiur  

RoMe:

En principio, no veo que el efecto sea lento en tu blog pero, esa es una impresión subjetiva. La velocidad del efecto es independiente de todo, de la pagina, del navegador, del contenido, de la conexión, etc.

Esa velocidad puede ser definida. Es un parámetro que puede cambiarse, hacerlo más o menos lenta.

Por último, algo importante. Ocultar elementos con este o con cualquier otro sistema, NO alivia la carga de la página. Los elementos ocultos se carga igual que si estuvieran visibles, no se ven pero están.

Si el problema es la velocidad de carga, las soluciones hay que buscarlas por otro lado, básicamente, reducir la cantidad de scripts o accesos a servicios externos. ahí también nos encontramos con un tema muy subjetivo.

Responder
RoMe  

Gracias por la aclaración, ya veré que hago, tengo que pensarlo. Muchas gracias

Responder
marisol  

JMiur: se puede usar en las entradas este efecto para ocultar información y que la muestre pixel a pixel?
marisol

Responder
JMiur  

Sí, Marisol. Los efectos se pueden usar en cualquier parte de la página. Los ejemplos que muestro, están en una entrada.

Responder
Projecto Touhou  

Debo decir que este es uno de los mejores efectos scripts de dinamic drive, muy buen tutorial, ya los estoy usando :D

Responder
Sharck_Bloody  

hola, un pregunta, ¿se pueden poner bloques deslisantes dentro de otro bloque deslizante que los contenga?
Por ejemplo al hacer click en un bloque que se muestren mas bloques animados, que a su vez al hacer click en ellos se siga mostrando contenido.

Responder
JMiur  

En principio, diría que sí pero no lo he experimentado.

Responder
Antonio Fernandez  

Muy buenas a todos.
Muchas gracias al autor del artículo, está muy bien explicado.
Tengo una duda: ¿Cómo ser podría hacer para que se despliegue el div en lugar de hacer click haciendo hover (pasando por encima el cursor)?
Muchas gracias.

Responder
JMiur  

Antonio: para eso, habría que modificar el script.

Responder
Antonio Fernandez  

Muchas gracias JMiur por responder tan rápido.
La verdad es que el script es muy bueno pero muy poco configurable, asi que buscare alguna alternativa jquery.
Un saludo.

Responder
JMiur  

Así es Antonio, es un script pequeño y limitado, eso es lo bueno por un lado y lo malo por otro :)

Responder
Armando  

Saludos Jmiur, habra alguna manera para q este efecto funcione con los archivos de blogger?

Responder
JMiur  

Sí. No habría problemas pero desconozco la estructura de tu blog tu de tu plantilla.

Responder
Armando  

Estoy que pruebo en la plantilla basica con q viene blogger una de fondo blanco amigo Jmiur.

Responder
JMiur  

Armando:
Dame tiempo hasta el lunes y trataré de publicarlo en una entrada porque escribir los detalles aquí me parece que sería un poco engorroso.

Responder
Armando  

Ok amigo Jmiur no hay problema desde ya muchas gracias por tu atencion prestada.

Responder
S. C. P.  

Hola, Jota. Acá estoy, probando ya hace un par de horas, con distintos ejemplos de los que pusiste y no hay caso. ¿Será acaso que la plantilla que tengo dice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

en vez de:

1.0 Strict

como dice tu ejemplo, y eso me trastoca todo?

¿O será algo en el gadget?

¿Podrías mirar, por favor? La página es:

http://sopaconcursope.blogspot.com/

Gracias mil!!!

silvia

Responder
JMiur  

S.C.P.
Lo que está mal es el script. Estás colocando la URL de la página (que incluso no parece pública) CLICK y verás que no es el archivo JS.

Fíjate en este post para que veas la forma de saber cuñál es el enlace directo al archivo.

Responder
S. C. P.  

Sí, eso también. Me di cuenta que estaba chocheando cuando comentaba a Eulalia el asunto del skydrive. Ella me desasnó. El asunto es que pese a haberlo cambiado,igual no quiere funcionar. Otra cosa que no sé si está bien, es que copié tal cual está el ejemplo, para probar, pero me huele que no ha de ser así: collapseE31.slideit
porque tal como yo lo entendí, E31 viene siendo el nombre que ha de ir cambiando cada vez que metemos un aparato destos dentro del blog... En fin, que te pongo acá lo que puse en el gadget, y perdona la lata :(
.............
&;div style="WIDTH: 200px">
&;a style="PADDING-RIGHT: 0pt; BORDER-TOP: rgb(153,204,255) 1px solid; DISPLAY: block; PADDING-LEFT: 0pt; FONT-SIZE: 20px; PADDING-BOTTOM: 10px; MARGIN: 2px 0px; WIDTH: 200px; COLOR: rgb(255,255,255)! important; PADDING-TOP: 10px; BORDER-BOTTOM: rgb(0,0,0) 1px solid; HEIGHT: 30px; BACKGROUND-COLOR: rgb(51,102,153); TEXT-ALIGN: center; TEXT-DECORATION: none! important" href="javascript:collapseE31.slideit()">
Para leer los libros
&;/a>
&;div id="E31" style="WIDTH: 100%">
&;div style="BORDER-RIGHT: rgb(51,102,153) 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: rgb(51,102,153) 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: rgb(51,102,153) 1px solid; COLOR: rgb(153,204,255); PADDING-TOP: 5px; BORDER-BOTTOM: rgb(51,102,153) 1px solid; HEIGHT: 200px">

Luego el texto concreto que quiero mostrar u ocultar, y después:

&;/div>
&;/div>
&;script type="text/javascript">var collapseE31=new animatedcollapse("E31", 700, false)
&;/script>
&;/div>&;/div>
.........

Veo que hay unos cuantos divs finales, pero que no sé si iban o no, si causan algún efecto o no sobre el resultado final. En fin, que esto me está conduciendo a la locuraaaa!!!

Lo suyo es un apostolado, don Jota. MIl y una gracias.

silvia

Responder
S. C. P.  

OH!!! ¿No era que había que poner &; para que apareciera una < ?

Bueno, ya mentiendes, amigo... Prometo hacerme experta en esto. Espero no ir al otro barrio antes... jeje

silvia la despistada

Responder
JMiur  

Sobre el script, sigo viendo que es inaccesible. Seguramente, no lo has hecho público y por lo tanto, los sitios, incluso el tuyo, no lo puede cargar. Ese sería el primer punto a resolver para ver el resto.

Fijate otra vez en este enlace que es el script. Si no estas logueada en SkyDrive te pedirá usuario y contraseña; quiere decir que, el script no se carga.

Lo de los simbolitos de mayor menor es así:

&lt; es para escribir <
&gt; es para escribir >

De todas manera, se entiende pero me gustaría verlo online antes de contestar nada. Avisame.

Ahhh, por cierto, sigo hablando del blog:
http://sopaconcursope.blogspot.com/
esto es , por las dudas estemos mirando sitios diferentes.

Responder
S. C. P.  

Bueno... uffff!!! el calor que hace en Montevideo, la lluvia que no llega y yo sin poder hacer marchar el artilugio... ¡¡¡¡¡¡hasta hace exactamente 3 minutos!!!!!!
Suenen címbalos y clavicordios, redoble de tambores y panderetas!!!

Recapitulo:

* Tenía mal la dirección del archivo .js
Al fin siguiendo el dato de la Eulalia abrí skydrive con el mozilla y pude conseguir la dirección real del archivo, porque on el IE minga minga.

* El archivo además estaba puesto en una carpeta que no era pública, así que no era accesible para el blog tampoco.

Cambié la dirección, cambié el archivo a una carpeta pública y ahí está, funcionando como si supiera ché.
Y ya que estamos: cambié el archivo de carpeta porque no supe como cambiar el atributo del archivo de privado a público. Para el caso es lo mismo, pero me sentí haciendo el procedimiento como "a pedal".

Y para gran final:

¡¡¡¡GRACIAS GRACIAS JOTAMIUR, ERES UN MALDITO GENIO!!!! (espero que se oigan los aplausos desde allí)


salú y gloria!

silvia (descontracturada)

PD: Sí, claro, era el blog del concurso Paco Espínola... Ese truquito lo voy a usar además en alguno de los otros blogs asociados a ese. Si no fuera exagerado, te diría gracias de vuelta... ;)

Responder
JMiur  

Perfecto. Me alegra que todo se solucionara (excepto el calor que de este lado de la orilla es igual) Lo de SkyDrive n oestoy seguro, creo que lo que se pone como pública es la carpeta entera así que mover el archivo es lo más razonable.

Un abrazo y espero que la tormenta llegue pronto :D

Responder
S. C. P.  

Hola, Jota. Otra vez, jorobando. Sabes que al fin no lo usé :( porque no pude acomodar a gusto las superficies. El texto del "botón" quedaba muy separado del recuadro que contiene lo ocultado. Probé a tocar varias cosas, pero al fin me rendí. No supe identificar qué acercaba ambos bloques, y lo único que pude cambiar fue tamaño de letra, color y color de bordes. Al final me decanté por volver al pedal, hice un link en cada nombre y preparé para mostrar el contenido una entrada en un blog que no tendrá otro papel que el de tener esas cosas y alguna más del mismo tipo.
En fin...

un abrazo

silvia (quejosamente quejienta)

Responder
JMiur  

Jajajajaja Son cosas que pasan, Silvia pero, todo sirve y en el camino vamos aprendiendo algo :D

Responder
La jaula de los Osos.  

HOLA, CREO QUE NO TENGO ESTABLECIDO height en bloque animado java script , POR LO QUE ME DA EL PROBLEMA QUE DESCRIBES EN EL POST, PERO POR MAS QUE MIRO NO ENCUENTRO LA REFERENCIA DE COMO SOLUCIONARLO. pODRIAS AYUDARME?.
gRACIAS Y BUEN TRABAJO EL QUE DESEMPEÑAS.

Responder
La jaula de los Osos.  

Perdon por las mayusculas no me di cuenta. disculpame.

Responder
JMiur  

Me parece que si está establecido, por lo menos, eso leo en el código fuente que dice:

<div id="ArchiveList" style="overflow: hidden; visibility: visible; height: 438px;">

Salvo que no sea ese al que haces referencia.

Responder
La jaula de los Osos.  

Gracias por responder tan pronto faltaba esto:(style="overflow: hidden; visibility: visible; height: 438px;), en mi plantilla, ahora va todo perfecto.
Vuelvo a darte las gracias por tu ayuda.
saludos.

Responder
JMiur  

Me alegro que lo resolvieras :)

Responder
Birdelo  

Aún esto no me sale nada. En realidad creo que el problema está a la hora de poner los ID's, debe ser cada NOmbreID diferente dentro uno solo y tambien el NombreVAR?.

En cuanto al STYLE que es lo que se pone?.

Responder
JMiur  

Así es, siempre, los IDs deben ser nombre únicos y, en este caso, lo mismo ocuure con NombreVAR.

El estilo define la forma en que se verá, puede ser cualquier cosa, color, fondo, etc.

Responder
Buenos Discos  

BUe, me rindo, seguramente mi ignorancia es demasiada y no me deja comprender el idioma.
He intentado de mil maneras hacer uno y otro "truco" pero nada, no resulta ninguno; me conformare con admirar sus Blog's y renegar del mío, que no está del todo mal, pero no está tampoco como quisiera.
JMiur sos un grox, saludos a todos...
Cualquier ayuda será bienvenida, incluso un cuerda :D

Responder
ΜigueŁ jίмenez™  

Hola, me gustaria que me dieras como puedo colocar un bloque en mi fiormulario de comentarios, y como personalizar esta zona(creo que es post-footer)

gracias, :)

Responder
JMiur  

Buenos Discos: Tendrìa que ver algunas de tus pruebas para darme cuenta del error ¿Por qué no colocas uno y me avisas? Aunque no funcione.

Miguel:
La explicación de cómo poner el formulario de comentarios, la puedes ver en este post y hay varios más que hablan del tema.

Responder
El_Predicador_YO  

Buenas denuevo gran maestro del html ^^

Vuelvo a pedirte ayuda, esta vez porque intento lograr algo similar a lo que tienes en tu barra lateral en la parte de "autopromo" en mi blog, en el widget que concierne a "descargas" para que no abulten tanto y quede mas recogidito. He estado revisando los codigos que pones arriba pero al tratarse de algo que ya tengo hecho no tengo claro donde incorporarlos para no modificar lo ya creado... no se si sera la hora o que ya tengo los ojos machacados pero no hay manera XD

A ver si puedes echarme una mano.

Ah, tambien te pregunte por mail sobre la posibilidad de poner imagenes de fondo en los titulos de las entradas porque no he encontrado informacion al respecto y he intentado ya de todo para conseguirlo asi que aprovecho para preguntartelo aqui tambien ^^

Muchas gracias por anticipado!!

P.D.- El blog es http://arcoonte.blogspot.com

Responder
JMiur  

No sé si podrá adaptarse tan rápidamente, siempre conviene hacer pruebas por separado pero, por ejemplo, si se trata de los archivos, deberías ca,boar el enlace que ahora los despliega uy contrae por los enlaces de este modelo.

Luego, al final del elemento archivos, en alguna parte :D , habría que poner la función:

<script type="text/javascript">
var nombreVAR=new animatedcollapse("BlogArchive1", tiempo, estadoinicial)
</script>

Y claro, el script antes de &lt:/head>

Responder
sable  

Muchisimas gracias :D eres un genio :D

Responder
Rodrigo Vasquemz  

hola podrias subir de nuevo el archivo de este sidebar ya ke los links estan caidos

JMiur  

No veo problema alguno con el ZIP; allí está.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR