01 enero 2008

Colapsar un div

1/01/2008
por cuisi en , | 0 comentarios
Vamos a ver un script que suele ser de mucha utilidad cuando tenemos un contenido que no precisamente queremos que sea visto al momento de cargar la página, y para que se visible el usuario dará click sobre el titulo y la noticia, articulo o lo que sea aparecerá por debajo y para ocultar da click de nuevo y ocultar, el código es el siguiente:


El siguiente codigo entre Head y /Head
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

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

</script>


Descargar animatedcollapse.js



El siguiente dentro de las etiquetas Body y /Body, donde queramos que aparesca el script
<p><b>Example 1:</b></p>

<a href="javascript:collapse1.slidedown()">Slide Down</a> || <a href="javascript:collapse1.slideup()">Slide Up</a>
<div id="dog" style="width: 300px; height: 110px; background-color: #99E0FB;">

<!--Your DIV content as follows -->
<h3>Content inside DIV!</h3>
<h4>Note: CSS height attribute defined</h4>

</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("dog", 1000, false)

</script>



<p><b>Example 2:</b></p>

<a href="javascript:collapse2.slideit()">Show/ Hide DIV</a>
<div id="cat" style="width: 300px; background-color: #99E0FB;">

<!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV -->
<div style="padding: 0 5px">
<h3>Content inside DIV!</h3>
<h3>Content inside DIV!</h3>
<h4>Note: No CSS height attribute defined. Persistence enabled.</h4>
</div>

</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat", 800, true)

</script>




<p><b>Example 3:</b></p>

<a href="javascript:collapse3.slidedown()">Slide Down</a> || <a href="javascript:collapse3.slideup()">Slide Up</a>
<div id="fish" style="width: 300px; height: 150px; background-color: #99E0FB;">

<!--Your DIV content as follows -->
<h3>Content inside DIV!</h3>
<h4>Note: DIV set not to collapse initially. Note that if "enablepersist" is enabled, cookie value overrides this setting.</h4>

</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse3=new animatedcollapse("fish", 1000, false, "block")

</script>

Seguir leyendo »

Por fin lo logre...

1/01/2008
por cuisi en , | 0 comentarios
Amigos por fin logre meter código en blogger, solo tuve que entrar a este sitio, y listo solo tenemos que agregar el código en el cuadro de texto que aparece en la pagina y dar click en "parse" y listo, copiamos el código y lo agregamos en nuestro post, para darle un poco mas de lujo podemos agregar las etiquetas:

  1. blockquote /blockquote
  2. quote /quote
  3. code /code
Nota: al principio agregar "<" y al final ">"

y bueno pues eso es todo, saludos y cualquier cosa ya saben un comentario y listo

Seguir leyendo »

Preload con porcentaje usando Javascript

1/01/2008
por cuisi en , , | 0 comentarios
Creáremos una barra "preload" como las creadas en flash, pero esta vez usando javascript lo que en teoría la aria mas rápida y de igual manera seria visto, bueno aquí les dejo el código completo

<html>
<head>
<title>Preload Image Page</title>

<script language="JavaScript1.1">
<!-- begin hiding

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/

// You may modify the following:
var locationAfterPreload = "http://dynamicdrive.com" // URL of the page after preload finishes
var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
// Put the URLs of images that you want to preload below (as many as you want)
var yourImages = new Array("http://yourdomain.com/test1.gif","http://yourdomain.com/test2.gif")

// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
dots[1] = new Image(1,1)
dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above)
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages[i] = new Image()
preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded[i] == false && preImages[i].complete) {
loaded[i] = true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>

</head>

<body bgcolor="#FFFFFF">

<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
document.write('<p><small><a href="javascript:window.location=locationAfterPreload">Skip Preloading</a> &nbsp;| &nbsp;<a href="http://dynamicdrive.com/">Script Credits</a></small></p>')
// end hiding -->
</script>
</center>

</body>
</html>

Seguir leyendo »

Reloj analogo Flotante

1/01/2008
por cuisi en , , | 0 comentarios
Bueno andaba buscando por la red un reloj y pues este fue uno de los que encontré, esta hecho en javascript, compatible con IE, Firefox y Opera. Este reloj aparece en la esquina inferior derecha, ir a ver el reloj.

P.D.: Si alguien sabe como agregar códigos para ponerlos aquí en el blog.

Seguir leyendo »

Ahora si me hicieron reir

1/01/2008
por cuisi en , , , , | 1 comentarios
Agregando un Gadget al blog me encontré esta frase.

Mamá, en el cole me llaman Windows. -Niño, calla la boca y haz algo útil.

Seguir leyendo »

Rocket Dock

1/01/2008
por cuisi en , , | 0 comentarios
RocketDock es un software diseñado para Windows 2000 o superior, aportando un dock parecido al que tienen los usuarios del SO deApple Inc. Es Freeware creado por Punk software. Muestra miniaturas de las ventanas minimizadas al estilo Mac OS X, y miniaturas animadas en Windows Vista.

Características:

* Minimice ventanas directamente en el dock.
* Actualizacion de las ventanas minimizadas en tiempo real (sólo Vista).
* Indicador de aplicaciones abiertas
* Interfaz sencilla.
* Soporte para múltiples monitores.
* Soporta iconos .PNG con canal alpha y archivos .ICO.
* Efecto de zoom y animación suave.
* Auto-ocultamiento y aparición cuando se pasa el mouse.
* Totalmente personalizable.
* Soporta DOcklet del ObjectDock.
* Soporta Unicode.
* Disponible en varios idiomas.

* Requerimientos:
* Windows 2000, XP o Windows Vista.
* 500 Mhz o superior.
* 10 MB de memoria RAM libres.

Más Info


Seguir leyendo »

Suscribirse a: Entradas (Atom)