|
Web Design  This website demonstrates using wikis as teaching and learning tool. The course instructor is happy to share the teaching materials here with those who find it readable. |
Lecture /
JavaScript in Web DesignA Web Design Lecture by Steven Choy Overview: Sliding Panel - Tabs - Scroll to Anchor - Accordion - Tooltips - Content Popup - Image popup - Image zoom - Image gallery/slideshow - Carousel - Form Styling - Form Validation - Password strength - Charts and Graphs - Maps - CSS Stylesheet Switcher - Calendars and Datepicker
Introduction
Three ways to include JavaScript to web pages
<script src="/js/myjscript.js" type="text/javascript">
</script>
<script type="text/javascript">
// JavaScript code goes here
</script
<input type="button" value="push me" onclick="alert('code for monkeys');">
General steps to apply JavaScript
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="query.bt.min.js" type="text/javascript"></script>
<script>
$('#example').bt();
</script>
Deom and examples: http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html Content Display
Demo - Vertical Sliding Info Panel With jQuery - This is an example of simple page that's centered and has a vertical sliding panel on the far left.
Meerkat - It will slide or fade in from the top or bottom of the browser window and remain in its fixed position while the rest of the page will scroll normally.
Tabs are getting more and more popular in Web design. And many sites will recommend using JavaScript to create the tabbed navigation automatically. But it's possible to create a tabbed navigation using just HTML codes and CSS.
Tutorial: Simple Tabs w/ CSS & jQuery
jQuery idTabs - idTabs is a plugin for jQuery. It makes adding tabs into a website super simple.
jQuery ScrollTo - It lets you create scrolling animation to any position of a web page with customizable erasing and speed options. Demo
Animated Scrolling with jQuery - shows you how to create an animated "scroll to anchor" with just a few lines of code.
The Accordion is a web control that allows you to provide multiple panes and display them one at a time. ( Demo)
Examples:
jQuery Accordion - It creates an accordion menu. It works with nested lists, definition lists, or just nested divs. (Demo)
A tooltip is a small pop-up window that appears when a user pauses the mouse pointer over an element.
The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small "hover box" with information about the item being hovered over. (from Wikipedia)
Examples:
jQuery BeautyTips - BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called "talk bubbles" or "help balloons") associated with a html element on the page.
JTips - It displays tooltip popup with either static html text or Ajax content.
TinyTips - TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page.
Lightbox - jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page.
Thickbox - It allows you to display: single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
FancyBox - FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. It was built using the jQuery library.
Jquery Plugin MopBox - MopBox is draggable show box that can contain div, image , flashmovie, video, etc. If it has more than one child, the slider navigation is shown automatically and can be resizaable for one page of content.
AnythingSlider - Slides are HTML Content (can be anything); Next Slide / Previous Slide Arrows; Navigation tabs are built and added dynamically (any number of slides).
Nivo Slider - The World's Most Popular jQuery Image Slider
Image Display
jQuery lightBox plugin - It is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page.
Thickbox - It allows you to display: single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
jQZoom - It allows you to show a magnified image of the thumbnail.
jQuery Galleria - Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.
Gallery View - GalleryView jQuery Plugin is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. It comes with lots of many options for customization.
MopSlider - MopSlider is the slider box that can contain any item.
Galleriffic - Galleriffic offers fantastic performance in delivering a high volume of photos. This is a useful jQuery plugin that will render fast photo galleries, while both impressing and improving your user’s experience.
A carousel (from French carrousel, from Italian carosello), or merry-go-round, is an amusement ride consisting of a rotating circular platform with seats for riders.
jCarousel - jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).
jQuery Infinite Carousel - It is a scrolling carousel that works in the same way the carousel worked on the Apple Mac ads page. This tutorial will walk you through the fundamentals of the effect and how to recreate it.
JQuery Cycle Plugin - It is a lightweight slideshow plugin.
jQuery Slider - The jQuery plugin for sliding images and content.
Form Styling and Validation
Uniform – Sexy forms with jQuery - It masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
PrettyCheckboxes - jQuery - It replaces the browser default checkboxes and radio buttons with custom styles.
jQuery Selectbox Plugin - It allows you to replace the form select list with custom styles.
jQuery Form Input Example Plugin - It gives user hints on what to enter in the input fields.
jQuery Validate - It allows you to build client-side validation and Ajax form.
jQuery Password Strength Meter - It is a jQuery plug-in that provides a smart algorithm to detect a password strength.
Information visualization
Highcharts - Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
JS Charts - JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts or simple line graphs. Moreover, JS Charts is free for non-commercial use.
jQuery Sparkline - It generates small inline charts (called sparklines) directly in the browser using data supplied either inline in the HTML, or via javascript.
jQuery Visualize Plugin - It provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.
jqPlot - It produces beautiful line, bar and pie charts with many features.
Flot - It is a pure Javascript plotting library for jQuery.
gMap – Google Maps Plugin - It helps you embed Google Maps into your website.
Google Maps jQuery Plugin - It allows you to embed Google Maps on your web site with ease and there are also certains portions of the Map that can be controlled via CSS.
Misc
Demo: A Demo
Live example: A Simple jQuery Stylesheet Switcher
Example: jQuery.spritely - it is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It's a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.
Demo: jQuery date picker plug-in - A flexible unobtrusive calendar component for jQuery.
jQuery UI Datepicker - The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.
References and Resources
Thanks for ReadingIf you would rather like to have this lecture note in printed format, please click the print action link in the top right corner. If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk. |