problem with js function not working on one page

[Terry Gilliver]

I have a function which is similar to an alert(), but with a timeout so that it disappears after a certain amount of time:

pre
/**

• Add a timeout alert function
  *
  */
  function Alert(msg,duration)
  {
  var el = document.createElement("div");
  el.setAttribute("style", "position:absolute; top:10%; left:10%; border: black 1px solid; background-color:white; color:green; width:80%; text-align: center; z-index: 1000;");
  el.innerHTML = "
  " + msg + "
  ";
  setTimeout(function(){
  el.parentNode.removeChild(el);
  },duration);
  document.body.appendChild(el);
  }
  /pre

  I use this to show success of a service call using something like:

  codeAlert("Completed Successfully", 3000);/code

  in the success function of the service.

  This works great in most cases, but on one particular page it fails to show the message. I thought at first it might be a z-index issue, so I increased its z-index to 1000 (see function), but this has no effect.

  I can't see why my div is not being shown, it works everywhere else. Any suggestions?

  By the way, I have checked that the service has in fact run by changing my Alert() for a standard alert() which works ok.

  sample image of a working page showing a popup message:

  

[Terry Gilliver]

I tried adding breakpoints to the function and can see the function being executed, but the div is not being shown. It's really strange.

[Illya Stepanov]

Hi Terry -

It's hard to say only based on screenshots, this could be some specific CSS conflict on this particular page if the function itself works. You'll need to inspect your script/css flow on this particular page using browser developer tools.

[Terry Gilliver]

Hi, Thanks for that Illya,

I know now what happened. By removing the time out so that the div was left permanently on the screen, I found out that the problem is because the page size is bigger than the view window, it has actually scrolled off the screen!

By changing the positioning from absolute to fixed has cured the problem.

The new code:

pre
/**

• Add a timeout alert function
  *
  */
  function Alert(msg,duration)
  {
  var el = document.createElement("div");
  el.setAttribute("style", "position:fixed; top:10%; left:10%; border: black 1px solid; background-color:white; color:green; width:80%; text-align: center; z-index: 1000;");
  el.innerHTML = "
  " + msg + "
  ";
  setTimeout(function(){
  el.parentNode.removeChild(el);
  },duration);
  document.body.appendChild(el);
  }
  /pre