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

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

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(e) {

});

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


$("").animate({

},1000,"linear");

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


$("").transition({

},1000,"linear");

Block 5 - CSS function


//set CSS through javascript
$("").css({

});

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" ;
currentBtnID="#btn0";//IMPORTANT!!!
//This block sets the default button to the hover state
$(currentBtnID).css({
"cursor": "default",//Changes default button NOT have hand pointer

});
//actions when buttons are hovered
$(".btn").hover(function () { //actions to occur when you hover ON
btnHovered="#"+$(this).attr("ID");//IMPORTANT!!!
//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"

},btnHoverTime,btnHoverEasing);
}
}, 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
$(this).stop().transition({

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

},btnHoverTime,btnHoverEasing);
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
};
});