Tutorial Adding/Removing Class on Hover

by in , 0 

$('#elm').hover(
       function(){ $(this).addClass('hover') },
       function(){ $(this).removeClass('hover') }
)

This will work in any browser on any element, to support styling changes on hover.

Tutorial Add Non-Breaking Space on Title to Prevent Widows

by in , 0 

$("h2").each(function() {
         var wordArray = $(this).text().split(" ");
         var finalTitle = "";
         for (i=0;i<=wordArray.length-1;i++) {
            finalTitle += wordArray[i];
            if (i == (wordArray.length-2)) {
                finalTitle += "&nbsp;";
            } else { 
                finalTitle += " ";
            }
          }
          $(this).html(finalTitle);
});

Turns this:
New Screencast: First Ten Minutes with TypeKit

Into this:
New Screencast: First Ten Minutes with&nbsp;TypeKit

Tutorial Add Active Navigation Class Based on URL

by in , 0

Ideally you output this class from the server side, but if you can't...

Let's say you have navigation like this:

<nav>
	<ul>
		<li><a href="/">Home</a></li>
		<li><a href="/about/">About</a></li>
		<li><a href="/clients/">Clients</a></li>
		<li><a href="/contact/">Contact Us</a></li>
	</ul>
</nav>

And you are at the URL:

http://yoursite.com/about/team/

And you want the About link to get a class of "active" so you can visually indicate it's the active navigation.

$(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

Essentially that will match links in the nav who's href attribute begins with "/about" (or whatever the secondary directory happens to be).

Tutorial Add :nth-of-type to jQuery

by in , 0 

$.expr[':']['nth-of-type'] = function(elem, i, match) {
    var parts = match[3].split("+");
    return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};

See the original article for more info on adding the other "of type" selectors.

Tutorial Word Count Bookmarklet

by in , 0

Add to bookmarks bar, select text, click it to get the word count.

<a href="javascript:(function(){var%20t;if%20(window.getSelection)%20t%20=%20window.getSelection();else%20if%20(document.selection)%20t%20=%20document.selection.createRange();if%20(t.text%20!=%20undefined)%20t%20=%20t.text;if(!t%20||%20t%20==%20""){%20a%20=%20document.getElementsByTagName("textarea");%20for(i=0;%20i<a.length;%20i++)%20{%20%20if(a[i].selectionStart%20!=%20undefined%20&&%20a[i].selectionStart%20!=%20a[i].selectionEnd)%20%20{%20%20%20%20t%20=%20a[i].value.substring(a[i].selectionStart,%20a[i].selectionEnd);%20%20%20%20break;%20%20}%20}}if(!t%20||%20t%20==%20"")alert("please%20select%20some%20text");else%20alert("word%20count:%20"%20+%20t.toString().match(/(\S+)/g).length);})()" class="button">Count Words</a>

Bookmarklet

Count Words < Drag to Bookmarks Bar

Reference URL

Tutorial Viewport Size, Screen Resolution, Mouse Postition

by in , 0

This code is cross-browser compatible and checks the dimensions of the viewport, the screen resolution and the mouseposition which can be quite helpful to perform some checks with JavaScript.

<script type="text/javascript">
function getViewportWidth()
{
       if (window.innerWidth)
       {
               return window.innerWidth;
       }
       else if (document.body && document.body.offsetWidth)
       {
               return document.body.offsetWidth;
       }
       else
       {
               return 0;
       }
}

function getViewportHeight()
{
       if (window.innerHeight)
       {
               return window.innerHeight;
       }
       else if (document.body && document.body.offsetHeight)
       {
               return document.body.offsetHeight;
       }
       else
       {
               return 0;
       }
}

var tellMeTheSizes=function()
{
       document.getElementById("viewportwidth").innerHTML = getViewportWidth() + "px";
       document.getElementById("viewportheight").innerHTML = getViewportHeight() + "px";
       document.getElementById("resolutionheight").innerHTML = screen.height + "px";
       document.getElementById("resolutionwidth").innerHTML = screen.width + "px";
}

window.onload=function()
{
       tellMeTheSizes();
}

window.onresize=function()
{
       tellMeTheSizes();
}

window.onmousemove=function(event)
{
       ev = event || window.event;
       document.getElementById("mousetop").innerHTML = ev.pageY + "px";
       document.getElementById("mouseleft").innerHTML = ev.pageX + "px";
}
</script>

Tutorial Validate HTML Bookmarklet

by in , 0 

javascript:(function(){%20function%20fixFileUrl(u)%20{%20var%20windows,u;%20windows%20=%20(navigator.platform.indexOf("Win")%20!=%20-1);%20%20/*%20chop%20off%20file:///,%20unescape%20each%20%hh,%20convert%20/%20to%20\%20and%20|%20to%20:%20*/%20%20u%20=%20u.substr(windows%20?%208%20:%207);%20u%20=%20unescape(u);%20if(windows)%20{%20u%20=%20u.replace(/\//g,"\");%20u%20=%20u.replace(/\|/g,":");%20}%20return%20u;%20}%20/*%20bookmarklet%20body%20*/%20var%20loc,fileloc;%20loc%20=%20document.location.href;%20if%20(loc.length%20>%209%20&&%20loc.substr(0,8)=="file:///")%20{%20fileloc%20=%20fixFileUrl(loc);%20if%20(prompt("Copy%20filename%20to%20clipboard,%20press%20enter,%20paste%20into%20validator%20form",%20fileloc)%20!=%20null)%20{%20document.location.href%20=%20"http://validator.w3.org/file-upload.html"%20}%20}%20else%20document.location.href%20=%20"http://validator.w3.org/check?uri="%20+%20escape(document.location.href);%20void(0);%20})();

Make a bookmark with the above code, or just drag the following button link to your bookmarklets bar.

validate html