Program The rantings of a lunatic Scientist

Posts marked as Javascript


Colour Bar recreation in HTML

Javascript Web Dev

Last night whilst waiting for the NASA Curiosity landing, one of my friends was showing me his progress on his new CV / Portfolio Site, at the top of the page he had a banner of repeating coloured rectangles. It looked awesome, and he was even kind enough to link me the image.

It got me to thinking though, why use an image? It’s a simple enough effect, why not do it in HTML? And so at 5am I set to work on CSSDeck to see what I could do.

Before I show you the Code you can see running demos of project on CSSDeck

Here is what I came up with. Very simple HTML markup that allows you to either hard code a couple of elements or run the little JQuery function generate the markup for you for n elements.

It works very nicely and fills the whole width of the screen during resizes, but it is a little bulky for my liking. And essentially all we’re doing is drawing some simple colours… Surely this is a job for HTML Canvas? Right?

And so now, after another session of light development, here is a version using canvas. I couldn’t workout how to draw from the context of a 100% width canvas (I’m new to this technology), so I have split the function in two. A worker which initially calls the function and set up the resize event, and the function itself which does the drawing. The CSS has also been simplified and the colour HEX values moved into the Javascript array.

Reddit Linker: A Chrome Extension for added sanity

Javascript Web Dev

I finally got sick enough of how Reddit opens Title links in the same tab to do something about it. I always took it as a given in Web Design that internal links opened in the same tab unless specified otherwise, and that external links always loaded in a new tab, so as to protect any possible progress the user may have had within your site/page against being lost… Which with Reddit, it is.

With Vanilla Reddit clicking a link opens it in the current tab, and backing up back to Reddit via the ‘back’ button does not take you to the same place in the page you left.

With the Reddit Enhancement Suite plugin, which features continuous scrolling the affect of this misalignment becomes much more frustrating. It is easy to have scrolled 30 virtual pages through Reddit, only to click a link without thinking and backup to find you are back on page 0. And that auto load images has been turned off.

Shift – X btw if anyone doesn’t know; it’s the same as clicking the Show/Hide Images button at the top of the page.

Anyway, I finally got sick of it and in 2 minutes I whipped up this handy little plugin for Google Chrome.

On page load it simply registers an event for whenever the page is altered. When this happens it sets a ‘timeout’ function to run in 100 milliseconds time.

Why in 100ms time? Because the event fires whenever the page is altered we don’t want it to fire for every little thing when lot of stuff happens. By waiting 100ms we are effectively saying…

If the page has changed, possibly multiple times, and now has become stable for 100ms then fix the page…

Here is the code for the plugin so you can see how simple it really is. The only additional thing that I left out of the code here is that in the Packaged Chrome Extension I prepended the Jquery .js file to the beginning of linker.js and then compiled the whole thing with Google’s Closure Compiler. Which is a very neat and powerful Javascript optimizer and minifier.