How not to win customers with your sales site

Tuesday, 19 October 2010

View Comments

I'm currently in the middle of purchasing something on the internet. Easy you might think, unless the thing that you need to buy is for your business or enterprise. Years ago sites like Amazon and eBay revolutionised the way we bought on the internet and made it easy to purchase goods in a way that worked for the consumer. Why did these sites become king? Not because of what they were selling, but how they were selling. It's the experience that matters. Why head to an online store that only shows part of their catalogue, requires you to sign up to use trivial parts of the site or has poor payment integration.

Unfortunately the same revolution hasn't happened for enterprise. B2B purchases are a nightmare obstacle course. Want to see our product overview video?... give me your name, number and email address and then we'll let you see. Want to know how much it costs?... give me your number and I'll call you. Want to contact a human?... our sales staff will be glad to have a chat and then call you every week for the next two months.

Most B2B business with an online presence are still stuck in the past, still trying to bug people so they can exist off the bottom 2%, the suckers. Their sites, no matter how elaborate are set up to solicit phone calls. Just like companies that cold call customers, it's just another form of spam and unfortunately, some people fall for it. After all they don't really have a choice.

So how can you improve your sales site? What should you change so that you are fishing for the 98% and not the bottom 2% that fall into the trap? Below are my suggestions for improving your B2B site to make it more customer friendly.


1. Don't hide your sales pitch.
Your home page might have drawn me in, but what are you providing beyond your flashy splash page? Do you have white papers, product overviews and videos detailing your products? Don't make me have to sign up for them. If your product is worth knowing make sure it can be known by the world. If you have some product videos host them on Youtube, who knows who might stumble across them. And don't hide your sales pitch behind jargon I can't understand. If I want a HR solution with payroll integration, tell me that's what you have and don't make me have to call to find out.

2. Be contactable in a way that is non-creepy.
Someone you don't know who calls you once a week to ask you what you are doing... that's a stalker. If I have a quick question about your product I don't want to call you because I know by looking at your website your first question is going to be: what is your name, what is your company, what is your position, what is your phone number? If I want to ask a quick question I prefer to send you an email, because I just want an answer to a single question. I don't want to be sold on your product just yet. Teach your call centre staff to answer emails if that's what it takes.

3. Give me a price
If I'm comparing 10 companies all with good looking web sites that are full of marketing fluff there's one good way to tell you apart: give me a price. If you can't tell me the price per license for enterprise for x users then I can only believe that you are hiding behind your product and it can't be that good if you can't tell me the price up front. Tiered pricing and support is fine, but be upfront. Don't leave me guessing that I pay a premium just because of my name and reputation.

The success of your sales site on the internet will depend on how well you can build a relationship with your audience. If you are full of jargon and fishing for my number you are not out there trying to reach out to your customers. eBay and Amazon are about trust and their relationship with their customers, make your sales site with the same idea in mind. Educate your customers, teach them why your product is better, provide them with tools to honestly compare and allow them to reach out to you.
more...

Great jQuery text silhouette animation

Monday, 18 October 2010

View Comments

Going over some jQuery plugins today I came across this effect in a banner on this site that I thought was pretty cool. Btw, the plugin on that page is quite nice and will be even better after a few more releases (worth checking out as an aside).

The main idea is to have some black text on a white background (colors can change to taste) and then an image is animated over the top of the text which is the same color as the background (white) but with a transparent background. So that when the image passes over the text it creates a cool silhouette effect.

You can download the code here. You can see a working example in the site mentioned above.



As per the site linked above I also use 3 images to enhance the effect.

This could definitely be implemented a lot better (using multiple images to create a continuous stream as it currently stops after a period of time and some way to make the text selectable), but I'll leave that to you.

This effect is not something that would work on every site (think blinking text), but for some arty or monochromatic schemes I can see this fitting right in.

The code is quite straight forward:

<div id="text_cont">
   Some text
   <div id=\'cross_img\'></div>
   <div id=\'cross_img2\'></div>
   <div id=\'cross_img3\'></div>
</div>

Start with my text and three images.

Here is part of the css, you see the div with a white background and black text. Each of my images is almost identical, I offset them slightly using different top and left positions. Also in the jQuery I provide different speeds for the animation to try and create an overlapping effect.
#text_cont {
 background: white;
 color:black;
 font-size:120px;
 font-weight:bold;
 position:relative;
 overflow:hidden;
}

