tomhoppe.com

I know there are already a bunch of tools for doing this same thing, but I’m a big google fanboi. The nice thing about goo.gl is they have an API which makes accessing the shortener easy. Matthew Flashen already wrote some JS for a bookmarklet for this. You just save that into your bookmarks, I saved it to my Delicious bookmarks, and you can call it on whatever URL. It alerts you the shortened URL and just copy and paste from there. Sweet!

So I don’t have to google for this one again, since I won’t remember it. Here is a quick regex to verify that your email address is valid. Should take care of most email addresses.

var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i;

On one of my side projects I wanted to do a hover over fade on and off menu, but wanted to do the menu items with text instead of images. After thinking about how to get the effect, I settled on the below solution. I also wanted a slight delay on the mouse over. That way, if someone just went through the links instead of on them, they wouldn’t get the fade.

HTML looks like this. The only drawback is for accessibility, that they get the link text twice. Not that big of a deal IMHO.

<ul>
    <li><a href="sports.php"><span class="off">Sports</span><span class="on">Sports</span></a></li>
    <li><a href="concerts.php"><span class="off">Concerts</span><span class="on">Concerts</span></a></li>
    <li class="last"><a href="theater.php"><span class="off">Theater</span><span class="on">Theater</span></a></li>
</ul>

Then the JS comes in and does a nice smooth fade on the “off” class. This allows you to get a fade rather then an instant “on” like you get when you just change classes and colors on the a element. I do a jQuery hover.

When it does the “mouseover”, it sets a class on the main list item its hovering on, that way the global scope of setTimeout will allow you to target that particular element to fade its child. The 100 ms delay is enough to get rid of most of the inadvertent hovers. If using this particular piece of code for something else, you can make that delay as long as you want for a delayed hover. Then the “off” state fades out.

The “mouseout” from the hover then clears the timeout and fades the “off” state back in and removes the hovering class as you don’t need it anymore.

$('#header li').hover(
function() { $(this).addClass('hover'); hover_intent = setTimeout( function(){ $('#header .hover').find('.off').fadeOut("fast"); } , 100 ); },
function() { try{clearTimeout(hover_intent);}catch(e){}; $('#header .hover').find('.off').fadeIn("fast"); $(this).removeClass('hover'); });

I got a couple comments and emails about my post on cross sub domain JS and AJAX and using an iframe to make that happen. As I was making an example of it so the post made more sense, I thought about the cross sub domain issues we were having at work, and the “duh” solution to the issue of passing data between sub domains. Use JSON instead of XML. The only time you couldn’t use JSON is if you were trying to get a full HTML page instead.

Its absurdly easy with jQuery and there are no iframes or anything else to mess around with. Just setup your js as a function call with a JSON object inside of it with your data.

myData({ "title":"test"})

Then on your page where you want the data, after adding jQuery just run the following

<script type="text/javascript">
function myData(theData) {
	alert(theData.title);
}
$.getJSON("http://test.tomhoppe.com/test.js?callback=?");
</script>

This will grab the test.js file containing the function callback and execute that function on your page. At that point you can do whatever you please with your data. Only do this with trusted sources of course, as the JS that you pull in gets immediately executed on your own page.

Had to figure out how many times a single characted occured in a string today. Found a nice clean way to do that instead of running a loop. Remove all the instances of that letter or character in the string, and the subtract that from the original length of the string. Viola.

You can also adapt this to multi character strings by dividing the result by the amount of chars in your search string. If you look for “asdf” in “1234asdf1234asdf1234asdf”, you will remove 12 characters. Divide that by 4, and you have found “asdf” three times. Two examples below where the result is 3

str = 1234x1234x1234x;
str.length - str.replace(/x/gi,'').length;

str = 1234asdf1234asdf1234asdf
(str.length - str.replace(/xxxx/gi,'').length)/4

For some dumb reason, I can’t ever remember this shortcut when I need it. Never again

varName == (value) ? (true) : false;

A while back I posted a method to grab all the querystrings out of a URL and parse them into arrays. While that is very useful sometimes, its overkill for other situations, when you have 1 or 2 variables in the querystring and you know their names already. For those times, I like to use a function “getParam”. It takes in the variable name and returns you its value from the querystring.

function getParam(name) {
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var tmpURL = window.location.href;
  var results = regex.exec( tmpURL );
  if( results == null )
    return "";
  else
    return results[1];
}