The jQuerires:

$(function() {
	$('.pagination').children().wrapAll('<div class="content"/>;');
	$('.next').click(function() {
		moveContent($('.pagination').scrollTop() + $('.pagination').height() - 9);
	});
	$('.previous').click(function() {
		moveContent($('.pagination').scrollTop() - $('.pagination').height() + 9);
	});
	function moveContent(newTop) {
		$('.pagination').scrollTop(newTop);
	}
});

The CSS:

.pagination {
     width: 300px;
     height: 300px;
     overflow: hidden;
     position:relative;
     border: 1px solid #eee;
     padding: 5px;
}
.content {
    position:absolute;
}
.next, .previous {
    color: black;
    background: #D6D6D6;
    padding: 5px;
    cursor: pointer;
}

The HTMLs:

<span class="next">next</span>
<span class="previous">previous</span>

<div class="pagination">
<h1>Whatever</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

See example:

The CSS:

.store-countries {
    padding-left: 20px;
    background-position: 4px 2px;
    background-repeat: no-repeat;
}
.store-countries option {
    padding: 0 0 0 24px;
    background-position: 2px 4px;
    background-repeat: no-repeat;
}
.store-countries option.Belgium {
    background-image: url(../images/icons/flags/be.gif);
}
.store-countries option.France {
    background-image: url(../images/icons/flags/fr.gif);
}
.store-countries option.Germany {
    background-image: url(../images/icons/flags/de.gif);
}

The jQueries:

function dropDownCountries() {
    $('.store-countries').find('option').each(function() {
        var country = $j(this).val();
        $(this).addClass(country);
    });

    var selectedFlag = $('.store-countries').find('option:selected').css('background-image');
    $('.store-countries').css('background-image',selectedFlag)

    $('.store-countries').change( function() {
        var selectedFlag = $('.store-countries').find('option:selected').css('background-image');
        $('.store-countries').css('background-image',selectedFlag)
    });
}

You create regexp to match current url pathname and remove trailing slash if present (as it could collide with the link in navigation in case trailing slash wasn’t present there.)

Then grab every link from the navigation and test its normalized href against the url pathname regexp and add a classname ‘current’ if it matches.

function menuCurrentHighlight(){
    var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
	/* create regexp to match current url pathname and remove trailing slash if present: */
    if( $('ul a').length>0 ) {
	    $('ul a').each(function(){
		// test its normalized href against the url pathname regexp
		if(urlRegExp.test(this.href.replace(/\/$/,''))){
		    $(this).addClass('current');
		}
	    });
	};
};

//Instead of
$(document).ready(function() {
    //document ready
});
//Use
$(function(){
    //document ready
});

//To run the script before the DOM has loaded (& without $ conflict):
(function($){
	...
})(jQuery);

Inject HTMLs:

var myList = $('.myList');
var myListItems = '<ul>';

for (i = 0; i < 1000; i++) {
    myListItems += '<li>This is list item ' + i + '</li>';
}

myListItems += '</ul>';
myList.html(myListItems);

Chaining:

$('#myTable')
    .find('.firstColumn')
        .css('background','red')
    .end()
    .find('.lastColumn')
        .css('background','blue');

Create a function:

$.fn.makeRed = function() {
    return $(this).css('background', 'red');
}

$('#myTable').find('.firstColumn').makeRed().append('hello');

Check for something:

if( $(".active").length != 0 ){
	//Now the code here will only be executed if there is at least one active element
}

Find a Selected Phrase and Manipulate It:

//First define your search string, replacement and context:
var phrase = "your search string";  var replacement = "new string";
var context = $(body);

context.html(
	context.html().replace('/'+phrase+'/gi', replacement);
);

Add Pseudo-Selector Support in IE:

//add hover support:
function hoverOn(){
	var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name
	$(this).addClass(currentClass + '-hover');
}
function hoverOff(){
	var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name
	$(this).removeClass(currentClass + '-hover');
}
$(".nav-item").hover(hoverOn,hoverOff);

