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
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
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.
$("#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.
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:
$("#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.
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.
$(":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
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
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.
$("#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
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:
/* -- 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
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
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
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
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