WD-3 - Class 03 - 2011

Subject WD-3 - Web Design 3
Competencies

CUFDIG505A.1 - Design Information Architecture (part 1)

Course Title ADVANCED DIPLOMA of SCREEN AND MEDIA (CUF60107)
Teacher Lisa Cianci - email: lisa.cianci@vu.edu.au
Class Website: http://lisacianci.vucreativeindustries.com/2011/WD3
                         (username & password = student)

 

More JQuery

Today we will be covering the following topics:

 

* interesting web page you might like to read about advice for web designers starting out
http://www.smashingmagazine.com/2010/02/17/group-interview-advice-for-students-and-new-designers/

 

Overlays

Overlaying HTML on top of the main document is one of the most common features in today's websites. You need different kinds of overlays for different situations such as:

  1. displaying products or portfolio images.
  2. Simple overlays for showing info or warning boxes.
  3. Modal dialogs for prompting and alerting users.
  4. "lightbox" style image galleries.

The overlay can contain any HTML and the whole thing can be styled with CSS. You can include a lot more content in the one HTML page without cluttering it up or needing to reload the whole page. Overlay tools are now a significant part of the JavaScript/Web 2.0 landscape.

There are two terms being used in the overlay exercise we are doing today: the trigger is the element that launches the overlay and the overlay is the element that is being positioned on top of the page.

 

The apple effect with additional exposé style

Overlay is very often used together with the expose tool which dims the background page (with a semi transparent colour background) so you can focus on the content in the overlay. Because of this, the Flowplayer overlay feature has exposé built inside the tool. See expose tool's configuration.

See an example of an overlay together with expose. By default the exposé feature is disabled. Today we will use the overlay and exposé together in the one tool.

Note the elements required to make this page work - the trigger in this case is an image, and it uses a unique name in the 'id' attribute of the <img> element to call the jquery as follows:

<script>
$(document).ready(function() {
//use the image1 'id' attribute to trigger the overlay
$("#image1").overlay({
expose: '#000', //the expose setting - choose a bg colour for the semi-transparent screen
effect: 'apple', //use the apple effect for the overlay
target: '#petrol' // the target <div> element which has the 'id' attribute "petrol"
});
}); </script>

The overlay in this case is whatever content is in the <div> element - so this can be text, image, a flash file, a video or even the embed tag for youtube video - as shown in the exercise.

The CSS which is located in the external file overlay_style.css shows styles for the overlay and the overlay div.close, and then also for custom <div> elements used in the overlay:

/* the overlayed element */
.overlay {

/* initially overlay is hidden */
display:none;

/* place overlay on top of other elements */

z-index:10000;

/* growing background image */

background-image:url(../img/white.png);

width:640px;
min-height:200px;
/* some padding to layout nested elements nicely */
padding:35px;

/* a little styling */
font-size:11px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

}

/* default close button positioned on upper right corner */
.overlay div.close {

background-image:url(../img/close.png);
position:absolute;
right:5px;
top:5px;
cursor:pointer;
height:35px;
width:35px;

}
#custom {

background-image:url(../img/petrol.png);
padding:0px;

}
#custom div.close {

right:-15px;
top:-10px;

}
#petrol {

background-image:url(../img/petrol.png);
color:#fff;

}
#apple {

background-image:url(../img/petrol.png);
color:#fff;

}

 

loading external pages into overlay

Loading external pages into an overlay is a great way to do stuff like data operations without reloading the actual HTML page. it also means you can load the external pages as required rather than loading all of the content in the internal overlays which are held in <div> elements.

Loading external pages requires an even smaller file because you don't need to set out each <div> element with the content, you just call another HTML page (or php page for example).

In this exercise, the styles are for the overlay <div> and for a nested content wrapper <div>that loads the external content. The <img> elements are placed inside <a> elements, and the 'href' attribute provides the link for the external file to load. the trigger is the 'rel' attribute of the <a> element which is called "#overlay".

<style>
/* use a semi-transparent image for the overlay */
#overlay {
background-image:url(img/transparent.png);
color:#efefef;
height:450px;
}
/* container for external content. uses vertical scrollbar, if needed */
.contentWrap {
height:441px;
overflow-y:auto;
}
</style>
<!-- external page is given in the href attribute (as it should be) -->
<a href="external-content.htm" rel="#overlay"> <img src="img/1.jpg" width="170" height="113" alt="image1" id="image1" border="0" /> </a> <!-- another link. uses the same overlay --> <a href="external-content2.htm" rel="#overlay"> <img src="img/2.jpg" width="170" height="113" alt="image2" id="image2" border="0"/> </a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag --> <div class="contentWrap"></div>
</div>
 
<!-- make all links with the 'rel' attribute open overlays -->
<script>
   $(function() {
 	// if the function argument is given to overlay,
 	// it is assumed to be the onBeforeLoad event listener
 	$("a[rel]").overlay({
 		expose: 'darkred',
 		effect: 'apple',
 		onBeforeLoad: function() {
 			// grab wrapper element inside content
 			var wrap = this.getContent().find(".contentWrap");
 			// load the page specified in the trigger
 			wrap.load(this.getTrigger().attr("href"));
 		}
 	});
 });
 </script>

See an example of an overlay that loads external pages.

 

Class Exercise:

Today's challenge - using a set of 6 or more thumbnails, create Overlays with larger images and text details about the images (title, date, creator). You may choose to use a single HTML page for this, or try loading external pages into the Overlay. I recommend using the 'Apple Effect' overlay, but feel free to try any of the other demos that you might like - such as the image gallery, which has a loader effect and allows you to go to previous & next images in the overlay (this is more advanced - don't try it if you aren't sure of your coding skills).

 

extra reading & useful links

 

jQuery Tools

jQuery Tools Overlay Documentation

jQuery Tools Exposé Documentation

jQuery Tools Users Guide

jQuery cheat sheet (your jQuery BFF)

 

use the rest of the class to work on your assessment tasks