#cross_img {
 position:absolute;
 top:0px;
 left:0px;
 width:1800px;
 display:block;
 height:500px;
 background: url("../images/demo1.gif");
}

Here is the javascript:
$(document).ready(function(){
 $("#cross_img").animate({"left": -1800}, 150000);
 $("#cross_img2").animate({"left": -1800}, 120000);
 $("#cross_img3").animate({"left": -1800}, 90000);
});

You can see the different speeds as mentioned previously.

Hope you like it. If you use it anywhere I'd like to check it out.
more...

jQuery scrolling page with autogenerated index

Friday, 15 October 2010

View Comments

In my previous article I wrote about scrollTop and how to get working for your sites. If you haven't had a chance to read it yet and you are not too familiar with scrollTop I suggest you check it out as I will use the techniques from that article in building the example in this tutorial.

What I am going to build today is made up of two parts: an index section and a document section. The index section will list titles in the document and will be built on the fly using jQuery. Clicking on one of the titles in the index will smoothly scroll down to the selected section.

Here is a live demo and you can download the code from here.

How to create the index section:
To begin with we want to loop over all of the titles in our text. In my example I am going to have all of my titles as h2 elements. I am going to use jQuery to loop over all of our h2 elements using the each function.

$("#our_book h2").each(function(index, elem) {
 }); 

Next we need to add an element to the index for each of our titles. I have chosen to have each of these as links.

$("#our_book h2").each(function(index, elem) {
  $("#our_index").append("" + $(elem).html() + "");
 });

So each link has now been added to the "#our_index" div, now we need to bind a click event to each of these links. Let's have a look at the code:

$("#our_index a").click(function() {
  var idx = $("#our_index a").index(this);
  $("#our_book").stop(true).animate({scrollTop: ($("#our_book").scrollTop() + $("#our_book h2:eq(" + idx + ")").position().top)}, {duration: 1500, queue: false});
  return false;
 }); 

To start off we need to get the index of link being clicked. As each link has been added in order that it appears in the "#our_book" section, the index of the link will match the index of the h2 element in the "#our_book" section.

Next we call the stop function on "#our_book", this is done so that when someone clicks multiple links rapidly it doesn't fill up the queue and all animations (on this element) are stopped immediately.

Following we chain on the animate method and we want to scroll to the position of our matching h2 element. To calculate its position we first add the current scroll position of "#our_book" by calling scrollTop. Next we add on the value of the position of the h2 element we are targeting relative to the parent, which is the "#our_book" element. This will give the position of where we need to scroll our "#our_book" element. If this is confusing I suggest checking out my previous post on scrollTop which explains this is further detail.

The final piece of our code is binding mousedown event to the "#our_book" element. We want to stop all animations if someone tries to scroll or clicks on our "#our_book" element. This is so that we are not fighting with the animation if you are trying to scroll up while it is scrolling down or if someone spots something of interest and they want the animation to stop they can just click.

This is a small practical example of using scrollTop which could be used in a variety of ways: intructions, TOS, FAQ etc.
more...

Smooth scrolling with jQuery scrollTop

Thursday, 14 October 2010

View Comments


I want to have a look at jQuery's scrollTop method; how to work with it and some of it's uses. To begin with if you are not familiar will the scrollTop function have a read over the API entry.


The scrollTop function can be called on any element, but is only relevant for items that have excess content. What I mean by excess content is that the target element has child elements that would cause the item to scroll, if it had overflow:scroll; set. This is important to note: it is not necessary for an item to have scrollbars in order to use scrollTop. So look at the two following examples, one is a <div> that has scrollbars and excess content, the other is a <div> without scrollbars and excess content; both can be controlled using the scrollTop function.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.



So for either of these boxes I could call something like $(".excess_content").scrollTop(200); and the content would be scrolled regardless of whether there was a scrollbar or not.


The next thing I want to look at is how to scroll to a particular peice of content. Say we had a paragraph that had the most important text and some users may want to skip immediately to that paragraph. Similar to anchor tags in a page, we can reference an item inside our scrolling div in a similar way and scroll our element to that position.

To begin with I have labelled on of my <p> tags with the id "red_para". This paragraph has some text marked in red, when the button is clicked the element is scrolled immediately to that section.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.




So to scroll to a particular location we call the scrollTop function with the location of the target as the value. It looks like this:

onclick='$("#long-para3").scrollTop($("#red_para").position().top);'
 

So to get the location of our #red_para paragraph we call the position function and use the top value. Position according to the API gets the current coordinates of the element relative to the parent element.

The next thing I want to look at doing is scroll to our section smoothly, currently scrollTop just jumps immediately to the position indicated. With the use of jQuery's animate method we can do this quite easily.

Here's what it looks like:

$("long-para4").animate({scrollTop: $("#red_para").position().top},1500);
 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.





If you click the above button or play around with the scrolling and then try and click again you will notice something, the scrolling jumps around. So in my last example I will show you how to correct this issue and ensure that regardless of the scrolling position it will always scroll to the top of the red paragraph.

The problem arises because the position function gives us the position of the paragraph relative to where the parent is currently scrolled. This means that once the scrollbar has been moved it does not return the same value as it does initially. So we need to add the value of the scrollbar onto the position value. Hopefully the code can explain this clearly:

$("#long-para5").animate({scrollTop: ($("#long-para5").scrollTop() + $("#red_para_ani2").position().top)},1500);
 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.


Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.


Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.


Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.




This should give you a good introduction to the scrollTop function and how to get it up and running smoothly.

more...

Be ready to go with pre-setup site folder

Wednesday, 13 October 2010

View Comments

During my limited spare time I like to have a look around and answer questions on Stack Overflow. Stack Overflow is not just a great place for getting answers to your questions, but is also great for finding out hints and tips about your language of choice just by browsing in a particular category. One of the main ways I browse the site is by searching for jQuery questions that are unanswered. This a great opportunity to challenge yourself and stretch your skills by finding an answer to something that hasn't been answered before; good brain exercise.


What I wanted to share with you today is how I set myself up ready to answer these questions without too much hassle. Quite often someone provides you with very few lines of code and if you had to set up a working environment each time it would be a huge hassle. If I have a spare hour I can usually get through about three or four questions so I need to be able to get up and going on an answer quickly otherwise it's just not worth the effort.

This is fairly straight forward kind of stuff, but I find it also helps me at work to have on hand when I have small bits of code that I want to try out or when I am stuck working on a particular solution I like to break it down into manageable chunks and work on one section at a time. So, the idea is to have a folder with a bunch files ready to go with all the bits and pieces I need.

To start with I keep a folder where I have all my previous attempts at other questions and solutions, you never know when you want to go back to one of these. Inside this folder is where I keep my base folder with all of these files. This folder is labeled 'aaa base'; it always sits on top and is easy to find that way. When I begin I just duplicate that folder and it's contents and then rename it to something that I will remember later e.g. if I'm working on an issue with draggables I call it draggable_something.

Inside this folder are three sub folders: js, css and images. There is also a base html file index.html. The images folder is empty by default.

Inside the js folder is script.js, a javascript file that contains an empty $(document).ready so that I can quickly add any jQuery / javascript as needed.

Inside the css folder is styles.css an empty css file. I prefer not to use a reset stylesheet for these exercises as it's useful to have some padding and margins for readability.

The index.html file looks as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://www.google.com/jsapi"></script>
<script>
 google.load("jquery", "1.4.2");
 google.load("jqueryui", "1.8.4");
</script>
<link rel="stylesheet" href="./css/styles.css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/start/jquery-ui.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="./js/script.js"></script>
</head>
<body>
</body>
</html>

This begins with some of the basics; a DOCTYPE, html, head and body tags and also a reference to the character set.

Next I load in the latest version of jQuery and jQuery UI using Google's CDN. As well as the start theme stylesheet for jQuery UI.

The only thing left are the references to out styles.css css file and script.js javascript file.

This combination allows me to easily load in code snippets from Stack Overflow and test out bits and pieces of my own quite quickly without having to go through the hassle of setting this up, I simply just duplicate and rename the folder each time.

I have attached my test folder in a zip for you to use on your own trials, hope it comes in handy.
more...

Lessons from LEGO for better software development

Saturday, 27 March 2010

View Comments

I love LEGO. I've always loved LEGO. In every design school out there they should be holding it up as the glorious example of marketing that it is. From the smallest offering with a single racecar to the largest of boxed sets, each LEGO set is displayed in accurate detail and glowing colours on the front of the box along with several smaller pictures on the back to demonstrate what fun you can have with your newly purchased bricks. Their packaging has lasted the ages and has changed little in the many years since LEGO became popular.

Aside from their attraction and the many other joys of owning LEGO, there are lessons to be learned and applied to the world of software development from this humble little brick.


My son gets his first LEGO set on his 3rd birthday this week.


If you want to build a world, start by building a car

Of all the kids I ever met growing up, even the ones who had parents with bottomless pockets, they still only bought one set at a time. The lesson here is that you buy one set, you play with it, you integrate it, you take it apart and change it around and not until it becomes part of everything else do you move on to the next set. With LEGO even the smallest set can deliver and look great with the rest of your LEGO world.

So here's what we too often try to do with software: We ask the customer what they want, they want the full package, we market them the full package and we try and deliver them the full package. Month's later we're still trying to build the full package.

The lesson we can learn from LEGO: First build that racecar, then deliver, play around with it, and when it fits in, then move onto the next step; maybe a gas station, maybe a garage for the LEGO person to park their car in. Build your system in small functioning parts, the benefits are obvious: Spot issues earlier; It makes more sense when integrating new functionality to see how the existing functionality works and view the context; Incremental improvements and incremental changes, when you finish the entire project if you do it incrementally you will deliver something closer to what the user actually wants and will have months of feedback.

Everything is made from something smaller that already exists


This should go without saying, but we still as developers continue to reinvent the brick every time we build something. After decades of software development you would think it would be easier, so were are our magic bricks and why is it that you are still hand coding forms for web sites?

Many frameworks allow you the felixibility of utilising built in APIs for things such as form generation etc. A fully fledged framework may not be the answer every time for the work you are doing. But have you thought about working as a team to put together your own toolbox of functionality that you seem to be writing over and over again. We have a function for building html select elements that can be populated from any array or database table and I've used it again and again and it sits in a utilities class that anyone can use.

The lesson we can learn from LEGO: Don't build it, customise it. Make use of your existing blocks and you can build something rapidly again and again with the same reusable parts.

If you've played with one LEGO set you've played with them all


The benefits of a system that is familiar and requires little training when newly built are endless and scalable. Think of this when you are designing and writing requirements. If you can make your system seem familiar to your users they will adapt and adopt faster. You should be also working towards having the best in class practices for building your 'familiar' systems; think of the many companies that have a software brand and how familiarity works in their favour.

The lesson we can learn from LEGO: The instruction booklet you get from LEGO doesn't tell you how to play with your LEGO set, but a very straight forward step by step guide on how to get you up and going. The idea is to show you what you can achieve not how you should use it. You should build your software with familiar steps and controls.

There are many more lessons we can learn and apply from LEGO, including scalability, reuse, minimalism and familiarity. These lessons are worthy of consideration for your next project.
more...

Build on-the-fly filtering with jQuery

Wednesday, 10 February 2010

View Comments

This tutorial looks at using jQuery to build on-the-fly filtering for search results to quickly filter out by matching search terms with content and hiding those elements that don't match.

Recently when jQuery upgraded their API they added a nice on-the-fly filtering feature for filtering by search terms within the API. To get an idea of what I'm talking about you can see the effect here by typing 'bl' into the search jQuery box and you will notice only the entries containing 'bl' are displayed.


You can download the code for this tutorial here
You can view a working demo here



This filtering works on both the title and on the content. It is quite easy to build and a nice trick that has multiple applications. Let's have a look at what our HTML will look like for each of our page elements:

<div class='option'>
 <div class='title'>Soccer</div>
 <div class='description'>A sport played with two teams of eleven players, a round ball and two sets of goals.</div>
 <a href='#'>more...</a>
</div>

So each element is an 'option' and there is a 'title' and a 'description' section. Fairly straight forward. Now let's look at the javascript behind the functionality:

$("document").ready(function() {
 $("#search_field").keyup(function() {
  var terms = $(this).val().toLowerCase();
  if (!terms) {
   $(".option").show();
  } else {
   $(".option").hide().filter(function() {
    return ($(this).children(".title").text().toLowerCase().indexOf(terms) > -1) || ($(this).children(".description").text().toLowerCase().indexOf(terms) > -1);
   }).show();
  }
 });
});

