How to make a twitter style “auto load” paging system with jQuery

Paging is a method where you break a record set into multiple parts. Many of us with blogs and websites with multiple pages are used to the common “Prev Next Last” setup that allows us to navigate. If you want something a little more comprehensive, you might even break the records up and show some paging numbers as well like “Prev 4 5 6 7 8 Next Last”.

But that’s just not very cool is it? Twitter uses a system where you dont need to click next. The way that their content is delivered, the newest content is always at the top. Twitter might be a “micro blogging” system at heart, but this idea works with regular blog content as well. I have seen it in action on Tumblr and I have even implemented it on my own Opinion & Discussion website.

We will be using PHP and Jquery to create a similar system.

1: Lets start with setting up our initial data set.

We are just going to pull 25 records from MySql and drop them into a list.

<ul id="Results">
<?php
$getFirstList = mysql_query("SELECT * FROM tableName ORDER BY id DESC Limit 25");
 
while($listData = mysql_fetch_array($getFirstList)){
	echo "<li> Your Data goes Here! </li>";
	$lastId = $listData['id']; //just get keep the last ID of the set.
}
?>
</ul>

Above is a quick list and a simple way to grab the last ID of the result set, we are only getting 25 rows at a time right now so we dont need to be too complex.

2: The trigger.
We need a trigger to action the call for more results. I’m assuming that your 25 results will require the user to scroll to see them all, and with that in mind the trigger will be the final LI element in the list.
Before the closing UL tag, insert this:

<li id="more<?php echo $lastId; ?>" class="morebox">
	<span id="<?php echo $lastId; ?>" class="more"></span>
</li>

This list item will have the ID of the final result making it unique.

3: Ajax processing.
We need a page that will load our extra results. This is a simple PHP/MySql query based on the variables that we send it. Here is a simple example:

<?php
 
$lastId = $_POST['lastId']; 
 
$getMoreList = mysql_query("SELECT * FROM tableName WHERE id > '$listId' ORDER BY id DESC Limit 25");
 
while($listData = mysql_fetch_array($getMoreList)){
	echo "<li> Your Data goes Here! </li>";
	$lastId = $listData['id']; //again, just get keep the last ID of the set.
}
?>
<li id="more<?php echo $lastId; ?>" class="morebox">
	<span id="<?php echo $lastId; ?>" class="more"></span>
</li>

In this, we regenerate the trigger with a new ID.

4: jQuery to tie it all together.

There is only a few steps here so I wont break it down too much. This is what we are going to do:
1: Initiate the script when the document is ready (document.ready function)
2: We set the container variable to “window”, and begin the function by looking for a “scroll” action. jQuery makes this simple by using the .scroll() method.
3: Once we scroll, the ID of the trigger is set. If there is an ID then we can proceed.
4: We check the element’s position by using a custom function called belowFold(). This essentially checks to see if the trigger is NOT on the screen.
5: If it’s on the screen we continue by setting the trigger contents to show a loader.gif image. We then do a simple POST to the PHP document that will load our next set of results. The only data we need to post is the ID of the LAST list element in the first set.
6: If the post was successfull, we load the new LI elements into place and remove the previous used trigger.

Of cause if there is no ID, we set the trigger to be empty as there is no point loading nothing.

The extra belowFold() function.

$.belowFold = function(element,container) {
        if (container === undefined || container === window) {
            var pageFold = $(window).height() + $(window).scrollTop();
        } else {
            var pageFold = $(container).offset().top + $(container).height();
        }
        return pageFold <= $(element).offset().top;
    };

This is a simple funtion that just checks the height of the window against the position of the trigger.

Here is the complete jQuery function:

