Web Design

In part 1 of this 2 part series on auto re-sizing iFrames I explained the basic principal of how it would work (you can read part1 here). Today I will give code examples to better demonstrate how you would accomplish this in the real word.

Below is an example of the server side proxy that would be used (this example is written in classic asp [as I needed to use this scripting language for the server that this script was to run on] but this could easily be re-written in your favorite language).

<%@ LANGUAGE=VBScript%>
<% 
            Response.Buffer=True

            Dim MyConnection
            Dim TheURL  

            ' Specifying the URL
            TheURL = Request("url")

            Set MyConnection = Server.CreateObject("Microsoft.XMLHTTP")

            ' Connecting to the URL
            MyConnection.Open "GET", TheURL, False

            ' Sending and getting data
            MyConnection.Send 

            TheData = MyConnection.responseText
            'Set the appropriate content type

            Dim MoreData, MoreData2

            MoreData2 = "<script type='text/javascript'>function Loadcontent(){var iframes = window.parent.document.getElementsByTagName('iframe'); for(var a=0; a</head>"
>"

             MoreData = TheData
           

            MoreData = Replace(TheData,"</head>",MoreData2)

            Response.Write (MoreData)

            Set MyConnection = Nothing     

%>

The below JavaScript is the most important part of the above code (I've formatted it to make it easier to read). In the proxy script it adds this code to the head tag of a page to accomplish the resizing. This code has been tested in IE6 and IE7, but needs a bit of tweaking to work cross browser (it re-sizes the iFrame incorrectly in FireFox, but this is easily fixed and I will post this code when I finish it).

<script type='text/javascript'>
	function Loadcontent()
	{
	var iframes = window.parent.document.getElementsByTagName('iframe');
		for(var a=0; a

So, in order to have an iFrame that re-sizes you would simple call the proxy url from the iFrames src property and set the url parameter (that us passed into the proxy) to the url of the page that you would like to display in the iFrame.

While this iFrame method accomplishes loading content from a different site you could accomplish the same thing using a div element and the XMLHTTPRequest object in JavaScript. Both methods would require the use of a cross-domain proxy (if loading content from a different site). I would probably use the div XMLHTTPRequest element if I am making a new application (as the div element re-sizes very well on it's own). However, if you have an application that already uses iFrames, then this script would be an easy way to make them re-size.

At times you may need to load content from other domains or websites into a web application that you are creating. One of the most common ways to accomplish this is to use an iFrame to load the content (this is assuming that you just want to display a web page in your application). In some cases you will want to load content and have the iFrame re-size based on the content that is being loaded into the iFrame.

The interesting thing is that there is no easy way to do this. You can't set the iFrame's width and height properties to 100% as this will have the iFrame take over the screen and not just re-size based on content. The solution that I came up with is the use of a server side proxy (which gets around cross-domain issues) and some javascript that is added from the server side proxy code to re-size the iFrame.

This first post will give you an idea on how this would be accomplished. In my next post I'll talk about the code that would be used and discuss the pros and cons (as well as other methods that could be used to accomplish the same effect). So make sure to check your feed reader for the next post...

Progress bars are extremely usefull in Ajax applications as it lets people know when you are loading information in the background. Well the DeveloperFox blog has put together a nice list of progress bars using jQuery, JavaScript, CSS and PhotoShop.

Below is an excerpt from the post.

jQuery Progress Bars

jQuery.UI ProgressBar Widget

HOWTO: PHP and jQuery upload progress bar

jqUploader

“jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly - so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader.

The plugin uses the form action attribute value (normally pointing to a server side script handling the upload and other data manipulations, and appends a variable “jqUploader=1? so that the upload code is initiated when it sees that key/value is on the posted data.”

Progress Bar Plugin

This is a progress bar plugin for jQuery.

To read the full post click here.

I was playing around with the social networking CMS AroundMe this weekend and this got me thinking of what will the next big social network be. It has been a bit of time since we have seen any really huge social networks pop up and I am wondering what kind of social network would make it big. Lately most of the news has been about aggregation services like FriendFeed or our own BuddyBlend, but I haven't seen much in the new social network space.

As I see it nothing will probably happen in the spaces that huge services already have a strong hold, such as the video space and social bookmarking space. While we will see many new challengers, I don't see anybody beating a site like YouTube any time soon. So, I think that if a new social network is to gain a strong hold it will be in a space where there is no clear leader currently.

Below are the spaces that I think that there is a chance for a new social network to dominate.

• Video Game Space
  While there are currently a few Video Game social networks, there is not yet a MySpace for gamers. I think that in order for a site to clearly win this space they will need to provide on-line games, a space for gamers to talk about their favorite games and a place schedule on-line games.
• Music Space
  While there are a few sites that are in this space, with last.fm leading the pack, I'm not sure that there is a clear winner in this space. The tough thing in the Music Space is the copyright information if you share music. What I think needs to happen for someone to dominate this space is they need to make a deal with the record labels like iTunes has where perhaps I can listen and share music for free on the site, but if I want to download it to my iPod I need to pay a very small fee.
• Athletics Space
  I haven't seen many good sites in this space, but think that with so many sports fans that this could be a huge space if done well. Just think of the amount of people in this audience all over the world!
• Collectible Space
  This would be a place where people who collect items, whether they be baseball cards or cars, could connect with people that have the same interests. I haven't seen any social networks in this space, probably because of ebay, but I think there could be a large social network in this space.
• Outdoor Activities Space
  I haven't seen many sites in this space, but with so many people enjoying outdoor activities, this could be a huge social network. Just think of a social network where you can share and find your favorite camping sites or places to go rafting.

This is just a small list of possible spaces where the next great social network will exist. I would love to hear your thoughts on the space where the next great social network will exist.

A very useful design element on the modern web is the accordion element. With this useful design element you can never have enough accordion scripts to use. Well, WebTecker has put together a nice list of accordion scripts.

Below is an excerpt from the post.

• jQuery Horizontal Accordion - This is another jQuery Plugin but the accordion is horizontal. It is very similar to the XBOX 360 interface. This plugin requires you use the interface plugin.
  
  
• MooTools Accordion - This MooTools Accordion script is very nice script that is very easy to implement. There is no additional plugins that you need to get this script to work. The one problem with this is that there is no support for this script. But you can easily figure out how to integrate by viewing the source code.
  
  
• Horizontal JavaScript Accordion - This script requires no JavaScript frameworks and is just 1kb. It has been tested in all major browsers. This is a great an easy script to implement.
  

  

• Accordion v2.0 - This accordion script is built with Prototype and Scriptaculous. This script handles both horizontal and vertical accordions. It can even have an accordion inside an accordion. You should check this out.
  
  

You can read the full list here.

This is a great list and many of these scripts could be useful if you want a different accordion script.

Congratulations to the jQuery UI team on their release of jQuery UI 1.5!

jQuery UI provides low to high-level interactions and themeable widgets for your rich internet applications. Since it's built on the jQuery JavaScript Library, you have a solid foundation on which to build your apps. The library revolves around different mouse interactions, including drag/drop, sorting, selecting, and resizing. Also, you can expect to find the jQuery Enchant effects framework along with some reusable widgets [accordions, date picks, dialogs, sliders, and tabs] included in this release.

What's new?

- Refactored API
95% less exposed methods means 95% less methods you have to remember.

- Increased Stability
A dedicated bug tracker, new unit tests, and the addition of jquery.simulate.js - a plugin specifically designed to fire true browser events..

- Effects
As mentioned above, this release includes Enchant as a part of jQuery UI and includes features like advanced easing, class transitions (morphing) and color animations. You also get all the effects that come standard with script.aculo.us (blind,bounce,drop,fold,slide …), but also some new effects like transfer, explode. clip, and scale. Check out the demos.

View the changelog for a full list of features, bug fixes, and other changes in this release

Imagine you've downloaded a new UI library and are ready to integrate it into one of your applications, what's one of your big obstacles? That's right, figuring out how to get it to match your application's color scheme and look and feel. Wouldn't it be nice if you had a tool that could easily do most of the work for you?

Well get ready for ThemeRoller: a new theme creator for the jQuery UI library created by the crew at the Filament Group in Boston.

ThemeRoller gives you the ability to style your jQuery UI components in minutes. You can easily preview your theme as you make adjustments and when you're done, you can download a ZIP package containing the css, image, and demo page files for your theme. If you don't feel like rolling your own, or maybe want some inspiration, check out ThemeRoller's gallery to browse and download a variety of predefined themes.

Special thanks has to be given to the Liferay staff, who invested countless hours into the development of the new UI website, and with whom the team worked closely together to stabilize jQuery UI for all kinds of enterprise situations.

jQuery UI v1.5 Final Release: http://ui.jquery.com/download

Check out Themeroller

John Resig has written a good JavaScript port of the excellent Perl script written by John Gruber that provides pretty capitalization of titles. It is amazing how well the script works for capitalizing words.

Below is an excerpt from the post.

The excellent John Gruber recently released a Perl script which is capable of providing pretty capitalization of titles (generally most useful for posting links or blog posts).

The code handles a number of edge cases, as outlined by Gruber:

• It knows about small words that should not be capitalized. Not all style guides use the same list of words — for example, many lowercase with, but I do not. The list of words is easily modified to suit your own taste/rules: "a an and as at but by en for if in of on or the to v[.]? via vs[.]?" (The only trickery here is that “v” and “vs” include optional dots, expressed in regex syntax.)
• The script assumes that words with capitalized letters other than the first character are already correctly capitalized. This means it will leave a word like “iTunes” alone, rather than mangling it into “ITunes” or, worse, “Itunes”.
• It also skips over any words with line dots; “example.com” and “del.icio.us” will remain lowercase.
• It has hard-coded hacks specifically to deal with odd cases I’ve run into, like “AT&T” and “Q&A”, both of which contain small words (at and a) which normally should be lowercase.
• The first and last word of the title are always capitalized, so input such as “Nothing to be afraid of” will be turned into “Nothing to Be Afraid Of”.
• A small word after a colon will be capitalized.

He goes on to provide a full list of edge cases that this script handles.

You can read the full post here.

I can see some uses for this script in applications that would like to take user input and make it into a properly formatted title. This could be handy in a del.icio.us or digg like application.

Dynamic Drive has posted a new color picker widget built with the YUI JavaScript toolkit. This widget can be integrated in a form field to provide an inline or floating color picker. A control can also be assigned the color picker, activated with a click, with an option to set the control's background color based on the value chosen in the color picker widget. Since each color picker is defined as an empty DIV on the page, you can surround it with content and style it as you like. This new implementation also supports multiple instances of the color picker on the same page. So, two form elements can have two separate color pickers, as opposed to having one picker shared by all elements.

Visit Dynamic Drive for the script, demos, and installation instructions.

Google's User Experience (UX) group has put together a list of 10 [high level] design principles that encompass what they call a "Googley" design. These principles represent their User Experience group's declaration of beliefs.

For your consideration, here are the ten principles:

1. Focus on people—their lives, their work, their dreams.
2. Every millisecond counts.
3. Simplicity is powerful.
4. Engage beginners and attract experts.
5. Dare to innovate.
6. Design for the world.
7. Plan for today's and tomorrow's business.
8. Delight the eye without distracting the mind.
9. Be worthy of people's trust.
10. Add a human touch.

For details on each principle, visit the Design Principles page on Google's corporate site.

So, you're just finishing the next great Web 2.0 app, but you still need a badge or logo for the application. Well, WebTracker.com has put together a list of 25 great tools to make your Web 2.0 fully Web 2.0. The list has everything from button makers to Web 2.0 domain name suggesters.

Below is an excerpt from the list.

Domain

• MakeWords - MakeWords is a domain name generator that creates random words that you either supply or you don’t. It lets you know what domain name is available.
• NameBoy - NameBoy creates domain names based on a word that you want in your domain. It then tells you what domain is available.
• Dot-o-mator - Dot-o-mator is a web 2.0 domain name generator that allows you to select words and then have it combine them to form a domain name.

Favicon

• Favicon Generator - Favicon Generator takes an image that you upload and makes it into a favicon.
• Favicon.cc - Favicon.cc allows you to create a favicon icon online without having to upload any file.
• Favicon Editor - FaviconEditor allows you to upload a photo or you can create a favicon.

Gradients

• Gradient Maker - Gradient Maker allows you to generate a gradient of 3 types, with instant previewing so you get exactly what you had in mind.
• Gradient Texture Generator - Gradient Texture Generator allows you to create up to 4 different types of gradients with any colors that you want.
• Online Gradient Image Maker and Button Generator - This generator is the most in depth I’ve seen it has so many different options. It is a must see for any one.

You can see the full list here.

This list has some cool tools that are very useful if you are looking to make your application look fully Web 2.0, especially if you are not very artistic. If you have used any of the tools on the list I would love to hear your comments on them (as always you can leave them in the comments).