We start by adding the keyup event listener to our #search_field input. Whenever the keyup event occurs we grab the contents of the input and convert to lowercase and store in the terms variable.

If terms is empty we display all of our pages elements. If it is not empty then we begin by hiding all of the '.option' elements and then we apply a filter function. This function filters out all of the elements that do not contain the terms in the '.title' child element or the '.decription' child element. Those elements that haven't been filtered out are then displayed using show().

This kind of filtering is really useful when you have a limited number of elements on the page and makes good sense if you want to avoid round trips to the database.
more...

How to get the best start with an IT career

Tuesday, 9 February 2010

View Comments

When you are in College / University it is hard to have the far-sightedness to know how your career is going to progress and where you will be in the future. If you are currently studying to work in the IT industry it is a good idea to start thinking about what you are going to do once you graduate and what direction you would like to take. In this post I would like to give you some suggestions on how to make those first few steps into the IT industry. If you have some good suggestions yourself please add them in the comments.


What to do before you graduate
Whatever you do, don't wait until you graduate before you start thinking about what you will do with your qualification. Many of you will be doing a generic IT degree that will prepare you for a range of careers within the industry. Now is the time to find out exactly what area you want to work in. If you don't decide early you may find that you are in a job you don't enjoy and in that case your second job will need to be a move sideways to something you do enjoy.

Once you have found the area you are interested in start learning and I don't just mean your text books. If your area of choice is design start reading about colour, start looking through books about interior decorating or design theory. If it is e-business, research some of the success stories in the industry or some of the more abstract titles on marketing. Read, read, read! Knowledge is king in the IT industry, the more you learn the more valuable you are; not just in terms of financial gain, but in the quality of the work you will deliver.

Apply your knowledge. Find an open source project on the internet and get to work. Even if you can only work on small sections you will improve. Reach out and connect to others in your industry via social networking and find out how you can help by asking. While I was attending university I asked anyone I knew if they could offer some work experience and after a couple of weeks I was able to help collate and prepare single HTML pages for a company intranet, eventually progessing on to whole sections of their site. You need to reach out, the goal is to get something on your resume other than working at Wendys or generic call centre experience.

Do as much studying, casual work, volunteer work, work experience and open source project work as you can before you graduate and you will be in a prime position come the time you graduate.

What to do once you graduate
Once you graduate you should have a clear idea of which part of the IT industry you want to work in and hopefully you have put the hard yards in to read and learn some of the skills you will require.

If you start having a look at employment advertisements you may be dissapointed, most of the jobs you would love to be doing usually require a lot more experience than you have. I would suggest that this is a fact for most people starting out, if you are damn lucky you will be able to find a fantastic first job that not only pays well, but is exactly what you were looking for. The key here is to focus on where you want to be rather than what is available to you now. It is best to think of your first job as a stepping stone to your ideal job. My first job as a programmer was paying much less than I was getting paid at the supermarket I worked at during my studies. The trick is to find a job that will actually get you to where you want to be next.

The other point I would like to make about your first job; if it is only a stepping stone and there is no progression, do not stay there longer than a year. Work as hard as you possibly can in the first year to add many different skills to your resume and then move to where you want to be. If you are still being paid like a paperboy after a year, you are either not learning enough or your work is not appreciated. Remember, you want to get to the next step and start doing some real work.

Once you land that all important second job you should be on your way to a positive and rewarding career in the IT industry.

Just to sumarise:
- Decide early what you want to do, don't wait till you graduate
- Learn as much as you can while you are still studying
- Look for work opportunities either in open source projects or work experience through social connections
- Be content with your first job as long as it steers you in the right direction
- Work hard in your first year so you can be in the job you want in a years time
- Knowledge is king, learn and keep learning
more...

How can business reap the benefits of organic social networking?

Wednesday, 3 February 2010

View Comments

The long term benefits of social networking for enterprise are well known and have already been discussed in detail. There's team building, leveraging your knowledge base, early adoption and cross team discussion to name a few. For a long time there has been two sides of the fence to social networking in business; there are those who do and those that don't. The don't group is made up of several smaller groups; the we don't know how to do it, the we don't want to ruin our reputation or the we don't believe in the benefits groups.


