Getting Latest Posts from Blogger
I've done this in a few different ways, but I love the simplicity of the following example. I've included the whole page of code to show you what goes where. Be sure to change the blogID to match your own blog.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Google Data API Sample: Last Three Blog Posts</title>
<script src="http://www.google.com/jsapi" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
// Configuation - Edit these values to match your blog!
blogId = "32786009";
var entriesToRetrieve = 3;
// Load Google Data library and set callback
google.load("gdata", "1");
google.setOnLoadCallback(populatePosts);
function populatePosts() {
// Create service object
var service = new
google.gdata.blogger.BloggerService("exampleCo-exampleApp-1.0");
// Retreive list of blogs
var feedUri = "http://www.blogger.com/feeds/" + blogId + "/posts/default";
service.getBlogFeed(feedUri, processFeed, handleError);
}
function handleError(errorMsg) {
// Display an alert dialog with the error text
alert(errorMsg);
}
function processFeed(feedRoot) {
var entries = feedRoot.feed.getEntries();
for (var i = 0; i < entries.length && i < entriesToRetrieve; i++) {
// Locate URI to blog post
var links = entries[i].getLinks();
var postLink = null;
for (var j = 0; j < links.length && !postLink; j++) {
if (links[j].getRel() == "alternate" && links[j].getType() ==
"text/html")
postLink = links[j].getHref();
}
// Create hyperlink
var linkNode = document.createElement("a");
linkNode.setAttribute("href", postLink);
// Create text
var textNode = document.createElement("p");
textNode.appendChild(document.createTextNode(entries[i].getTitle().getText()
+ " (" + formatDate(entries[i].getPublished().getValue().getDate()) +
")"));
linkNode.appendChild(textNode);
// Write to page
document.getElementById('post_container').appendChild(linkNode);
}
}
function formatDate(date) {
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" +
date.getDay();
}
</script>
</head>
<body>
<p>Blog posts:</p>
<div id="post_container"></div>
</body>
</html>
Simple Ajax Shopping Cart with PHP and Prototype
Jason Gilmore over at Developer.com shows us how to build a shopping cart using PHP, session handling, and the Prototype JavaScript library. The cart allows users to add and delete products from the cart, as well as change cart quantities. And of course, the interaction is seemingly instantaneous, allowing for the user to continue shopping without waiting for the page to reload. http://www.developer.com/lang/jscript/article.php/10939_3656001_2/Developing-a-Ajax-driven-Shopping-Cart-with-PHP-and-Prototype.Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)
This detailed tutorial will show you how to turn long webform into a wizard with "steps left" information. A plugin is also available for download. http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspxColor Palate Browser
Adobe's got a new website dedicated to beautiful color palates. Browse thousands of harmonious combinations and submit your own. Really handy tool - sometimes the only thing you need to inspire a new design are the right colors. You can create your own palate with Kuler's seriously powerful and fun tool. You pick your base color and it extrapolates the 4 natural harmonies, all of which can be tweaked. You can also create your theme from a photograph, which is very useful - sample a color from your client's logo and see what you get. I'm wearing out this bookmark... http://kuler.adobe.com/CSS Equal Column Height Problem
Many of you have encountered this at one time or another - you can't get your columns to dynamically resize themselves to match the tallest column in your "container" div. Here a couple good solutions to the problem.Prototype
First off, here's a Prototype solution. Just be sure to change the 2nd and 3rd lines to match your div names.
function equalizePanels() {
var col = $('content-navigation-panel');
var tbx = $('content-right-toolbar');
if(tbx && (Element.getHeight(col) < Element.getHeight(tbx))) {
col.style.height = Element.getHeight(tbx) + 'px';
} else if(tbx && (Element.getHeight(col) > Element.getHeight(tbx))) {
tbx.style.height = Element.getHeight(col)-25 + 'px';
} else {
var el = $('content');
col.style.height = Element.getHeight(el) + 'px';
}
}
Second, here's a Javascript solution from Dynamic Drive:
http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/
Preloading Images with CSS
I know, I know. It’s practically sacreligious to even suggest preloading images in any language other than Javascript, but a friend recently suggested this technique to me and after trying it out, I’m sold. The code is light, very straightforward, and more important - simple. I don’t know how many times I’ve written the Javascript code, but for some reason I always screw it up the first time and end up going back scratching my head for a few minutes before spotting the error. This is just elegant in comparison - you can’t screw up an HTML image. So without furrther ado…
The CSS
Create a class with display set to none and add it to your stylesheet:
<style type="text/css">
.hiddenPic {display:none;}
</style>
The HTML
Add image tags for your big images at the bottom of the page. I did this for big rollover images to achieve a smooth roll, but you can also preload the images for secondary pages at the bottom of your home page.
<img src="first_big_image.jpg" alt="whatever" height="350" width="350" class="hiddenPic">
<img src="second_big_image.jpg" alt="whatever" height="350" width="350" class="hiddenPic">
<img src="third_big_image.jpg" alt="whatever" height="350" width="350" class="hiddenPic">
And that’s it. Voila. Love it.