$(document).ready(function(){
 
	var container = window;
 
	$(container).scroll(function() { 
	var element = $(".morebox");  
	var ID = $('.more').attr("id");
		if(ID){		             
			if (!$.belowFold(element,container)) {
				$("#more"+ID).html('<img src="/images/loader.gif" />');
				$.post("/more.php", { lastmsg:  ID },
						   function(data){
							$("ul#Results").append(data);
							$("#more"+ID).remove();
						   });
				}
		}else{
			$(".morebox").html('');
		}
	});
 
$.belowFold = function(element,container) {
        if (container === undefined || container === window) {
            var pageFold = $(window).height() + $(window).scrollTop();
        } else {
            var pageFold = $(container).offset().top + $(container).height();
        }
        return pageFold <= $(element).offset().top;
    };
 
});

And thats it.

Amazing uses of JavaScript

The internet has become a much more colorful and moveable world since the advancement is JavaScript, CSS and other web languages. We are now able to breath new life into website design without using clunky 3rd party plugins. Although some of these effects can not be created for all Internet web browsers, if you know your market and you are confident that your website would still be functional with the effect removed, then why not add some new dimension to your design.

Lets take a look at some outstanding uses of JavaScript (and their other supporting languages).

Apple’s mobile me website is using a combination of canvas tag and thousands of lines of JS to acheive its outstanding interface effects.

Amazing. Simply amazing combination of JavaScript and CSS. You have to hand it to dragoninteractive, they really know how to turn heads with their experiments.

Seriously cool setup. Page scrolling, interactive everything and all with JavaScript.
Just navigating around this website is a great user experience. This to me breaks the ‘flat page’ feel that a website can have.

The cloud moving background that gives this website its dimension is using a JavaScript background positioning system. Scroll down to the footer and you will see the same thing with a nice city horizon. It give the website a great visual experince.

Not only is this website pretty, the page curl in the top right is a neat JavaScript effect.

Fuel’s website shows a great use of color transitions and movement. It’s simple design and clean navigation lets your eyes be filled with the smooth transitions, resulting is a very professional experience.

While the effects are not very “fancy”, they are elegant transitions and fades that all use JavaScript and CSS to deliver a very nice website that has class.

This portfolio website has simple actions, but with the help of JavaScript and CSS it is delivered with a solid app feel.

MonoFactor uses a nice scrolling system that shuffles both content and showcase images in two different areas.

And just for fun, to show the power of what can be done. Here is Wolfenstein 3D using javascript and the canvas tag.

9 Websites offering Quality Free WordPress Themes

When you are starting out designing for WordPress it can be daunting to understand just how those fantastically designed websites that you see are constructed. How do they get their custom designs to display particular data and just how did they manage to get their layout to look so good and yet so different from the default WordPress themes?, you ask.

One of the best ways to learn is through example. So here is a small list of websites that you can keep an eye on and get some great free WordPress themes.

These are free themes and we encourage you to download them and learn form their structure and then create your own themes with a better understanding of how they come together.

http://www.woothemes.com
Woo Themes are one of the best theme creation companies around. All their designs are solid and the code behind their themes are clean and professional. While Woo Themes sell great themes they also offer some free themes.

http://newwpthemes.com
NewWPThemes.com is a leading and trustworthy free WordPress themes provider. All themes listed are 100% unique, designed and developed by their staff, 100% free for personal or commercial use and licensed under creative commons license. All of their themes are updated, supported and always compatible with latest WordPress versions.

http://www.skinpress.com
Skinpress.com offer high quality free wordpress themes that support widgets, adsense and banner advertising slots. Their templates also have twitter support.
They also offer blogger, zen cart, website templates and flash intro files.

http://freebiesdock.com
FreebiesDock.com is a collection of completely free design resources. All the products you’ll see there are created exclusively for FreebiesDock and you won’t see them anywhere else.

http://wpcrunchy.com
Wpcrunchy is a place where you can find premium quality wordpress themes. All themes come packed with handy features to get your website up and running with minimal effort.

http://www.organicthemes.com
Organic Themes offer a variety of beautifully designed premium WordPress themes for businesses and blogs. Although Organic Themes are mainly a paid theme website, they do offer some free wordpress themes and they are great quality.

http://www.freethemelayouts.com
FreeThemeLayouts.com provides premium WordPress themes absolutely FREE! They have great designers and expert WordPress coders who work together to create outstanding themes.

