Hello and welcome I have been off recently working on something new for my video site.
I thought I would produce some sort of tutorial on here so others can understand how to customize their JQuery galleries. I will be starting to talk you through the process of producing the end product in a couple of days but I thought I would post the initial screen shot now so you can all see what the end product will look like:
What we are looking at is the big gray strip across the middle of the page, ignore the header or footer. There are three parts to the gallery, “hot” (popular) videos, default spotlight videos and editors pick. The JQuery gallery will scroll between each part when one the links is clicked and the links will change accordingly (I could have done it all by normal AJAX but I wanted the scroll effect so meh).
The sections themselves are broken down into videos. There is one main highlight video which has information about it (length and rating) and four smaller image representing other videos. When the user hovers over one of the images and tooltip will show displaying the title of the video.
In this tutorial I will be using, HTML, CSS, JQuery (Scroll and AJAX), PHP and MySQL and I will be checking this product in IE7 (IE8 is emulated as IE7) and Firefox (just the two browsers I have at hand, no IE is not running under Wine, it’s in a VM :P).
One last tip before I say bye for a couple of days whilst I get the finishing touches done, this tutorial is really only for professionals I would recommend the newer users stick to the JQuery gallery post I uploaded some time ago. This tutorial will be using the full Monty.
Ok, now that we have established exactly why Firebug is useful it is time to look into its usage. We will handle the very basics of how to install it first. Firefox is a very fast, secure and light weight open source browser that many web developers would agree is decades ahead of Internet Explorer (and Safari on security). It is about the same type of level, maybe a little higher, than that of Opera.
I would strongly recommend you install Firefox as a permanent browser if you haven’t already. After you have installed Firefox (or already have it installed) you need the Firebug extension from here. Once this has finished downloading and installing the browser will be restarted. Once the browser has been restarted you are ready to learn Firebug.
Note: To enlarge any small images in this tutorial just click on them and the image will open up.
To access Firebug
There are three ways to access Firebug:
Either by clicking the bug icon () in the bottom bar
Or by using Tools->Firebug (can access all features of Firebug from here including some settings)
Or, lastly, by right clicking on any part of the page and choosing “Inspect Element”:
The main window of Firebug (click on the image to see a larger view):
Along the top of the Firebug window you will notice a menu type control. These are tabs which lead onto each section of Firebugs control:
For this tutorial we will be focusing on the HTML, Script and Net tabs. These tabs are easily for most important for a beginner web developer to understand. The other three tabs Console, CSS and DOM are all self explanatory and provide no specialized tools. I should mention that some of these tabs are in fact disabled by default. To enable any tab which is disabled just click the little down arrow in the tab and select “Enabled”.
You can edit the CSS for each element on the page within this HTML window by moving over to the right pane (the pane showing the CSS) and clicking a property or value. As an example I have a property:- “width:750px;” if I click the “750px” value of the width property I can edit the value however if I click the property itself I can edit its existence. The best part about this feature is that it changes the CSS in real time. This makes it great for changing CSS to fit Firefox and IE perfectly. Below you will see a brief example of dynamic CSS modification (click on the images to see a larger view):
So in this section you now understand that Firebug can allow you to dynamically debug HTML and CSS whether it be dynamic or static code. You should also understand the basics of how to accomplish the debugging now.
The Net tab is a very handy tool which allows the developer to understand what requests are being made, when, how and speed of each process of the request (i.e. queuing, request and response):
The Net tab can also be used to calculate network values such as bottleneck bandwidth, congestion windows and overall RTT making this tool extremely invaluable for checking URLs and diagnosing networking problems within your server.
You can select scripts by clicking on the sub tab bar below the main tabs. This will allow you to sort the scripts into different types and eventually select just one script. In order to debug the script you must add breakpoints to it so when you have chosen the script you want to debug just in the margin of any line within the pane showing the script. Once you have done this run the script (by either refresh or clicking on a link, really depends how the script is launched) and you will see that the script has now stopped on the first processable breakpoint. In the top right hand corner of the script pane you will see a play, pause and stop button. If you use the play button it will play through the breakpoints whilst pause pauses the script and stop ends all processing (much like adding a return;).
When debugging you will notice that the right hand pane will show debug information. This debug information will allow you to see exactly what the DOM is doing at that point allowing you to not just debug variables but also states from specific HTML/CSS elements to page wide processing.
Note: There are no screen shots as of yet since I needed to reformat my server recently and have no yet uploaded my site to it 😦
Firebug is an extremely useful tool which will allow you to do almost anything needed to check a websites running status. We only explored the basic areas in this tutorial and there is still much more for you to explore within this Firefox extension, however, now that you have a basic grasp of Firebug you should be able to play around with it and understand what everything is doing. There are add-ons for Firebug itself like a CSS overlay that allows you so overlay an image on your current page and align the CSS to match correctly but as always it is now up to you to play and tinker with it as you need, you are the professional now. Enjoy 🙂