<Combinar Script ventanitas y precarga>

adex · #1 (**permalink**) 30/12/2002, 13:29

Hola amigos:
Agradecere quien pueda solucionar este problemilla
Explico: dejo dos link's para que mejor lo vean

Ventanitas
http://www.use05.edu.pe/fdw/ventanitas.htm

Precarga
http://www.use05.edu.pe/fdw/precarga.htm

me gustaria que el Script de ventanitas tenga el efecto de precarga de imagenes.
creo no haberme liado mucho
y saludos a todos

tunait · #2 (**permalink**) 30/12/2002, 13:47

adex de mis alegrías

<cara de bochorno>Verdad que esto es lo que me preguntaste por email hace semanas y no te conteste?? </cara de bochorno>

Aish

adex · #3 (**permalink**) 30/12/2002, 14:29

no hay problema Hermosa Diosa

yo espero sentadito

Saludos

tunait · #4 (**permalink**) 30/12/2002, 16:03

Adex,

no acabo de comprender el sistema que usa el preloader del pop-up. Sólo le veo un onLoad en body que llama a la función de MM_ShowHide_Layers.

En mi caso cuando he necesitado una precarga he usado la propiedad readyState de document.

Prueba a poner esto en tu página (yo lo he hecho pero claro, desde local no se aprecia el resultado)

Código PHP:

  <script language="javascript">

var tiempo

function precarga()

{

if(document.readyState == "complete")

{

document.getElementById('precarga').style.visibility='hidden'

clearTimeout(tiempo)

}

else{tiempo=window.setTimeout("precarga()",10)}

}

</script>

Luego inmediatamente debajo de body pon esto (o algo parecido)

Código PHP:

  <div id="precarga" style="position:absolute; width:100%; height:100%; z-index:10; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"> 

  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">

    <tr>

      <td align="center">

        <p><font face="Tahoma, Verdana, Arial" size="2"><b><font color="#FF0000">CARGANDO</font></b></font></p>

        <p><font face="Tahoma, Verdana, Arial" size="1" color="#FF9900">Espere 

          por favor</font><br>

          <img src="fnp_196_Relojcargando.gif" width="30" height="30"></p>

      </td>

    </tr>

  </table>

</div>

y a body le pones un onLoad="precarga()"

Dime que tal

saludos

adex · #5 (**permalink**) 30/12/2002, 16:05

Hola Tunait....
bueno... tijera y pegamento a la mano....

te aviso que me sale...

:Saludos:

adex · #6 (**permalink**) 30/12/2002, 16:16

Tunait...
No funciona

he probado de diferentes maneras pero no anda...

tunait · #7 (**permalink**) 30/12/2002, 16:19

lo tienes colgado en el server?

recuerda que si están en local o las tienes en los temporales de interné no verás nada.

Cuelgalo en el servidor y dame la url que le echo un ojo

adex · #8 (**permalink**) 31/12/2002, 09:19

ya estoy de vuelta,

con una tigera mas grande y super pegamento, hago lo que me dices y te aviso....

Saludos

adex · #9 (**permalink**) 31/12/2002, 09:36

bueno a aca lo tienes

http://www.use05.edu.pe/fdw/ventanitasTUNAIT.htm

Tuni?
Me deje entender que la precarga es para las ventanitas PopUp's

Saludos

tunait · #10 (**permalink**) 31/12/2002, 09:42

Adex!! Noo no me había enterado!!!!

Claro, con razón no te funcionaba!
En la página origen sí que funciona (lo acabo de ver) aunque sale desplazadísima la capa hacia la derecha, habrá que añadirle un top:0 y left:0

Tu lo que quieres es incluír esa precarga en el código que genera las ventanitas pop-up

¿es así?

adex · #11 (**permalink**) 31/12/2002, 09:50

siiiiiiiiii

tunait · #12 (**permalink**) 31/12/2002, 09:59

OK me pongo en ello

adex · #13 (**permalink**) 31/12/2002, 10:03

Gracias Tuni...
prometo no molestarte por mucho tiempo

<olculto> Mentira

</oculto>

Saludos