http://themes.rock-kitty.net
themes.rock-kitty.net is a website where you can upload and share your wordpress theme creations. All their themes are free to download and use.

http://wordpressthemesbase.com
Wordpressthemebase.com have a collection of wordpress themes ranging from simple clean designs to the more advanced. Most of their layouts have a similar blog style theme.

How Attention to Detail will enhance your design skills

If you want to take your design skills to the next level then the first place you should start is with the look and feel. While raising your coding skills and getting into the latest trends of CSS3 and html5 will make you feel all warm and fuzzy in your skill-set, its the visual side of your work that will capture the eye of your next customer.

So what can you do? Crazy layouts? As much movement as you can fit in? Actually no. You need to work on your common elements in design and let the content speak to its audience. You need to apply attention to detail and raise the standard of your design skills.

I will run thought some common elements and how you can improve them.

1: Forms
Forms are one of the most common and important interaction with your audience you will have. This is a great place to start styling into your own custom manor. Everyone knows that text boxes and textareas are bland and buttons grey and ugly. You might already be styling your forms with some color and borders but why not add some custom backgrounds and make your forms come alive. The simplest way to do this is just applying a background to the element with CSS. Here are some examples.

*note, IE has a issue with text-indent so if you want to offset the button text try this method:
background-image: url(‘buttonBackground.png’);
line-height: 999px; /* Set the line height higher than your image height */overflow: hidden; /* Hide the text */

2: Backgrounds
This is an area where you can really lift the look of your website. By designing a large background you can easily create an atmosphere for your website and give some visual depth to your work. Be sure to keep the file size as low as possible and you will enter a whole new style of design. Take a look at how a website can be transformed with large detailed backgrounds.

3: Menus
When it comes to navigation you don’t want to over complicate it, make sure that it is still usable by the average user. What you can do to spice up your navigation is use background images and stylish dropdown menus where they are needed. Here are some examples of great navigation design that is both clear to understand and visually pleasing.

4: Images
A simple way to add life to your content is to add images. But don’t settle for images with a single border, why not add an overlay to make the image more in line with the overall design of the website. These effects are generally a PNG image that is positioned on top of the image using CSS. Take a look at these great examples.

6: Video
When embedding video into your website it is often preferable to use YouTube as the host. This is for many reasons but the most important is you don’t want to put the drain of streaming media onto your client and leave them with a huge bill at the end of the day.

YouTube’s default embed code is far from pretty so what you want to do is use their API to make your own player.
Using the YouTube Player API you can make yourself a chromeless player. From there you can style your own player and adding the functions that you want. These can all be controlled via javaScript and Actionscript if you wish to control the movie with flash. By using this method you would be able to create player controls to any style.

5: Footers
We all know that a footer is a great place to store quick links and contact info. But if you build on the theme of your website and make the footer a feature in itself you then keep the user from feeling like they have hit the end of the page. Instead you open them up to another sub section of the website where they can navigate to other content. Take a look at these fine examples of footer design.

If you apply these practices and attention to detail then you will create far better website design that don’t interfere with the content that is being delivered. Instead you will create a rich user experience for your audience.

17 Websites that all web designers and developers should know

Every designer has their own set of websites and tools that they prefer. Having a toolkit can help you design and build your project faster and it also helps with the preparation of a design project by giving you a starting point for research. From fonts to backgrounds and code snippets to browser testing, here is an essential list of websites that all designers and developers should have in their list.

http://www.colourlovers.com

Colour Lovers is a community of people who share colours, pallettes and patterns.
This is a great website to get yourself some fresh ideas about what colors to use in your designs.

http://dribbble.com

Dribbble is a community of designers who like to share what they are currently working on.
Right now its invite only, so cross your fingers this opens up!

http://flikode.com

Flikode is a code snippet bookmarking website where you can find bits of code in any language. It also has a help and discussion section so you can have some community support.

http://my.lovelycharts.com

My Lovely Charts is a great online app that lets you well…create charts. I find it useful to make site-maps and other layout diagrams.