//add first-child support:
jQuery.fn.firstChild = function(){
	return this.each(function(){
		var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name
		$(this).children(":first").addClass(currentClass + '-first-child');
	});
}
$(".searchform").firstChild();

Manage Search Box Values:

//set default value:
$("#searchbox")
	.val('search?');
	.focus(function(){this.val('')})
	.blur(function(){
		(this.val() === '')? this.val('search?') : null;
	});

Easily Respond to Event Data: jQuery passes an event parameter into all bound/triggered functions, which is commonly called e:

//We can get X/Y coordinates on click events:
$("a").click(function(e){
	var clickX = e.pageX;
	var clickY = e.pageX;
});

//Or detect which key was pressed:
$("window").keypress(function(e){
	var keyPressed = e.which;
});

Encode HTML Entities:

var text = $("#someElement").text();
var text2 = "Some <code> & such to encode";
//you can define a string or get the text of an element or field

var html = $(text).html();
var html2 = $(text2).html();
//Done - html and html2 now hold the encoded values!

Open External Links in a New Window:

$('a[rel$='external']').click(function(){
	this.target = "_blank";
});

How to tell when images have loaded:

$('#myImage').attr('src', 'image.jpg').load(function() {
    alert('Image Loaded');
});

Creating an HTML Element and keeping a reference

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created,
   I can just reference it from the "newDiv" variable */

var e = $("< a />", { href: "#", class: "a-class another-class", title: "...", css: {
        color: "#FF0000",
        display: "block"
    }});

Nesting Filters:

.filter(":not(:has(.selected))")

Toggle states:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

Preventing an animation from repeating:

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

Preloading images:

jQuery.preloadImages = function()
{
  for(var i = 0; i").attr("src", arguments[i]);
  }
};

// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

Timer callback functions:

window.setTimeout(function() {
 $('#id').empty();
}, 1000);

Adding to the width with every click:

$("#box").one( "click", function () {
    $( this ).css( "width","+=200" );
});

Calculate which element is the highest:

    var t=0;
    var t_elem;
    var elem = $('.whattever');
    $("*",elem).each(function () {
	$this = $(this);
	if ( $this.outerHeight() > t ) {
	    t_elem=this;
	    t=$this.outerHeight();
	}
    });

Using jQuery for browser sniffing:

if ($.browser.mozilla && $.browser.version.indexOf('1.8.') > -1) {
  $('body').addClass('ff2');
}

// add a body class for firefox 3.0 only
if($.browser.mozilla && $.browser.version.substr(0,5)=="1.9.0") {
  $('body').addClass('ff3');
}

Increment or decrease an input quantity with plus & minus ‘buttons’:

function changeProductQuantity() {
        $('#form1').find(".plus").click(function(e)
	{
	    e.preventDefault();
            var currentVal = parseInt($('#form1').find('#qty').val());
            if (currentVal != NaN)
            {
                $('#form1').find('#qty').val(currentVal + 1);
            }
        });

        $('#product_addtocart_form').find('.minus').click(function(e)
	{
	    e.preventDefault();
            var currentVal = parseInt($('#form').find('#qty').val());
            if (currentVal != NaN && currentVal > 0)
            {
                $('#form1').find('#qty').val(currentVal - 1);
            }
        });
};

Basic JSON:

var json = [
    { "red": "#f00" },
    { "green": "#0f0" },
    { "blue": "#00f" }
];

$.each(json, function() {
  $.each(this, function(name, value) {
    /// do stuff
    console.log(name + '=' + value);
  });
});
//outputs: red=#f00 green=#0f0 blue=#00f

Example of using an argument:

function showHeight(ele, h) {
      $("div").text("The height for the " + ele +
                    " is " + h + "px.");
    }
    $("#getp").click(function () {
      showHeight("paragraph", $("p").height());
    });
    $("#getd").click(function () {
      showHeight("document", $(document).height());
    });
    $("#getw").click(function () {
      showHeight("window", $(window).height());
});

