Devit!

After reading iHostage comment numberOfMonths: [3, 1] I realized that the jQuery UI Team had in fact provided a mechanism for showing multiple months vertically; the documentation just didn’t immediately convey that to me

Specifying numberOfMonths: [3,1] will show 3 months in 1 column (verically).

Thanks jQuery UI Team for such awesome controls and iHostage for letting me know about my oversight

The jQuery UI Datepicker is an awesome tool, but I discovered recently that it lacks a feature that I needed…showing multiple months vertically.

I decided to see if I could bend it to my will using CSS and some JavaScript. Using Firebug I was able to figure out what styles needed to be overridden and was able to get the result I was after. I give the jQuery and jQuery UI teams a lot of credit for writing VERY flexible libraries!

I created the datepicker on a div so it would display inline rather than requiring a click on an input control. Here’s my setup:

JavaScript

CSS

You may need to do some additional tweaking depending on how you’re using the Datepicker, but showing months vertically is definitely possible

The calendar icon tab is a custom div that I added to toggle showing the Datepicker control; it’s not related to the jQuery UI Datepicker

Sometimes when writing Stored Procedures we need to store the return value from a Dynamic SQL Statement in a variable for use later on in the Stored Proc. sp_executesql is the tool for the job.

Lets say for example that we need to store an ID value from a table whose value is dynamic.


DECLARE @tableName VARCHAR(30)
DECLARE @ID UNIQUEIDENTIFIER


/* the query executed by sp_executesql must be ntext/nchar/nvarchar */
DECLARE @query NVARCHAR(1000)

SET @tableName = 'MyTable'
SET @query = N'SELECT @IDout = TableId FROM ' + @tableName + ' WHERE SomeValue = 1'

EXEC @query, N'@IDout UNIQUEIDENTIFIER OUTPUT', @IDout = @ID OUTPUT

SELECT @ID

/* @ID now holds the return value from our dynamic statement and can be used throughout the rest of our proc */

If you take a tour over to google or any other search engine to try and find the best way to filter a SharePoint list you will find many results that only provide partial success.  If you want to accomplish the following then this walk through is for you.

• filter a SharePoint list (using a TextBox)
• filter multiple columns
• only show a limited number of results on the page, however still have the filter apply to the whole list

Let’s do this – step by step instructions:

1. Go to your List
2. Select Settings -> List Settings
3. Create view
   1. Select your default view (will be listed under “Start from an existing view”)
   2. Call it Filtered[ListName] (Ex: FilteredCompanies)
   3. If desired make this the default view (CheckBox below View Name)
   4. Click OK
4. Go back to List Settings
5. Create Column -> Call it FilteredCompany (or something logical)
   1. Select Calculated
   2. In the Formula box add an = to start and then add every column that you want to search with a &”#”& in between. The “#” plays an important role!
   3. Uncheck “Add to default view” at the bottom
   4. Click OK
6. Open the site in Microsoft Office SharePoint Designer
7. Go to Lists
8. Go to your List (Ex: Companies)
9. Open FilteredCompanies.aspx (or whatever you called your new list)
10. Above your list add a ASP.NET TextBox to the page
    <asp:TextBox runat=”server” id=”txtSearch” AutoPostBack=”true” CausesValidation=”false”></asp:TextBox>
11. Select the list (Design View)
12. Right Click -> Select “Convert to XSLT Data View”
13. Click “Filter” on the menu that pops up.
    1. Select your new Column (Ex:FilteredCompany)
    2. Set Comparison to “Contains”
    3. For Value go to the bottom and select “Create a new parameter…”
    4. On the right hand side set “Parameter Source:” to Control
    5. On the right hand side set “Control ID:” to txtSearch (note: you may see some blank values – just scroll down)
    6. On the right hand side set # as the “Default Value”
       Note: This is done so if we have no search value we still get all of the results back!
    7. Click OK
    8. Click OK once more
14. Save the page
15. Success!

I hope this saves you both some time, energy and frustration.  Sometimes SharePoint is amazing and other times you’ll find that a simple functionality change can be a nightmare.

Please let me know if you have any other tips or if you’re having any issues getting this working.

Good luck,

Recently we needed to read an argument into a view so we could provide a more customized view when content was being displayed.  After some research and testing we got things working although must of the online resources we could find only had a piece of the puzzle.  Basically we’re looking at a five step simple process to get a view to read an argument from the URL.  For the purpose of this blog post I will be looking in the URL for 1 to many Taxonomy: Term IDs.

Step 1:

