Tutorialzine » Specials

Explaining jQuery sortable

Martin Angelov — Sun, 09 Aug 2009 23:31:07 +0000

Introduction

This time we are working on presenting the users of BloggyBits.com with an easy way to change the order of the services that are shown in the widget. The most natural way of doing this is by dragging and dropping using jQuery’s sortable method – an easy way to convert a regular

The sortable list

Step 1 – the XHTML

In our index.php file, we have the following code:

As we mentioned before, the whole sortable list is basically a unordered list UL. All the icons that you can drag around in the example on BloggyBits.com are LI elements inside it.

Inside the UL we have inserted a empty LI that is removed as soon as the document loads. This is a hack, that we use to properly size the UL before we create the sortable list with jQuery later.

Step 2 – jQuery

But how do we convert a regular UL into a jQuery sortable? After we include the jQuery library in the page with

We firstly include the jQuery library itself, and later the scrollTo plug-in. Those files are compressed, so they load as fast as possible.

The XHTML

Now we have to create the XHTML structure of the menu. We are using a regular anchor elements, positioned inside a DIV with id=”topBar“. We are using this id later to add CSS styles to the links.

choose configure generate share

Below our three links, there is the AddThis button, but with changed default image, as you can see below.

The CSS

The anchor elements share the replaceLink class, which is only used to be select with jQuery, which I will demonstrate later. They also each have a respective class, that contains unique style properties, as shown below.

.choose{ width:100px; height:22px; background-image:url(/images/steps/1.gif); } .configure{ width:114px; height:22px; background-image:url(/images/steps/2.gif); } .generate{ width:110px; height:22px; background-image:url(/images/steps/3.gif); } .share{ margin-left:288px; width:155px; height:22px; background-image:url(/images/steps/share.gif); } #topBar{ margin:25px 0px 30px 0px; width:100%; height:22px; background-color:#2b2b2b; border:1px solid #363636; overflow:hidden; } #topBar a{ float:left; display:block; text-indent:-400px; overflow:hidden; background-position:top; } #topBar a:hover{ background-position:bottom; }

As you see, every one of the unique CSS classes has width and height property, as well the images, we created before, as backgrounds. At the bottom are the #topBar styles. This is where the magic happens. #topBar a (line 35) is a CSS selector, that is valid for all the hyperlinks in the DIV with an ID of topBar. That means, that the rules it specifies, affect those same hyperlinks, which we use as navigation.

On line 36 you see that the links get floated to the left and we use the same trick as we used in the heading last time – using text-indent with a negative value we hide the text and the only thing that is left is the background. That way you have a regular hyperlink for the search engines, and a graphical button for the users with browsers that support CSS.

There is also one important reason to use hyperlinks with text indented to the side – hyperlinks (anchors) are the only elements that have a hover CSS property that is supported on all used browsers today. This is illustrated on line 43.

As you remember, we created the images for the buttons with their normal state at the top part of the image, and the hover state right below.

So suddenly lines 40 and 44 make sense – the anchor elements in their normal state show the top part of the image (thanks to the background-position property) and once you move you mouse above them, they show the bottom part.

The jQuery magic

But what is looks without functionality? Currently, the links display the same behavior as any other link. We need to make the transition stylish. Here come all the possibilities provided by the jQuery javascript library and it’s handy plug-ins.

We already included the needed files, but how do we create that smooth scroll effect you can observe on the site?

The scrollTo plugin gives us the ability to call a special javascript method, that scrolls the page we are viewing.

