$("a").hover(function() {
$(this).stop().animate({paddingLeft : "10px"},200);
},function() {
$(this).stop().animate({paddingLeft : "0px"},200);
});Make sure to change the selector to only target the links you want to have nudging, e.g. "#sidebar ul li a"
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
$(document).keydown(function(e) {
kkeys.push( e.keyCode );
if ( kkeys.toString().indexOf( konami ) >= 0 ) {
$(document).unbind('keydown',arguments.callee);
// do something awesome
$("body").addClass("konami");
}
});
var $inputs = $(".example-input");
$inputs.keyup(function() {
$inputs.val($(this).val());
});
$("tr:odd").addClass("odd");Then use some CSS:
.odd {
background: #ccc;
}
$.fn.tweetify = function() {
this.each(function() {
$(this).html(
$(this).html()
.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>')
.replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>')
.replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>')
);
});
return $(this);
}$("p").tweetify();<p>@seanhood have you seen this http://icanhascheezburger.com/ #lol</p><p><a href="http://twitter.com/seanhood">@seanhood</a> have you seen this
<a href="http://icanhascheezburger.com/">http://icanhascheezburger.com/</a>
<a href="http://search.twitter.com/search?q=%23lol">#lol</a></p>
In general the CSS Sticky Footer is the best way to go, as it works perfectly smoothly and doesn't require JavaScript. If the markup required simply isn't possible, this jQuery JavaScript might be an option.
Just make sure the #footer is the last visible thing on your page.
<div id="footer">
Sticky Footer
</div>Giving it a set height is the most fool-proof.
#footer { height: 100px; }When the window loads, and when it is scrolled or resized, it is tested whether the pages content is shorter than the window's height. If it is, that means there is white space underneath the content before the end of the window, so the footer should be repositioned to the bottom of the window. If not, the footer can retain it's normal static positioning.
// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
Replace instances of "yourPluginName" with your actual plugin name. The stuff about "radius" is just an example of an option (parameter to pass plugin).
(function($){
$.yourPluginName = function(el, radius, options){
// To avoid scope issues, use 'base' instead of 'this'
// to reference this class from internal events and functions.
var base = this;
// Access to jQuery and DOM versions of element
base.$el = $(el);
base.el = el;
// Add a reverse reference to the DOM object
base.$el.data("yourPluginName", base);
base.init = function(){
if( typeof( radius ) === "undefined" || radius === null ) radius = "20px";
base.radius = radius;
base.options = $.extend({},$.yourPluginName.defaultOptions, options);
// Put your initialization code here
};
// Sample Function, Uncomment to use
// base.functionName = function(paramaters){
//
// };
// Run initializer
base.init();
};
$.yourPluginName.defaultOptions = {
radius: "20px"
};
$.fn.yourPluginName = function(radius, options){
return this.each(function(){
(new $.yourPluginName(this, radius, options));
// HAVE YOUR PLUGIN DO STUFF HERE
// END DOING STUFF
});
};
})(jQuery);$(function() {
$("#round-me").yourPluginName("20px");
});