• Edit your block (the block that your view has created)
• Under “Page specific visibility settings” put a new line under the existing entry with “mypage/*”
• Now your block will still load when you pass additional URL parameters

Step 2:

• Go to your existing view
• Add a new Argument – “Taxonomy: Term ID” <– you could add a different argument here to meet your needs
• Select only the checkbox “Allow multiple arguments to work together.”
• Save your changes

Step 3:

• Now adjust the argument under “Action to take if argument is  not present” and select “Provide default argument”
• Now select “PHP Code” and paste the following code:

$path = drupal_get_path_alias( $_GET["q"]);
$path = explode("/", $path);
$retval = "";
for ($i = 0; $i < sizeof($path); $i++)
{
     if ($i > 0)
     {
          if (strlen($retval) > 0) { $retval .= '+'; }
          $retval .= $path[$i];
     }
}
if (strlen($retval) == 0) { $retval = 0; }
return $retval;

Step 4:

• Change the drop down on your view under “Action to take if argument does not validate” = “Display all values”
• Save your changes

Step 5:

• Success!

This should hopefully keep things moving for you whenever you need to read in a value on a view that exists on a page as a block.

Good luck!

Recently we discovered a interesting issue with SharePoint that will cause you copious amounts of grief if your not aware of this ‘functionality’.

What you may be experiencing:

• my site seems to have broken permissions
• administrator can’t make changes
• I can’t seem to restore a copy of my site
• nothing is working properly and there’s no errors in any log files

What is going on?

Basically your site has been locked. What!?! To fix this issue just take a peak below at “How can this be fixed?”.

What caused this?

A new feature in service pack 2 for Windows SharePoint Services (WSS 3.0) by default locks & unlocks your site when backups are performed.  The problem is if anything fails your site will remain locked.  This is in essence a good feature unfortunately there’s no obvious log or indications anywhere.  A giant red banner on the administration site would be a simple and effective way to bring attention to this ‘feature’ so anyone trying to get things working again has some direction.  Additionally the site lock feature when auto enabled or left on by the system should provide a clear list of the reasons this might occur so any individual monitoring a SharePoint site knows what to look for.

One of the following issues may be the cause to this ‘feature’ kicking in:

• backup failed (as of Service Pack 2)
• restore failed
• there’s more reasons – feel free to add the in the comments!

As of service pack 2 for Windows Sharepoint Services 3.0 (WSS 3.0) if your nightly backup fails your site will be locked!  In some cases you will see no errors in any logs and have no indication (depending where the backup failure occurred) that anything has failed.  In the instance we ran into the backup successfully completed but failed to exit causing the site to remain locked with no error messages.

How can this be fixed?

To get the system back into a normal state simply follow these steps:

• open Central Administration on your server
• select “Application Management”
• under “SharePoint Site Management” select “Site collection quotas and locks”
• using the drop down titled “Site Collection” move through each site and check the “Lock status for this site”
• change the offending site(s) to “Not locked” and click ok
• Success!

Additionally if you’d like your site to remain in a normal state if a backup fails then you can adjust your backup script to include the following setting “-nositelock” when using stsadm.

Please let us know if you have any other tips or tricks related to these issues.

Adding a diagonal ribbon to a thumbnail is easy with PHP and GD. You may be able to accomplish this task with CSS3, but the result can be a little buggy (strange wiggles on mousover), and it currently is not consistent across browsers. You can create dynamic images in PHP using GD functionality.

The Ribbon Base Image

The ribbon base image that I use is not a transparent PNG – rather, behind the red banner I have a pink background. In PHP we will tell GD to interpret pink as transparent so that our edges are smooth. Feel free to use this image for your own purposes.

Using GD to Add Text

This file will take the base image and place white text over it. Now we can treat this file as an image, and include it in our CSS or image tags. Note that this file refers to arial.ttf – this font file (or whatever TTF font file you decide to use) must be in the same directory as ribbon.php. You can find arial.ttf in your computer’s fonts directory.

Usage

The important part here is the background-image. Notice how the text we want is in the query string of ribbon.php.

Styling and Position

This will place the ribbon in the lower right corner, above the image.

Questions, comments or optimizations? Let us know in the comments.

IE 6.x has long been the bane of any sane web developer. Many, many hours are spent making otherwise perfectly healthy website implementations work in this broken, and terribly outdated browser.

IE 6.x is continuing to experience a decline in usage; Google (and Google owned YouTube) have already discontinued support for the browser.

We are jumping on the bandwagon. By default, rtraction quotes will no longer include IE 6.0 support in quotes, RFP responses, etc. We will still include IE 6.0 support as an optional line item.

Here is what this means to our clients:

1. The average cost of our website implementations will drop significantly, especially for basic content management systems. It’s actually scary to analyse how much time has gone into IE 6.x support over the years. Now we’ll have that time to spend on other, more innovative things.
2. Websites built/quoted before this announcement will continue to support IE 6.x. Additionally, for our public sector friends support is still available for those sites that are required to have backwards capability.
3. Our developers will be happier. I am expecting a parade, or some equally elaborate celebration now that this announcement is formally made.

As always, if you have any comments, complaints, etc please comment below or drop me a line directly – email hidden; JavaScript is required.

I recently had the opportunity to make use of CSS3 transformations to achieve a 3D effect in a practical application.

If you’re a web developer reading this, you know that something like this doesn’t happen every day, and is therefore very exciting!

The main requirement for the project was to display a 3D isometric floorplan of the Convergence Centre at Western University in London Ontario, with tweeps showing up in the room they are tweeting from.

Each room is a <div class=”users”> that can contain <div class=”avatar”> as many times as needed. Transparent GIF’s are used as background images for the character’s body, head, torso and legs.

<div id="bar" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>
<div id="maple" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>

For development purposes, we put a thick red border around the rooms.
As we add more avatars to a room, we’ll adjust their margins so that characters squeeze closer together and the room will not overflow.
Avatars are floated right so they stack nicely – closer ones will overlap farther avatars.

.users {
	border: 4px dashed red;
	position: absolute;
}
.users .avatar {
	height: 44px;
	width: 33px;
	float: right;
	margin: 17px;
	position: relative;
}
.head, .torso, .legs {
	position: absolute;
	top: 0;
	left: 0;
	height: 44px;
	width: 33px;
}

Adding CSS3 transformations, we can skew the room divs to match the shape of the rooms in the background image.
The side-effect of this is that the avatars inside will also be skewed.
The CSS below will affect Mozilla and Webkit-based browsers only.

.users {
	border: 4px dashed red;
	position: absolute;
	-moz-transform: skewX(45deg) skewY(-12deg);
	-webkit-transform: skewX(45deg) skewY(-12deg);
}

Now we have to put an opposite skew on the avatars to cancel out the room skew.

.users .avatar {
	-moz-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
	-webkit-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
}

All that’s left is to remove the red border around the rooms!

If you have any questions or comments about using CSS3 to achieve a 3D effect, or if you want to show off your own 3D CSS3 project, we’d love to hear from you!

There have been a couple of high profile announcements about government institutions using open source products in place of proprietary systems.

One of the biggest announcement came from the White House and they have released some great new modules for Drupal.  All three modules work well to fill noticeable voids and provide a better browsing experience. One module, “Context HTTP Headers”, allows developers or system administrators to customize caching for pages based on type.  This means is that you can have your news pages cached for five minutes on a high traffic website and have your ’standard content pages’ such as About Us cached for sixty minutes.  Another module release is called Akamai and helps target scalability as well by enabling integration into a their Content Delivery Network. Another module called GovDelivery makes it a lot easier to send out tailored emails to the governments email list.

The White House also released one of the most desired modules for any developer who is working hard to build accessibility complaint websites. Dubbed “Node Embed” the module helps deliver rich content (photos and videos) with all of the appropriate meta data that makes them fully accessible by screen reading software.

The Bank of Canada has also made some contributions back to the open source community. They released three WordPress plugins that were developed for their website.  The AJAX Scroll plugin adds a graceful fade in and fade out for next/previous links when a user is navigating content.  Another recently releases plugin is called PBox and it allows a developer to create custom content widgets and standardize the display of the content within them.  This is very useful as it helps ensure all information will have the same look and feel across a site.

The Bank of Canada has also released a WordPress plugin that helps remove the handcuff’s when it comes to widgets and customizing them.  The plugin called XWidgets allows for a page-by-page customization of any widget which means you can have a news feed or any type of widget customized to fit any specific pages layout or design needs.  This means you can easily have your about us page display a Flickr feed and the same widget could display a twitter feed on your contact us page.

All these announcements are great news for all types of internet users, from casual surfers, to content producers and developers. Its great to see political offices getting on board with open source and we hope that this is just the start to many more contributions from all levels of government.

What online government features would you like to see made available to the general public?

Here are the entrants in our Geeky T-Shirt Contest – we’ve included a few honourable mentions as well.

You can vote once a day – voting closes at noon EST April 30th, 2010.

Honourable Mentions (didn’t come to the office)

Left to right: Mike Batista, Jason Clarke and Jodi Simpson