David Hurth's blog

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.

You have probably seen some of the search engines where you can keep scrolling through your search results and they load as you scroll without clicking a next button. Well if you have been looking for a good example the Janko at Warp Speed blog has put together a good example using .Net and JavaScript.

Below is an excerpt from the post.

Implementation

Typically, user is notified that new content is being loaded by showing indicator in the bottom right angle of a content (as you can see on the screenshot on the left).

Generally, it looks like this: Initial content is loaded on the start. When user scrolls down to the end of the content, JavaScript function calls local WebService and a set of new items is sent back to the client.

Let's make an example. Since I use Google Reader every day, let's make something that looks like it. Ok, I admit, I stole colors for this example :)

This is going to be very simple. I have a list of countries stored in SQL database. Each country has ID, Name and number of Internet users. I would like to show the complete list in a div, and to enable continuous scrolling. Image on the left shows our example.

So, I will define CountryWS that will get the data from the database. This is the first catch and might be tricky. Since new data have to be loaded on request (precisely on scroll) I have to do paging in the database. I do that by sending two parameters to my stored procedure: PageIndex and PageSize. PageIndex will tell my stored procedure which page to query, and PageSize - how many items to retrieve.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class CountryWS : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod]
    public List<Country> GetMoreCountries(int pageIndex, int pageSize)
    {
        System.Threading.Thread.Sleep(1000);

        SampleDAO sampleDAO = new SampleDAO();
        List<Country> countries = sampleDAO.GetCountriesPaged(pageIndex, pageSize);
        return countries;
    } 
}

That is "the server" part. Let's see what will happen on the client. All items will be rendered in a div that has onscroll handler defined.

<div id="content" runat="server" onscroll="OnDivScroll()">
    <%--Items will be rendered here--%>
</div>

OnDivScroll function will do a simple job - it will determine if the user scrolled down to the near bottom of the content. Then it will call CountryWS and pass the result to HandleRetrievedData function.

function OnDivScroll()
{ 
    var content = document.getElementById('<%=content.ClientID %>');
    if(content.scrollTop < content.scrollHeight - 500)
        return;

    CountryWS.GetMoreCountriesObject(pageIndex, pageSize, HandleRetrievedData );
}

This is a second catch. Why near? The answer is simple - if you want your user to read smoothly, you'll have to load a new content BEFORE he/she reaches the end of the content. Ok?

And for the end, HandleRetrievedData function will parse the result and render new content.

function HandleRetrievedData(result)
{
    var content = document.getElementById('<%=content.ClientID %>');

    for (var i = 0; i <= result.length - 1; i++)
    {
        content.innerHTML += "<div class='entry'><b>" +
            result[i].CountryName + "</b> (" + result[i].Symbol + ") - " +
            result[i].InternetUsers + " internet user(s)</div>";
    }
}

You will notice that sample code is more complex than this example, but I will let you sweat a little bit ;)

You can read the full post here.

If you host or get code from Google Code then this will be of interest to you. Google code now has the availability of content licenses. This will help promote the best practice of licensing open source code.

The Google Code team is pleased to announce the availability of content licenses for projects hosted on code.google.com. Projects owners may now select from either the Creative Commons Attribution license or the Creative Commons Attribution-Share Alike license to indicate the terms under which their non-source code materials may be distributed.

You can read more about this here.

jqPuzzle is a nice puzzle script based on jQuery. The script has some very nice effects using the jQuery library.

You can get jqPuzzel as well as see a few demos 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.

General Interface (GI) 3.6.0 has been released. This new version promises JSON data mapping (a very good thing as JSON is being highly used by Web 2.0 sites) and template custom control among other things.

Below are some of the key features highlighted on the GI website.

Make Richer Ajax Applications. Faster.

TIBCO General Interface™ 3.6.0
Professional Edition

• 100+ ready made Ajax controls

• Unparalleled visual tools

• Extensive docs

• Open source BSD licensed

General Interface 3.6.0 brings you:

• Template custom control

• CDF form mapping

• JSON data mapping and JSONP protocol support

One of the main issues that I have had with GI in the past is that it is very heavy on the front end load. Tibco has addressed this issue by allowing you to use different deployment types that allow you to fine tune what is loaded. This really helps the performance and makes the possible use of GI on public facing sites closer to a reality (there are still some browser compatibility issues that will keep the tool from major adoption on public facing sites).

You can learn more about GI (including downloading of the application) here.

The new version of GI is a good tool for developing Ajax applications for internal corporation use. While it is getting closer to possibly being useful in public facing applications, there is still some work to be done before I can see this happening.

Six Revisions has put together a great list of Flash and ActionScript resources. Since Flash is used throughout the web for animation and with ActionScript you can do some pretty nice programming to go with the animation it is nice to have some good resources.

You can read an excerpt from the post below.

6. ActionScript.org

ActionScript.org is a site that provides resources and information pertaining to Flash, Flex, and ActionScript. They have a fairly active Forums section as well as an ActionScript Library that currently has over 700 objects you can download.

Tutorial examples:

• Drawing Shapes with AS3
• Simple reflection effect with AS2
• Physics in ActionScript 3.0

7. Flash and Math ActionScript 3 Tutorials

Flash and Math has a great collection of tutorials on AS3. They cover basic to advanced topics so that Flash developers of any level can find something they can read and learn from. Many of the tutorials include the source files for download.

Tutorial examples:

• Drag-and-Drop in Flash CS3
• Tween Tricks in Flash CS3 and ActionScript 3
• Simple 3D Drawing in Flash CS3 and ActionScript 3

8. Flash Tutorials on Pixel2Life

Pixel2Life, according to the site, is the "largest tutorial index catering to graphic designers, webmasters and programmers". With over 40,000 indexed tutorials, you’ll find many links to tutorials in their Flash Tutorials section.

Indexed tutorial examples:

• Creating a Basic Flash Website (AS3 Version)
• Actionscript 3 Timer Class
• Stars animation above the city

9. Flash Perfection

Flash Perfection is a website with a large collection of Flash tutorials, tips, and tricks from various websites. Flash Perfection has 23 categories to help you find information more quickly.

Indexed tutorial examples:

• Atmospheric Steam
• Optimizing your Flash SWFs
• Quick and Easy Zoom Effect in Flash

You can read the full post here.

With the major use of Flash for animation on the web this resource will help many web developers.

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.