To activate:

$(document).ready(function(){
	expandableInfo('hiddenInfo', 'activation-button');
});

*where #hiddenInfo is the ID of the div to be revealed and #activation-button is the ID of the link to reveal the extra content.

var currentPos = null;

function expandableInfo(moreId, moreButton){
    var moreDivID = $('#'+moreId); //Id of expandable content div
    var moreButtonId = $('#'+moreButton); //Id of button for this content div
    var moreTextLink = $(moreButtonId).text(); //Link Text
    var moreHeight = moreDivID.height(); // Get the height of expandable content div

	//Set the expandable content height to 0 / Hidden!
        moreDivID.css({ height : 0 });

	//Scroll down past the header
	function scrollWinDown(){

		currentPos = $('html,body').scrollTop(); //Store Current position before we scroll
		var divPos = $(moreDivID).offset().top; // Position of div from top
		var buttonPos = $(moreButtonId).offset().top; //Position of button from top
		var amountToScroll = buttonPos - 50; // Distance to Scroll

		if ($(window).height() > divPos + moreHeight && currentPos ===0){
			//console.log('no need to scroll you!');
		}else{
			if (currentPos === 0){ //If user hasnt scrolled yet
				$('html,body').animate({scrollTop: moreHeight}, 500); //Move just the height of the div
			}else{
				$('html,body').animate({scrollTop: amountToScroll}, 500); // Move to the top of button
			}
		}
	}

	//Scroll down upto the header
	function scrollWinUp(){
		$('html,body').animate({scrollTop: currentPos}, 500); //Take user back to where they were
	}

	//More open and close functionality
	$(moreButtonId).click(
            function(){
                    if(moreDivID.hasClass('open')) // If the content is already on display
                    {
                            moreDivID.stop().animate({ height: 0 });  //hide it
                            moreDivID.removeClass('open'); // and remove the class
                            $(this).text(moreTextLink); // and change the text back
                            scrollWinUp();
			    return false;
                    }else{ // Otherwise
                            moreDivID.stop().animate({ height: moreHeight }); //Show the div
                            moreDivID.addClass('open'); //add the class
                            $(this).text('Close'); // change the text
			    scrollWinDown();
                            return false;
                    }
            }

    );

}

This code was devised by Hannah. Amazing.

[/javascript]
function toggleText(id) {
	$('#toggleText').hide();
	$('#displayText').click(function() {
		$('#toggleText').slideToggle();
		var text = $j(this).text() == 'View the content' ? 'Hide the content' : 'View the content';
		$(this).text(text);
	});
}
1

<p id="toggleText">Lorem ipsum, flotsum jetsum, and then some blah blah blah</p>

<span id="displayText">Hide info</span>

It is helpful to set the cursor to pointer, underline the span and add a hove effect with CSS to aid usability. An alternative method, to stop the initial flash of content, would be to use a link instead of a span (with return false or e.preventDefault in the javascript) and set the #displayText to display: none with CSS. The link would take the user to the content in a separate page.

1. Wrap the checkbox in a label:

<label>Save for later <input type="checkbox" value="1" name="list" class="checkbox" /></label>

2: Hide the checkbox and style the label:

.save-for-later {
	cursor: pointer;
}
.save-for-later input {
	display: none;
}
.checked {
	text-shadow: 1px -1px 1px rgba(68,68,68,0.4);
	position: relative;
	top: 1px;
	left: 1px;
}

3. Check the box when the label is clicked:

jQuery(function() {
    labelCheck();
});

function labelCheck() {
    $("#container .save-for-later").each( function(){
	$(this).find('input:checkbox').change(function() {
	    $(this).parent().toggleClass('checked');
	});
    });
}

$("h2 + p").addClass("Large");

Count list:

var myList = $('.myList');

for (i = 0; i < 1000; i++) {
    myList.append('This is list item ' + i);
}

