jQuery & ASP: creating a "more" button with AJAX (part 2)

As explained in my previous post, today we are going to create the page needed to update our names list, when the "more" button is pressed.

I believe you followed me in the previous article. If not, please read it before continuing, because otherwise you won't understand what I'm writing here.

Creating the more.asp page

As said, we now need to create the more.asp document. In this page we will get the updates for our list and pass them to the AJAX request. The more_updates div will be changed and a new "more" button created, if the end of the recordset is not already reached.

jQuery & ASP: creating a "more" button with AJAX (part 1)

On many web sites, we can see lists of news, updates, notifications and similiar elements with a "more" button. That button will add elements to the list when pressed. I believe you saw something similar, used especially on Social Networks like Facebook or Twitter.

In the following article we will create a "more" button using jQuery and getting the list of elements from a database, using ASP. The project has two ASP pages, one containing the list and the jQuery code (AJAX), and the second with the code needed to update the list.

Let's start building the first page.

ASP: call functions and subroutines

With ASP, one of the main features we do like a lot is the possibility of creating procedures. There are two types of procedures: sub and functions.
Subroutines have a specific syntax:

<%
sub sub_name()
... ...
end sub
%>

and they don't output a result.

On the other hand, functions have the same syntax, but they output a result:

<%
function func_name()
... ...
end function
%>

Let's see how they work!

CSS: word-wrap, how to use it

Word wrap is an almost obscure CSS property. It's rarely used, but it can save your day sometimes. So, to get to the point, which one of the two following boxes do you prefer?

ThisIsAVeryLongTextThatWon'tBreakUnlessForcedToDoSo

ThisIsAVeryLongTextThatWillBreakBecauseWasForcedToDoSo

I bet you prefer the second one. How to do it? Just one line of code! Follow me...

jQuery: embedding videos

Ever wanted to embed a video in your blog or web site? I must admit I don't really like videos on web sites, however I understand that some sites heavily rely on videos. Usually when I open a home page, the presence of multiple videos - starting automatically - makes me go away. But, I do appreciate if an internal page offers the possibility of viewing a short video or animation... on demand.

Anyway, if you need to embed videos in your pages, here is a list of jQuery plugins that might be of some help.

CSS: cross browser gradient (a tutorial)

I've already talked about CSS gradients in the past, but mainly together with other CSS features like box-shadow or border-radius. In the following article we will create only gradients for a simple box... and we are going to make it work for any browser. This time no compatibility issue, then.

The style
This time I will start straight from the code. Afterward I am going to explain how we can customize it, understanding what's behind.

.gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -ms-linear-gradient(top, #444444, #999999);
  background-image: -o-linear-gradient(top, #444444, #999999);
  background-image: linear-gradient(top, #444444, #999999);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
  height: 200px;
  width: 200px;
  color: white
}

The result for the above code will be the following box:

This is the styled div with our gradient.
As you can see, the background has a gradient going from top to bottom, from colour #444444 to color #999999.
Let's now go on with the explanation of the style

Outlook: how to view the content of a pst file

As explained in one of my previous posts, it is highly recomended to perform maintenance on your Exchange Server. Using tools like ExMerge, you can archive old mails or mails for closed mailboxes and thus reduce storage size. But what happens when we need to view the content of the resulting PST file?
First of all, we can always open the PST with Outlook. However we can use a separate tool to achieve that: Outlook PST Viewer.

The software is very simple to use and completely free.

• View PST files without having MS Outlook installed.
• Open & view password protected .pst files without a password.
• View Outlook messages, OLE embedded objects without MAPI or Outlook.
• View PST files with exact email formatting.
• View PST files & restore all its meta data like To, Cc, Bcc, From, Sent & Received date.
• Reads PST files and extracts all MAPI properties.
• View PST files with Internet header.
• Software recovers Rich Text, HTML or Text formatting of emails stored in PST files.

Because it is free, you can always give it a try. Download it here.

Site RSS feed

This is a service quick note.

For those of you that follow The Web Thought using the RSS feed and reading article with some sort of  aggregator, please note that some post (especially those related to CSS styles) might not be viewed with working example. That is due to the fact that RSS feeds don't render styles embedded in the body of the post.

I do apologise for the issue.

In those cases, please view the original article using your browser.

CSS3 and HTML5: Adobe expressive web

I've recently stumbled upon an interesting new web site by Adobe: the expressive web (beta). Launched at the beginning of August, it deals with CSS3 and HTML5 in a new and interesting way.

The site explains in details the new features, in a totally interactive and original way. It uses small coloured cubes, which with effective animations, gather to form shapes, explaining in details the effect of those new features.

The expressive web shows examples, browser support, fall back strategies and resources for CSS3:

• animations;
• gradients;
• media queries;
• shadows;
• transforms;
• transitions;
• web fonts.

As for HTML5:

• audio;
• canvas;
• forms;
• video;
• web storage.

I know it is difficult to imagine, following my explanation, how the site is working. It is definetly better to visit it.

Please remember that the site is still in beta, so it might still have things to be adjusted.

CSS: use CSS3 for columns

In the past, when we wanted to create columns we used a table. Today, CSS3 has a style called column that can do the trick easily. Unfortunately that is not working with Internet Explorer, but in that case, we can use the Columnizer jQuery Plugin. In this post, we will concentrate on the CSS3 rules, while we might talk about Columnizer in the near future.

Multiple columns

To create a rule for columns we use the following style:

.threecol
{
-moz-column-count: 3; /* Firefox */
-webkit-column-count: 3; /* Safari and Chrome */
column-count: 3;
}

An the result will be:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo, felis at vulputate tincidunt, turpis nisl egestas felis, sit amet auctor velit massa quis libero. Fusce tincidunt neque ut mi tincidunt sollicitudin. Mauris sed scelerisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin quis ligula quis velit luctus ullamcorper sed ut est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed egestas urna ac libero sagittis lobortis. Donec sapien nunc, porta at pharetra imperdiet, ornare eget eros. Fusce placerat nisi et libero faucibus ac condimentum nisl lacinia. Donec ut enim non dui tristique tristique sit amet a nunc. Nullam placerat felis a dolor aliquam auctor. Nulla pellentesque sem eu ligula aliquam ut blandit ipsum rhoncus. Integer tincidunt posuere nisi vehicula vulputate. Aenean non metus sit amet leo varius euismod in quis tellus. Pellentesque ut tempus metus.

9/11

...in memory. Lest we forget.

Blogger: make your blog fluid (fit any screen resolution)

As you may have noticed, it's been a few days since The Web Thought has changed its layout. Now it is fluid.

Not knowing exactly how Blogger templates are built, I searched the Internet a bit to find a way to achieve that, and I must say I didn't find much... Everything I found was not really working for me, because it mainly focused on changing widths in pixels, while I wanted to use percentages. Finally, after playing a bit with the Design panel, I managed to make The Web Thought fluid.

I tested it with different browsers and it looks good. Please let me know if you find issues that I'm not aware of.

Let's see how to do it!

Star Trek 45th anniversary

Today, just a small off topic post.

On the 8th of September 1966, the first episode of Star Trek "The man trap" debuted on TV.

I'm a loyal Star Trek fan, and I just wanted to celebrate this 45th anniversary.

Keep on boldly going where no man has gone before!

(Photo: startrek.com)

CSS: Vertical text

Have you ever needed to create a vertical text? Something like:

Vertical Text

It is very simple and straight forward. We can use CSS to achieve that, the only issue we have to consider is compatibility (ah! that is new, isn't it?).

JavaScript: adjust the height of an iframe according to its content

I know that we shouldn't use iframes, but sometimes they are useful or maybe we used them in old pages that we don't really want to completely update for iframes removal. In those cases we might need to make the iframes expand and reduce according to the content. Yet, we don't want to write much code to achieve that. That is the case when JavaScript can lend us an helping hand.

offsetHeight and scrollHeight

In order to reach our goal, we need to use different code: one for Firefox and one for all other browsers. Firefox needs to use offsetHeight which is "a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height." (quoted from MDN). For other browsers we will use scrollHeight which is "a measurement of the height of an element's content including content not visible on the screen due to overflow." (quoted from MDN).

Web Development: The Cult of Done Manifesto

You may already know something about The Cult of Done Manifesto. It was conceived in 2009 by two smart people, Bre Pettis and Kio Stark, and published in Bre Blog. When I first knew about it, I found it enlighting for every day tasks, from big working projects to small daily actions. Because of that, I think that it can be successfully applied  to Web Development and generally to programming.

I've recently read a message by Wil Wheaton on Google+, that reminded me about it, thus I thought I should share it with you. Try to apply your daily programming routine to it and see what comes out.

The Cult of Done Manifesto

1. There are three states of being. Not knowing, action and completion.
2. Accept that everything is a draft. It helps to get it done.
3. There is no editing stage.
4. Pretending you know what you're doing is almost the same as knowing what you are doing, so just accept that you know what you're doing even if you don't and do it.
5. Banish procrastination. If you wait more than a week to get an idea done, abandon it.
6. The point of being done is not to finish but to get other things done.
7. Once you're done you can throw it away.
8. Laugh at perfection. It's boring and keeps you from being done.
9. People without dirty hands are wrong. Doing something makes you right.
10. Failure counts as done. So do mistakes.
11. Destruction is a variant of done.
12. If you have an idea and publish it on the internet, that counts as a ghost of done.
13. Done is the engine of more.