Inserting style rules dynamically

This might be obvious but it took me a bit of fiddling to get it right. I wanted to add new style rules from JavaScript. Actually I wanted to override existing style rules but later rules dominate in CSS so it works. The idea is to insert a STYLE element in the head using innerHTML. I used the jQuery version of innerHTML. This example is using the method to define colors for syntax elements:

var insertStyleRules = function(rules) {
    $('head').append('<style>'+rules+'</style>');
};

var cssString = ".sourceCode{background-color:white;color:black;}"
    +".keyword{color:#a52a2a;}"
    +".type{color:inherit;}"
    +".string{color:#008800;}"
    +".specialchar{color:inherit;}"
    +".comment{color:#ac2020;}"
    +".number{color:#ff00ff;}"
    +".preproc{color:inherit;}"
    +".symbol{color:#1861a7;font-weight:bold;}"
    +".functioncall{color:inherit;}"
    +".cbracket{font-weight:bold;}"
    +".function{color:red;}";

insertStyleRules(cssString);

Using jQuery with Greasemonkey

jQuery is very good at DOM element creation, selection, and manipulation, just the thing you need to do in a Greasemonkey script. (I’m sure the other JavaScript libraries are good at this too but life is too short to fully investigate all the JavaScript libraries.) I was experimenting with and wanted to use the jQuery selectors. To do this I needed to load jQuery in the script.

Google hosts several JavaScript libraries and provides two methods of getting jQuery:

<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1.2.6");</script>

and

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Using advice given at this blog entry,  I used this Greasemonkey script template:

// from: http://blog.gslin.org/archives/2008/06/30/1531/
(function(){
 function myjob()
 {
 // your code...
 }

 GM_xmlhttpRequest({
 method: 'GET',
 url: 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js',
 onload: function(r){ eval(r.responseText); myjob(); }
 });
})();

and it worked fine. I used the second Google form since it only require one GM_xmlhttpRequest call and getting them to chain seemed complicated.

A Greasespot wiki entry suggested this:

// from: http://wiki.greasespot.net/Metadata_block#.40require
// ==UserScript==
// @name          Hello jQuery
// @namespace     http://localhost
// @description   jQuery test script
// @include       *
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
// ==/UserScript==

$(document).ready(function() {
 $("a").click(function() {
 alert("Hello world!");
 });
});

This is simpler but I could not get this to work for me.

Looking at this now I wonder if you could not just use script insertion, that is, create a script element and insert it in the document and use one of the two Google forms directly? Well. I got it working so I am happy and it should work for you too. You might get the “require” or script insertion to work and that might be even simpler.

Introduction to Web Coder

The purpose of this blog is to record things I learn as I explore programming on the web. It is so useful to be able to google something when you have a problem and find an answer. I wanted to give a little back and record the things I learn so that someone else can benefit from them.

I have programmed for a long time. I started with C and used a lot of other languages along the way. I moved on to C++ and Java. The first really exciting language I used was Tcl/Tk. That was when I fell in love with scripting languages. A few years ago I learned Objective-C and the Apple Cocoa programming environment. That was exciting too. For a couple of years I have been mainly programming in JavaScript, which I like a lot. Of course that means also using CSS, and HTML, and, in my case, PHP.

I decided to move my whole computing life to the cloud. Not because it is always better now but because it seems to be the future and it is easier when you concentrate on one area.

I am doing this now because I am redoing my web site and web projects so they are more complete and more consistent.