CODEWITHSUNDEEP
javascriptcssfirefox
Buzz Lightweight
Buzz Lightweight

Reputation: 11

Firefox cache issue with my site

I've started to build a site for a customer www.ifixboilers.com. It is a simple form based site, there are three options, when someone clicks on one of the options I use JS to change the CSS position of one of the forms. Once the form has appeared there are various parts of the form to fill out, BUT if they wish to return to the home page they can click the 'Return' button which uses JS to change the CSS to hide to form again, allowing them to select a different form or re-read the main page.

The problem lies with FireFox — when they click the return button, none of the front page is clickable. It's like the form is still there but not visible. It only becomes visible when I press Ctrl+F5 a couple of times.

In all the other browsers this is not an issue? I have searched high and low reading many Stack Overflow posts about cache clearing — I am open to any suggestions.

Upvotes: 0

Views: 160

Answers (4)

Buzz Lightweight
Buzz Lightweight

Reputation: 11

The only way to get my JS to work properly was to change the <a> tags to <input type="button">, and then use css to style them.

The problem was with this

<ul>
<li id="fix"><a href="#" onclick="showF1();">fix</a></li><!--fixForm.html-->
<li id="serv"><a href="#" onclick="showF2();">serv</a></li><!--serviceForm.html-->
<li id="cont"><a href="#" onclick="showF3();">cu</a></li><!--contactUs.html-->
</ul>

FireFox treated the "#" as a page anchor and changed the url to www.ifixboilers.com/#, so changing the anchors to buttons solved my problem.

<div id="buttons">
<input type="button" name="fix" id="fix" onclick="showF1();" /><!--fixForm.html-->
<input type="button" name="serv" id="serv" onclick="showF2();" /><!--serviceForm.html-->
<input type="button" name="cont" id="cont" onclick="showF3();" /><!--contactUs.html-->
</div>

Upvotes: 0

Zagorax
Zagorax

Reputation: 11890

Set z-index to -1 at the end of the animation or set display to none. Otherwise, you won't be able to click "through" the div.

Upvotes: 0

Abhijit
Abhijit

Reputation: 895

The fact is that your form is still there above the buttons, just that it's opacity has been set 0. You should try to completely hide the form (like using CSS "display: none" property) at the end of the fadeOut animation.

Upvotes: 1

Ashwin Singh
Ashwin Singh

Reputation: 7345

Did you tried adding any of these to your markup?

  1. <meta http-equiv="Cache-control" content="no-cache">
  2. <meta http-equiv="Cache-control" content="no-store">
  3. <meta http-equiv="Cache-control" content="must-revalidate">
  4. <meta http-equiv="pragma" content="no-cache">
  5. <meta name="expires" content="0">

though FF3 will still be a problem.

Upvotes: 0

Related Questions