JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1325 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x0090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Javascript Snippets

Here are some snippets to copy and paste into your Dreamweaver Snippets panel

Block 1 - Some basic variable declarations

var btnHovered, btnHoverTime, btnHoverEasing, btnClicked, btnClickTime, btnClickEasing;

Block 2 - Document ready function

$(document).ready(function() {
      "use strict";


Block 3 Animate function (use with jquery/minified.js)



Block 4 - Transition function (use with transit.js)



Block 5 - CSS function

//set CSS through javascript


Block 6 - Button HOVER function

$(".btn").hover(function(){//actions for when you hover ON a button

}, function(){//actions for when you hover OFF a button


Block 7 - Button CLICK function

$(".btn").click(function(){//actions for when you click on a button
btnClicked = $(this).attr("ID");


Block 8 - Button CLICK & HOVER function working in sync

var btnClicked, btnHovered, currentBtnID, btnHoverTime=500, btnHoverEasing="linear" ;
//This block sets the default button to the hover state
"cursor": "default",//Changes default button NOT have hand pointer

//actions when buttons are hovered
$(".btn").hover(function () { //actions to occur when you hover ON
//what do you want to happen when you hover ON a button
if (btnHovered!=currentBtnID){
$(this).stop().transition({//actions apply to only the button you have hover on bc the word "this"

}, function () { //actions to occur when you hover OFF
if (btnHovered!=currentBtnID){//if the button hovered is the also the button clicked
//what do you want to happen when you hover OFF a button

$(".btn").click(function () {
if (btnHovered!=currentBtnID){//if the button hovered on is NOT the same as the currently clicked button

currentBtnID="#"+$(this).attr("ID");//Stores new value for currently clicked button ID
$(".btn").css({//Resets all buttons to have default hand pointer
"cursor": "pointer"
$(currentBtnID).css({//Changes current button NOT have default hand pointer
"cursor": "default"
btnClicked=$(this).attr("ID");//Stores new value for currently clicked button ID for use in other functions
//actions for clicked button