E-com DevBlog Spider-ball-vacuum

10Sep/100

LinkPost August 2010

Welcome to the latest LinkPost, I'm finally caught up with this post so I am understandably excited.  This month we are featuring some excellent HTML5, CSS3, and of course jQuery plug-ins.  And since it's been a while, I have two new font links (let the peoples of the interwebs rejoice!)

Web Development (HTML JS CSS)

http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/ - more html5 code to get excited about

http://ajaxian.com/archives/when-does-javascript-trigger-reflows-and-rendering - Thomas is a genius, keep it simple and keep it streamlined. excellent short article with great illustrations.

http://www.webdesignerwall.com/tutorials/css3-media-queries/ - I can't remember if I've linked to media queries before, but this is something that is up-and-coming, and is good to start looking at now. (update, yes I have totally linked to this over at CSS-Tricks, great article, check it out in the last LinkPost - or the LinkPost before the last one ;) )

http://speckyboy.com/2010/08/22/50-awesome-new-jquery-plugins/ - Some of these aren't too new, but there should be a few that you will probably use right now

Android

http://speckyboy.com/2010/08/04/a-useful-selection-of-android-developer-tools-and-resources/ - Excellent round up of tutorials, ebooks, etc. for the Android developer in you.

Image / Design

http://www.noupe.com/freebie/80-useful-psd-templates-for-designers.html - Last year there was a fantastic psd pack, and this year looks pretty good too

http://www.noupe.com/tutorial/35-fresh-and-wanted-photoshop-tutorials.html - new photoshop resources for the win!

http://speckyboy.com/2010/08/09/30-fresh-and-free-icon-sets-for-designers-and-developers/ - More icons than you can shake a stick at.  Ok fine, maybe not that many, but plenty none-the-less

http://www.noupe.com/wallpaper/50-tremendous-grunge-wallpapers-for-your-desktop.html - a very nice collection of grungy wallpapers... use for inspiration, or for your desktop :)

http://www.noupe.com/tutorial/photoshop-web-design-layout-tutorials-from-2010.html - Photoshop tutorials for everyone! this time featuring web layouts

Fonts

http://www.fontpark.net/ - Been a while since I've linked fonts, but look! a new resource!

http://www.smashingmagazine.com/2010/08/12/30-new-free-high-quality-fonts-typography/ - 30 more fonts from Smashing Mag

Print This Post Print This Post
10Sep/100

LinkPost July 2010

So close to caught up! I'm really going to start changing the way I do these, well at least I think I'm going to change ;) .

Image / Design

http://speckyboy.com/2010/07/02/25-free-color-tools-apps-and-palette-generators/ - like the link says, a large list of color apps for your designer side.

http://vandelaydesign.com/blog/design/paper-textures/ - Nice round up of paper textures, some have been passed around for a while, but who doesn't need a good paper texture now and then.

http://www.webdesignerdepot.com/2010/07/exploring-photoshop%E2%80%99s-angle-gradient-tool/ - Great little show on the power of the angle gradient tool (which I'll admit, I never used, because I thought it was useless).

http://www.noupe.com/tutorial/brilliant-adobe-photoshop-cs5-tutorials-from-2010.html - Good tutorials for the photoshopers

Web Development (HTML JS CSS)

http://designreviver.com/tutorials/fresh-html5-resources-articles-and-tutorials/ - great listing of html5 tutorials.

http://css-tricks.com/return-false-and-prevent-default/ - Seems this last week that e.preventDefault vs. return false is getting a lot of attention.  Here's a great article on it.

http://www.learningjquery.com/2010/07/great-ways-to-learn-jquery - A great list of where to start to dive into the wonderful world of jQuery (my js lib of choice).

http://speckyboy.com/2010/07/11/40-jquery-and-css3-tutorials-and-techniques/ - Large list of jQuery and css3 tutorials (although not sure why you need css3 if you're using jQuery, but eh, it's a good way to learn css3... I hope).

http://www.ilovecolors.com.ar/using-cookies-jquery/ - jQuery and cookies? sounds like it could be delicious

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ - Great article on detecting mobile devices and changing your display to fit them (just remember the toggle so they can view the whole site if they want).

http://www.admixweb.com/2010/07/14/oop-javascript-creating-an-window-box/ - Excellent tutorial (with demo) of how to build a window object with javascript.

http://www.noupe.com/javascript/50-useful-javascript-and-jquery-techniques-and-plugins.html - More jQuery plug-ins (yes, some have been around for a while...)

http://mediaelementjs.com/ - Another html5 ready video/audio contender.  This one looks pretty sweet, even includes silverlight if flash isn't installed on the system, I'll have to give it a try and then report back on it.

http://www.divisionbyzero.co.uk/2010/07/29/how-to-beat-form-spam-with-just-css/ - Good little article on how to avoid spam using css.

