A jQuery/HTML5 Showcase - Blog Barry Hassan
A JQUERY & HTML5 SHOWCASE
Introduction - Friday 4th February
The purpose of this assignment is to create a website to showcase the capabilities of
certain jQuery features ranging from animation to tooltips. The site, which is based upon
the current COM601 resource site, will be rewritten from XHTML to the new incoming
standard HTML5. The report discusses and justifies the implementation seen on the live
site. I begin this report discussing the HTML5 implementation.
HTML5 - Sunday 6th February
HTML5 is the latest implementation of HTML. It is semantic and standards based
and incorporates some new elements and syntax. On the site this is explained as an
introduction, here I will show the conversion of the current navigation element in XHTML
to the HTML5 navigation standard.
B00344091 1
A jQuery/HTML5 Showcase - Blog Barry Hassan
Other HTML5 elements work in a similar way such as replacing with the new element. Further HTML5 elements are discussed
throughout this document.
jQuery - Tuesday 8th February
jQuery is a JavaScript library that makes client-side scripting easier. Including the
library allows developers to create dynamic and powerful applications. This assignment
focuses on the jQuery UI and demonstrates different implementations of jQuery with help
from the jQuery for Ninja‟s book. The first demonstration I look at and explain is jQuery
Animation.
Drag & Drop - Wednesday 9th February
A big part of the jQuery UI is interaction. A fine example of a jQuery interaction is to
drag and element around and drop it elsewhere on the page; this can be applied to any
DOM element. Here is a snippet of jQuery script that implements the .draggable();
function to a DOM element with the CSS id #draggable:
$(function() {
$( "#draggable" ).draggable();
});
There are many different options to the .draggable(); function and on my
showcase I have selected a few to demonstrate this.
There is also a droppable function that acts as a target to any elements that are
draggable. There are many examples of the droppable function and can be seen on my
showcase site, but I will show the script that allows an element to be droppable here and
continues overleaf.
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function() { alert('dropped'); }
});
B00344091 2
A jQuery/HTML5 Showcase - Blog Barry Hassan
});
Sortable - Wednesday 9th February
By default, sortable elements share draggable properties; any DOM element
assigned the CSS id #sortable, as seen below, can be sorted. A good example of this is
applying the sortable function to a list item in an unordered list.
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
Animation - Thursday 10th February
In all examples on my showcase site I include the CSS and jQuery script inline with
that particular section. This is for ease of use in interpretation even though it is not regular
practice. In Novice to Ninja, it states that to animate CSS elements using jQuery we firstly
need to implement the animate function and target the CSS element we want to animate.
The example below is the code behind the colour animation on the showcase site.
B00344091 3
A jQuery/HTML5 Showcase - Blog Barry Hassan
$(document).ready(function(){
$(".colour").toggle(function() {
$(this).animate({ backgroundColor: "#662017" }, 1000, 'linear');
}
});
I will now go through this snippet explaining how it animates the colour elements.
After the jQuery library has been included in the of the document, I can begin to
use jQuery. The first line in the script here calls up jQuery using the dollar sign and says
that whenever the document has finished loading call this function. The next line (a further
indent) states that when any element with the CSS class .colour is toggled, implement the
following function. The next line calls jQuery again and in the brackets says (this),
referring to the element that has been clicked or toggled. Following this is the animate
function and what follows are the attributes requite to animate to from its current state.
So for example, if I have a or on my page with the class .colour
() and I click or toggle it and is initially set with the colour black
(#000000), it will animate its background colour to a burgundy ( #662017) over the course of
1000 milliseconds in a linear fashion. Linear can be substituted for other attributes such as
swing, easeOutBounce or easeInOutExpo to display different types of easing.
Scrolling - Sunday 13th February
B00344091 4
A jQuery/HTML5 Showcase - Blog Barry Hassan
The last section address the animation function, this section is about the scrolling
function. The difference between animation and scrolling in jQuery is that the user is in
control during scrolling. There is an event called scroll which fires everytime a user
changes the position of the scrollbar in the window. In the „scrolling‟ section of my
showcase site this is shown in effect under the tab “Scroll Yes/No?”. I will go through that
jQuery script here and explain each line.
$(window).scroll(function () {
$(".capture").css("display", "inline").fadeOut("slow");
$(".no_capture").css("display", "none").fadeOut("slow");
});
The first line incorporates jQuery and targets the parent window. After this we can
see the scroll event attached to this; when this happens the following function is
executed. As before with the animation function, the jQuery targets the .capture class in
the document, attaches or overrides the CSS attribute {display:inline;} to the targeted
class and slowly fades it out.
In this scenario the CSS class .capture is assigned to a tag that is initially
hidden upon page load then this jQuery shows it ({display:inline;}) when the page
scrolls. The scroll event fires in many different ways from using arrows keys, scrolling the
scroll bar and using the mouse wheel if at hand.
The publication Novice to Ninja 2010, states that a plugin called ScrollTo can be
implemented to overcome any browser bugs found while using the scroll event. Another
plugin as stated in the book to replace the browser‟s default vertical scrollbar is the
jScrollPane.js plugin. In my showcase site, I do something similar on the “Scroll Tabs”
section. Here, as seen in the jQuery UI, the user may use the horizontal scroll bar to switch
between three separate holding different content. Here is a snippet of code followed
by an explanation on how it is done.
$(function() {
$( "#tabs_scroll" ).tabs({
select: function( event, ui ) {
$( ".scroll_slider" ).slider( "value", ui.index );
}
});
$( ".scroll_slider" ).slider({
min: 0,
max: $( "#tabs_scroll" ).tabs( "length" ) - 1,
slide: function( event, ui ) {
$( "#tabs_scroll" ).tabs( "select", ui.value );
B00344091 5
A jQuery/HTML5 Showcase - Blog Barry Hassan
}
});
});
As before, the dollar sign indicates to begin implementing jQuery, it focuses on the
#tabs_scroll id, which is assigned to the tabs we wish to scroll. It says they are to be tabs
and when they are selected, the scroller (which we have given the class .scroll_slider)
moves to a corresponding position to give user feedback. Conversely, the second snippet of
script does the opposite; it firstly finds out how many tabs are in the application, calculates
a scale, then when the user moves the slider the corresponding tab is selected.
Resizing - Monday 14th February
Another part of the jQuery library is the ability to resize elements on screen, the
user may have control over the size of certain elements on screen with different
applications such as keeping aspect ratio, animating to a new size or fitting content to a
new size. In my showcase site I show examples of these, the first one I discuss is a basic
resize using the resize event.
As seen previously in the first panel, any element on the page assigned a CSS class
that is used in the jQuery script and assigned the resize event will show a resize feedback
icon in the bottom right of the element. When the user hovers over this icon the mouse
point changes to the resize pointer and the user is hinted to move the mouse around to
B00344091 6
A jQuery/HTML5 Showcase - Blog Barry Hassan
resize the element in different styles. The end resize is shown in the right hand panel. Here
is a snippet of the jQuery that performs this.
$(function() {
$( "#resizable" ).resizable();
});
After the jQuery library is imported, any element that is assigned the id of
#resizable can then be resized, all due to the .resizable(); function being added to the
snippet.
Other variants of the .resizeable function include aspectRatio, maxHeight,
minWidth and animate. An example of resize animation is shown here.
$(function() {
$( "#resizable_animate" ).resizable({
animate: true
});
});
With the option to animate set to true this element with a given class of
#resizable_animate will act just as before in a normal resize but it will animate to the new
given size.
Images - Thursday 17th February
As mentioned in the book jQuery: Novice to Ninja, there is an effect utilised in
jQuery called Lightbox that allows a user to click on a thumbnail and view the full image in
an enlargement animation. This is done by assigning a class to the link, in the case on my
showcase site and the example in the book, this is .lightbox. The first part of this complex
jQuery implementation is to declare the styles of the “overlay” that is shown when
the user clicks an image link. This is positioned absolute so that it will overlap the current
view. In the script itself, whenever the link with the lightbox class is clicked, jQuery is
called into action. It appends the aforementioned overlay div to the body of the page, adds
a few more CSS properties to it as well as injecting a in this overlay that will house
the full-sized image.
B00344091 7
A jQuery/HTML5 Showcase - Blog Barry Hassan
$('')
.hide()
.appendTo('body');
Another function is then implemented to position the enlarged image in the middle
of the page by way of calculations. Then finally, there is a function implemented to remove
this when the user clicks on it. Below is an image of this custom lightbox in action
from start to finish.
Another jQuery implementation is the use of rollovers on images. A user is greeted with
the page and one image in view, when the user rolls their mouse cursor over the image
another one comes into view. This is done by loading all images at page load time then
hiding the ones that are assigned a certain class in the HTML. Then when the script is
called it finds the next tag in the and shows it.
Slideshows - Saturday 19th February
B00344091 8
A jQuery/HTML5 Showcase - Blog Barry Hassan
Slideshows are quite popular on the web and jQuery offers an accessible way to view
images easily. In my showcase site, I show five different ways of using images and jQuery;
the first one is a simple fade between images.
$(document).ready(function(){
slideShow();
});
function slideShow() {
var current = $('#photos .show');
var next = current.next().length ? current.next() :
current.parent().children(':first');
current.hide().removeClass('show');
next.fadeIn().addClass('show');
setTimeout(slideShow, 2000);
}
Above is the script that implements the slideshow in my showcase. The first part of the
script tells the document to run the slideShow(); function that follows whenever the DOM
is ready.
In the slideshow function itself, it first sets a few values to variables that show the
that the photos for the slideshow are held in. The next variable states to go to
the next item in the list or section whenever it is used. The next two lines are where the
actual jQuery is visible to us in the web page. The variables we previously assigned are
used; it hides the current image and removes the CSS class .show, which is declared to
display:inline; so that the image can be seen. With this in mind, the next line uses the
previously declared variable that goes to the next image and adds this .show class so that
we can see it. This is done by fading out and fading in both of these images. The last part of
B00344091 9
A jQuery/HTML5 Showcase - Blog Barry Hassan
the script sets this function to happen every 2000 milliseconds, resulting in a smooth
transition between images.
Another use of jQuery, as mentioned in jQuery: Novice to Ninja is to use thumbnails
and being able to scroll through them. This would be in the way of a strip of 8 - 10 images
and then the user may click the strip and animate to the end of the line initially hidden.
$(document).ready(function(){
$('#photos_inner').toggle(function(){
var scrollAmount = $( this ).width() - $(this).parent().width();
$(this).animate({'left':'-=' + scrollAmount}, 'slow');
}, function(){
$(this).animate({'left':'0'}, 'slow');
});
});
This script, as shown in
three stages in the images
to the right, scrolls the
or that
the photos are housed in
to the end of its width
that was originally
hidden using CSS. This is
toggled so the first time
the user clicks the
thumbnail scroll the strip
scrolls to the left and the
next time it returns to its
original setting. This is all
done using the slow
property of jQuery animation.
Menus - Wednesday 23rd February
I briefly covered some menu use in the animation section of the showcase by use of
an accordion. I will also use an accordion in this menu section but with a bit more
B00344091 10
A jQuery/HTML5 Showcase - Blog Barry Hassan
advancement. I‟ll also show the ability to open and close menu items in a list on hover and
also the use of an overlay menu.
The above screen shot is from my showcase site where it implements jQuery to open and
close list items upon hover. This is an advancement from the accordion seen in the
animation section. This is an example seen in the jQuery: Novice to Ninja‟s book and I will
now discuss its implementation.
$('#menu > li').toggle(function(){
$(this)
.removeClass('waiting')
.css('background-position', 'right -20px')
.find('ul').slideDown();
}, function(){
$( this )
.removeClass('waiting')
.css('background-position', 'right top')
.find('ul').slideUp();
});
This is in part, the script to open and close the accordion list. The other part handles the
hover events but this script handles if the user toggles the list headers, which is a better
script for explanation purposes.
If the list item in the assigned the id of #menu is toggled it calls the function to
remove the class of .waiting assigned to the list-item at run-time, adds a piece of CSS to
change the background position and finds the nested within this and slides it
down in an animation. The opposite of this is the next part of the toggle where it
repositions the list item from its indent and slides the nested back up into the original
hidden position.
B00344091 11
A jQuery/HTML5 Showcase - Blog Barry Hassan
Another example of using a menu in jQuery is by use of an overlay element to be called
when a user invoked action occurs in the DOM. This is an alternate way of giving user
feedback; the example of an overlay menu in the suggested text book is the scenario of a
shopping cart. This works similar to the previous example of sliding down the accordion on
hover, except instead of a nested list we have an initially hidden overlay element.
B00344091 12
A jQuery/HTML5 Showcase - Blog Barry Hassan
Tabs - Wednesday 23rd February
As the showcase was built with tabs already in mind, they are featured throughout
the site, alternating between content shown and hidden by the click from user interaction.
In this example of tabs I‟ve added a bit more jQuery to automatically alternate between the
tabs and their content. Here is the code that does this to the #tabs section on the site.
$(function(){
$('#tabs').tabs({ selected:0 }).tabs('rotate', 1500);
});
It‟s also worth noting that in my jQuery snippets, I begin and end them with the
tag and leaving out the type attribute; this is a new feature of HTML5 where the
type is no longer necessary. The script above targets the id of #tabs which is a list in my
HTML holding both and tags, the .tabs option after this lets jQuery know that
the list is to be of tabs type. The style of these are declared in the imported jQuery UI style
sheet, then with an added option to say that the first item in the list is selected.
The additional part also targets the tabs again and declares a way for them to be
viewed, in this case they are to be rotated through at 1500 milliseconds between each
change.
Tooltips - Saturday 26th February
A tooltip is a customised element that shows the title attribute of whichever element
it is assigned to. For example, hovering over an anchor link with the title attribute of “link”
will show the overlay tooltip populated with the text “link” upon hover. What makes a
tooltip different to a normal mouseover action is that it stays with the action point until the
user moves away from the element totally.
In jQuery, to assign a tooltip you first need to write the script that targets the title
attribute of the element, append it to the document‟s body, give it a position and an
animation function, then in CSS we hide it using display:none; until it is ready to be
called into action on hover. Overleaf is the tooltip script.
B00344091 13
A jQuery/HTML5 Showcase - Blog Barry Hassan
$(document).ready(function(){
$('.location').hover(function(e){
var titleText = $(this).attr('title');
$(this)
.data('tipText', titleText)
.removeAttr('title');
$('')
.text(titleText)
.appendTo('body')
.css('top', (e.pageY - 10) + 'px')
.css('left', (e.pageX + 20) + 'px')
.fadeIn('slow');
}, function() {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e){
$('.tooltip')
.css('top', (e.pageY - 10) + 'px')
.css('left', (e.pageX + 20) + 'px');
});
});
As you can see, towards the bottom is the mousemove function of jQuery which holds
values of CSS positions; this is how the tooltip stays in its position in relevance to the
action point of the mouse when it is moved around the element.
Panels - Monday 28th February
Panels are items on the page that house content and can be moved or sorted and
snapped to a grid. Previously in the showcase I showed sliding panels that also housed
content that could be manipulated depending on the position on the panel. Here, I will
show panels that can be collapsed and sorted.
B00344091 14
A jQuery/HTML5 Showcase - Blog Barry Hassan
After declaring out styles in CSS, I can then script out how I want these elements to
work using a few extended attributes from the .sortable function. ConnectWith allows
multiple panels to be used and when this is used it can be connected to the other elements
in a one-way relationship. To make the panels collapsible as well, I can just add a few CSS
toggles as and when a user clicks the title bar of the panel.
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
}
})
In this case the sortable panel connects with the .column class, switches the mouse‟s
point to the move icon and shows the default placeholder while dragging the panel. When
the panel is stopped moving it clicks into place as an item in the of the DOM.
Design & Conclusion - Wednesday 2nd March
B00344091 15
A jQuery/HTML5 Showcase - Blog Barry Hassan
In conclusion, I‟ve created a jQuery showcase site that shows different aspects of the
jQuery UI and how it interacts with the DOM. The site was also written in the new
upcoming standard markup language HTML5, using new tags where appropriate. In the
site, I use PHP files although making use of the full capabilities of PHP was unnecessary is
this showcase site.
In terms of the design, I decided to keep in minimalist and straightforward with a
focus on the content by using a clean two column layout. Overall, this showcase site helped
me develop my understanding of jQuery and HTML5.
B00344091 16