Using the .hover() method:

$("p").hover(function () {
    $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
    var cssObj = {
      'background-color' : '#ddd',
      'font-weight' : '',
      'color' : 'blue'
    }
    $(this).css(cssObj);
});

Change dimensions of an element:

$("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      },
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }

    });
});

$(this) refers to all jQuery objects while this refers to the calling object in javascript. For example, we want to use .each and fadeIn() of jQuery after a selector such as below,

$('div#product').each(function(){
	$(this).fadeIn()
})

since fadeIn() is a jQuery effect function, we use $(this) but if we are not dealing with jQuery objects we use this instead.

$('.product').each(function(){
	var myClass = this.className; // provided you have multiple class product
})

Click on each word in paragraph:

var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");
$("span").click(function () {
    $(this).css("background-color","yellow");
});

Remove a word in a text:

var el = $('#id');
el.html(el.html().replace(/word/ig, ""));

Replace a div:

$('#thatdiv').replaceWith('<p>Your new content goes here</p>');

Append text:

$('#lal').append("<b>lol</b>");

Combine more than one effects in jQuery to animate and remove:

$("#myButton").click(function() {
         $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
             $(this).slideUp("slow", function() { //slide up
                 $(this).remove(); //then remove from the DOM
             });
         });
});

Test if something is hidden using jQuery:

if($(element).is(":visible") == "true") {
       //The element is Visible
}

Center an element on the Screen:

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

//Use the above function as:
$(element).center();

Smooth Scrolling:

$('a[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) {
           $target.ScrollTo(400);
           return false;
       }
    };
 });

Equal Height Columns:

jQuery.fn.equalHeight = function () {
	var tallest = 0;
	this.each(function() {
		tallest = ($(this).height() > tallest)? $(this).height() : tallest;
	});
	return this.height(tallest);
}

//Now you can call equalHeight
$(".content-column").equalHeight();

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

//Usage:
$(document).ready(function() {
    equalHeight($(".recent-article"));
    equalHeight($(".footer-col"));
});

Extending jQuery with a custom selector:

//extend the jQuery functionality
$.extend($.expr[':'], {  

    //name of your special selector
    moreThanAThousand : function (a){
        //Matching element
        return parseInt($(a).html()) > 1000;
    }
});  

$(document).ready(function() {
    $('td:moreThanAThousand').css('background-color', '#ff0000');
});

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

Access iFrame Elements:

var iFrameDOM = $("iframe#someID").contents();
//Now you can use find() to access any element in the iframe:

iFrameDOM.find(".message").slideUp();
//Slides up all elements classed 'message' in the iframe

Fade in page:

var $container = $("body");
$container.hide().fadeIn(400);

$("a").live('click', function(e) {
	e.preventDefault();
	$container.fadeOut(400, function() {
		document.location = this.href;
	});
});

function getPostImages() {
	global $post;
	$attachments = get_children(
				    array(
				    'post_parent' => $post->ID,
				    'post_status' => 'inherit',
				    'post_type' => 'attachment',
				    'post_mime_type' => 'image',
				    'exclude' => array(get_post_thumbnail_id()),
				    'order' => 'ASC',
				    'orderby' => 'menu_order ID') );
	if( empty($attachments) ) {
	return false;
	}
	return $attachments;
}

Add the following in the template:

<?php
    $postImages = getPostImages();
    if($postImages !=0) :
        $images = array_values(getPostImages());
        $num_images = count($images);

        for ($i = 0; $i < $num_images; $i++): $image = $images[$i];
            while (have_posts()) :
                the_post();
?>
                <img src="<?php echo $images[$i]->guid ?>" alt="<?php echo $images[$i]->post_title ?>" />
<?php
            endwhile;
        endfor; 

    endif;
?>

Here’s how I’m using it with a carousel:

