JMiur [E]

Sólo un ejemplo de una lista que se mezcla cada vez que hacemos click en un item, utilizando las librerias prototype y script.aculo.us ¿Para qué puede servir? Ni idea.


<style>
  #scripty_morph_demo {
    background-color: #000;
    border: 4px solid #888;
    cursor: pointer;
    height: 300px;
    margin: 0 auto;
    outline: 1px solid #FFF;
    padding: 10px;
    position: relative;
    width: 200px;
  }
  #scripty_morph_demo div {
    color: #EEE;
    font-size: 60px;
    height: 60px;
    position: absolute;
  }
  #scripty_morph_demo div:hover {
    color: #E00;
  }
</style>

<script>
  Array.prototype.shuffle = function() { return this.sortBy(Math.random); };
  (function() {
    function foo() {
      $('scripty_morph_demo').select('div').shuffle().each(function(e, i) {
        e.morph('top:' + i*e.getHeight() + 'px', { duration: 0.4 }); 
      });
    }
    $('scripty_morph_demo').observe('click', foo);
    foo();
  })();
</script>

<div id="scripty_morph_demo">
  <div style="top: 0;"> uno </div>
  <div style="top: 60px;;"> dos </div>
  <div style="top: 120px;"> tres </div>
  <div style="top: 180px;"> cuatro </div>
  <div style="top: 240px"> cinco </div>
</div>

11 comentarios:

Unknown  

los sigo desde hace mucho tiempo, apenas ahora me animo a comentar, se muy poco de estas cosas. me resultó cómico el comentario de que para que sirve, Un abrazo ;)

Responder
Unknown  

Para aprender a contar, el abecedario, sopa de letras...se me ocurre para fotografías: de bebe, niño, adol, medio adul, adul ;) :D

Responder
JMiur  

La imaginación al poder :D

Responder
Anónimo  

Hola Jmiur, oye instale un script que me muestra el mapa del sitio de mi blog y lo coloque en una entrada y si funciono solo que hay un pequeño problemita el gadget de linkwithin se sube hasta arriba y se debe de quedar en el footer y no se sube y quiero preguntarte hay alguna forma de que al entrar a esa entrada el gadget no se muestre.

Es decir aplicarle una condicion al post que diga que al entrar a ese post el gadget desaparesca o no se muestre.

la entrada es esta: http://nitragames360.blogspot.com/2010/01/indice-de-games.html

Responder
JMiur  

Supongo que puedes agregar algo así en la entrada misma:

<style> .linkwithin_outer {display:none !important;} </style>

Responder
Web on line  

Hola Jmiur, Feliz Inicio de año, acerca de este post, me gustaria utilizarlo como un menu vertical de manera que cuando se de clic sobre cualquier palabra nos envie a la entrada linkeada, la pregunta es: ¿que codigo debo utilizar despues de div id="scripty_morph_demo" para poder linkearlo a cualquier entrada? gracias y espero haber sido explicito

Responder
JMiur  

Quinto Sol Tattoos:

Imagino que lo que debes hacer es simplemente poner el enlace; por ejemplo:

<div style="top: 0;"><a href="URL">uno</a></div>

Dependiendo de la plantilla, tal vez requiera un ajuste pero eso habría que verlo in-situ.

Responder
Anónimo  

Orale Jmiur eres un genio del css xD solo que al colocarlo en la entrada lo coloque hasta arriba y lo guarde y funciono y todo pero ocupa espacio, osea me agarra espacio el codigo del style aunque no aparesca eso es normal?

Responder
JMiur  

Si, ocupa un espacio que es el definido en height: 300px; mas paddings etc.

Responder
Inés  

He intentado aplicar esta "lista enloquecida" pero no lo he conseguido, tengo implementada la las librerias prototype y script.aculo.us desde hace tiempo
Pero no sé donde cómo colocar lo que va entre las etiquetas:
< style >.... < /style >
< script > ...< /script >

Disculpa mi ignoracia y por molestarte en cosas seguramente tan elementales :$

Millones de gracias

Responder
JMiur  

Lo puedes colocar antes de </head> o directamente en un elemento HTML si es que la lista está allí o en un post. Siempre que esté después de las librerías y antes que la lista, la ubicación es indiferente.

Responder

¿Quiere dejar un comentario?

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

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