tunait · #14 (**permalink**) 31/12/2002, 11:18

Sabes que tú no me molestas en absoluto

Bueeeno me compliqué más de lo necesario para finalmente ver que había una forma más facil.

Sabes, a veces cuando se escribe una página con javascript el navegador interpreta que nunca termina de estar cargado el documento. No le vemos el "listo" en la barra de estado.
En el caso de éstas pop-ups sucede así. Si le pones status bar puedes ver como se queda en un estado perpetuo de "descargando imagen..." cuando la imagen hace horas que se cargó.

Así que nunca se activaba la condición de estar el documento cargado

En cambio, sí reconoce haber descargado la imagen, con lo que ha bastado con pedirle a la imagen que onLoad oculte la capa.

El código ha quedado así:

Código PHP:

  var intContador= 0;

function ExpandUse05(strImage, intHeight, intWidth,titulo ) {

    intContador++;

    intHeight2 = intHeight + 20

    intWidth2 = intWidth + 6

    ImageNew = window.open("","Imagenes" + intContador,"toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no,width=" + intWidth2 + ",height=" + intHeight2);

    ImageNew.document.writeln('<html>');

    ImageNew.document.writeln('<head>');

    ImageNew. document.writeln('<title>'+titulo +'</title>'); 

    ImageNew.document.writeln('<style type="text/css">');

    ImageNew.document.writeln('a {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: uppercase; color: #FFFFFF; text-decoration: none}');

    ImageNew.document.writeln('</style>'); 

    ImageNew.document.writeln('</head>');

    ImageNew.document.writeln('<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" bgcolor="#FFFFFF">');

    ImageNew.document.writeln ('<div id="precarga" style="position:absolute; width:100%; height:100%; z-index:10; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; left: 0; top: 0 ; visibility:visible"> ')

    ImageNew.document.writeln ('<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">')

    ImageNew.document.writeln ('<tr> <td align="center"> ')

    ImageNew.document.writeln ('<p><font face="Tahoma, Verdana, Arial" size="2"><b><font color="#FF0000">CARGANDO</font></b></font></p>')

    ImageNew.document.writeln ('<p><font face="Tahoma, Verdana, Arial" size="1" color="#FF9900">Espere  por favor</font><br>')

    ImageNew.document.writeln ('<img src="fnp_196_Relojcargando.gif" width="30" height="30"></p>')

    ImageNew.document.writeln ('</td></tr></table></div>')

    ImageNew.document.writeln('<table width="100%" border="1" cellpadding="0" cellspacing="0" align="center" bordercolor="#8098CB" bordercolordark="#8098CB" bordercolorlight="#8098CB">');

    ImageNew.document.writeln('<tr>');

    ImageNew.document.writeln('<td align="center" valign="center"><img src="' + strImage + '" border="0" onLoad="document.getElementById(\'precarga\').style.visibility=\'hidden\'"></td>');

    ImageNew.document.writeln('</tr>');

    ImageNew.document.writeln('<tr bgcolor="#8098CB"> ');

    ImageNew.document.writeln('<td> <p align="right"><a href="Javascript:window.close()"><font size="1" face="verdana">CERRAR VENTANA</font></a></p></td>');

    ImageNew.document.writeln('</tr>');

    ImageNew.document.writeln('</table>');

    ImageNew.document.writeln('    ¡¡¡ espere un momento ... ');

    ImageNew.document.writeln('<' + '/' + 'body>');

    ImageNew.document.writeln('</html>');

}

Al menos en mi pc me ha funcionado estupendo, incluso en el Nescafé 6.2

Yá me contarás

tunait · #15 (**permalink**) 31/12/2002, 11:23

Adex, el código del foro ha quitado unas barras importantes que, si no están en el código te darán error.

en esta línea:

ImageNew.document.writeln('<td align="center" valign="center"><img src="' + strImage + '" border="0" onLoad="document.getElementById('precarga').style. visibility='hidden'"></td>');

ocupate de añadir barras \ delante de las comillas simples dentro de la cadena

