Donde colocar el div loading

satjaen · #1 (**permalink**) 07/10/2012, 04:51

Buenos dias, necesito saber donde puedo colocar el div loading <div id="loading"> imagen animada de Cargando........, para que sea el primer div y me salga al principio cuando carga la pagina?
Gracias.

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="assets/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="assets/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="assets/js/js.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="estilo1.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera">Consulta de intervenciones</div>
<div id="tabla">
    <div id="formulario">
    <form id="frm_filtro" method="post" action="" name="form1">
            <table width="685">
  <tr>
    <td width="9%" class="campo_apellidos2">Teléfonos</td>
    <td width="9%"><input name="telefono" type="text" size="9" /></td>
    <td width="9%"><input name="telefono2" type="text" id="telefono2" size="9" /></td>
    <td width="9%"><input name="telefono3" type="text" id="telefono3" size="9" /></td>
    <td width="32%">&nbsp;</td>
    <td width="18%" class="campo_apellidos2">NIF</td>
    <td width="14%"><input name="NIF" type="text" id="NIF" size="9" /></td>
  </tr>
  <tr>
    <td class="campo_apellidos2">Nombre</td>
    <td colspan="4"><input name="nombre_apellidos" type="text" size="30" />
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="campo_apellidos2">Localidad</td>
    <td colspan="4"><input name="poblacion" type="text" size="30" />
      <span class="campo_apellidos2">C.Postal</span>      <input name="cod_postal" type="text" id="cod_postal" size="5" /></td>
    <td class="campo_apellidos2">Provincia</td>
    <td><input name="provincia" type="text" size="9" /></td>
  </tr>
  <tr>
    <td class="campo_apellidos2">Calle</td>
    <td colspan="4"><input name="calle" type="text" id="calle" size="45" />
      <span class="campo_apellidos2">Nº</span>      <input name="numero" type="text" id="numero" size="5" /></td>
    <td class="campo_apellidos2">Edificio</td>
    <td><input name="edificio" type="text" id="edificio" size="5" /></td>
  </tr>
  <tr>
    <td class="campo_apellidos2">Puerta</td>
    <td colspan="3"><input name="puerta" type="text" id="puerta" size="5" />
      <span class="campo_apellidos2">      Piso</span>
      <input name="piso" type="text" id="piso" size="5" />
      <span class="campo_apellidos2">Letra</span>        <input name="letra" type="text" id="letra" size="5" /></td>
    <td>&nbsp;</td>
    <td><span class="campo_apellidos2">Nº Mante.</span></td>
    <td><input name="mantenimiento" type="text" id="mantenimiento" size="5" /></td>
  </tr>
  </table>
  <table width="100%">
  <tr>
    <th scope="col"><button type="button"  id="btnfiltrar" name="btnfiltrar" style="border:0; margin:0; padding:0;cursor:pointer">
  <img src="imagenes_menu/boton_buscar.png"/>
</button>
</th>
  </tr>
</table>                
          </form>         
  
    </div>
    <div id="paneles">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">Usuarios</li>
          <li class="TabbedPanelsTab" tabindex="0" onclick="buscarAparatos();">Aparatos</li>
          <li class="TabbedPanelsTab" tabindex="0">Intervenciones</li>
</ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
           <div id="usuario">
            <table width="100%" id="data" class="table-dg-grid" >
             <thead>
              <tr>
       <tr bgcolor=#DFEBFF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
                     <th><span title="selecc">Selecc.</span></th>
                    <th><span title="nu_usuario">Nº Usuario</span></th>
                    <th><span title="telefono">Teléfono</span></th>
                    <th><span title="nombre">Nombre</span></th>
                    <th><span title="poblacion">Población</span></th>  
                     </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
                </div>
          </div>
          <div class="TabbedPanelsContent" id="pestaña1" >
          
        
          
          </div>
          <div class="TabbedPanelsContent">
           
          <table cellpadding="0" cellspacing="0" id="data2">
                <thead>
                  <tr>
                    <th><span title="num_aviso"></span></th>
                    <th><span title="num_usuario"></span></th>
                    <th><span title="aparato"></span></th>
                    <th><span title="calle"></span></th>
                    <th><span title="fecha_recepcion"></span></th>
                    <th><span title="fecha_recepcion"></span></th>
                    <th><span title="sintoma"></span></th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>            
          </div>
</div>
      </div>
      <table width="100%">
        <tr>
<th scope="col"><a class="" href="javascript:enviar_formulario()"><span></span><img src="imagenes_menu/generar_aviso1.png" width="150" height="40" border="0"/></a>
</th>
          <th scope="col">&nbsp;</th>
          <th scope="col"></th>
          <th scope="col"><a class="" href="javascript:enviar_formulario1()"><span></span><img src="imagenes_menu/boton_salir.png" width="150" height="40" border="0"/></a>
 </th>
        </tr>
      </table>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

bLEx · #2 (**permalink**) 08/10/2012, 07:07

Si quieres que sea de las primeras cosas que se carguen colócalo cerca de la primera etiqueta <body>.

pzin · #3 (**permalink**) 08/10/2012, 08:42

Cerca pero no por encima. Y luego te haces un RTFM.

emprear · #4 (**permalink**) 08/10/2012, 11:14

@satjaen
la idea es poco clara, si simplemente ponés una imagen de cargando, segurá ahi aún después que la página haya cargado.
Si te referís a un ajax-loader, la imágen de cargando se genera con código en la misma rutina Ajax.
Esto no lo probé, pero podrías poner una capa fija centrada en la pantalla que contenga la imagen, la ponés inmediatamente después del body, como ultimo elemento de la página 8antes del </body> ponés otra imagen, puede ser un pequeño gif transparente, que con el evento onload oculte la capa que se mostro con el cargando. Si la página carga muy rápido y el efecto "cargando" se pierde podés agregarle a la función un setTimeout para hacer un pequeño delay.
Tendrías que ser más preciso en la explicación.

@Bonez
Ultimamente colega, te noto algo suceptible

Saludos

satjaen · #5 (**permalink**) 08/10/2012, 11:54

Muchas gracias por contestar, estoy intentando hacerlo en ajax.
Bonez, deja de vacilarme soy nuevo en esto y no quiero que me contestes para reirte de mi, prefiero que no contestes.
Un saludo.

emprear · #6 (**permalink**) 08/10/2012, 12:11

Con ajax se hace asi
http://foros.emprear.com/ajax/demo/deportes.html

cuidado que la página no carga casi nada asi que el loader a veces ni se vé, pero ahi esta

En el código fuente están los detalles, prestá atención a estas líneas

Código Javascript:

Ver originalif (ajax.readyState==1){
document.getElementById(capa).innerHTML = "<img src='ajax-loader.gif' align='center' /><br /> Aguarde por favor...";
}

ahi se define el mensaje del loader (en este caso una imágen y texto)
Saludos

satjaen · #7 (**permalink**) 08/10/2012, 12:28

Gracias, una cosa es que en java no me contestan, donde integro en mi cod eso que me has dicho?

Código Javascript:

Ver originalfunction filtrar()
{   
      
        $.ajax({
        data: $("#frm_filtro").serialize()+ordenar,
        type: "POST",
        dataType: "json",
        url: "ajax.php?action=listar",
        success: function(data){ 
        var html_user ='' ;
        if(data.length > 0){ 
        $.each(data, function(i,item){

Un saludo.

furoya · #8 (**permalink**) 08/10/2012, 13:04

Cita:

Iniciado por satjaen

Bonez, deja de vacilarme soy nuevo en esto y no quiero que me contestes para reirte de mi, prefiero que no contestes.
Un saludo.

Tal vez en este Foro preferimos que no preguntés.

Es que hace rato que todos estamos viendo los planteos lamentables que estás haciendo. Y "ser nuevo" no es excusa. Porque no solamente no tenés idea de lo que estás preguntando, sino que la complicás más y más hasta que terminás hartando. Antes de venir a postear, encima que venís a pedir sin aportar nada, deberías aprender, leer algún tutorial, y tener un mínimo de criterio, y respeto por esta comunidad.

¿Te das cuenta de que estás pidiendo cualquier cosa (evidente) en cualquier foro? ¿Y que acá son demasiado amables para responderte?
Sin ir muy lejos, estamos en CSS, y tu asunto es ... ¿HTML?, ¿Framework?.
¿Y sabés la diferencia entre JAVA y Javascript? Porque si te falta aprender eso, ni vengas...

Y no es éste el primer caso, lo venís haciendo desde que llegaste, ahora me acuerdo de estos temas

Funcion pulsar

Dirigir funcion a un div

Pero son todos iguales.

En vez de quejarte por el trato, agradecé, y esmerate por no merecerlo.

satjaen · #9 (**permalink**) 08/10/2012, 13:34

Parece que el que no entiendes eres tu y tu amigo. En reiteradas ocasiones he comentado y tu lo sabras mejor que nadie (por favor si tan bien sabes "leer" miratelo y veras que he puesto que no soy programador informatico ni mucho menos), tengo mi propio trabajo que seguro que se mas tu trescientas veces pero no lo voy propagando.
Por favor, cuando me registre en el foro no me pidieron curriculum ni nada. Ruego a los resposanbles de este foro que me digan si se necesita algún tipo de carrera universitaria o algo asi.
Y si fuera asi por favor no volveré a escribir en este foro.
A los que se la dan de genios por favor no me volvais a escribir porque puede ser que perdais prestigio por ello.
Un saludo y agradecimientos a todos los que me han costestado.
Emprear perdona, queria decir Javascript pero en realidad es en Frameworks y Plugins Javascript.Si se me admite la rectificación claro está.

furoya · #10 (**permalink**) 08/10/2012, 18:30

¿Ven que fácil es dejar expuestos a estos desubicados?

[edit]

¡Peeero...!

¡Siempre la misma historia!

No miro mi panel hasta después de postear, y no vi tu valoración satjaen.

Por lo menos la justificaste

[/edit]

pzin · #11 (**permalink**) 08/10/2012, 19:34

emprear si. Estoy metiendo mis narices es cosas nuevas. Hoy estuve cuatro horas por la mañana rebuscando información en Internet para ver cómo se formaten fechas en rails y en español. Creo que Stack Overflow se piensa que soy un spider de Google a estas alturas. Luego entras aquí teniendo la cabeza como un tomate y te lees un "necesito saber" y un bloque de código generado por algo. Lo más bondadoso en aquel momento era decir eso —que tampoco le veo nada malo.

satjaen no sé donde crees que me rio de ti. Te dijeron de poner una capa cerca de BODY, a lo que yo dije que cerca sí, pero en cualquier caso por debajo de BODY, porque si lo pones por encima es una cagada. Y debido a que decías que querías saber, te dije que leyeras un manual, dado que un foro no es un buen lugar para empezar a aprender de algo. Supongo que habrás entendido otra cosa, porque si lo entendiste bien y me dices eso, o te ofende sobremanera que alguien te diga que leas un manual o eres hipersusceptible. Aunque yo abogo más bien por una falta de entendimiento de tu parte.

Y aquí hay muchas personas que no se dedican a la informática y no por ello dejan de leer tutoriales, manuales o webs de referencia. Aquí tienes a uno. No le veo relación una cosa con la otra. Si me compro un mueble en Ikea también saco primero la hoja en donde vienen las indicaciones para montarlo, no le voy al vecino y le pongo la caja abierta en su puerta porque sé que él sabe hacerlo. En todo caso iría con una pieza cuando en algún momento no entiendo algo. ¿O no? Imagínate que haces reformas, ya no es un mueble, son varios. No creo que tu vecino si sienta muy feliz cuando le lleves cajas y cajas. En cambio si le preguntas en dudas puntuales seguro que él mismo se ofrece para echarte una mano acompañando con un café, una birra o un pastelito.

Pues aquí antaño era así. Pero como han proliferado los Ikeas aquí van quedando cada vez menos vecinos que saben montar muebles pero aumentan los que obvian la existencia del manual de montaje.

No sé a qué te referirás con prestigio, pero el mío desde luego ni empieza, ni pasa, ni termina aquí. Y todo esto lo escribo en un tono con el fin de encontrar una ligera comprensión por parte de quien lo lee. No existe intención ni de reir, señalar o putiar —me gustó el palabro.

Y como último apunte, no creo que nadie necesite leer o que le pregunten antes por un currículum, leer normas de convivencia o cosas parecidas. Simplemente con aplicar un razonamiento de educación y respeto tal como en la vida real creo que todo se entiende. Lo que no se puede pedir, es respeto unilateral y tratar a otros sólo porque sepan un poco más como lacayos —es una exageración para ayudar en la comprensión.
Imagínate que en el foro de diseño entran a pedir un logo. Ahí se los cargan rápido y aquí, si se invita a leer el manual, zas zas...

emprear · #12 (**permalink**) 08/10/2012, 20:00

Cita:

Iniciado por Bonez

emprear si. Estoy metiendo mis narices es cosas nuevas. Hoy estuve cuatro horas por la mañana rebuscando información en Internet para ver cómo se formaten fechas en rails y en español. Creo que Stack Overflow se piensa que soy un spider de Google a estas alturas. Luego entras aquí teniendo la cabeza como un tomate y te lees un "necesito saber" y un bloque de código generado por algo. Lo más bondadoso en aquel momento era decir eso —que tampoco le veo nada malo.

@Bonez, no es nada personal, solo quiero que entiendas mi punto de vista, que de alguna manera sinteticé aqui

No es por la "gravedad" de la expresión, sino que, insisto, dejar al menos un antecedente del porque de la misma. fijate en este caso en particular, varios posts más adelante, @furoya, con su estilo "adoctrinador", por llamarlo de alguna manera, dejó un par de links de referencia como para justificar sus dichos.
Si yo hubiese leído eso antes, muy probablemente ni hubiese contestado al usuario en cuestión, ya que obviamente tiene muchos errores de concepto, los que, y coincido contigo, solo un RTFM podría aclarar en él. E insisto, no me puedo andar recorriendo todas las participaciones de un usuario para ver si vale la pena o no contestarle.
Espero que se entienda mi posición

Saludos

furoya · #13 (**permalink**) 08/10/2012, 20:37

Cita:

Iniciado por emprear

@Bonez
Ultimamente colega, te noto algo suceptible

Cita:

Iniciado por Bonez

emprear si. Estoy metiendo mis narices es cosas nuevas.

¿Es sólo mi impresión, o me estoy perdiendo de algo?

C2am · #14 (**permalink**) 08/10/2012, 20:47

Lo de susceptible supongo que lo dirá por el RTFM, que la verdad tuve que buscar para saber que significaba, yo pensé que era una nueva etiqueta html

, pero nop.

Saludos y haya paz en el mundo

pzin · #15 (**permalink**) 08/10/2012, 22:08

Cita:

Iniciado por emprear

@Bonez, no es nada personal

emprear ni así me lo he tomato. Igual mi respuesta sonó brusca y de ahí tu contestación, pero no era la intención. Y reconozco que últimamente no soy lo más amable y políticamente correcto que se debería (¿?) ser. Pero vamos, que te entiendo perfectamente y soy bastante consciente de que yo encendí mechas. Pero a veces las hay muy cortas.

furoya, viendo tu ubicación, nos vamos a cantar aquello de "caminito al costado del mundo...".

C2am la paz es un complemento de la guerra, y viceversa.

Pero sí, supongo que razón no te falta. Aunque casi no me creo que desconocieras RTFM.

satjaen · #16 (**permalink**) 09/10/2012, 03:04

Por favor, no quiero causar malos entendidos entre vosotros, solo quiero que se me entienda lo mejor posible y si no es asi que se me conteste con tan solo (por favor no entiendo lo que estas escribiendo) , simplemente.
El tiempo que se esta empleando en degradarme (lo digo por quien lo esta haciendo) se podia emplear en intentar corregir.
La humildad es una virtud, no un defecto.

satjaen · #17 (**permalink**) 09/10/2012, 03:43

Emprear he entrado en http://foros.emprear.com/ajax/demo/deportes.html pero al clickar en Ver código fuente para detalles. , no hace nada.
Gracias.

pzin · #18 (**permalink**) 09/10/2012, 04:29

Cita:

Iniciado por satjaen

El tiempo que se esta empleando en degradarme (lo digo por quien lo esta haciendo)

No sé quien te está degradando. Estás viendo cosas que no hay cual Don Quijote.

Cita:

Iniciado por satjaen

Emprear he entrado en [B]pero al clickar en Ver código fuente para detalles. , no hace nada.
Gracias.

Para ver el código fuente tienes que hacer click izquierdo sobre la página y en el menú que se abre elegir "ver código fuente".

Si no sabes hacer algo tan sumamente básico como ver el código fuente yo diría que lo que quieres hacer, a día de hoy, supera tus conocimientos. Por lo que de nuevo te invito a leer un manual.

satjaen · #19 (**permalink**) 09/10/2012, 04:57

Muchas gracias, Sancho por fin has hecho algo productivo, tu y yo nos vamos entendiendo.

furoya · #20 (**permalink**) 09/10/2012, 07:24

Y siiiiigue dándole al botoncito del "-1" (en vez de estar leyendo un manual)!

¿Qué no iban a tomar medidas contra estos especímenes? A nosotros nos sirven de ejemplo, pero la verdad es que ya no necesitamos más. Con los que hay ya probamos el punto.

Autoreporte

Por otro lado ... este Foro se está volviendo muy críptico...

satjaen · #21 (**permalink**) 09/10/2012, 07:58

No seas mas pesao, todos nos hemos enterado que ya que eres un genio.
Aporta cosas nuevas.
Siempre positivo nunca negativo.

pzin · #22 (**permalink**) 09/10/2012, 11:33

Cita:

Iniciado por furoya

Y siiiiigue dándole al botoncito del "-1" (en vez de estar leyendo un manual)!

Hay cosas para las que no hacen falta manuales, fíjate tú... Pero verás que justo debajo de estas líneas podrás ver otro número rojo.

satjaen desde luego, tienes algún problema de autoestima, porque no es normal tanta alusión cíclica a la genialidad ajena...

C2am · #23 (**permalink**) 09/10/2012, 11:35

Me parece que algún Moderador debería cerrar este tema, no da para más.
Saludos

satjaen · #24 (**permalink**) 09/10/2012, 13:02

Paso la consulta a Frameworks y Plugins Javascript, que es donde la tengo para no duplicarla.
Gracias por vuestra colaboración me ha servido de mucho.
Espero que no trateis de igual forma a todos los comunineros.