Sometimes it can be hard to start writing a Javascript script when you don’t know what to do instantaneously. But luckily there is the Internet right?
Just go to Google and type in what you want in a script. Good chance some jQuery or Javascript solution will show in the results, and you are basically done.
The problem is that you still don’t know how to do such things.
In this article I’ll discuss the viral points of planning out a Javascript / jQuery script with ease.
Before I start talking about Javascript and jQuery I want to take the time to do some shameless self-promotion.
A few weeks ago I opened up a small blog on tumblr. I will be posting inspiration I’ve come by on the Internet, just to support the sharing of awesomeness on the web!
The url is: http://micro.gayadesign.com
Now on with the article!
Good to know
Before you start working with jQuery, it’s best you first understand Javascript and the difference with it and plain HTML and CSS.
Most HTML elements are static, they don’t move, they just sit there. A document (without any flash objects or gif images) looks like a still life. The only change you’ll probably get is when you hover over links. You can’t change the content of the page without generating a new document.
This is where Javascript (in this case in addition jQuery) steps in, which you probably already know.
The first thing I would like to advise is to start by learning basic Javascript and doing calculations in it. This will also help you experience the differences between browsers. But don’t worry; jQuery solves a lot of these problems!
I think that the following tutorials give you a great start in developing in Javascript: http://www.w3schools.com/JS/. For people who prefer books; I found that “Professional JavaScript for Web Developers (Wrox Professional Guides)” is a pretty neat book to understand the basics of Javascript.
If you’re already into Javascripting, the previous steps would be out of the question. So we’ll move on to jQuery.
Go to the jQuery website for the documentation. There is a lot of information about how jQuery works and which functionality is available.
In the next section I’ll explain what to do before starting to write your own script.
Before creating a script
The first thing you need (this is kind of a no-brainer) is a good idea. An idea for a nice effect, some sort of enhancement for your web page or effect of any kind.
Most of the scripts I wrote were made because there was functionality I wanted, but wasn’t available in plain HTML and CSS. Most of the things you’ll create with jQuery would have never been possible without the use of Javascript.
Once you’ve got an overall idea of what you want to achieve and which elements you want to adjust, you can start to create a layout in HTML and CSS.
It is important that you give the right classes and ids to the elements, this will benefit in the jQuery development process.
Elements that will be visible after a certain action can already be included in the document, but make sure to hide them from the user. A simple display: none in the CSS will suffice.
It is a lot easier to use HTML that is already generated rather than generating it all in jQuery.
I also like to keep “ghost elements” ready in the HTML, so I can copy a whole element and append / prepend the copied element with ease. This will minimize the jQuery scripting code.
Now that you have the layout ready and have a basic idea of what you want, you can start to map out everything the script will do to your page.
The basic idea is to list all events and happenings. I like to make short lists of different functions which the script will contain.
I’ll give an example of a very basic script; It displays thumbnails. When a user clicks on a thumbnail, the larger version is displayed. When a user hovers over a thumbnail some styling is added.
This example can be divided into separate function with ease, but separating the events first is the easiest. We’ll have an onhover and an onclick event which we have to lay out.
Now that we know which events will take place we can write what these events should do, eg:
Hover: Element should get a border and disposition a bit to the top. It should reset when the cursor leaves the element.
Click: Get the source to the larger version and append this image to the display element.
The actions can be easily scripted as functions. So that you’d only have to bind a function to the event.
Now we can create the code layout for this example. I like to keep all my scripts clean, and to achieve this I put the whole script inside a new Javascript array. The following code will serve as the template for this script:
var ScriptName = {
init: function() {
//function that will initialize the script and do all the bindings
},
openLargeVersion: function(obj) {
//when a thumbnail is clicked, this will be executed, given the clicked element
},
hoverThumb: function(obj) {
//given the object, we'll manipulate the css
},
mouseoutThumb: function(obj) {
//given the object, we'll reset the styling here
}
}Using script layouts like these will really help in the development process. It gives a good idea of what every function should contain and will separate all the action (rather than putting all the Javascript in a file and summing up all functions and bindings.)
Keep it simple
Really! Keep it simple! Javascript can be used to adjust the presentation of the website, but please, please don't overdo it. It won't do any good on the experience, performance and goal of the script. On top of that the development process will probably be a killer. Just keep it simple (stupid!).
It's good to plan out the different animations you want to achieve in the script. First move the element a bit and then change the colour and then and then... It's important to keep animations and actions in line with what you expect.
Using the init function I created in the sample template code can really help you in separating different snippets of jQuery code. A simple
$("#element-id img.thumb").click(function() { ScriptName.openLargeVersion($(this)) });would be enough to bind the openLargeVersion function to every img element with the class thumb.
When using functionality like .animate using callbacks can be really useful for chaining animations and keeping everything in line.
Another thing I started to like is the use of cheat sheets. They save a lot of time clicking around in the jQuery docs. They list all the functionality which jQuery contains and gives you a small example of how you should write the code.
I found the following cheat sheet very helpful: Visual Cheat Sheet by Woork.
Think of how you want to adjust your document's layout. A lot can be achieved by only adjusting the CSS presentation. The animate function in jQuery enables you to make changes over an amount of time. Imagine increasing the padding, it will look as if the element is growing. Same can be said about margins, but then the element would move around.
Another little something: use Firebug in Firefox!
Firebug will help you in the development process and gives you a lot of handy options to keep an eye on your HTML. It is very interesting to see the style of an element change thanks to jQuery.
The possibility to execute Javascript code on the fly is also a really nice feature when writing Javascript code. It's the easiest way to do trail and error coding without having to upload a file and refreshing the page.
This is a tool you cannot miss!
Conclusion
I hope this is a nice step into creating your own jQuery scripts with a few things to keep in mind. It really isn't hard, just let your imagination run wild and try to translate it into logical steps.
If you have something to add, please let me know in the comments below!
Thanks a lot Gaya. Was looking forward to this article after you told me. ;-)
(@AtMyDarkest)
that is schaweet (love the title haha)
Thanks for the fast comments!
Glad you liked it :)
Nice post gaya. I can’t get enough of jQuery. I am experimenting with it everyday and learning something new.
Indeed, jQuery wont seize to amaze me. I learn something new every day too. There are so many features I don’t know of (yet!)
Thanks for the comment Kawsar
Thanks for this tut!
It got me started with JQuery today and I found myself able to do some quite cool stuff right of the start!
wow, sweet post, and nice flow of writing, Gaya, you re rocking man!
” I put the whole script inside a new Javascript array” – surely you meant “object”.
For some funcitonality it’s more practical to create a plugin:
jQuery.fn.gallery = function(){
var self = this; //current jQ object
function openLargeVersion(){
$(this).doSomething();
}
self.click(openLargeVersion);
return self;
};
$(‘.img-thumb’).gallery();
Thanks for this! fantastic post
thank you for sharing this! now I’ve found another idea :D
**two thumbs up**
Hee thanx for this amazing eye opener. I was looking for this for a while now. Still have a questing. Do you have a real example of the code. Like a working example how you use an event listener in combination with your script and how does it been called the first time? (document.ready orso?)
hope you can answer my question really stuck in this one…
great post
Very informative. Are you going to post more on this?
http://www.educationmaroc.com
Thanks for application
That’s a mold-beraerk. Great thinking!
Can I just say what a aid to search out someone who truly knows what theyre speaking about on the internet. You positively know how to carry a problem to gentle and make it important. Extra folks have to learn this and perceive this facet of the story. I cant consider youre no more widespread since you positively have the gift.
The instruments are a big help. You make these instruments very obtainable because I am getting a difficult time looking for them.
With every thing that seems to be developing throughout this subject matter, a significant percentage of points of view are generally quite radical. Nevertheless, I am sorry, because I can not subscribe to your entire idea, all be it refreshing none the less. It would seem to everyone that your comments are generally not completely justified and in simple fact you are generally your self not really fully certain of the argument. In any case I did enjoy reading it.
save a marriage alone
Keep functioning ,great job!
the monetary / yen — 17%
Why when calling the click action you use an annonymous function?
Instead of this:
$(“#element-id img.thumb”).click(function() {
ScriptName.openLargeVersion($(this))
});
You should use this:
$(“#element-id img.thumb”).click(
ScriptName.openLargeVersion.bind($(this))
);
And finally why are you putting your scripts into an array? I used to do it as well, but there’s no advantage of doing this. Moreover is more hard to handle scope on variables, etc…
With every thing that seems to be developing throughout this subject matter, a significant percentage of points of view are generally quite radical. Nevertheless, I am sorry, because I can not subscribe to your entire idea, all be it refreshing none the less. It would seem to everyone that your comments are generally not completely justified and in simple fact you are generally your self not really fully certain of the argument. In any case I did enjoy reading it.
I wish to show thanks to you just for bailing me out of such a difficulty. Just after checking through the world-wide-web and getting tricks which are not powerful, I was thinking my entire life was well over. Being alive without the presence of answers to the problems you’ve fixed by way of the review is a critical case, as well as the ones which could have badly affected my entire career if I hadn’t come across your web blog. Your personal knowledge and kindness in dealing with the whole lot was priceless. I am not sure what I would’ve done if I hadn’t come upon such a point like this. I am able to at this moment relish my future. Thank you so much for your expert and sensible help. I won’t think twice to endorse the sites to any individual who will need recommendations about this problem.