Blogs

Auto Resize iFrames - Part 2

Tagged:  

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.

Ruby on Rails 2.2 to be Thread Safe

Tagged:  

Tucked inside the somewhat innocuous announcement that a new committer has joined the Rails core team (Josh Peek, who had worked on Rails via the Google Summer of Code) was the surprising revelation that Ruby on Rails 2.2 will be thread safe. Even more surprising was the statement:

The actual thread safety won’t really matter much to most people, but it’ll surely look nice on your enterprisey check list of Features Your Framework Must Have To Get Play Around Here.

Huh? Thread safety not important? As much as I sometimes feel nostalgic about 1990's CGI programming (ah, signing bonuses...*sniff*), statements like that are just plain embarassing, and don't do much to promote Ruby or Ruby on Rails. And before anyone counters that stable versions of Ruby still don't use native (kernel) threads, think again: JRuby does. It may well turn out that JRuby + RoR 2.2 will be the the power combo for Ruby developers in 2008 and beyond...those that are serious about concurrency, at least.

ECMAScript Harmony

Tagged:  

Big news for the future of the Web: JavaScript 2 (ECMAScript 4) is dead, though pieces of it will live on in the new ECMAScript 3.1-based (informally dubbed "Harmony") specification. The members of the ECMA Technical Committee 39 (Adobe, Mozilla, Opera, and Google in favor of ECMAScript 4 and Microsoft, Yahoo in favor of the less ambitious ECMAScript 3.1), which had been at odds over the future direction of the JavaScript language for some time, finally agreed upon the new direction. Brendan Eich, the original creator of JavaScript, broke the news on Wednesday (8/13).

The details of what the new unified specification will look like are far from finalized at this point, but clearly it will be a very scaled back version from the ambitious ECMAScript 4 proposal. Some early results:

  • Packages, namespaces, and early binding from ES 4 are off the table for good.
  • ES 4 classes are being "rephrased": they will now be syntactic sugar for lambda-coding and Object.freeze() (which was proposed in ES 3.1)
  • JavaScript getters and setters are being fast-tracked as part of the new specification.
  • ES 4 let expressions seem to have some general agreement among committee members.

The announcement has sent ripples across the Web. Adobe, which had built ActionScript 3 to closely match anticipated ECMAScript 4 features, has maintained that they will not change AS 3 at all in response to the new direction. Some have speculated that Microsoft's motivation in bucking the ECMAScript 4 standard--and certainly the main factor in why it was abandoned--was political.

Whatever the reasons for abandoning ECMAScript 4, it is certainly clear that JavaScript will now evolve at a much slower pace than some had hoped or anticipated.

YUI 3.0 Preview Release 1

The Yahoo! User Interface development team has released the first preview version of YUI 3.0. According to the team blog, there are 5 goals for the new release: lighter code (in kb), faster code (fewer HTTP requests, more compact code), greater API consistency, more powerful API capability, and more securable code.

What's New?

  • Sandboxing: each YUI instance can now be separated from other instances via YUI.use()
  • Modularity: YUI 3.0 is architected to use smaller, more re-usable modules.
  • Self-completing: With the seed file in place, you can tell YUI what modules you want to use, and it will download them in a single HTTP request.
  • Selectors: Elements can be targeted via CSS selector idioms (much like jQuery)
  • Enhanced Custom Events: Custom Events in YUI 3.0 have been enhanced with support for bubbling, stopping propagation, assigning/preventing default behaviors, among other things.
  • Nodes and NodeLists: You can now reference elements via Node and NodeList facades, allowing a more fluid API.
  • Chaining: YUI is adopting a fluent interface style, using method chaining to achieve greater expressiveness (and compactness)

For those who don't like the jQuery-style fluent interfaces in YUI 3.0, a more explicit/verbose API is still available. YUI 3.0 will not be completely backward compatible with YUI 2.0, but there will be a limited compatibility layer.

You can download the preview release here. A final release is not anticipated until next year.

Auto Resize iFrames - Part 1

Tagged:  

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...

CGLIB 2.2 Becomes Final

Tagged:  

From the "snuck by me department": CGLIB 2.2, which had hovered in beta for a seemingly endless period of time, became final in May of 2008. The brief release notes explain that it contains a patch for a race condition in MethodProxy as well as an upgrade to ASM 3.1. For those who aren't familiar with CGLIB, it is a very lightweight Java library originally created as a faster alternative to java.lang.reflect.Proxy. It has seen use in many well-known projects such as Hibernate, Spring, and more recently Google Guice.

Create Web 2.0 Progress Bars: jQuery, DHTML, JS, CSS, Photoshop

Tagged:  

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

1

HOWTO: PHP and jQuery upload progress bar

2

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.”

3

Progress Bar Plugin

This is a progress bar plugin for jQuery.

4

To read the full post click here.

Continuous scrolling pattern using JavaScript and ASP.NET

Tagged:  

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

continuous scrollingTypically, 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.

Introducing Content Licenses on Google Code

Tagged:  

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 - jQuerry Sliding Puzzle

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.

Syndicate content