Saturday, November 18, 2006

Cross Browser Gradient from SlayerOffice

I recently ran into an interesting issue with the cross browser gradient background script from SlayerOffice, in conjunction with qForms and FireFox. I noticed that none of my forms were submitting in FireFox, and it almost appeared as if the form fields weren't there.

#1 - Issue with the gradient script:

On line 34 of gradient.js, for(i=0;i<objArray.length;i++) needs to look like for(var i=0;i<objArray.length;i++) because the variable i is also being used in getGradientObjects().

Oddly enough, this was only causing a problem in FireFox 2.0, and not IE 7. I've sent the updated code to Steve at SlayerOffice so you should probably be able to get the updated code straight from, but feel free to contact me if that's not the case.

#2 - Issue with qForms not loading:

Secondly, qForms was simply not working whatsoever. If someone else hadn't reported this problem, I would have reinstalled FireFox, that's how odd it seemed. On each page, I simply called qFormsInit() at the bottom of the page to kick off initializing qForms. This was occurring before the gradient background was applied, and therefore all of the form references in qForms were being blown away.

Instead, whenever code needs to be called upon page load, the following function seems flawless and works like a charm.


Check out the gradient script from SlayerOffice, it's fairly handy.

If you haven't heard of qForms, I would highly recommend checking out what Dan Switzer has developed, it's one of the best and most used JavaScript API's on the web.


  1. good post... anywhere i can't seem to get the script work in Firefox 2.0 even though i have amended the line 34 of the gradient.js. Is there anything i have left out? Thanks!

  2. Hi Chee,

    I uploaded the copy of gradient.js that I was using. Hopefully you can use this to compare the two versions and determine what's not working. Download it here...

    Let me know how it goes,

  3. Hi Michael,

    Thanks for the js file... but the problem still persists whereby Firefox is unable to display the gradient background correctly (it sticks to the top left of the page instead of in the middle)

    Anyway i will take a deeper look on the script and let you know on the progress ;)

  4. Gah!

    Just when I thought my prayers were answered...

    I'm having trouble making the SlayerOffice solution work on Firefox as well. I've tried your copy of the js file too, Michael...

    I'm trying to use it on TD tags. Are they not positioned?

  5. Update:

    I've had no luck getting this nifty trick to work with TD tags. I even tried downloading the sample page and adding a basic TABLE with one TR and two TDs, which fails under Firefox 2.0... If anyone has more info on this one, let me know please!!!

  6. Script does not work under firefox if it there in other javascript on the page. which is solution

  7. Thank you very much Michel for sharing this article on cross browser gradient. Can you share the link where I can download the code?