# Why won't my bookmarklet work in IE7?



## VistaRookie (Apr 26, 2008)

If anyone hates to read white fonts on a black background (or any distracting background) then this bookmarklet is a joy to have. It will turn the background white and the fonts black, as they should be. But while it worked in IE6, it will not work in Vista/IE7.

Any ideas how to get it to work? Or does anyone know of one that does the same thing that will work?

Since it is javascript, I don't know if it will show up correctly, but it pastes just fine as I am typing this.

javascriptfunction(){var%20newSS,%20styles='*%20{%20background:%20white%20!%20important;%20color:%20black%20!important%20}%20:link,%20:link%20*%20{%20color:%20#0000EE%20!important%20}%20:visited,%20:visited%20*%20{%20color:%20#551A8B%20!important%20}';%20if(document.createStyleSheet)%20{%20document.createStyleSheet("javascript:'"+styles+"'");%20}%20else%20{%20newSS=document.createElement('link');%20newSS.rel='stylesheet';%20newSS.href='data:text/css,'+escape(styles);%20document.documentElement.childNodes[0].appendChild(newSS);%20}%20})();

Looks like a colon brings up Mr Sad Smiley. Otherwise, seems OK.


----------



## VistaRookie (Apr 26, 2008)

Just thought I would add, this is the *only* bookmarklet out of over 20 that does not work.

I did find another color zapper, but I also found that it doesn't zap some website backgrounds.


----------



## EAFiedler (Apr 25, 2000)

Sorry I can't help with your issue. Just thought I'd let you know, if you enclose script with the *[plain] [/plain]* tags, the smiley faces won't appear.

javascript:(function(){var%20newSS,%20styles='*%20{%20background:%20white%20!%20important;%20color:%20black%20!important%20}%20:link,%20:link%20*%20{%20color:%20#0000EE%20!important%20}%20:visited,%20:visited%20*%20{%20color:%20#551A8B%20!important%20}';%20if(document.createStyleSheet)%20{%20document.createStyleSheet("javascript:'"+styles+"'");%20}%20else%20{%20newSS=document.createElement('link');%20newSS.rel='stylesheet';%20newSS.href='data:text/css,'+escape(styles);%20document.documentElement.childNodes[0].appendChild(newSS);%20}%20})();

http://forums.techguy.org/misc.php?do=bbcode


----------



## Shadow2531 (Apr 30, 2001)

For the IE7 part, try doing it like this:


```
var ss = document.createStyleSheet();
ss.addRule("*", "background: white !important; color: black !important");
```
etc.

Also:


```
document.documentElement.childNodes[0].appendChild(newSS);
```
That assumes that the first child of the documentElement is HEAD (or another element). But, that's not always true. The first child could be a text node. In the future, once HTML5 is fully supported in all browsers, you can assume that, but for now, use:


```
document.getElementsByTagName("head")[0]
```
to find the head element.

For other browsers, you can do like this instead:


```
document.getElementsByTagName("head")[0].appendChild(document.createElement("style")).textContent="css";
```
Also, if you put code in a data URI, use encodeURIComponent to encode the data instead of escape().

Also, in javascript URIs, everything after 'javascript:' needs to be encoded with encodeURIComponent, not just spaces. And, all newlines need to be normalized to %0D%0A, but some browsers don't like newlines, so it's best to strip them if that's a concern.

See http://shadow2531.com/js/jsuri.html?source=(function(){alert("test");})(); for example.


----------



## VistaRookie (Apr 26, 2008)

Hi Shadow

You think I am brilliant! 
I am able to use a bookmarklet but not write one. I am sorry but other than the word javascript, I am lost with the information you posted. OK, maybe I picked up on a few more words than that but really don't understand how to use what you posted.

I managed to get the "TEST" alert to show up.

Could you simplify it a little?


----------



## Shadow2531 (Apr 30, 2001)

This should show what I mean:


```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>bookmarklet JS experiment</title>
        <style>
            /* Evil styles */
            body {
                background: black;
                color: white;
            }
        </style>
        <script>
            var on = true;
            if (on) {
                window.onload = function() {
                    // uncompressed and unencoded bookmarklet source
                    (function() {
                        if (document.createStyleSheet) {
                            var newSS = document.createStyleSheet();
                            newSS.addRule("body", "background: white !important; color: black !important");
                        } else {
                            var newSS = document.createElement("style");
                            newSS.textContent = "body {background: white !important; color: black !important}";
                            var head = document.getElementsByTagName("head")[0];
                            if (head) {
                                head.appendChild(newSS);
                            }
                        }
                    })();
                };
            }
        </script>
    </head>
    <body>
        <p>Hard to read page.</p>
    </body>
</html>
```


----------



## VistaRookie (Apr 26, 2008)

Thanks for helping, Shadow. :up:


----------