$(document).ready(function() { $('#topBar .replaceLink').attr('onclick', '$.scrollTo(this.hash,800);return false;'); }

This might look slightly from outer space so I am going to explain it. Line 1 is binding the function we provide, with the onload event of the document. In other words it gets executed only after the page is fully loaded.

Now lets look inside the anonymous function – function() {….}. The dollar sign acts as a special function, that calls jQuery methods to extend the specified elements in the brackets. In this case, we have specified a CSS selector – ‘#topBar .replaceLink’, which practically means “Select all elements within the one with ID of topBar which have been assigned a class name of replaceLink“. Those are actually our three navigation buttons.

For each of those buttons the method ‘attr’ is executed, which sets the onclick property to ‘$.scrollTo(this.hash,800); return false;‘. What this does is scrolls the page after we click the link and later returns false, in order to prevent the default action which would ruin the smooth scroll effect.

An alternative to this would be to bind an Event listener to the click event (should also be put inside the $(document).ready):

$('#topBar .replaceLink').click(function(event){ event.preventDefault(); $.scrollTo(this.hash,800); }

This second version uses event.preventDefault(); to stop the link from redirecting the page, once clicked.

Now lets say a few words about the scrollTo function. It takes two parameters, the first is where to scroll the page to, and the second is the duration of the scroll in milliseconds.

In the above examples we use $.scrollTo(this.hash,800); which takes the hash part of the hyperlink we are currently working with (this.hash corresponds to ‘#choose’,'#configure’ or ‘#generate’ respectively) and feeding it to the function as a parameter.

Conclusion

Today we built upon the techniques we learned in the previous tutorials and created a CSS and jQuery based smooth scrolling navigation menu. I explained the basics of the jQuery selectors and some of the methods.

Next time we write our first PHP code and use jQuery to create the configuration section that allows you to select services on the BloggyBits website.

Creating our HTML & CSS website

Martin Angelov — Tue, 28 Jul 2009 21:14:59 +0000

What are we doing today?

We will create the HTML backbone behind BloggyBits.com, and style it with CSS. I am also going to demonstrate some interesting CSS tricks, that will be of a good use for any developer.

The layout

As you can see from the site itself, the layout is clean and simple, and you might guess that so is the code. We start with the section of the page:

BloggyBits - your social widget

In the head section we include the CSS and JS files. On line 5 we include our main CSS file, which we will create in a minute. Later we include the jQuery UI styles, the jQuery javascript library & plugins, and our self-prepared js file – main.js, which we will cover in the next tutorials.

Now let’s take a look at the layout itself (the BODY section).

BloggyBits

This is the backbone of the site. It is stripped of all unnecessary content so that the example is better illustrated. To make it a little bit easier, here is how it renders in the browser:

The layout

So how do we convert the previous DIVs into a layout like the one above? With the help of the following CSS methods.

Centering a div with CSS

As you can see from the code posted above, I have set IDs to some of the DIVs, and the others have class names assigned (with class=”"). This allows us to specify specific rules for a single page element by id, or to a set of elements that share the same class.

The first rules we should take a look at are those that center the main container on the screen.

h1, h2, h3, h4, form, blockquote, small, input, body, p, label { margin:0px; padding:0px; }/*we reset some of the page elements*/ body { background:#282828; font-family:Tahoma,Arial,Verdana; color:#fcfcfc; font-size:12px; } .mainContent{ width:767px; margin:0px auto; padding-top:20px; }

On line 1 you can see that we specify a series of elements by tag name and we set their margin and padding properties to 0px. Browsers have different values for these elements, so we reset them. This way our site will look the same at every browser.
There are even separate CSS reset files available on the net, that do this for you and reset absolute every element. However for the purpose of this project that seems like an overkill.

Later we style the body and after that we define a class mainContent. This is the class name assigned to the main DIV container. We set up its width, margin and padding.

Line 14 is where the magic happens. We set the element’s margin 0px for its top and auto for its right, bottom and left parts. It makes the DIV centered on the page, with its upper end touching the top of the inner side of the browser window.

It is important to note, that you need to have specified a width in order for the above method to work.

Also a quick tip for you – always name your styles, so you can, just by looking at them, easily remember what they were about.

Putting an image in H1

Now let’s take a look at another interesting trick in CSS. Remember the following code from the the page layout?

BloggyBits

................

What this does is create a text H1 heading with text inside. But you don’t see such a thing in the site – there you see an image instead of the text. So why and how is this done?

It was done because as you can remember, we already made a logo for our site. But if we put a regular in there, it won’t be search engine friendly – robots don’t know what is written in images. That is why a H1 heading is used – for search bots it has the biggest weight and it is very important for your page rankings. But for human visitors we want a image displayed instead of the pain text.

To answer the second part of the question you need to see some more of our CSS.

h1{ background: url(/images/logo.gif) no-repeat; width:200px; height:41px; text-indent:-200px; overflow:hidden; }

We set the logo as a background and set the width and height. With the text-indent property, the text is positioned 200px to the left and is hidden with the overflow property.
What we are doing is basically placing the text to the left, so that it disappears while the background image is clearly visible. For search engines it is a regular H1, and for visitors with browsers that support CSS it is an eye-candy graphic.

Creating the CSS file

We create a new .css document in Dreamweaver with all the above styles and save it as main.css in the root directory. This way we have a separate file, which improves the speed of the site and aids for clean and understandable code – something that pays on the long run.

In the following tutorials we are going to build upon this and gradually style the whole site.

To sum it up

We followed through the first stages of development behind the BloggyBits homepage and created the main layout of the site. Next time we will improve upon this and create a CSS navigation menu with the help of the jQuery scrollTo plug in for smooth page scrolling.

Organizing the site structure

Martin Angelov — Sat, 25 Jul 2009 22:56:57 +0000

What does it mean?

That means to have your folder structure, configuration files and PHP file structure organized, so that your development doesn’t run into unwanted hold-backs.

The tools

In the development of BloggyBits I used primarily Adobe Dreamweaver. It is not only a great tool for coding, but you can successfully manage your whole development process – from programming to uploading via FTP. So let’s take a look.

Creating a new Site

We fill in Local Info with all the data needed, after that we must provide data for Remote Info – you can fill in your FTP credentials and you can even choose to automatically upload files on save – a truly useful feature.

The file structure

Below you can see how the BloggyBits file structure is organized.

The file structure

As you can see, at the root are only the most important files. You could optimize your root folder even further by creating a CSS and a JS folder for the respective file types.

In the fallowing tutorials we are going to gradually create all those files and make it all work.

The most important thing here is to see how the functionality has been divided among the different files. This allows us to reuse code and have globally accessible configuration in every page of our site.

For example here are the first lines of index.php:

require "connect.inc.php"; require "sess.inc.php"; require "functions.inc.php";

We include three files – for the mysql connection, session handling and the functions we have created for the site. The command require behaves exactly like include (includes the code in the files in the current one), but unlike include it throws a Fatal error and exits your script.

You can even further optimize it if you have a single include file, that handles all your includes.

What are we doing next time?

We start building the HTML & CSS design.

Designing our site & widget, part 2

Martin Angelov — Fri, 24 Jul 2009 21:00:32 +0000

Web site design

We continue our step-by-step tutorials about the creation of BloggyBits. Last time, we finished the design of the BloggyBits widget. Now we have to create the homepage of the service, which shares some of the design ideas that stand behind the widget.

Needed tools

As in the first part of the tutorial, our arsenal consists of Photoshop and all its glory.

Designing our site

Designing a site first in Photoshop, and later in a HTML editor gives you the flexibility to rapidly change the looks of the site in the early stages of development, without risking to throw away HTML and CSS code. It is also a lot quicker to build your layout and have an idea of what you are doing early on. Also with the tools that will be demonstrated in the following examples, you will easily export all the graphics and start coding right away.

The first step is to create a blank document with dimensions 1000×1000 pixels. Sometimes, when you design a site, you find the need to use an even bigger canvas, but you can always enlarge it later.

Work version of the design

As you see from this work draft, we have decided the main layout of the site, where the logo, heading and menu items will go, the look of the site and that is about it. A lot changed since, as you can see if you visit BloggyBits and compare it to this first version.

You may ask why I have included the navigation buttons twice. The top row is their normal state, and the bottom is the hover state (we will talk more about this in the tutorials later on).

But lets inspect the design in details to see what’s what.

Our layers

On the top of the stack of layers is the logo of the site – in this case the text “BloggyBits” with a gradient.

Next are some great social icons, found through iconfinder. They are used to replace the default graphic of the AddThis social bookmarking manager.

Bellow you can see the navigation buttons, which are displayed on the Menu bar.
A few paragraphs to the bottom of this article, you can see a dissection of a navigation button. The interesting part here, is how the “round_Bg” layer is clipped by the “rect_body”. This shows how, just by using simple shapes, to create a navigation button, that also acts as a progress indicator (it shows the steps needed to complete a certain activity on a site).

Every button has a corresponding hover state. The main difference between them, is that the hover version is a little bit lighter and the text in the button is underlined.
In the final HTML/CSS design, the menu buttons will be positioned as anchor elements inside a unordered list and the transition between the states will be pure CSS.

After those, there is the label for the sharing icons, the Menu bar, where the navigation is positioned, some sample text, the right content area, where a screen shot and some info about the widget will find place and finally the background layer.

Dissection of a button

Exporting the graphics

Now, that we are done with designing, it is time to export what we’ve done, so we can continue coding the site in a code editor. Luckily, Photoshop has the tool necessary for the job – the slice tool.

Exporting our slices

We slice ‘em up and export them via File → “Save For Web & Devices”. After you choose a file type and click “Save”, be sure to select “All User Slices”, or your slices will be exported along with automatically generated ones.

Final words

In this tutorial we completed the design of our site, and exported it, so that we can continue with the real web development. Next time we start using Adobe Dreamweaver to create a real website from a bunch of images.

Designing our site & widget, part 1

Martin Angelov — Thu, 23 Jul 2009 18:47:57 +0000

The tools

For this tutorial, we will need the fundamental tool for any web designer – Adobe Photoshop. I am using version CS3, but the process shown here is version independent. So let’s start where we stopped the last time – creating our design.

The colors

After we have laid the basic concepts behind BloggyBits, we should now start creating the front-end. As you know, design is very important for a website.

The first thing we do is choose a color theme, which will be used both in the site and the widget. My tool of choice for the job is adobe’s kuler. If you haven’t heard of it, it is a free service, aimed at providing its members with the ability to create great color themes, or download ones already made by others.
You can also take a look at their AIR application too, which makes it even easier.

Choose color themes with kuler

After you choose a theme you can either log-in and download it, or you can copy the hash values of the colors for use in Photoshop or other software.

Designing the widget

We have to design both a website and a widget. And preferably, they should be uniform – we are preparing the website as an extension to the widget and it must have the same feel to it.

So lets start designing. First problem we face are the dimensions of the widget (width and height). If they are too small, content won’t be readable and if they are too big, the widget won’t fit in blogs.

For now we choose a size that favors the content – 250 by 350 pixels, but unfortunately, there are some blogs (or blog themes) that do not support that size of widgets on their sidebars.
However, if the need arises, a smaller version of the widget will gladly be developed for those scenarios.
In web development it is a common practice not to start with the fully-fledged service, but rather further-develop it later on. This helps you stay on schedule and not risk bloating your project with features, that may end up unneeded.

Now let’s create a blank photoshop document with a size of 250 by 350 pixels and start layering on our design.

Widget design & layers

This is just a mock-up of the real thing – some things were added later in development, but that is pretty much how the final design looked. You see the background as the bottommost layer named “bg”. It has a color overlay, set with the background-color.

Next are three sample posts, each of which contain a picture of a tree, a title, date, and a background rectangular shape.

Details make a design good, so we are using some nicely looking icons for the social sites tabs, and the backward/forward arrows. Those icons are free for use for both commercial and non-commercial projects. You can find those and many more on the iconfinder website.

A good practice in your design would be to name every layer, so you can easily find your way later on – it improves your effectiveness and prevents any accidental editing or deletion of a wrong layer.

We are ready with our widget design. The next step in the creation of the widget is to import it in Adobe Flash and start programming.

What are we doing next time?

Next time we start designing the BloggyBits website.

Planning our new site

Martin Angelov — Thu, 23 Jul 2009 00:02:51 +0000

The steps

There are a few basic steps, that are common for every new web site before any real development has started. Missing them is like playing a russian roulette with a fully loaded gun – it will surely come back to you no matter how good you are. The first and most important of them is carefully planning of all the features the site will encompass. This ensures that you don’t invest any of your precious time into building features, that will get scraped later.

In our case BloggyBits started as an idea for a neat little Flash widget, that would be a great addition for any blog – you just put it in your sidebar, and it shows all your latest doings with its flash goodness.

A great thing about such an idea, is that it promotes itself (the second most important thing in web development, apart from building the site itself) – a lot of people will see the widget somewhere and put it in their own site, thus further promoting it. At least in theory – lets not forget that they must be really impressed with it.

Of course, the widget cannot exist on its own – we need a way to let people configure and generate the code, read some info, leave us feedback and edit the widget later on. This calls for a site that will be the home of the widget, that must be able to meet all of the above requirements, and share the principles that stand behind the widget itself – clean design and simplicity.

Create a mind map

Now that we have an idea of what lies ahead, we must somehow create a mind map, along with some technical logic, of our masterpiece to be.

Our mind map of the basic principles behind the site

Looks great, but what does it all mean? Well, here we have the basic layout, organized by the PHP back-end. Some of its functions:

It updates the local data storage with a user’s latest activity on the social sites, that he has chosen (by scanning through RSS feeds);

The back-end presents the flash widget with a properly structured (XML) representation of all of your activity, and the widget configuration;

PHP manages the generation of the widget and the changes made to it later by the “edit” functionality;

It handles the bloggybits.com website.

The flash widget is a front-end that presents the data to the user in a friendly way, and schedules updates to the data in an asynchronous way (we’ll get back to this in details in the next tutorials).

What we learned?

If we can summarize it in a single sentence – don’t start programming and designing before you’ve thought over the main aspects of the site, or you risk wasting your (or your client’s) time.

What is next?

We can continue with the cornerstone of web design – the design itself (duh). Both the widget and the site must have a stylish and clean look. No matter how impressive your back-end code is – if you have a bad design everything is lost.

Here is a quick preview of what we’re doing next time.

The design