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

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');
	});
    });
}

php redirect

php-mobile-detect

Mobile_Detect is a simple PHP class for easy detection of the most popular mobile platforms: Android, iPhone, Blackberry, Opera Mini, Palm, Windows Mobile, as well as generic ones.

if ($detect->isMobile()) {
// any mobile platform
}

php-mobile-redirect

Sets a cookie to allow the user to go back to the full site during a session:

This goes on the mobile page:
setcookie(“mobile”,”m”, time()+3600, “/”);

all languages redirect

The following site has open source code in many different languages:

detectmobilebrowsers.com

simple javascript redirect

if (screen.width <= 699) {
document.location = "mobile.html";
}

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   location.replace("http://url-to-send-them/iphone.html");
}

javascript redirect

The following sites offer javascript code that enables you to redirect users to addresses in a mobile site that are quivalent to the address in the full screen site the user lands on. I.e. “whatever.com/page1″ can be redirected to “mobile.whatever.com/page1″.

Javascript has the dissadvantage of not working if a user doesn’t have javascript, but sometimes, a server-side solution can become difficult to implement especially if we have a CDN or reverse proxy (sitting in front of our Web Server) caching our pages.

JS-Redirection-Mobile-Site
miohtama/detectmobile

htaccess redirect

RewriteEngine On

# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)noredirect=true(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:%{HTTP_HOST},S]

# Check if this looks like a mobile device
# (You could add another [OR] to the second one and add in what you
#  had to check, but I believe most mobile devices should send at
#  least one of these headers)
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile}       !^$
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie}        !\smredir=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.example.org%{REQUEST_URI} [R,L]

(Source: http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess)

Here”s a link to the pre-sliced Photoshop image: mac_browser_sml.psd

Add some extra padding to the bottom and a reflection to the bottom of the browser frame to get that web 2.0 look.

Here”s the CSS

#browserWrap {
float: left;
margin: 0 12px 12px 0;
}

#browserWrap .browsershot {
width: 306px;
background: url(images/mac_browser_bot.gif) no-repeat bottom left;
margin: 0;
padding: 0 0 6px 0;
float: left;
position: relative;
}

#browserWrap .browsershot a {
width: 305px;
background: transparent url(images/mac_browser_top.gif) no-repeat top left;
margin: 0;
padding: 20px 0 0 1px;
float: left;
display: block;

}
#browserWrap .browsershotscroll {
width: 306px;
background: transparent url(images/mac_browser_scroll.gif) repeat-y right;
margin: 0;
padding: 0 0 0 10;
float: left;
z-index: 2;
}
#browserWrap .browsershotscrolltop {
background: transparent url(images/mac_browser_scrolltop.gif) no-repeat top right;
margin: 0;
width: 100%;
z-index: 3;
}
#browserWrap .browsershotscrollbot {
width: 6px;
height: 15px;
background: transparent url(images/mac_browser_scrollbot.gif) no-repeat bottom right;
margin: 0;
position: absolute;
bottom: 6px;
right: 0;
z-index: 3;
}
#browserWrap img {
border: 0;
}

The mark-up

<div id="browserWrap">
<div class="browsershot">
<div class="browsershotscroll"><div class="browsershotscrolltop">
<a href="/log/"><img src="/images/blog/website_thumbnail.jpg" width="300" height="263" alt="Eklog" /></a>
<div class="browsershotscrollbot"></div></div></div></div> <!– /.browsershot –>
</div> <!– /#browserWrap –>’, ‘Browser shots

See it in action at: Loading images with XML & jQuery

