Showcases are a great way to show your visitors your latest addition to your portfolio or to present the latest product or article. Many sites use this technique to cram information into an area so that your visitors do not miss your message.
This tutorial will show you how to create such a showcase by utilising jQuery.
jQuery makes animation easy. This tutorial will guide you through the setting up of your HTML, CSS and the associated jQuery code to create the showcase.
The HTMLThe viewport div is our window to the content that you wish to display to the user. We’ll use CSS later to ensure the viewport only displays the content you want. Inside the div, we will be enclosing two further divs; one for the sections and another for the labels which will pop up when the viewport scrolls into view. Both of these will be inside another div: scrollable which will be the element we use to scroll all the content within it into view. The sections div will contain four further divs which will represent our sections and the labels div will contain another four divs to represent our labels. Lastly, we’ll create a row of simple buttons so we can elect to scroll a certain section into view.
The CSSWe’ll start with the viewport itself. We want to set the dimensions of the viewport, ensure that any content within it does not flow out and we’ll add a thick 5px solid border.
We’ll look at the individual section divs now to style them for our purposes. Each div classed as section needs to float left of each other otherwise the content will flow out of the containing div and onto the next row. We need these to be next to each other so that when we alter the left position of the #scrollable, the relevant section will come into view. Our sections will be 600px wide by 300px hight wide but we’ll add some padding of 10px so everything isn’t flush to the sides of the viewport. Our height and width will need to be reduced by 20px to cater for this.
Queuing EventsWe’ll start first by examining what it is our showcase “widget” will do. When we click on one of our buttons, we want our label to drop down out of view, the new section to come into view and then the label to pop back up again. We’ll be scrolling the scrollable div so we only need to be concerned with scrolling that – everything within it will be dragged along.
So the order of events is:
- hide the label
- scroll the viewport
- show the label
The main function navigate will set up the queued events. We will also add a function to clear the queue so that events don’t back up which would result in the queue getting larger and taking longer to complete. clearQueue(), if supplied with no arguments, will clear the events on the default fx queue.
Animating the ElementsWe’ll define these functions next by using the animate() method and make use of a callback to dequeue the next event.
To hide the label, we need to move the bottom position of the label to 0px making it disappear from the viewport and we’ll nominate that this takes a quarter of a second or 250 milliseconds. We also need to ensure that the next event in the queue executes and so we create an inline function dequeueing the next event.
Binding the EventsThe next thing we need to do is attach the navigate event to relevant elements on the page. In our case this would be the four buttons we defined earlier. The best way to attach these events is to do it through jQuery. The document needs to be fully loaded before we do this so we use the ready() function to wrap the code in.
We use jQuery’s click function to instantiate an anonymous function which in turn triggers the navigate function with an appropriate value for position.
Tidying UpYou’ll notice that when using the button to select your new section, if you move your mouse to the label quickly, the animation stops suddenly. This is because we have bound an event to the label element and used stop() to stop the events from queuing up and making the UI unusable. We can detach this event and reattach it once the scrolling has been completed so as not to cause disruption. In our navigate function, we will unbind the event before creating the queue:
SummaryIn this tutorial you learnt how to create a simple showcase widget. You used HTML and CSS to style it and most importantly used the overflow property to limit the view of the viewport. Queuing and dequeuing events with jQuery enables you to execute events asynchronously and binding and unbinding events enables you to exert more control over the UI to prevent unnecessary animation. This example is easily extend to create more sections. You just need to make sure the widths of #content, #scrollable and #label divs are expanded to including the extra sections that you wish (remember — 600px per section) and of course, add an extra section in the #content div and a related label in the #labels div.
How to Create a Showcase with jQuery Reviewed by Aamir Pathan on 1:57 PM Rating: