Posted by Dustin on June 1, 2010 under Javascript, Web Development | 
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 
Posted by Dustin on April 14, 2010 under Javascript, PHP, Web Development |
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.
Posted by Dustin on April 7, 2010 under Javascript, Uncategorized, Web Development |
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
Posted by Doo on January 21, 2010 under Javascript, Web Development |
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
Posted by Phil on September 1, 2009 under Javascript, LinkPost, Web Development |
Wow, another month has come and gone, and summer is nearing the end. Schools have started back up and it’s time to buckle down and start working on things you’ve learned over the summer (not to mention all the gratuitous homework you may start accumulating). To help you out with either some stress relief, or with a project you’ve been assigned, we have plenty of links to sort through.
This months highlights include the usual sampling of fonts, some image links (tons of photoshop goodness this round), a new image compression resource (better compression than smush.it), jQuery tutorials/plug ins, and some mac widgets to help you get things done on your mac.
Let’s get started…
Read more of this article »
Posted by Phil on August 3, 2009 under Javascript, LinkPost, Mac, PC, PHP, Web Development |
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!
Read more of this article »
Posted by Phil on May 25, 2009 under Javascript, Training Sessions, Web Development |
I’ve been working on a tool for javascript developers. It all started after searching the web for some form of tracing tool I could use when writing javascript so I could see why a certain function wasn’t firing. I only found a handful of solutions (and none that I was very impressed by). So I finally ended up coding one myself.
So I give you, jTrace – javascript tracing for the peoples (say that last part like strong-bad to get the full effect).
I coded jTrace with jQuery 1.3.2 (as an include… not so much a plugin, although that’s what I usually call it), and then I created a ‘bloated’ version that has jQuery included inside of it (for all you mooTools and prototypers out there… I got your back 
). For those who use the bloated version, yeah I coded the jQuery portion to use ‘jQuery(…’ instead of ‘$(…’ for the selectors so it shouldn’t break your exisiting code.
To get an in-depth approach on jTrace and how to use it, head over the ‘usage‘ page on the jTrace site.
Have questions, comments, or props? Leave them here in the comments, thanks!
Posted by Phil on April 28, 2009 under Javascript, Web Development |
The problem*: You have a page with a pop-up, and when you click a link on it, it needs to change the page that spawned it.
I searched everywhere and every result listing let me down. Site after site was bitter disappointment, I searched for ‘pop-up close child window redirect parent’, then ‘pop up change parent’, and ‘pop up child link change parent window’. I did find some useful code like the ‘onunload’ event (we’ll cover that another time ). I finally stumbled onto the solution by mashing up a few different solutions that were posted for javascript events and the mysterious ‘window’ method built into the base js library*².
The solution (#1): This solution is for those who want to keep the pop-up open, or just want parent only manipulation (yeah, you can always manipulate the child (pop-up), but solution 2 is soooo much easier for that).
First, let’s build a method to handle pop-ups.
function popWindow(url, myWidth, myHeight, myScrollbars, myTop, myLeft, myMenubar, myResize) {
window.name = "main"; /* setting this is the key to letting you manipulate the parent window */
window.open(url, "","width="+myWidth+",height="+myHeight+",scrollbars="+myScrollbars+",top="+myTop+",left="+myLeft+",menubar="+myMenubar+",resizable="+myResize+",bgcolor=#ffffff");
} |
Note that we used “window.name” and set it to “main”. This allows me to reference the parent window from any child windows (pop-ups). Now that we’ve done that, in our pop-up window we just need to make the link have a target of “main”. Like so:
<a href="http://fakedoman.com/newpage.html" target="main">Change the parent window!</a> |
Now this comes together on your parent page, you click a link that uses the popWindow function that creates the pop-up that can now reference the parent by the name “main”.
The solution (#2): This is the show, the heat, the expletive, the new hotness, and the fresh burnination. Ok, fine, it’s old code that’s been around forever that everyone on the internet forgot about (or at least didn’t blog, write, post, etc).
In your pop up window, build a method like this in your script section (or included js file).
function openParent(webAddress){
opener.location.href=webAddress;
window.close();
}; |
Wow… 2 lines (4 if you count the open and closer of the function), simple, easy. Why has no one told anyone else about this*³ ? Now the only thing left is to call that function in an “onclick” event in your a-tag.
<a href="javascript:void(null);" onclick="javascript:openParent('http://fakedomain.com/newpage.html');"/> |
Yes, I pointed the href to “javascript:void(null);”, the onclick event will overwrite the original href call anyway, so this is how you build the link to keep the code valid to W3c standards.
And that, my friends, is how you code a pop-up window that will change the parent window with a link from the pop-up window.
* Yes I heard all of you grumblers in the back saying ‘change the target in the a-tag to “_top” and that’ll solve your problem. And you know what? yeah, in 1998 that would have worked. However these days our pop-ups are javascript based, and not so frames/iframe-y.
*² This statement could very well be false… in fact it’s made up, I’m not sure if it’s built in, I really can’t back that up, yeah, total b.s. and yet the code works in IE6, IE7, IE8, Opera 9.63, Safari 3, Firefox 2, Firefox 3, and Chrome… so that kinda seems “built-in”, or at least understood and interpreted correctly by most browsers.
*³ It could be that pop-ups in legitimate sites really aren’t all that common, and generally the people who use them on their sites are spammers/malware/spyware vendors and should be dragged out in the street and beaten while having their selling slogans chanted and shouted at them (isn’t that a pleasant picture you just painted in your head? your welcome).
Posted by Phil on April 20, 2009 under Javascript, Web Development |
No, it’s not what you think. I’m not posting some grand tutorial on how to re-animate the dead with jQuery… at least not yet. What I am going to do is post a few things that I either stumbled into, or had to figure out for myself while using jQuery.
1st – Sometimes you may find yourself writing huge functions, or the like, in which you continually use the selector ” $(this) “. There’s nothing wrong with that, I use it all the time. However something you really should keep in mind is that every time you call that selector, you are throwing more drag on the cpu/browser/rendering of your site. How do you alleviate this problem? simple, just set the $(this) selector into a variable.
/* how not to code */
$(document).ready(function(){
$(this).doSomething();
$(this).click(function(){
$(this).runMore();
});
$(this).yepEvenMore();
});
/* how you should code */
$(document).ready(function(){
var $this = $(this);
$this.doSomething();
$this.click(function(){
$this.runMore();
});
$this.yepEvenMore();
}); |
2nd – This really should be a no-brainer, but after spending over 15 minutes trying to get the selector to work (and browsing several jQuery sites, checking my cheat sheets, etc.) I finally found the answer to using a selector within a selector. I believe the answer came from the jQuery google-group. It was as simple as the following example.
$("#left label[for=" + $this.attr("id") + "]").addClass('active'); |
You can see that I had a div with an id of ‘left’ and I wanted a particular label inside that div to have a class of ‘active’ applied to it. This worked with a click event (not shown).
3rd – What happens when you have some images that when clicked you want to change the value of a form? Say for example that you have some logo’s of credit cards that when clicked on you want to change a select box in your form to show the value of that credit card? The solution for this one I couldn’t find anywhere on the interweb, so I spent plenty of time figuring this one out. It works, and I’m fairly happy with it. NOTE: you must be using jQuery 1.3+ to make this work, the changes made in this version of jQuery allow you to do this type of selector.
$("#payment-type-ful img").click(function(){
var card = $(this).attr('alt');
$("#policyId").val(card);
}); |
Yep, there’s a div with an id of ‘payment-type-ful’ and I need any images under it, and when clicked on I set up a variable called ‘card’ that is set to the alternate text of the clicked-on image. I then select the input select and set the current value to ‘card’. Simple? oh yeah, easy, absolutely.
That sums up a few quick little jQuery gems that I’ve been using recently. As per usual, if you have any questions, comments, or tips of your own, feel free to throw them in the comments, thanks!
Posted by Phil on March 31, 2009 under Javascript, Web Development |
A new feature I’ve decided to put on the DevBlog is something I like to call the “LinkPost”. This is mainly a collection of links that I either followed or used during the month. I’ve kind of done this before (massive posts with tons of links in them), but those posts weren’t quite the same as this. Hopefully you’ll find this useful, and of course if you found any interesting links during the month, feel free to throw them in the comments. Oh, and these are not sorted at all, just a random grab-bag of where I went, and what I looked at.
Note: this post is rather long, so I’ve kept the whole post off of the main page, click the ‘read more’ link below to see the entire post/list
Read more of this article »
