For a while now I have been writing about how to create a Side Scrolling Page Effect similar to the one that is seen on Panic’s Coda site. I have built the effect using 3 different frameworks and I have found that each framework has its own pluses and minuses, but in the end I decided to build a more robust solution using Scriptaculous (you can see why in the conclusion section of the MooTools article).

Today I am rounding out the series with the posting of that robust solution. Basically this is my take on that effect and what I implemented for my client. How the basic effect is achieved is covered in the other articles, so today’s goal is to explain what takes it from a simple demo to a fully functioning, cross-browser compatible website. At the end of the article I will, as usual, have a link to where you can download all the code used in the demo.

Read the rest of this entry »

So my most recent client needs a CMS system. There are a million out there, but the problem is my client is a complete Microsoft shop so I had to write the page in ASP.NET. That changes the game a lot. Unless you want to pay some serious cash, the choices for a CMS system are slim.

That isn’t to say there aren’t some free ones out there because there are. I uncovered two during my search (AxCMS and umbraco). I didn’t delve very far into either of these because it was shortly my client and I discussed the CMS system that we decided to make the page have a side scrolling page effect.

When you create a page that has a slick effect you basically throw out any packaged software because inevitably it won’t fit in with the effect. So that is how I came to build my own CMS system. Now I use that term lightly because compared to something like Wordpress, mine is rather weak.

However, it does what it was designed to do…save pages. It could easily be enhanced to allow things such as creating completely new pages, deleting pages, etc, but my client didn’t need that functionality so I didn’t build it for this version, but perhaps I will in the future.

So the point of this article is to go through the steps I took to make it work (here is the final result).
It turned out to be a lot more difficult than I originally anticipated. Part of that was just the learning curve, and part of it was wrestling ASP.NET Ajax to the ground. In the end though, I am pretty proud of my first version of my CMS.

Read the rest of this entry »

Over the past few days I have been going over how to build a side scrolling page effect using various frameworks.

The first day I went over the basics of the effect and how to implement it using ASP.NET Ajax.
Yesterday I went over how to create the effect using scriptaculous.

Today the goal is to tackle MooTools and see how it stacks up in comparison to the other frameworks. Read the rest of this entry »

Yesterday I began a series on creating a Side Scrolling Page. If you missed it feel free to check out part one to get a feel for what we are building, and how it works with the ASP.NET Ajax framework.

Today the goal is to tackle the same effect using the script.aculo.us framework. If you have never heard of this one, it is basically a friendly implementation of the Prototype framework (confused yet?). It has a lot of neat effects and AJAX features and is pretty darn easy to use. Good stuff.

Read the rest of this entry »

When I was building my portfolio page a few weeks ago, I came up with an idea for a side-scrolling page. The idea is basically, you click on an arrow and the content slides to the left or right. Cool idea, but I couldn’t wrap my head around how to get the CSS to work.

Shortly after I figured out how to get it all to work I learned that my unique idea wasn’t all that unique after all. Its still a great effect, and over the last few days I have seen a lot of people asking how to do it on various forums so it makes for a good tutorial.

When I originally started this article I was planning on using just the ASP.NET Ajax framework because that is what I was using for my latest project. However, once I got it up and running I was a bit disappointed in the performance of the animation. That is when I began hunting for another way to do it. By the end of my search I had delved in and created a side scroller using 3 different frameworks: ASP.NET Ajax, scriptaculous, and MooTools. All of them “get the job done”, but I learned that each have their own advantages and disadvantages.

Over the next few days I will be going over these different frameworks and explaining what I liked and didn’t like about each one. Each will have their own demo so you can see how the finished app looks and feels, and in the end I will include a link on where you can download all the pages I made for the demos. Read the rest of this entry »

The good folks at Warpspire have spent a few days with the YUI and they (or rather he) was not all that impressed.

I have written about the Yahoo Interface Library in the past so I was interested in what he had to say about it.

Overall, I think Kyle gives a thoughtful argument and it definitely appears that he has gone more in depth with the framework than I have. However, in his review he gives the YUI a serious kick in the nuts. And while I am usually for a swift nut kickin’ when it is called for, I didn’t think it was warranted here.

In my experience, the YUI has always been a pretty cool framework to work with, so in an effort to stand up for it, I decided to “critique the critique”.

So here is my take on his take… Read the rest of this entry »

Here I was minding my own business wandering around the web when BAM! Ajaxian smacks me with a new framework called Responder. Since I love me some frameworks, I had to go and see what this one was all about.

Basically Responder a javascript framework that is a very clean way to develop things like an in place editor. It combines everyday HTML, CSS, and custom javascript to enable you to do things on the page. When you see the demo on the link at the top you will get a feel for what I am talking about. It just feels…clean.

Not the most technical way of describing it…here is a better description from the author:

Responder aims to help you be more productive in front-end programming that shares in the same kind of ‘good design’ practices that we expect on the back-end; in the same way that we think about models, templates and controllers when writing a web application, we need to have an effective and consistent path to follow when building the user interface.

The author hooks it into Ruby on Rails, but since it is pure javascript, it can be used with any server-side language like PHP, or .NET.

Definitely something I would like to try out on my next project. Let me know if you give it a whirl.

So on the site I am working on, I need some popups. I have used Lightbox before and it works wonderfully, but I wanted to try something new this time. Since I was already knee-deep in the ASP.NET Ajax framework, I figured I might as well try their ModalPopupExtender and see how that works.

Its pretty simple to get a popup to show up, but I wanted something a little prettier than the standard format of a big rectangle. Maybe some rounded corners? As it just so happens…there is a RoundedCornersExtender in the toolkit. So I figured if I put those two together I would get one sexy popup. It wasn’t quite that simple…

Read the rest of this entry »

So I am building a new site (which I will talk about in detail in a later article), and as usual, I wanted to play around with some stuff I haven’t seen before.

So the tool of choice this time was the Microsoft ASP.NET Ajax AnimationExtender. Now, unlike the other extenders I have talked about, the AnimationExtender (or AEx as I will call it from now on) is not just a control that you flop down on your page and you are done.

Instead, the AEx is kinda like a framework that you can play with. The only problem is the documentation seems to be written for people who already know how to use it. Because the Ajax Toolkit is an add-on to Visual Studio rather than an integrated part, the documentation is a bit light. What I really would have liked was a basic overview on the tool and how it works. Just something to give me a push in the right direction. Since I couldn’t find that anywhere, and I know that there are a lot of people who are itchin’ to give this thing a try, I figured I could write the overview I couldn’t find.

Read the rest of this entry »

Yesterday, I began talking about the ASP.NET AJAX framework and went over the basics of the UpdatePanel. If you are simply wanting a “no refreshing” website, then that is basically all you need to know.

However, if you are wanting to use some of the cool client enriching doodads like animation, accordions or draggable lists, then you need to employ the Toolkit. That is the subject of today’s article.

Oops
Before I go into the meat of today’s article, I want to correct an oversight from yesterday. I forgot to mention an important piece of the whole ajax.net puzzle and that is the ScriptManager. In order for any of the new ajax enabled .NET controls to work you have to start the page out with this:

<asp :ScriptManager ID="IDGoesHere" runat="server" />

Basically, this is how you tell .NET to load up the javascript files that run things behind the scenes. Simple, but important. Ok…on with the show.

Read the rest of this entry »