Jqeury,Flash,CSS.XHTML,PHP tutorials and guides
An example tutorial is shown below.The sub section links make it easy to jump to the code or description you are looking for.As this site is aimed at beginners and the less experienced there is a lot of detail in the descriptions and the code is well commented.Look our for tool tips for more information.This site is also integrated with Facebook so you can send tutorials to you friends!
Latest template on a Space theme!
This template uses the "nifty corners" plugin for the curvy boxes and CSS styling.The menu uses CSS "sprites" for a fast response with no image loading problems.There are three styles of boxes with independant corner radius and colouring posibilities.Items can easily be added to the menu and it has a light up effect on hover.
Comming soon,How to build this flash based menu using Actionscript and masks..
How to build this rotating globe preloader by importing an animated gif and using actionscript to drive the loading bar.
NEW! how to create this multicolour tab menu in Fireworks.Demo
Take a look at this page in the firefox and Safari browsers the jQuery code box and the sidebar boxes will display with a gradient background and rounded corners using CSS3.The Modernizr Javascript library is used to detect the browser being used .The gradient displayed is different in safari and Firefox! I.E.9 will support CSS3.
 |
Download Firefox |  |
Download safari |
Here is an example post,this is a Jquery display module using the show and hide toggle function.
This is a useful module for Hotel and Tourism sites,The code can be downloaded below,a fully functional Google map is embeded,the code for this is available via the Google maps site,look fot the "link" link at the top right.
Jquery code
XHTML code
CSS code
Hide method
Ambleside,Cumbria
So where is AMBLESIDE . .? . . only six hours drive or five hours rail from London, less than two from Manchester or Liverpool, one hour from the Scottish 
border, three from Edinburgh . . . . avoid the rest of England (too tiring) and speed instead to unique, relaxing Ambleside, where you will find fine food, wine and ale to complement the glorious lakeside mountain setting of this historic . . er . . sorry, prehistoric community
The code below shows the method used to show and hide the text and map.
$('#slickbox').hide(); The above two lines hide the "more text" and map boxes after the Document loads.
$('#slickbox1').hide();
The next two lines addd a click listener to the link with an ID of #box.When clicked the div with an ID of #slickbox is shown in 400ms,clicking the link again will toggle the box.
$('#box').click(function() {
The following lines change the text of the link.
$('#slickbox').toggle(400);
var $link = $(this);
// changes the link text using if-else loop.
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
Jquery code
$(document).ready(function() {
//hides boxes on page load.
$('#slickbox').hide();
$('#slickbox1').hide();
// Toggles text box on click,shows in 400ms.
$('#box').click(function() {
$('#slickbox').toggle(400);
//Places the click events source in to a variable,(this) refers to the item clicked on.
var $link = $(this);
// changes the link text using if-else loop.
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
// prevents the links default action.
return false;
});
// Toggles map box on click,shows in 400ms.
$('#box1').click(function() {
$('#slickbox1').toggle(400);
var $link = $(this);
// changes the link text using if-else loop.
if ( $link.text() == "Show map" ) {
$link.text('Hide map');
} else {
$link.text('Show map');
}
return false;
});
});
XHTML code
<div id="module1">
<h3 ID="text1">Ambleside,Cumbria</h3>
<p><strong>so where is AMBLESIDE . .?</strong> . . only six hours drive or five hours rail from London, less than two from Manchester or Liverpool, one hour from the Scottish <img src="images/bridge_house.jpg" alt="Bridge House" width="203" height="248" class="floatleft" />border, three from Edinburgh . . . . avoid the rest of England (too tiring) and speed instead to unique, relaxing Ambleside, where you will find fine food, wine and ale to complement the glorious lakeside mountain setting of this historic . . er . . sorry, prehistoric community</p>
<p>
<div ID = "slickbox">It was here before the Roman occupation, which lasted 400 years, it survived and prospered under the Viking invasion and it will be here after the tourist invasion, which so far has lasted only 200 years. <em>(Blame Wordsworth for this latter invasion please, not the Tourist Board. As the French revolution cut off the English gentry from their European Grand Tour, their writers and artists began to extol the glory of Lakeland, creating as they did so the necessary myths which are their stock in trade and which survive to this day to persuade the discerning visitor of the rare quality of this landscape.</em>) </div>
<a href="#" ID="box">read more</a>
</p>
<div ID = "slickbox1">
\\map code goes here\\
</div>
<p>
<a href="#" ID="box1">Show map</a>
</p>
</div>
CSS code
#module1 {
width: 400px;
border: 1px solid #000;
padding: 8px;
font-family: Verdana, Geneva, sans-serif;
background-color: #D1D1F8;
}
#module1 h3 {
background-color: #099;
color: #FFF;
padding-left: 3px;
margin-top: -7px;
}
#module1 #slickbox {
border-style: none;
border-color: #333;
font-family: Verdana, Geneva, sans-serif;
}
.floatleft {
float: left;
margin-right: 4px;
margin-top: 4px;
}