Posted by Dustin on July 14, 2010 under PHP, Web Development | 
It’s been a long time since I posted so I find it ironic that “time” is what brings me here today. Ok that was pretty corny. You’d think this would be something that would be pretty easy to find on the web, I was a little shocked there wasn’t some post about it in the PHP manual but there wasn’t so here it is. I was looking for a quick way to build an array of times of day starting with midnight and increasing every half hour until 11:30 PM (or 23:30 for you G.I. Joe’s). PHP has an abundance of time functions that are all very useful in their own unique way. After trying various different ones i finally came up with the following.
//build array of times.
$times = array();
$time = strtotime("00:00:00");
$times["00:00:00"] = date("g:i a",$time);
for($i = 1;$i < 48;$i++) {
$time = strtotime("+ 30 minutes",$time);
$key = date("H:i:s",$time);
$times[$key] = date("g:i a",$time);
} |
To break it down, I set $time to start at Midnight or 00 Hours and then set my first $times array member to the lamens “12:00 am” using the date() function. Since there are 24 hours in a day I know there are 48 half hours in a day so I set my loop to run 48 times.
Lets break down the loop:
This will add 30 minutes to the $time variable each time the loop runs.
$key = date("H:i:s",$time); |
This sets $key to the military notation of the current $time (the why will become more obvious later).
Finally I set my next $times array member with:
$times[$key] = date("g:i a",$time); |
Again the value of this member is set to the ordinary am/pm notation.
If you were to look at an array member in plain text it would look something like this:
$times["19:00:00"] = "7:00 pm"; |
Pretty simple, now just to display it. For my purposes I chose a select box.
<select class="required" name="CloseTime">
<option value="">--Select--</option>
<?php
foreach($times as $key => $value) {
?>
<option value='<?php echo $key; ?>'<?php if(isset($CloseTime) && $CloseTime == $key) echo " selected='selected'"?>><?php echo $value; ?></option>
<?php
}
?>
</select> |
Since I set up my $key as military notation I am able to use $key as the value of the <option>. I did this so I can easily put that value in the DB as a TIME and not have to worry about stripping the ” am” and ” pm”. Alternatively since $value was set up with am/pm notation it displays nicely to the user as 7:00 PM rather than 19:00 thus allowing regular Joe to keep his fingers in his nose rather than use them to figure out what time that is.
Posted by Phil on June 16, 2010 under PC, Web Development |
The Introduction
Yesterday I spent a good part of the day setting up the absolutely fantastic framework PhoneGap. If you don’t know what PhoneGap is, and you are a web developer, you are truly missing out. The only thing I can compare it to (from a high level) is Adobe Air. Air lets you build a page out of html, css, and js and then renders it in a webkit self-contained browser that you can then package up and distribute on any platform that runs air (Win/Mac/Linux), and yes you can also build Air apps with Flex and Flash. PhoneGap is similar to Air as it too uses html, css, and js to build apps for Android, iOS, WebOS, Blackberry, Symbian, and Nokia.
Now don’t let my title fool you, there is a guide (and a pretty good one at that) waiting for you in the PhoneGap Wiki, the problem is that it is now out of date and will cause you grief if you try to follow a few of the steps because they look like they are the right steps to follow. That’s why I’ve created this entry to walk you through the mistakes I blundered through to get it set up and working on my Windows 7 box (My mac died, and my linux lappy is a netbook – not ideal for developing on… plausible, but not ideal).
Read more of this article »
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 Phil on May 10, 2010 under LinkPost, Web Development |
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
Read more of this article »
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 Dustin on February 26, 2010 under PHP, Uncategorized, Web Development |
Nice to see the Dev blog is still here, and that I can remember my login. Here is a useful debugging trick I learned for PHP, hopefully it’s not in one of Phil’s link posts.
echo '<pre>'.print_r($app,true).'</pre>';
this bad boy will give you all of the values of an array, variable etc.
more to come soon.
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 under Web Development |
Firefox 3.6 dropped today, and I jumped on board and installed it immediately. Then to my surprise, shock, and horror, my favorite Firefox CSS fix failed. a:focus{ -moz-outline: none;} no longer works in 3.6. I tried google-ing (futile effort on the day of the release might I add) for a solution and nothing. But fear not, I played around and found one.
instead of a:focus { -moz-outline: none; } you use a:focus { outline: none; }. Seems that they no longer require a Firefox only declaration (although you may want to use both -moz-outline and outline so that less-than 3.6 users still don’t see those fun dotted boxes).
Posted by Phil on November 16, 2009 under Training Sessions, Web Development |
I’ll make this short, lets say you have a lynda.com license and you are using their very fine service to enhance your understanding of AIR by means of Flex. You download the exercise files (cos you’ve got the cool account) and you throw them in your file system, install flex builder 3, you are all set. So you crack open flex builder and import the flex project archive you received from lynda.com, only the problem is when you click run nothing happens and when you click debug it tells you “error while loading initial content”. You google like a mad-man trying to find an answer and get everything from, ‘upgrade your flex sdk’ to ‘kill a chicken… twice’. Turns out that while these may fix some issues, what you really need to do is fix your namespace. Seriously that’s it, just change the namespace.
Open your config .xml file and find this line:
<application xmlns="http://ns.adobe.com/air/application/1.0"> |
See the “1.0″ on the end? That’s your problem, see you are probably developing with AIR 1.5 (and why wouldn’t you?), not AIR 1.0. So change the line to read
<application xmlns="http://ns.adobe.com/air/application/1.5"> |
Save the file and relaunch/debug your app. It should run like a champ now. On the upside, maybe lynda will find this post and fix their example files. Until then, this trick should keep you going.