http://www.colorcombos.com

Color Combos is a simple website where you can view and test how colors look together. Simple to use and with a huge library of color combinations this is a great addition to your web toolkit.

http://new.myfonts.com/WhatTheFont

Ever wonder what font is being used in an image? Or have you been supplied with a logo to recreate but no fonts? What The Font is your saviour. Just upload your image and it will try and detect what font is used.

http://www.favicon.cc

A simple way to create a favicon. Just upload your image and it will generate an ico file for you.
Or you can try your hand at using their editor.

http://www.stripegenerator.com

Stripe generator is a simple way to create tile background stripes of any style for your website. This is a real time saver! They also have a library of user generated stripes.

http://ajaxload.info

If you are ever needing a loading GIFfor you ajax application then look no further. Ajax Load has a good library of loaders in different shapes. You can also set the color that you need the loader to be in. Fast and handy!

http://www.bgpatterns.com

BG Patterns is exactly as the name suggests. It has a library of patters that can be used for background images.

http://browsershots.org

Browser Shots is a great tool to test your website in a lot of browser conditions. Simple to use and with great results, just select the browsers you want to test against and enter you domain name. The results usually take about 30 minutes to display.

http://sxc.hu

SXC is a community driven image stock exchange. Most of these images are free to use and are high resolution.

http://lipsum.com

When you are pitching to a client it’s handy to have dummy content. A good standard is to use lipsum text. At lipsum.com you can quickly generate as many paragraphs of text to suite your project.

http://validator.w3.org

If you want your website to be 100% web standard, then run it through the W3C validator. You can also find CSS and RSS validators on their website. It gives detailed responses to errors in your markup.

http://tools.pingdom.com

Pingdom offers a page load timer and breakdown of the files that are called from your website as it loads. At its simplest form, it gives some great insight into how your page loads and where you might have a bottleneck file that is holding things up.

http://dafont.com

DaFont is the number 1 place to find fonts. With a great categorisation system and the ability to type in your own text to see the result, this is the perfect font website for designers.

http://www.mockflow.com

Mock Flow is one of the easiest online wire-framing services around. When you need to draft a layout quickly and that is visually pleasing to the eye, then don’t go past this website. It will be a great asset to your toolkit.

Using textures to enhance your design

A problem that I often see in design, and specifically website design, is the lack of life that is brought into the design. While we can all create a lot of very excellent effects using a variety of plug-ins and built in effects from Photoshop etc, you just cant match the quality of importing textures from the real world into your work.

You see its the imperfections found in fabrics, paints, wood and stone to name a few, that set off a design giving it a realistic atmosphere.

While it may be tempting to use a lot of elements to try and bring your website to life it can often end up overloaded, distracting and hard to use. Take a look at some of the websites in our design inspiration gallery and other css galleries around the Internet and you will see that most of the top design all use a variety of texture styles. The best you can see actually seem to lift the content off the page and create depth in their design.

So where do you use textures in your website design?
You want to keep it simple and stick to backgrounds, menu bars, footers and sidebars. If you want to use textures in your content area just be careful and make sure that your text is still 100% readable and not a strain to the eyes.

From the examples you can see below, the best way to use quality textures is to keep them simple and not distract your users from the content they are actually using your website for.

http://www.imagineplus.in

http://www.curiousromain.com

http://arandown.com

http://fortysevenmedia.com

http://www.przeznaczenie.eu

http://bestblogbox.com

http://www.motherearthbrewing.com

http://trentwalton.com

http://jameslaicreative.com

http://www.dnadarwin.org

http://jaredcampbell.com

http://www.healthyharvesthydro.com

You can find a good source of free textures at websites like http://www.sxc.hu and http://www.texturelovers.com

10 Websites using cute avatars and mascots

Here at Very Inspirational we love mascots! That’s why we have our cute little RSS Monster (you can see him at the top of the page).

The use of an avatar or mascot on your website (or any product for that matter) can greatly increase customer loyalty just through the recognition value that they create. Not only that you can easily run themed competitions and create merchendise as extra revenu streams all based on that little charater that you hold dear to your business.