$(document).ready(function() {
    $.get(''myData.xml'', function(d) {
        $(''#list'').append(''<dl id="list1dl" />'');

        $(d).find(''book'').each(function() {
            var $book = $(this);
            var title = $book.attr("title");
            var linkurl = $book.attr(''linkurl'');
            var imageurl = $book.attr(''imageurl'');

            var html = ''<dt><img class="bookImage" alt="whatever" src="'' + imageurl + ''" /> <span class="link"><a href="http://www.site.com/directory/'' + linkurl + ''">'' + title + ''</a></span></dt>'' ;

            // html += ''<dd>'';
            // html += ''<dt class="title">'' + title + ''</dt>'';
            // html += ''<span class="link"><a href="http://www.site.com/directory/'' + linkurl + ''">'' + title + ''</a></span>'';
            // html += ''</dd>'';

            $(''#list1dl'').append($(html));

        });
});

    $.get(''myData2.xml'', function(d) {
        $(''#list2'').append(''<dl id="list2dl" />'');

        $(d).find(''book'').each(function() {
            var $book = $(this);
            var title = $book.attr("title");
            var linkurl = $book.attr(''linkurl'');
            var imageurl = $book.attr(''imageurl'');

            var html = ''<dt><img class="bookImage" alt="whatever" src="'' + imageurl + ''" /> <span class="link"><a href="http://www.site.com/directory/'' + linkurl + ''">'' + title + ''</a></span></dt>'' ;

            $(''#list2dl'').append($(html));

        });
    });
});

<?xml version="1.0" encoding="utf-8" ?>
<books>
    <book title="title1" imageurl="http://www.site.com/image1.jpg" linkurl="link1.html"></book>
    <book title="title2" imageurl="http://www.site.com/image2.jpg" linkurl="link2.html"></book>
    <book title="title3" imageurl="http://www.site.com/image3.jpg" linkurl="link3.html"></book>
    <book title="title4" imageurl="http://www.site.com/image4.jpg" linkurl="link4.html"></book>
</books>

These will stretch to fit any amount of text – even if it gets so large it becomes a banner.
They use just one image – and have a ”web 2.0” sheen.
They have an icon (which can be positioned to the left or right)
They have a hover state – the text and the background colour can change.

Shrink-wrapped buttons
Shrink-wrapped buttons

Shrink-wrapped buttons
..and a final one!

Here’s the code:

a.btn,
a.btn:visited {
    float:left;
    background-color: #80c64c;
    background-image: url(/images/blog/btn.png);
    color:#fff;
    text-decoration:none;
    font-size:0.95em;
    clear:both;
    margin:0 0 12px 6px;
    line-height: 1.1;
    letter-spacing: 0;
}
a:hover.btn {
    color:#ff0;
}
a.btn * {
    display:block;
    font-weight:normal;
}
a.btn b {
    margin-left:6px;
    padding:2px 0 0 0;
    background: transparent url(/images/blog/btn.png) right top;
}
    a.btn b b {
    margin:0 0 0 -6px;
    padding:0 0 0 12px;
    background-position: left bottom;
}
a.btn b b b {
    padding:6px 12px 12px 0px;
    margin: 0;
    background-position: right bottom;
    text-indent: -3px;
}

a.btn_grn,
a.btn_grn:visited {
    background-color: #80c64c;
}
a.btn_grn b b b b {
    padding: 0 28px 0 0;
    background-image: url(/images/blog/arrows.png);
    background-position: right center;
    background-repeat: no-repeat;
}

<a class="btn" href="#">
    <b><b><b>Shrink-wrapped buttons</b></b></b>
</a>

<a class="btn_grn btn" href="#">
    <b><b><b><b>Shrink-wrapped buttons<b></b></b></b>
</a>

<a class="btn_grn2 btn" href="#">
   <b><b><b><b>Shrink-wrapped buttons</b></b></b></b>
</a>

<a class="btn_brwn btn" href="#">
    <b><b><b>..and a final one!</b></b></b>
</a>

This is an adaption to the work done by:
schillmania.com – More Rounded Corners with CSS
456bereastreet.com – Bulletproof shrinkwrapping buttons

• Progressive CSS
• Progressive JavaScripting
• Unobtrustive JavaScript
• Understand browsers and users
• Event Delegation
• Relationships
• Maintenance
• JQuery
• JQuery & XML

Here’s a download link: Behavioral separation and jQuery

Contents:

• Design tips
• Photoshop/Image software tips
• Coding tips
• coding examples
• Structure
• Styling for a variety of email clients
• Rendering bug fixing
• Email delivery software
• Testing
• Examples of newsletters: Evans, Miss Selfridge, BHS, House of Fraiser, ASOS, M&S

Here’s a download link: HTML Email development

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, test link adipiscing elit. This is strong. Nullam dignissim convallis est. Quisque aliquam. This is emphasized. Donec faucibus. Nunc iaculis suscipit dui. 5³ = 125. Water is H₂O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. This is big Mauris a ante. Suspendisse quam sem, This is small consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type COPY filename. Dinner’s at 5:00. Let’s make that 7. This text has been struck.

List Types

Definition List

Definition List Title

This is a definition list division.

Definition

An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.

Ordered List

1. List Item 1
2. List Item 2
   1. Nested list item A
   2. Nested list item B
3. List Item 3

Unordered List

• List Item 1
• List Item 2
  • Nested list item A
  • Nested list item B
  • The quick brown fox jumps over the lazy dog, is an English-language pangram (a phrase that contains all of the letters of the alphabet).
• List Item 3

Table

Preformatted Text

Typographically, preformatted text is not the same thing as code. Sometimes, a faithful execution of the text requires preformatted text that may not have anything to do with code. Most browsers use Courier and that’s a good default — with one slight adjustment, Courier 10 Pitch over regular Courier for Linux users. For example:

“Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!”

Code

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block. Because we have more specific typographic needs for code, we’ll specify Consolas and Monaco ahead of the browser-defined monospace font.

#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}

Blockquotes

Let’s keep it simple. Italics are good to help set it off from the body text (and italic Georgia is lovely at this size). Be sure to style the citation.

Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you.

- HAL 9000

And here’s a bit of trailing text.

The sample is from: Twenty Ten, thanks!