Programming


22
Jun 08

JQuery and WordPress

Update: New Post – A better way to use jQuery in WordPress Themes

I was making a new template for my site. I was originally going to make it all curvy and web 2.0… but I figured, since I am not the best at the visual design of things I went with this. I like it.

While I was making it, I was looking at using jQuery to do the curvy web 2.0 things. Now, if you have not used jQuery before, you should check it out, it is simple and there are a million plugins for it. There is one for corners (which I was going to use), there is a lightbox one, so on and so forth. It is also really small, the version included with the latest wordpress install is 1.2.3 which is about 30 KB. The latest version is 1.2.6.

Since I was not going to make it all curvy I decided to add an easter egg to my blog using jQuery.

At first I kept getting the error:

Error: $ is not a function
Source File: http://localhost/blog/
Line: 22

That is apparently because WordPress uses a lot of different javascript libraries and apparently they have done a bit of rewritting. instead of using the $(“”) to start your jQuery javascript, you use jQuery(“”). This took a bit of searching and testing to find out, but in the end I got that figured out. It was then on to the code to make the easter egg work. Here it is:

jQuery(document).ready(function(){
 jQuery("h4").click(function(){
  jQuery(this).fadeOut("fast", function() {
      jQuery(this).html("π").fadeIn("fast");
      });
  });
});

Step by step:
1 -> Load this when the page loads
2 -> Whenever a h4 is clicked (there is only one here so its fine to do it this way)
3 -> Fade out what we clicked on fast
4 -> fade in pi

Nice and easy (and it looks cool too). This could be put to much more practical uses like translations or possibly a slide show of images (fadeIn pause fadeOut, fadeIn next image). For now it will just be a small easter egg that I added to my site.

Oh, and apparently the google syntax highliter has decided not to work in this version of wordpress so, I am now using wp-syntax instead.

Oh ya… and you have to have these lines in your code before you call any of the jQuery functions.

<script src="./wp-includes/js/jquery/jquery.js" type="text/javascript"></script>
<script src="./wp-includes/js/jquery/jquery.corner.js" type="text/javascript"><!--mce:1--></script>

(PI is an inside-ish joke by the way)

Edit: You do not need the jquery.corner.js part… unless you want fancy corners.. you would also have to download it too… if not you will get an error.

Ok, I think there is a bug somewhere, if you click through using the page links, and do a search the pi thing will work. If you rely on the cache (go to the same page by clicking on the title link of a post/page) it does not work at all. (At least in FF3)


19
Apr 08

Google Chart Helper 0.1

Jobba the Site is coming along great and is getting closer and closer to being done.

As I am sure you know, Google recently released a chart api, but it is a bit of a pain to generate all of the numbers and put them in the image uri so that Google can generate the charts for you. That is why I created the google_chart_helper for Code Igniter. So far it is pretty beta, and only does one chart type, the pie chart, but I figured I would put it up here to see if anyone has a better way of doing it (or some cool tips that I don’t know about).

Here is how it works:

$chart = new google_chart();
$chart_data = array(2,3,4);
$chart_labels = array(two, three, four);
$width = 500;
$threedee = false;
$colourful = true;
$chart->pie_chart($chart_data, $chart_labels,
$width, $threedee, $colourful);

and the result will be something like:

This was generated a while ago, and I saved it, but generally, Google will create a new chart for you every time you ask for one.

Here is the php file:

my_google_chart_helper

Have fun!

Edit
Here is the file as a txt so you can look at it (or what ever)


10
Apr 08

Testing the C# waters

So, since my desktop got fried and will barely boot into Linux, I figured it was time to check out Visual Studio 2005 (which my dad gave me at Christmas time). Installed with no problem, other than finding the key that I was given. It then decided that it needed a number of updates, so I let it do its thing, and eventually I was greeted with this:

Nice clean, and it started up faster than eclipse or Netbeans, though it is out dated by comparison. I decided that I wanted to write a quick hello world application, so I created a C# Project (or ‘solution’ as it is referred to in some locations). And was greeted with this:

Also nice and clean, so far so good. It looks like a lot of code to write a small program though. Strange that System needs to be added via ‘using’ which I am assuming is similar to an import. Fair enough, it does it for me so I am not really that bothered by it. Now what do I type to print stuff out… hmmm… Since it is a console program, perhaps it is console (the first thing that showed up using code completion, fancy that).

It makes sense, and there is a description of it right there and everything. How convenient.

Console.WriteLine("Howdy World");

There we go, run it and woah, that was fast, no pausing on debug apparently. Should probably make it wait a second so that I can see what is going on in the console.
After looking around on the Internet a little, I found that you do that by:

System.Threading.Thread.Sleep(3000);

So without further ado, here is a screen shot of the running program:

That wasn’t so bad, I guess I could get used to the weird redundancies of the language. Its sort of like java I guess.

If you want to run my totally awesome program, here it is:

Howdy World.exe

Edit

And there is why we don’t like Microsoft, its so obtrusive… Installing VS 2005 has removed all of my previous java file associations. They are now associated with j# files… grrr…


5
Mar 08

Captcha

Apparently it won 2nd prize at a mashup camp. Though, I think I may be a robot…

Hmmm

I like how the guy with the beard shows up twice…


19
Jul 07

The answer in Ruby (so far)

a = [1,2,3,5,7,8,9,10,12,13,19,200,900,901,902,903,904,905,1000]
l = a[0]
f = a[0]
z = a.length
i = 0
s = ""
until i == z
  if (a[i]+1 == a[i+1])
    l = a[i+1]
  end
  if (a[i]+1 != a[i+1])
    if f == l
      s = s+"#{f}"
      if i+1 != z
        s = s+","
      end
  end
  if f != l
        s = s+"#{f}=&gt;#{l}"
        if i+1 != z
          s = s+","
        end
    end
    f = a[i+1]
    l = f
  end
  i+=1
end
 
puts s