0

I want my website to have an overlay over the entire webpage and an GIF-animated "loading..." spinner whenever buttons (links and submit buttons) within my website are clicked. The website should work as an iPhone web app ("save to home screen") - therefore, I need the "window.location" (see Oskars comment). I do not and will not use any third party libraries (no jquery etc.).

What does work:

  • Overlay works for all buttons
  • Overlay and GIF animation work for form submit buttons
  • The GIF does appear when I click a link, but...

What does not work:

  • the GIF is not animated when a link is clicked. I am using Firefox, Internet Explorer and Chrome in their respective latest versions. All I find through google is references to "old" evil ie versions - but that is not the case here.

My question for you:

  • How can I get the GIF to be animated?

For the time being, I will believe this comment and shut up...

Here's what I have in HTML and javascript:

<div id="overlay"></div>
<div id="page">
  <a onclick="document.getElementById('overlay').style.display = 'block';
              window.location='/';
              return false;" 
     href="/" 
     title="home" 
     alt="home">
     home
  </a>
</div>

Here's what I have in CSS:

div#page {
    position:absolute;
    top: 0px;
    left: 0px;
    width:100%;
}
div#overlay {
    display: none;
    z-index: 10000;
    background: #000;
    position: fixed;
    width: 100%;
    opacity: .6;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image:url("spinner.gif");
    background-repeat:no-repeat;
    background-position:center;
}

(where "spinner.gif" can be http://www.melabev.org/images/spinner.gif, for example)

Here's a jsfiddle version: http://jsfiddle.net/87paH/2/

Community
  • 1
  • 1
Swiss Mister
  • 3,260
  • 2
  • 20
  • 42
  • The image URL you have shown has `gif` in images folder, whereas you are accessing it in the `root` by using `/` – Salman Feb 26 '13 at 15:47
  • Removing the window.location bit makes it work. Might be a timer issue so put a delay before it goes to the specified URL or something: http://jsfiddle.net/ZGRNL/1/ – Billy Moat Feb 26 '13 at 15:51
  • Billy: The website should work as an iPhone web app ("save to home screen") - therefore, I need the "window.location". Never mind the path, Салман, but thanks for sharing the thought! – Swiss Mister Feb 26 '13 at 15:55

2 Answers2

0

The animation is probably being interrupted by the process of loading the next page. I created a test page with a link and the spinner animation. When I clicked the link, the animation stopped while the browser loaded the new page. Are you sure it isn't just browser behavior like this that stops the animation? Does the animation work if you take "window.location = '/'" out of your onclick?

If you want to seamlessly navigate to a new page, you could use AJAX to retrieve the HTML with Javascript, and replace the contents of your page with what you've fetched. Your overlay spinner should work just fine while the AJAX is running.

thelr
  • 1,134
  • 11
  • 30
  • Navigating to a new page is a very standard operation which any internet user is accustomed to. It would make more sense to not use the overlay in this situation. – thelr Feb 26 '13 at 16:08
  • Good point, Seth! Since it is a mainly mobile website, load times are sometimes long, I want visitors to see that the click was actually applied, and I want them not to click anything else on my site during the call. I agree on the AJAX point, but this is not for the initial version... – Swiss Mister Feb 26 '13 at 16:17
0

You could try this:

  <a href="javascript:overlayFunc()" onclick="overlayFunc()" title="home" alt="home">
     home
  </a>


function overlayFunc(){
    document.getElementById('overlay').style.display = 'block';
    window.setTimeout('window.location="/"', 1500);

    return false;
}
red_alert
  • 1,738
  • 14
  • 24
  • I _need_ to change the page - that's what the link is for. Did I get you wrong? – Swiss Mister Feb 26 '13 at 16:02
  • I've try to do some changes. Your code is working for me and I'm using Chrome, so I've made some changes to delay the window.location function. – red_alert Feb 26 '13 at 16:34
  • Thanks a lot for your efforts, red_alert. This does indeed show an animated GIF indeed, but it also stops animating as soon as the page load starts. Plus: the page load is delayed by one and a half seconds... – Swiss Mister Feb 26 '13 at 17:09
  • Ok great, if it's that what you need. You could now accept the answer and give it an up vote. Thanks – red_alert Feb 26 '13 at 17:13
  • erm... it is _not_ what I need. The page load should _not_ be delayed, and the animation _should_ run until the page is loaded. Sorry if I was not clear. – Swiss Mister Feb 26 '13 at 18:19