Let's say you have a link to show more options which expands a list of options. It's says "more options". It's easy to toggle those options with .toggle() or .slideToggle(), but the text remains the same. To toggle the text too...

$("#more-less-options-button").click(function() {
     var txt = $("#extra-options").is(':visible') ? 'more options' : 'less options';
     $("#more-less-options-button").text(txt);
     $("#extra-options").slideToggle();
});

There is a bunch of other ways, as well.

Email This BlogThis! Share to X Share to Facebook

In this example, a submit button is disabled if none of the checkboxes are checked and enabled if at least one is checked.

<form>
   <!-- bunch of checkboxes like: -->
   <input type="checkbox" ... >
   <input type="checkbox" ... >

   <!-- submit button, defaults to disabled -->
   <input type="submit" value="submit">
</form>

The trick is that you can use .is(":checked") on a jQuery object full of a bunch of elements and it'll return true if any of them are checked and false if none of them are. AND, using .attr() for the disabled attribute with that boolean value will enable/disable that button.

var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");

checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});

Reference URL

Email This BlogThis! Share to X Share to Facebook

Technique #1

$('a').filter(function() {
   return this.hostname && this.hostname !== location.hostname;
}).addClass("external");

Technique #2

$.expr[':'].external = function(obj) {
    return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname);
};
$('a:external').addClass('external');

Technique #3

$('a:not([href^="http://your-website.com"]):not([href^="#"]):not([href^="/"])').addClass('external');

Technique #4

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if (!a.test(this.href)) {
       // This is an external link
   }
});

Email This BlogThis! Share to X Share to Facebook

This idea is from Veer.com and how they handle the dropdowns for things like T-Shirt sizes. Thank you to Dennis Sa.

View Demo

HTML

We'll wrap a regular text input inside an <div>, which also contains an unordered list which will represent the values for the popup menu.

<div class="size">
	<input type="text" name="test" value="choose your size" class="field" readonly="readonly" />
	<ul class="list">
		<li>Male - M</li>
		<li>Female - M</li>
		<li>Male - S</li>
		<li>Female - S</li>
	</ul>
</div>

CSS

The lists will be hidden by default, but still all styled up and ready to go when a click triggers them to be shown.

.size { position:relative }
.size .field {
	width:300px; background:#EC6603; color:#fff; padding:5px; border:none; cursor:pointer;
	font-family:'lucida sans unicode',sans-serif; font-size:1em;
	border:solid 1px #EC6603;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.size .field:hover {
	border:solid 1px #fff;
	-moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list { display:none;
	position:absolute; left:30px; top:-30px; z-index:999;
	width:300px;
	margin:0; padding:10px; list-style:none;
	background:#fff; color:#333;
	-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
	-moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list li {
	padding:10px;
	border-bottom: solid 1px #ccc;
}
.size>ul.list li:hover {
	background:#EC6603; color:#fff;
}
.size>ul.list li:last-child { border:none }

jQuery

We'll throw a quick plugin together, so that this functionality can be called on any div wrapper that contains this same HTML setup.=

(function($){
	$.fn.styleddropdown = function(){
		return this.each(function(){
			var obj = $(this)
			obj.find('.field').click(function() { //onclick event, 'list' fadein
			obj.find('.list').fadeIn(400);
			
			$(document).keyup(function(event) { //keypress event, fadeout on 'escape'
				if(event.keyCode == 27) {
				obj.find('.list').fadeOut(400);
				}
			});
			
			obj.find('.list').hover(function(){ },
				function(){
					$(this).fadeOut(400);
				});
			});
			
			obj.find('.list li').click(function() { //onclick event, change field value with selected 'list' item and fadeout 'list'
			obj.find('.field')
				.val($(this).html())
				.css({
					'background':'#fff',
					'color':'#333'
				});
			obj.find('.list').fadeOut(400);
			});
		});
	};
})(jQuery);

Usage

Then we just call the plugin, when the DOM is ready of course.

$(function(){
	$('.size').styleddropdown();
});

Email This BlogThis! Share to X Share to Facebook

Performs a smooth page scroll to an anchor on the same page.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

View Demo

Reference URL

Email This BlogThis! Share to X Share to Facebook

$("p").live("click", function(){
      $(this).css("color", "red");
});

The reason this is smarter is because there are likely many p elements on the page. If there were, say, 10 of them, traditional click event binding would require 10 handlers. The live function only requires one, reducing memory needed by the browser. Then imagine compounding the issue by 100 (for example, a table with 1000 cells with hover events).

Additionally, using the live function does not require events to be re-bound when additional elements are added to the page (like via AJAX).

Reference URL

Email This BlogThis! Share to X Share to Facebook

$('a', '#nav').hover(function() {
         if(!$(this).parent().hasClass('current')) {
                 $(this).stop().animate({
                         backgroundPosition: '(0 -75px)'
                 });
         }
 }, function() {
         if(!$(this).parent().hasClass('current')) {
                 $(this).stop().animate({
                         backgroundPosition: '(0 -0)'
                 });
         }
 });

Slides up and down the background image of a link when rolled over. Requires background position plugin.

Email This BlogThis! Share to X Share to Facebook