Thank You Ryan Grove - Finally a Script Loader that works painlessly!

Finally was able to make my homepage not CRAWL due to a lazy script loader that I found. Prior to this, either security was too tight from GoDaddy or it was just made for Image Files. Anyways, check this out...


http://wonko.com/post/painless_javascript_lazy_loading_with_lazyload

Use Google Calendar as Datasource for Holiday Notifications

I wanted to see how difficult it would be to do a simple notification on my site of any basic holidays that occurred on any given day. Sure, it would be simple enough to simply create an array to hold the data in js, and display if the date matched, but I figured I would use a JSON Feed to display the data instead. Turns out Google Calendar has just the thing in their Holiday Calendar Feed.

http://www.google.com/calendar/feeds/en.usa%23holiday%40group.v.calendar.google.com/public/basic

If you go to this feed, you'll notice there is a lot of information that needs to be parsed down to use it, so after some fiddling, I came up with the following YQL Feed:

select entry.title.content, entry.summary.content from xml where url='http://www.google.com/calendar/feeds/en.usa%23holiday%40group.v.calendar.google.com/public/basic' AND entry.content.content LIKE '% + year + %'

with year being a new Date().getYear() value.

Anyways, here's the script. It simply displays a message in a Div if today falls on one of the holidays.

$(function () {
var d = new Date();
var year = d.getYear();
var shortDay = (d.toDateString()).slice(4, 10);
var query = "select entry.title.content, entry.summary.content from xml where url='http://www.google.com/calendar/feeds/en.usa%23holiday%40group.v.calendar.google.com/public/basic' AND entry.content.content LIKE '%" + year + "%'";
$.getJSON(
"http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(query) + "&format=json&callback=?",
function (data) {
$.each(data.query.results,
function (index, item) {
for (i = 0; i < item.length; i++) {
var each = item[i];
var date = ((each.entry.summary).slice(9, 16).replace(',', ''));
if (jQuery.trim(date) == jQuery.trim(shortDay)) {
$('<h6></h6>').html('Today is ' + each.entry.title + '!').appendTo('#holidays');
}
}
});
});
});

You can feel free to download this script if you would like to use it.

http://www.joshuablackstone.com/Scripts/HappyHolidays.js.

Using YQL and Google Translate to Translate Text