http://www.noupe.com/how-tos/50-useful-articles-and-resources-you-may-have-missed.html - Round up of articles I may have skipped, and others that should be mentioned again.

Print This Post Print This Post
1Jun/100

Check Scroll Bar Position

I few weeks ago I was tasked with making one of those annoying "you must read the entire page before you continue" things (which as you know really just means you only need to scroll to the bottom of the page before continuing). It was something that I thought would be pretty easy to find on the web considering how often I run into it in use. However I was wrong, so here is what I was able to come up with.

?View Code JAVASCRIPT
$("#selector").scroll(function() {
   var elem = $(this);
   var position = elem[0].scrollHeight - elem.scrollTop();
   if(position == $(elem).outerHeight())
      $(":button:contains('submit')").removeAttr("disable");
   else
      $(":button:contains('submit')").attr("disable","disable");
});

A few things to note:
the "elem[0]" that defines "var position" is significant for some reason, I tried it without the "[0]" and it broke, I'm not 100% sure why so if anyone wants to weigh in, that would be great. Secondly, it is good to keep in mind that the "disable" attr is not supported on IE7 and lower so in order to fix band-aid this I simply made the button look disabled by doing something like.

?View Code JAVASCRIPT
if(position == $(elem).outerHeight())
     $(":button:contains('submit')").css("cursor","pointer");
else
     $(":button:contains('submit')").css("cursor","text");

Ultimately this only fakes people out if they pay attention to their cursor, which is probably less than 50% of the time. so really the best way to do this i found is as follows:

?View Code JAVASCRIPT
$("#selector").scroll(function() {
   var elem = $(this);
   if(checkScrollTop(elem))
      $(":button:contains('submit')").css("cursor","pointer");
   else
      $(":button:contains('submit')").css("cursor","text");
});

Then I Have a function called checkScrollTop() which takes an argument.

?View Code JAVASCRIPT
function checkScrollTop(elem) {
   var position = elem[0].scrollHeight - elem.scrollTop();
   if(position == $(elem).outerHeight()) {
      return true;
   }
   return false;
}

And last but definatley not least, a click event on the button so we can catch those trying to cheat w/ IE7 and (gulp) below.

?View Code JAVASCRIPT
$(":button:contains('submit')").click(function() {
   var elem = $("#selector");
   if(checkScrollTop(elem))
      $('#step1_disable').hide();
   else
      alert("Please read the entire policy before clicking \"submit\"");
});

to break it down, the $("#selector").scroll function simply decorates the button, while the click event on the button determines if the user can continue, if not it pops an alert up telling them what they must do. both events use the checkScrollTop(elem) function which measures the position of the scroll-bar.
Happy Annoying people :)

Print This Post Print This Post
10May/100

LinkPost – Jan through April 2010

It's that time again. The time when I make good on those promises of finally posting all the backed up LinkPosts :) . The first quarter of this year has been fairly amazing, Google has started to include speed in page-ranking, jQuery released 1.4, and css3 is starting to build some serious momentum. There are links to all of that and more in this massive LinkPost

Print This Post Print This Post
14Apr/102

Using jQuery to Make a Smart Search

Recently I've been forced to develop a relationship with jQuery (something I had no interest in while I was working with team awesome). I have to admit it has been quite pleasant and my tolerance has grown into a very strong liking of the library (so I'm a little slow). This proved very useful when I was asked to make a search field do more than just search for an ID. I decided NOT to fowl up our nice sleek looking header with a clunky drop down box, instead I turned to jQuery to make the search bar intuitive...observe.

?View Code JAVASCRIPT
$("#searchForm").submit(function() {
	//the regular expressions in this function are not meant for validation as much as determining which value to search by.
	var submitted_appid = $(".search input[name=AppID]").val();
 
	if(/^[\d]+$/.test(submitted_appid) == true) {
		//do nothing since the input is already properly named
	} else if(/^[\d-]+$/.test(submitted_appid) == true) {
		//change name of input to SSN
		$(".search input[name=AppID]").attr("name","SSN");
	} else if(/^[A-Za-z]+$/.test(submitted_appid) == true) {
		//change name of input to LastName
		$(".search input[name=AppID]").attr("name","LastName");
	} else {
		//no match, alert the rep and return false
		alert("invalid search value:\nfor SSN please use numbers and at least one dash '-'\n for LastName use only letters\n for AppID use only numbers")
		return false;
	}
	//there was a match add an action and submit the form.
	$(this).attr("action",'search.php');
	$(this).submit();
});

The HTML

<div class="search">
    <form id="searchForm" name="searchForm" method="post" action="">
	<input type="text" name="AppID" value="Search..." />
    </form>
</div>

Then your search app would do something like the following