For a long time I believed that the second group were just poorly educated and if they could see the light (or just give it a try) they would not only be convinced of the benefits, but they could reap the rewards of an open blogging policy. But for larger size outfits this approach is just too unwieldly, the size of the dinosaur is too great and the idea of testing the waters is hard with such a large foot. For smaller sized operations it's not viable to crowd source and hard to find passionate bloggers (even in the IT industry) to write about work in their own free time.

So how can small and large business still leverage the benefits of social networking outside of company blogging while still reaping the benefits for the business? The solution lies in employee involvement outside of the business. Already employees are connecting via Twitter, Linked In, myspace and other social networking outside of business hours. These organically formed social networking groups and activities can be taken advantage of (with permission) and business wide networking can be seen as an extension of these organic groups.

Each of these sites has readily available APIs that can be used to link groups and information from each of your employees. The information that each employee is adding online has already been made publicly available. Does your employee already blog? Ask if you can provide their RSS feed to the rest of the company. Are there employees that tweet regularly? Why not have a company wide aggregator of this activity. As with all online activity the good quality links can be pushed higher and the chatter will be ignored. This large amount of activity that is already happening in the public arena could be shared within, and for the better material without.

Be brave, be passionate about your employees and reach out. Not by sticking your foot in it, but by gently wading in.
more...

Is Apple being too Apple?

Tuesday, 2 February 2010

View Comments

Many, many years ago I used to work for an Apple Centre and many more years before that I was a child with a love of computers. The first computer my family ever bought was not just any computer, but an Apple IIgs. You only have to scan over aforementioned wikipedia page to see that it was a lovely piece of Apple engineering. It had it all; audio, graphics (it was all about the graphics in the 80s) a memory expansion slot and the ability to add an internal HD. I'm not bragging here, I'm trying to conjure the picture of a computer lovingly crafted and ahead of its time (think iPod).




Apple have sat in this niche for years; before the iPod became top of the Christmas list for young boys and girls, Apple was synonymous with the architecture, graphic arts, production and design industries. They were still producing top notch computers that were ahead of their time in terms of quality, speed and power. So what was the problem, why have Apple been hiding in a cave for so many years and how is possible that they might screw it up again?

Firstly, during the 90s, Apple had too many different models on the market this also included their choice to allow cloned Macs in a revenue raising exercise. Sure customers like choice, but the customer was left with too much choice and were unsure which branch of the Macintosh family was appropriate and regardless of what you bought it was usually superseded by another model within a couple of months.

Secondly, Apple have always kept a strangle hold on everything they do. Way back when, while I was stuck with the few games that my family could afford at $50 a pop, my friends were swapping disk-loads of games and applications almost daily. We were left with something that was good quality wise, but was useless unless you continued to pay.

I don't want to go into too much detail in the above two points, because it should be obvious that the trend above is still part of the Apple's mentality today. Make something that is so good everyone will want it and then control the market that surrounds it. Think: iTunes, think app store, think Apple stores. They all look good and they are all flashy, but at the end of the day they are all Apple run and controlled.

Sure Apple's iTunes and apps are now at a price point that stops people from hesitating before they spend a couple of bucks, but think about what you are getting... who decides what apps you can use on your iPod, who censors what you can use on your iPhone, who decides what you can and can't install on your newly bought iPad? Are you sacrificing good design and quality for a lack of innovation and control? Apple pushes DRM because it's what they have always done. Sure the iTunes/app store is a good concept, but think to yourself, would you be more empowered if you could shop at another store? Would this provide you as a consumer with greater choice and pricing?

Although the smartphone/handheld industry has been around for a long while it is still finding its place outside of just being a telephone; maybe the equivelant of the personal computer in the mid-80s. How this pans out is anyones guess, but is it possible that someone will cut out some of the quality and sheen and deliver something that is flexible and open and you can install whatever you please, even if it means that your phone crashes occassionally?

As Apple looks to create new revenue for the future it will be interesting to see if they can maintain their current model. Will they produce another ten "i" products that are essentially different sizes of the same thing with a few slight differences? It's not too hard to imagine because they did it in the 90's. Or can they dig deep and produce products that are not only innovative by design, but also innovative in functionality and value to consumers.
more...

