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)
$("").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
};
});