CODEWITHSUNDEEP
javascriptinternet-explorerfirefox
jwmann
jwmann

Reputation: 608

Invalid Argument Error for Function call, specifically with IE and FF

I'm using this small javascript 'toolbox' from http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

So far my code works in Firefox and Chrome but not IE.

*EDIT* Nore in Firefox either..

I get an Invalid Argument error right where it calls the getCSSRule 'toolbox' function. http://d.pr/Ai5D and from DevTools http://d.pr/btFU

Here is the code in question:

function myModal() {
  if (window.location.href.indexOf("#fr") != -1) {
    getCSSRule("#MB_content").style.backgroundImage = "url('/mailer/img/bgimg-fr.jpg') !important";
    Modalbox.show('mailer/myModal-fr.html', {title: 'Nouveau', width: 1000}); return false;
  } else {
    Modalbox.show('mailer/myModal-en.html', {title: 'Sign-Up', width: 1000}); return false;
  }
}

function thankYou() {
  getCSSRule("#MB_content").style.backgroundImage = "none !important";
  getCSSRule("#modalWrap").style.minHeight = "0 !important";
}

You can see any of the other files here https://github.com/jwmann/Modal-Sign-up/tree/master/mailer

Upvotes: 0

Views: 327

Answers (1)

James
James

Reputation: 22247

The docs for getCSSRule say it returns the style object. You are expecting it to return a DOM object.

So:

getCSSRule("#MB_content").style.backgroundImage = "url('/mailer/img/bgimg-fr.jpg') !important";

should be

getCSSRule("#MB_content").backgroundImage = "url('/mailer/img/bgimg-fr.jpg') !important";

However, the docs also give usage examples where it returns a DOM object. Confusing!

Part 2: With a bit more testing I found that:

  • if there is no style tag or external stylesheet on the document it fails
  • if your object #MB_content has no CSS rules defined and you use getCSSRule it produces your error. In that case use addCSSRule.

Upvotes: 2

Related Questions