A few days ago a friend approached me about an interesting background effect he has seen on a website and how he wanted to implement it into his website. I was curious about how it worked so decided to build a jQuery plug-in that does it for you; hooray for jQuery (again).
The effect is a scalable background image; as you expand / contract the browser window the background image scales up and down with respectively. Unfortunately it isn’t possible to do using only CSS 2.1; it’s possible using CSS3 using the background-size property, though not yet widely supported. The technique doesn’t use a background image, it uses an absolutely positioned image to achieve the same effect; so it could be considered a hack. If you’re not sure what I mean, here’s a demo. It’s quite simple to use; here’s the basic HTML:
1
2
3
4
5
6
| <div id="container">
<!-- Content here -->
<!-- This Image will resize with every window resize -->
<img id="imageID" src="images/our-image.jpg" alt="Fake background image" >
</div> |
The plug-in is called using (with custom settings):
1
2
3
4
5
6
7
8
| //Plug-in usage
jQuery(function($){
$("#container").backgroundScale({
imageSelector: "#imageID",
centerAlign: true,
containerPadding: 100
});
}); |
The plug-in accepts an object as an argument with custom user settings:
- imageSelector: The ID or class of the fake background image (default: “#bgImage”).
- centerAlign: Align the image in the center of the container, both vertically and horizontally (default: true).
- containerPadding: Padding in pixels that expands the image slightly in relation to it’s container to minimise seeing behind the image when scaling up and down in certain browsers (default: 80).
A couple of things to note:
- You must have a container div for the image, using the body tag returns strange results.
- The resize event in Firefox is a little weird, it doesn’t fire continuously as you scale up and down so you can sometimes see the container background when scaling. There are plug-ins that make the resize event consistent across browsers.
- Since this is a JavaScript dependent effect it may be worth adding the fake background image using JavaScript
- It’s better to use a larger image for scaling, as expanding a smaller image will look fuzzy and out of focus.
Any questions / ideas for expanding this plug-in then leave a comment. View a demo or download (version 0.1 – updated 17th Feb 2010).
I’m a little late with this post as jQuery 1.4 (and since then 1.4.1) came out on January 14th but I’ll write it anyway. A simple little method that has been added to the core is delay(); it allows you to delay the execution of functions that come later in the queue. There have been times in the past where I’ve wanted a transition to pause for a couple of seconds, then continue; so to do this I was using a snippet of code from Karl Swedberg:
1
2
3
| jQuery(function($){
$("#selectedElement").fadeOut().animate({opacity: 0.0}, 2000).fadeIn();
}); |
The code above animates at 0 opacity for 2 seconds; since the element already has 0 opacity (from the fadeOut) nothing happens, then it fades back in. The method worked but it was a bit of a hack. So now we can use the delay method:
1
2
3
| jQuery(function($){
$("#selectedElement").fadeOut().delay(2000).fadeIn();
}); |
Simple! The method can take a value (in milliseconds) for the delay or it can take the usual ‘slow’ and ‘fast’ strings for 200 and 600 milliseconds respectively. The delay method is just the tip of the iceberg with jQuery 1.4, it’s well worth an upgrade.
There have been a couple of recent projects that have needed a Twitter style character count down function. Since I seem to keep using the function I thought I’d make a little jQuery plug-in that does the same job (demo / download).
1
2
3
4
5
6
7
8
9
10
11
12
| //Plug-in usage
jQuery(function($){//jQuery ready
$("#myTextarea").charsLeft({
maxChars: 100,
attachment: "before",
charPrefix: "You have",
charSuffix: "characters left.",
wrapperClass: "charsLeft",
countClass: "charCount",
errorClass: "charError"
});
}); |
The plug-in has a few options that can be controlled when implimenting:
- maxChars: Maximum number of characters a user can enter (default: 100).
- charPrefix: The text that comes before the character count (default: “You have”).
- charSuffix: The text that comes after the character count (default: “characters left.”).
- attachment: How the paragraph is attached to the input / textarea. Accepts “before” and “after” (default: “after”).
- wrapperClass: The class applied to the wrapper div (default: “charsLeft”).
- countClass: The class applied to the number count span (default: “charCount”).
- errorClass: The class applied to the input / textarea when a user goes over allowed number of characters (default: “charError”).
An example of the HTML that is added to the input / textarea:
1
| <div class="charsLeft">You have <span class="charCount">100</span> characters left.</div> |
Note: This plug-in doesn’t stop a user from submitting a form when they are over the maximum number of characters, it is simply for visual feedback.
View a demo or download (version 0.1 – updated 5th Feb 2010).
I’ve known about the Web Workers API (specifications) in Firefox 3.5+ for quite a while now but never had the chance to use it. With this little graphing project I saw it as the perfect opportunity to use it.
The Workers API allows you to ‘spawn’ worker threads underneath the main browser. The advantage of this is when the workers are doing heavy calculations the main browser window will still be responsive. Usually what happens is the heavy calculations are done by the browser thread, so the whole page and UI will freeze until the calculations are finished. Not at all good for the user.
There are limitations as to what the worker threads can do as they work within a sandbox. Worker threads can’t manipulate the DOM directly; for DOM changes, a message must be sent back to the main thread. Luckily creating a worker thread and cross thread communication is simple:
1
2
3
4
5
6
7
8
9
10
11
| //Create a worker thread
var worker = new Worker("js/worker.js");
//Send values to worker thread
worker.postMessage("My message here");
//Message recieved from the worker thread
worker.onmessage = function(e){
//Grab all data and do something with it
var dataBack = e.data;
} |
The worker.js file will wait for a message from the main thread like so:
1
2
3
4
5
| //Message from the window
function onmessage(e){
//Do something with the data
plotGraph(e.data);
} |
The worker thread has now been created and messages can be passed back and forth as and when they are needed. You can think of a worker as a little math slave that’s very good and number crunching but not much else.
You can view a live demo of the chaos graph here, it only works with Firefox 3.5+ at the moment due to it’s dependencies on the Web Worker API.
An example of 'order' (k=1).
Chaotic results (k=2).
- Value of k: This sets the coefficient k, try changing this from 1 to 2, and any number in between and see what happens.
- Starting value of x: Self explanatory really, sets your initial x value before it is fed back into the equation.
- Iterate x by (per worker): This sets the difference in x value per worker thread. If this value equals 0.1, and your initial x value is 0.3, worker 2′s inital x value equals 0.4, worker 3 = 0.5 and so on.
- Number of iterations: The number of times x is fed back into the equation. The bigger the number the longer it will take to calculate.
- Number of worker threads: Set how many worker threads you wish to run at the same time. Each worker will return a set of points from which a graph is plotted.
The Worker API is definitely something to look out for in the future, quicker and more efficient web apps here we come!
View demo.
Recently I started re-reading a book by now Professor, Ian Stewart, called “Does God play dice?”. A truly fascinating book about how the universe isn’t always predictable. It all comes down to Chaos Theory.
In the first chapter page 14 & 15 the reader is invited to grab a calculator and create a little chaos. With a few key presses it’s possible to create a completely chaotic pattern of numbers. Ian Stewart has also added a little graph to show what that pattern looks like; this is where Flot comes in.
Flot is an pure JavaScript graphing engine for jQuery. It can create great looking graphs in a matter of minutes. Pass your data in an array to Flot, it does all the hard work and a graph pops out the other end using the HTML5 canvas tag with some VML magic. It is even supported by IE, just add a conditional tag with a script tag pointing to excanvas.pack.js.
Using 6 threads to generate chaotic data
The equation to create this set of chaotic data is very simple:
As you can see from the formula above, the equation is a feedback loop. With each iteration a new value of ‘x’ is created and fed back in. The amazing thing about this equation is how simple it is to get both order and chaos. Set your value of ‘k’ to 1 and after a few iterations order is achieved; set ‘k’ to 2 and you get chaos.
I will be posting a demo to play with in the next few days, it isn’t quite finished yet but you can see a screenshot above.