Had a little time to play, so I wanted to see what I could do to internationalize (I think that's a word :) ) my site. I noticed in YQL there was a GoogleTranslate Table, so after some trial and error, found out that with:

select * from json where url='http://www.google.com/uds/Gtranslate?context=22&langpair=%7C" + lang + "&v=1.0&q=" + encodeURIComponent(str) + "'

with the variables being, of course, lang for language symbol (i.e. en for english, de for dutch, etc.) and str for Text String to be translated. Plug that into a YQL Json function and you're set, well, almost...

Why not also scrape the items from the Google Site to use for a Combo Box to select a language from? If you go to: http://translate.google.com, you will see a combo box next to TranslateInto. To Get the data from that, simply use this query as your JSON String:

http://query.yahooapis.com/v1/public/yql?q=select%20option%20from%20html(0)%20where%20url%3D%22http%3A%2F%2Ftranslate.google.com%22%20and%0D%0A%20%20%20%20%20%20xpath%3D'%2F%2Fselect%5B%40class%3D%22tllangdropdown%22%5D'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?

Plug that into the YQL Console, and you will find that you can get the value and Content for items to plug into a combo box of your own.

Finally, wire up the dropdown that was created with an event similar to:

$("#DROPDOWNNAME").change(function () {
translateText($(str).html(), this.value);
});

And you're all done.

I realize this was a very brief explaination, but for the full script simply go to:

http://www.joshuablackstone.com/Scripts/GTranslate.js.

Access True Wildcard Form Search

Needed to build a searchform in MS Access which will allow searching of one or multiple fields. I know that in Sql, this can be accomplished by using:

SELECT * FROM Table where IsNull([ID],'') LIKE IsNull('%' + @ID + '%','%')

However, Access doesn't recognize this as a valid statement, so back to the drawing board...

Eventually I came up with this solution...

IIf(IsNull([Forms]![Form]![Control]),[FieldName],LIKE "*" & [Forms]![Form]![Control] & "*")

With Form being the Form name, and Control being the Control Name.

In a nutshell, this is saying If IsNull(Form Control) Is True, i.e., If no value was put into the search form for this field, then simply show all items in that field. Otherwise, show all items that are LIKE (Wildcard Search) the search criteria.

Hope this helps someone else...

YQL create states Dropdown List

OK, a very simple one today.

Using YQL's upcoming.state table, you can create a simple dropdown list to store either the State name or the State Abbreviation.

HTML Page:

Create a select element, and give it an id of ddlStates.

The jQuery Script:

$(function () {
var query = "select code, name from upcoming.state where country_id = 1 and id <= 51";
$.getJSON(
"http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(query) + "&format=json&callback=?",
function (data) {
$.each(data.query.results,
function (index, item) {
for (i = 0; i < item.length; i++) {
var each = item[i];
var stateName = each.name.toUpperCase();
var stateCode = each.code.toUpperCase();
$('<option></option>').val(stateName).html(stateCode).appendTo("#ddlStates");
}
});
});
});

You'll note here I simply changed it to Uppercase, and used the value of State Name, while displaying the state code.

Download Script at: http://www.joshuablackstone.com/Scripts/StatesDropdown.js

And all this time I was storing the data in a database... Ugh...

Using YQL create Food Network Search

More YQL, gotta love how easy they have made this!!

I have found that Food Network can be quite good at making boring foods, well... not so boring. Wondered what it would take to search their system from another webpage. They don't have a feed for you, so what to do? YQL's html table...

Go to the YQL Console, and enter:

select h3 from html where url="http://www.foodnetwork.com/search/delegate.do?fnSearchString=FOODITEM&fnSearchType=site" and
xpath='//div[@class="result-item"]'

as your query. You'll notice it breaks it down to a simple array of h3 elements.
From there, simply create an array and show the results in an unordered list.

HTML Page:

1. Add jQuery to your Page


2. Create a textbox called txtSearch


3. Create a button called btnSearch


4. Create an unordered list called searchResults

JS Code:

function searchRecipes(search) {
$('#searchResults').empty();
$.getJSON(
"http://query.yahooapis.com/v1/public/yql?q=select%20h3%20from%20html(5)%20where%20url%3D%22http%3A%2F%2Fwww.foodnetwork.com%2Fsearch%2Fdelegate.do%3FfnSearchString%3D" + search + "%26fnSearchType%3Dsite%22%20and%0D%0A%20%20%20%20%20%20xpath%3D'%2F%2Fdiv%5B%40class%3D%22result-item%22%5D'&format=json&callback=?",
function (data) {
$.each(data.query.results,
function (index, item) {
for (i = 0; i < item.length; i++) {
var each = item[i];
var link = (each.h3.a.href).replace('/', 'http://www.foodnetwork.com/');
$('<li></li>').html('' + each.h3.a.content + '').appendTo('#searchResults');
}
});
});
}

$("#btnSearch").click(function () {
var searchText = document.getElementById('txtSearch').value;
if (searchText == "") {
alert('You must first enter a food to search!');
}
else {
searchRecipes(searchText);
}
});

There you have it. Enter a food to search in the textbox, click on btnSearch, and a list of recipes are found. Only returns 12, as that is how the site is setup, but its a nice basic example of yql page scraping...

Oh, by the way, if you want a copy of the script, feel free to download at:

http://www.joshuablackstone.com/Scripts/Searches/FoodNetwork.js

White Pages API Sample

I was looking on the web, and found that there are few if any real samples available for the White Pages People and Reverse Number Searches.

I've posted a simple example that has 2 search forms. The first one is a simple people search that takes the name and the zip code as parameters and displays the results below.

The second search was simpler, as I simply ask for a 10 digit phone number and it displays the results found below as well. You can optionally pass a state code in place of the area code, but I figured i'd keep it simple for now.

If anyone is interested in checking it out, there is source code and a working example available at:

Sample with Source.

Hope this helps someone out...