changing visibility using javascript

Question

hi i have web page which uses ajax to retrieving data from another pages and while doing that i want to show a loading gif in the page so i ve create a div with my gif on it     lt div id  loading  gt  lt img src  images loadinfo net gif  width  48  height  48    gt  lt  div gt    here is my css code      content  loading       visibility hidden      position  fixed      width  48px      top  0px      now i figured all i need to do is to set the visibility of loading div to  visible  at the beginning of my loading content ajax function and then at the end make it hidden again  but its not working weird thing is  if i create loading div visible and then turn it hidden at the beginning of ajax function it works fine      here is my function     function ajaxpage url  containerid        document getElementById  loading   style visibility    visible        var bustcachevar   1   bust potential caching of external pages after initial request   1 yes  0 no      var loadedobjects          var rootdomain    http       window location hostname     var bustcacheparameter           var page request   false     if  window XMLHttpRequest     if Mozilla  Safari etc     page request   new XMLHttpRequest       else if  window ActiveXObject       if IE         try               page request   new ActiveXObject  Msxml2 XMLHTTP             catch  e                try                   page request   new ActiveXObject  Microsoft XMLHTTP                 catch  e                     else     return false     page request onreadystatechange   function              loadpage page request  containerid            if  bustcachevar    if bust caching of external page     bustcacheparameter    url indexOf         -1      amp     new Date   getTime           new Date   getTime       page request open  GET   url   bustcacheparameter  true      page request send null     function loadpage page request  containerid        if  page request readyState    4  amp  amp   page request status    200    window location href indexOf  http      -1   document getElementById containerid  innerHTML   page request responseText     function loadobjs         if   document getElementById  return     for  i   0  i  lt  arguments length  i              var file   arguments i          var fileref              if  loadedobjects indexOf file     -1      Check to see if this object has not already been added to page before proceeding             if  file indexOf   js      -1      If object is a js file                 fileref   document createElement  script                   fileref setAttribute  type    text javascript                    fileref setAttribute  src   file                 else if  file indexOf   css      -1      If object is a css file                 fileref   document createElement  link                   fileref setAttribute  rel    stylesheet                    fileref setAttribute  type    text css                    fileref setAttribute  href   file                                   if  fileref                      document getElementsByTagName  head   item 0  appendChild fileref              loadedobjects    file         Remember this object as being already added to page                     document getElementById  loading   style visibility    hidden

User · Answer

Use display instead of visibility   display  none for invisible and no setting for visible

User · Answer

function loadpage  page request  containerid      var loading   document getElementById    loading            when connecting to server   if   page request readyState    1         loading style visibility    visible          when loaded successfully   if  page request readyState    4  amp  amp   page request status  200    window location href indexOf  http    -1             document getElementById containerid  innerHTML page request responseText         loading style visibility    hidden

User · Answer

If you just want to display it when you get a response add this to your loadpage    function loadpage page request  containerid      if  page request readyState    4  amp  amp  page request status  200           var container   document getElementById containerid         container innerHTML page request responseText        container style visibility    visible            or        container style display    block       but this depend entirely on how you hid the div in the first place

[javascript] changing visibility using javascript

Examples related to javascript

Examples related to css