Before you start coding... stop, take time and compare

Monday, 1 February 2010

View Comments

Many years ago my high school teacher told me about his days as an analyst; whenever he used to go breakfast cereal shopping it used to drive his wife crazy. He would compare everything from box size to amounts of sugar and price per 100 grams. Whatever he did he had to make a comparison. So think for a second what you are working on at this moment... how does it compare? Have you taken the time to compare your solution against anything else?


In the IT industry we focus too much on benchmarking a standard set of things before making deliverable; how fast is your site, how many bugs are there left to remove and what will be the cost benefit to the business or to our customer. But, one step that is imperative before you make the first jump is to stop and compare. There are many ways that you can go about doing this, the easiest of them you could call the cereal box test. Take a look at what is on the shelf, what are those ready made solutions that are in the same market as the product you are delivering. Look at all of the features and compare to your own feature set: Is there something missing? Is there something extra that isn't of use now but is imperative to have later on?

This is more than a custom tailored vs. boxed solution argument, it's about shopping around, even if the your customer isn't shopping anywhere else themsleves. If you've sold your customer on a particular solution ensure that you are giving them the best. Once the deal has been made you can even ask your client for their own ideas. Was there something in other proposals that you didn't offer. Have they heard of some new technology that they thought would be beneficial to the project. Once you are on the other side of the fence it's much easier to ask these kinds of questions and in the end it will pay in the results.

In every day life we hate to let an opportunity go by, even worse we hate to lose time and money. Don't sell yourself or your clients short, look around, take time and compare. By always looking forward you may miss something good that is sitting just beside you.
more...

Easily add rotating banners to your wordpress site with jQuery

Sunday, 31 January 2010

View Comments

Adding a rotating banner to wordpress with jQuery is too easy. The jQuery cycle plugin is one of the oldest and the best and comes with a multitude of effects transitions and inculdes next previous and pager options if needed. Even more the plugin includes pause on hover, click to progress and even custom transitions, unleashing the power and versatlity of jQuery.


I want to show how to do a simple fade out to the next photo style banner which is popular on many sites and works well in the main banner position. It's a good idea to check out some of the examples on the cycle plugin site and find whichever transition suits your needs. Some of the more animated transitions would likely suit your sidebar if you wanted to draw more attention away from the page. I feel something more subtle works better at the top op the page.

A transitioning image on a recent site that I worked on:


Now there are many sites that teach you to include jQuery using the wp_enqueue_script method. The best way for you to include jQuery on any site is to use Google's CDN.

To do this add the following to your header.php file:
<script type=\"text/javascript\" src=\"http://www.google.com/jsapi\"></script>
<script type=\"text/javascript\">
 google.load(\"jquery\", \"1.4\");
</script>

Next populate a div on your page with images where you would like your banner to appear:
<div id=\"header\">
 <img src=\"<?php bloginfo(\'template_url\');?>/images/01.jpg\" alt=\"Image 01\" />
 <img src=\"<?php bloginfo(\'template_url\');?>/images/02.jpg\" alt=\"Image 02\" />
 <img src=\"<?php bloginfo(\'template_url\');?>/images/03.jpg\" alt=\"Image 03\" />
</div>

Make sure your images have been cropped and adjusted to a reasonable size, with you banner it works well if all the images have the same dimensions.

Next download and include the cycle plugin in the head after the jQuery include, paying attention to wherever you installed the plugin:
<script language=\"javascript\" type=\"text/javascript\" src=\"<?php bloginfo(\'template_directory\'); ?>/js/jquery.cycle.all.min.js\"></script>

The next bit is calling the plugin which is very straight forward:
jQuery(document).ready(function(){ 
 jQuery(\"#header\").cycle({
  delay:-4000,
  fx: \'fade\',
  pause: 1,
  timeout:1000,
  speed: 4000
 });
});

I have set a negative delay so that it doesn't wait to transition for the very first image. I have set the 'fade' effect with a transition speed of 4 seconds and a timeout speed of 1 second which is the length of time between transisitons. The last option is pause which simply pauses the effect while the mouse is over the images.

It's that easy and with the combined number of transitions you can really add some magic to your wordpress site.

Enjoy!




more...