if(isset($_POST['AppID']) {
     //enter sql code here
} else if(isset($_POST['SSN']) {
    //enter sql code here
} else if(isset($_POST['LastName']) {
   //enter sql code here
}

Basically the jQuery decides what to search on based on the characters in the input field, if the wrong mix of characters is present then we fire off an alert message notifying the irresponsible party and correcting their ignorant ways.

Print This Post Print This Post
7Apr/102

jQuery Random Color Changer

So I had a lot of time on my hands today, and we were trying to figure out a good color palette for one of our customer service portals. Since I'm not in the least bit a designer we decided to wait for one of the Graphic Designers to take a stab at it, only problem with that is they were out to lunch. So someone gave me the idea to play around with the colors and make them change from time to time. I wasn't feeling particularly ambitious so I scoured the internet for a good jquery solution to randomly select colors and change background colors based on those that were randomly generated.

below is what I came up with:

?View Code JAVASCRIPT
/* -- jQuery Colourific */
/* -- v 1.0 - January 2008 */
/* -- by ben watts (http://www.benwatts.ca/sandbox/jquery-colourific/) */
 
//$(document).ready
$(function(){
	setupColourific();
});
 
// setupColourific
function setupColourific(){
	var elements = new Array();
	elements[0] = $("td.Upload"); // the element that's changing
	elements[1] = $("td.Notes");
	elements[2] = $("td.LoanTitle");
	elements[3] = $("td.hdr");
	elements[4] = $("body#body");
	for(i = 0; i < elements.length; i++){
		changeColour(elements[i]);
	}
	window.setInterval( function(){changeColour(elements[0]);}, 1000);
	window.setInterval( function(){changeColour(elements[1]);}, 1500);
	window.setInterval( function(){changeColour(elements[2]);}, 2000);
	window.setInterval( function(){changeColour(elements[3]);}, 2500);
	window.setInterval( function(){changeColour(elements[4]);}, 3000);
 }
 
// changeColour
function changeColour(e){
 
	// random values between 0 and 255, these are the 3 colour values
	var r = Math.floor(Math.random()*256);
	var g = Math.floor(Math.random()*256);
	var b = Math.floor(Math.random()*256);
 
	// puts the hex value inside this element (e is a jquery object)
	//e.text(getHex(r,g,b)); 
 
	// change the text colour of this element
	e.css("background-color", getHex(r,g,b)).fadeIn();
 
}
 
// intToHex()
function intToHex(n){
	n = n.toString(16);
	// eg: #0099ff. without this check, it would output #099ff
	if( n.length < 2)
		n = "0"+n;
	return n;
}
 
// getHex()
// shorter code for outputing the whole hex value
function getHex(r, g, b){
	return '#'+intToHex(r)+intToHex(g)+intToHex(b);
}

Obviously you'll need to change the selectors to something relevant for your purposes. It's probably not something you want to use on a regular basis but would make a great april fools day joke, or if you feel like a ceasure go ahead and mess with the time interval.

I can't take full credit for this script, the original can be found at This site

Print This Post Print This Post
21Jan/100

jQuery vs. Prototype

Got a sample article from NFJS that looked at the two libraries.  Thought everyone might enjoy having a look at it.  I thought it was pretty good if a little long winded.  DETAILS only FTW!

Ajax Library Smackdown: Prototype vs jQuery by Nathaniel Schutta

Print This Post Print This Post
6Nov/090

September and October LinkPosts

So it turns out that it's November.  I have no idea what happened to October but it's gone and I don't think I'll be getting it back.  I suppose that the lapse in time has more to do with a project I'm working on than actual missing time ;)   September and October had some pretty good releases, only a couple of font resources, but plenty of image and jQuery links.  Also you should find an abundance of miscellaneous links :)   Keep in mind that it was September or October when the links were found, so some context may be broken on my descriptions. As always, some links may be broken, but let me know in the comments and I'll try to get them fixed right away.

Print This Post Print This Post
3Aug/093

Summer 2009 LinkPost Extravaganza!

Whoa, what happened? I'll tell you what happened, I blinked and it was August! But fear not! I have kept the links that I was going to post and have compiled them into what I like to call the Summer 2009 LinkPost Extravaganza! Cheesy? Yes, a little absurd? Absolutely, but hey at least you're getting the links right?

This Post features plenty of images (icons, textures, etc.), a large selection of jQuery goodness, some php, fonts, and plenty of tools, resources, and tutorials. I even threw in a few links for our growing mac-user community (yeah, you can't see it, but I'm patting myself on the back).

Enough drivel, time to give the peoples what they want, the links!

Print This Post Print This Post
2Jun/091

LinkPost – May 2009

Yep, I'm a few days late, but this month is full of more tasty linked goodness! Plenty of image links, multimedia, jQuery, generic web dev, some WordPress, a couple of iPhone links, plenty of 'other', and of course what a LinkPost be without tons and tons of fonts (now that I've said that, next month watch there not be any ;) )?

Print This Post Print This Post