<?php
    $postImages = getPostImages(); //gets all images related to this post
    if($postImages !=0) :

        $images = array_values(getPostImages());
        $num_images = count($images);

        if($num_images ==1): ?>
            <div id="single_image">
                <img src="<?php echo $images[0]->guid ?>" alt="<?php echo $images[0]->post_title ?>" />
            </div>
<?php
        elseif($num_images > 1) :
?>
            <div class="scrollable" id="single-scrollable">
                <a class="prev browse left"></a>
                <div class="items">
                    <?php for ($i = 0; $i < $num_images; $i++): $image = $images[$i]; ?>
                        <?php while (have_posts()) : ?>
                            <?php the_post(); ?>
                            <div class="item"><img src="<?php echo $images[$i]->guid ?>" alt="<?php echo $images[$i]->post_title ?>" /></div>
                        <?php endwhile; ?>
                    <?php endfor; ?>
                </div> <!-- /.items -->

                <div class="navi"></div>
                <a class="next browse right"></a>
            </div> <!-- END .scrollable #single-scrollable -->

<?php
         endif; // <<< CAROUSEL
    endif; // HAS ANY IMAGES
?>

Here’s a more straight-forward method – Just add this inside the template:

<?php
$attachments = get_posts(array
	(
	'post_type' => 'attachment',
	'numberposts' => -1,
	'post_status' => 'published',
	'exclude' => array(get_post_thumbnail_id()),
	'post_parent' => $post->ID,
	)
);
	if ($attachments) {
		foreach ( $attachments as $attachment ) {?>
			<div class="classname">
				<?php echo wp_get_attachment_image($attachment->ID, 'fullsize'); ?>
			</div>
		<?php }
	}
?>

2. http://www.modernizr.com/ – adds feature capability as classes to the HTML tag.

3. http://selectivizr.com/ – adds pseudo classes for IE6 & 7

4. Webkit doesn’t do inset shadows with round corners, but adding normal drop shadow in a minus direction may give a good equivalent. (corrected in latest version)

5. For IE it’s difficult to add round corners and drop shadows.

There’s a good tutorial from http://www.w3.org/Style/Examples/007/roundshadow.en.html to add drop shadows without extra markup. Good only for IE8.

In conjunction with http://selectivizr.com/ this can allow us to even add round corners in IE6 & 7. (also good for zebra table styling, IE6 hover, targeting a variety of different inputs)

or use jQuery:

$('blockquote:after').addClass(&quot;boom&quot;); <br />
$('blockquote').after(' &lt;img src=&quot;/images/external.png&quot; alt=&quot;external link&quot;/&gt;'); <br />
$(&quot;img.dropshadow&quot;).wrap(&quot;&lt;div class='wrap1'&gt;&lt;div class='wrap2'&gt;&quot; + &quot;&lt;div class='wrap3'&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&quot;);

Or use curvy corners: http://blue-anvil.com/jquerycurvycorners/test.html

6. Gradient filters
- e.g.
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#c31026′, EndColorStr=’#5f0004′);

for IE – only work on IE6 & 7 if a height is set. (If you cannot use a height then set a background image – you will need background images for gradients in older versions of Firefox and Safari.)

7. Combining background images and gradients:

Opera cannot combine background images and gradients, but purports to support css-gradiesnts. Therefore the background image needs to be positioned using a separate element e.g. a span inside a button, – if for example you want just the gradient to reverse on hover, or you need to serve different css to opera browsers. This is the same for IE (including IE9)

8. Test in:

Firefox 3.6.13
Firefox 3.0 (No support for CSS3 round corners & gradients)
Firefox 2.0 (No support for CSS3 round corners & gradients)

IE 8 – (No support for CSS3 round corners)
IE 7 – (No support for CSS3 round corners & gradients)
IE 6 – (Fully functional, No support for PNG opacity, CSS3)

Safari 5 (5.0.2)
Safari 4 (4.0.5)
Safari 3 (3.2.3)

Chrome 8

Opera 11
Opera 10 (10.6.3) (No support for CSS3 round corners & gradients)