ImageNew.document.writeln('<td align="center" valign="center"><img src="' + strImage + '" border="0" onLoad="document.getElementById(\'precarga\').style.visibility=\'hidden\'"></td>');

adex · #16 (**permalink**) 31/12/2002, 11:23

tijeras a la obra

digo manos a la obra

te aviso tuni como queda
Saludos

adex · #17 (**permalink**) 31/12/2002, 12:11

hola Tunait:
Ahora si esta, y funciona de maravillas, hice unas cambios muy pequeñitos y ya esta, muchiiiiiiiiiiiiiiiiiiiiiiiiiiiiisiiiiiiiiiiiiiiii mas gracias

voy a dejarlo nuevamente el ejemplo funcional (terminado) por si a alguien le interesa el script.

http://www.use05.edu.pe/fdw/ventanitasTUNAIT.htm

Saludos Tuni

adex · #18 (**permalink**) 31/12/2002, 12:21

aca dejo el Script por si hay problemas con el enlace

Código:

<HTML>
<HEAD>
<TITLE>tus ventanitas para fotos</TITLE>
<STYLE type=text/css>
A:link {	COLOR: #808080; TEXT-DECORATION: none}
A:visited {	COLOR: #808080; TEXT-DECORATION: none}
A:hover {	COLOR: #808080; TEXT-DECORATION: none}
</STYLE>
<SCRIPT language=JavaScript>
/*****************************************************************
*																			*
* simplePopUpPrevisualizacionImagenes.js                         *
* Copyright 2002 Foros Del Web                                   *
* http://www.forosdelweb.com/showthrea...5&pagenumber=1 *
* Creditos: <Tunait>														*
* Fecha Nov, 2002.														*
* simplePopUpPrevisualizacionImagenes.js                         *
* y Precarga de Imagenes												*
* Copyright 2002 Foros Del Web                                   *
* http://www.forosdelweb.com/showthrea...5&pagenumber=1 *
* Creditos: <Tunait>														*
* Fecha 31 Dic, 2002.													*
* El Presente Script es de uso libre siempre y cuando se mantenga*
* intacto los creditos correspondientes								*
* Att. Adex :: usuario registrado de FDW								*
* http://www.forosdelweb.com											*
*																			*
******************************************************************/

var intContador= 0;
function ExpandUse05(strImage, intHeight, intWidth,titulo ) {
    intContador++;
    intHeight2 = intHeight + 20
    intWidth2 = intWidth + 6
    ImageNew = window.open("","Imagenes" + intContador,"toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no,width=" + intWidth2 + ",height=" + intHeight2);
    ImageNew.document.writeln('<html>');
    ImageNew.document.writeln('<head>');
    ImageNew. document.writeln('<title>'+titulo +'</title>'); 
    ImageNew.document.writeln('<style type="text/css">');
    ImageNew.document.writeln('a {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: uppercase; color: #FFFFFF; text-decoration: none}');
    ImageNew.document.writeln('</style>'); 
    ImageNew.document.writeln('</head>');
    ImageNew.document.writeln('<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" bgcolor="#FFFFFF">');
    ImageNew.document.writeln ('<div id="precarga" style="position:absolute; width:100%; height:100%; z-index:10; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; left: 0; top: 0 ; visibility:visible"> ')
    ImageNew.document.writeln ('<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">')
    ImageNew.document.writeln ('<tr> <td align="center"> ')
    ImageNew.document.writeln ('<p><font face="Tahoma, Verdana, Arial" size="2"><b><font color="#FF0000">CARGANDO</font></b></font></p>')
    ImageNew.document.writeln ('<p><font face="Tahoma, Verdana, Arial" size="1" color="#FF9900">Espere  por favor</font><br>')
    ImageNew.document.writeln ('<img src="precarga2imagenes/fnp_196_Relojcargando.gif" width="30" height="30"></p>')
    ImageNew.document.writeln ('</td></tr></table></div>')
    ImageNew.document.writeln('<table width="100%" border="1" cellpadding="0" cellspacing="0" align="center" bordercolor="#8098CB" bordercolordark="#8098CB" bordercolorlight="#8098CB">');
    ImageNew.document.writeln('<tr>');
    ImageNew.document.writeln('<td align="center" valign="center"><img src="' + strImage + '" border="0" onLoad="document.getElementById(\'precarga\').style.visibility=\'hidden\'"></td>');    
    ImageNew.document.writeln('</tr>');
    ImageNew.document.writeln('<tr bgcolor="#8098CB"> ');
	ImageNew.document.writeln('<td> <p align="right"><a href="Javascript:window.close()"><font size="1" face="verdana">CERRAR VENTANA</font></a></p></td>');
	ImageNew.document.writeln('</tr>');
	ImageNew.document.writeln('</table>');
	ImageNew.document.writeln('</body>');
	ImageNew.document.writeln('</html>');
}
</SCRIPT>

</HEAD>
<BODY aLink=#808080 background="fdw_img/fondo_use.JPG" bgProperties=fixed leftMargin=0 link=#808080 topMargin=0 vLink=#808080>
<DIV align=center>
<CENTER>
<TABLE border=0 cellPadding=0 cellSpacing=0 height=207>
  <TBODY>
  <TR>
    <TD height=207 rowSpan=4><IMG border=0 height=264 
      src="fdw_img/izq.jpg" width=32></TD>
    <TD height=9><IMG border=0 height=17 src="fdw_img/sup_1.jpg" 
      width=466></TD>
    <TD height=207 rowSpan=4><IMG border=0 height=264 
      src="fdw_img/der.jpg" width=32></TD></TR></CENTER>
  <TR>
    <TD bgColor=#1c0a5c height=116>
      <DIV align=center>
      <TABLE border=0 cellSpacing=1 width=452>
        <TBODY>
        <TR>
          <TD align=left width=164>
            <P align=left><IMG border=0 height=14 
            src="fdw_img/titulo_galeria_fotos.gif" width=174></P></TD>
          <TD align=left width=274>
            <P align=right><FONT color=#ffffff face=Tahoma size=1>Plan Anual 
            2002 - USE N° 05</FONT></P></TD></TR>
        <CENTER>
        <TR>
          <TD colSpan=2 width=444>
            <DIV align=center>
            <TABLE border=1 width="100%">
              <TBODY>
              <TR>
                <TD width="25%"><FONT face=Arial size=1>
                
                <a href="javascript:ExpandUse05('fdw_img/plananual2002_1.jpg',231,349,'Lo mejor de lo mejor' )">
                  
                  <IMG 
                  border=0 height=64 hspace=2 
                  src="fdw_img/plananual2002_1_small.jpg" vspace=2 
                  width=97></a></FONT></TD>
                <TD width="25%"><FONT face=Arial size=1><a href="javascript:ExpandUse05('fdw_img/plananual2002_4.jpg',226,350,'que mas' )"><IMG 
                  border=0 height=63 hspace=2 
                  src="fdw_img/plananual2002_4_small.jpg" vspace=2 
                  width=95> 
                  </a></FONT></TD>
                <TD width="25%"><FONT face=Arial size=1><a href="javascript:ExpandUse05('fdw_img/plananual2002_6.jpg',236,347,'loco vox' )"><IMG 
                  border=0 height=66 hspace=2 
                  src="fdw_img/plananual2002_6_small.jpg" vspace=2 
                  width=97> </a></FONT></TD>
                <TD width="25%"><FONT face=Arial size=1><a href="javascript:ExpandUse05('fdw_img/plananual2002_4.jpg',226,350,'que mas' )"><IMG 
                  border=0 height=63 hspace=2 
                  src="fdw_img/plananual2002_4_small.jpg" vspace=2 
                  width=95> 
                  </a></FONT></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></CENTER></TD></TR>
  <TR>
    <TD bgColor=#1c0a5c height=115>
      <DIV align=center>
      <TABLE border=0 width="38%">
        <TBODY>
        <TR>
          <TD width="100%">
            <DIV align=center>
            <TABLE border=1 width="100%">
              <TBODY>
              <TR>
                <TD width="25%"><FONT face=Arial size=1><a href="javascript:ExpandUse05('fdw_img/plananual2002_5.jpg',234,347,'oreo' )"><IMG 
                  border=0 height=65 hspace=2 
                  src="fdw_img/plananual2002_5_small.jpg" vspace=2 
                  width=97> </a></FONT></TD>
                <TD width="25%"><FONT face=Arial size=1><a href="javascript:ExpandUse05('fdw_img/plananual2002_6.jpg',236,347,'loco vox' )"><IMG 
                  border=0 height=66 hspace=2 
                  src="fdw_img/plananual2002_6_small.jpg" vspace=2 
                  width=97> </a></FONT></TD>
                <TD width="25%"><FONT face=Arial size=1><a href="javascript:ExpandUse05('fdw_img/plananual2002_7.jpg',220,349,'tengo hambre' )"><IMG 
                  border=0 height=62 hspace=2 
                  src="fdw_img/plananual2002_7_small.jpg" vspace=2 
                  width=97></a></FONT></TD>
                <TD width="25%"><FONT face=Arial size=1><a href="javascript:ExpandUse05('fdw_img/plananual2002_1.jpg',231,349,'ahora yano' )"><IMG 
                  border=0 height=64 hspace=2 
                  src="fdw_img/plananual2002_1_small.jpg" vspace=2 
                  width=97> </a></FONT></TD></TR></TBODY></TABLE></DIV></TD></TR>
        <TR>
          <TD width="100%"></TD></TR></TBODY></TABLE></DIV></TD></TR>
  <TR>
    <TD height=1><IMG border=0 height=17 src="fdw_img/inf_1.jpg" 
      width=466></TD></TR></TBODY></TABLE></DIV>
<DIV align=center>
<CENTER>
<TABLE border=2 cellPadding=0 cellSpacing=0 width="30%">
  <TBODY>
  <TR>
    <TD align=middle width="25%"><FONT color=#808080 face=Tahoma 
      size=1><B><a href="#">Anterio</a>r</B></FONT></TD>
    <TD align=middle width="45%"><FONT color=#808080 face=Tahoma size=1><B><a href="#">Guardar 
      Fotos</a></B></FONT></TD>
    <TD align=middle width="30%"><FONT color=#808080 face=Tahoma size=1><B><a target="principal" href="#">Siguiente</a></B></FONT></TD></TR></TBODY></TABLE></CENTER></DIV>
<p align="center"><b><a href="ventanitasTUNAIT.zip"><u><font face="Tahoma" size="1">Descargar
</font><font color="#808080" face="Tahoma" size="1">Archivo documentado Kb 113
(pesa mucho por las Fotos [:-)])</font></u></a></b></p>
</BODY></HTML>

adex · #19 (**permalink**) 31/12/2002, 12:27

no olvidar esta recomendacion

Recomendacion

http://www.forosdelweb.com/showthrea...016#post284016

Saludos

tunait · #20 (**permalink**) 31/12/2002, 12:40

Qué bueno que te funcionara sin problemas, adex

He visto que me pones en los créditos

te agradezco!

Pero no me quedo tranquila sin indicar que originalmente no es mio, yo sólo le hice unas variaciones y añadidos nomás. Reconozco que no es mio especialmente porque ImageNew no es un nombre que suela darle a las ventanitas (suelo llamarlas pepe o simplemente, ventanita). Creo recordar que este script se tiró hacia arriba entre varios, creo que sería justo añadir a esas personas que colaboraron (o el que lo parió, si se sabe quien fue) a esos créditos ¿qué te parece??

Un abrazo, adex, y Felíz Año Nuevo 2003

adex · #21 (**permalink**) 31/12/2002, 13:32

tienes razon tunait

este script solo hacia :-p Pop Up

y ahora es multifuncional, pero si no fuera por tu aporte no hubiera llegado hacer lo que hace ahora, pero venga el papa no? (digo si lo quiere reconocer)

tambien quiero desearte muchos codigos de felicidades y haber cuando nos soprendes con un "Javito" no? si es que no la hay
un JavaScrip de Abrazos y Feliz Añor nuevo

y ahora como hago para poner globitos

mejor te pongo una cancion :cantar:

ya la encontre

Saludos