Not convinced? just have a look at reddit.com. Their little Reddit Alien  has taken a lot of the Internet world by storm over the years and they have quite a range of merchandise for this little guy. You can get Reddit shirts, usb drives, bobble heads, soap and not to mention the fans who go on and make soap, cookies and other random stuff!

A mascot can help build a personality to your business, so have a think about it next time your thinking of an addition to your business model.

Here are some website that we think have great little mascots that theme their websites.

Albert Lo – Freelance digital creative

One of the best ways to get inspiration and motivation is to look at our peers in the industries that we work in. If we get the chance to see what goes through the mind of the people we respect in our industry we can use this to further our own skills and refine our working practice.

At Very Inspirational we try to help our community out by running small interviews to give you some insight into how these great artists work.

We hope you enjoy this quick interview with Alber Lo, a fantastic UX web designer & visit his website.

Read the rest of this entry »

Video Game Website Design Examples

Most of the web designers and developers that I know are also avid gamers. With video games becoming more advanced, larger worlds and greater detail, you can take some great inspiration form a few different places from video games.

The following is a great collection of video game website designs that not only match their theme and market, but also showcase some excellent interactive qualities that most of us don’t get to use in a website.

Read the rest of this entry »

Designing a creative and useful sidebar

A website is usually made up of standard components. One often overlooked component of a website is the sidebar. When I’m building a website I put a strong emphasis on the layout of the sidebar. The hardest part for me is having the client understand that the sidebar is an important feature of the website rather then just a collection of “stuff” that has nowhere else to go.

The conversation would usually go like this:

Client: “Sidebar? um… Lets do that last, just put anything in. Shouldn’t we just focus on the content pages?”
Me: “Well sure, the page content is the focus and the SEO optimized part of the website. But how often you go to a website and glance over at the sidebar to see how many RSS subscribers the website has? Do you try and look for how many twitter followers the website has? Or Facebook fans? Don’t get me wrong, none of these stats actually make for a good website BUT they do indicate just how many other people might like the content”.
Client : “OK I admit, I do that”.
Me: “Do you also scan the sidebar to see what else the website has to offer, besides the page you are on?”.
Client: “Yes I do that too. OK I see your point and lets get some focus into my sidebar now”.

Read the rest of this entry »

22 Graphically Outstanding Website Designs

As a web designer, you want your website design to leave an impression that gets people scrolling to the footer to see just who built this amazing website! After all, the best sales tool is word of mouth and the best person to sell you skills is your work that’s “in the wild”.

To get that finished level that sets your web design skills apart from the pack, take some tips from these 22 website designs that are graphically outstanding.

Be sure not to over use heavy images. Slice like a ninja and optimise so that you still get a fast load time.

So take a look at the designs below and take what you can and push you own ideas into the next level.

duirwaigh.com

Read the rest of this entry »

The excellent blog design of Splendid Sparrow

I give credit to my wife who actually came across the works of Teresa a few months ago while wandering the Internet looking for blog design inspiration.

There are a lot of blog designers out there, but what I love about Teresa’s work is that its consistent and she designs with a particular style. It’s fresh, creative and is designed with the client/end project in mind.

All the designs feel as if they have had great thought and research put into it in order to give the design a perfect fit for the content that will be going on the target website.

Not all of us take the time to research fully after an initial web design brief and I think this is what sets a good web designer apart from a great web designer. Taking the time to research the industry and matching it to the relevant content that the website will house puts the icing on the cake.

Take a look at the examples below and visit splendidsparrow.com for more of Teresa’s blog design. You can FEEL the love that has been put into these design!

Read the rest of this entry »

Cartoon Inspired Website Design

Most of us only get to design websites for the corporate world. This usually means clean cut designs with solid navigation and a flow of predictable information and product data. I know all of us would like to let loose and do some creative design and for the cartoon lovers out there here is some inspiration for when the time comes!

These are a pick of what I think are great examples of cartoon inspired artistic websites that function great!

Read the rest of this entry »