Using Google Sites to create a useful small-business intranet

I own Western Ascent Inc. - a small web-developement company located in Fort Collins, CO.

Today I read the news that JotSpot had been relaunched under Google Sites and saw that the Google Apps and Docs were able to be embedded into the web pages.

I have already switched our email to gmail via Google Apps, and wondered what useful tool I could cobble together using Google Sites. When I saw the fact that you can embed forms from Google Docs into pages on Google Sites, and limit site access to members of your domain, I thought I would put together a little time-tracking application to test an idea I had.

I have been using Base Camp for quite a while now to manage projects and track time for our small team of developers and designers. It is generally useful, but I am not in love with it - meaning that if I find an adequate replacement for less money (or free) I will happily move on.

So far, I think my time-tracker is working well and I can see how the sites and access control can allow me to create "extranets" for client projects that will allow us to share files and ideas with clients - which, along with time tracking - is our primary use for Base Camp.

I will try and put together a quick tutorial of how I created our little intranet and how I made a form that all our employees are already using to track time on projects.

Drupal 6 on 1and1.com

I successfully installed Drupal 6 today on a 1and1.com shared hosting plan.

I created the MySQL db (mySQL Version 5) and uploaded the files for the site to a folder that was alone on a subdomain.

I hit the site, the first step asked me to select a language. The next screen gave me an error saying that register_globals needed to be disabled.

I checked .htaccess in the root and for php 5 register_globals was set to 0.

After trying a handful of different things, all I needed to do was create a file called php.ini and add it to the root of the site. It only has 1 line of text:

register_globals = off

I found this on a Drupal.org comment here.

hopefully this saves at least one other person some grief.

2008.03.03 UPDATE: I kept running out of memory so I added the following line to php.ini:
memory_limit = 40M

I don't have a good reason to pick 40M, it seems to be running fine now though.

Jumpy scrolling in Flex 3 application

We've been beating our heads against the wall at work trying to fix an extremely irritating bug in a flex project we're working on.

The scenario was that we had a canvas with a background image, that would scroll when it exceeded the length of its container (a VBox in our scenario).

If we add the background image inline using the backgroundimage property, with a background size of 100%, then started scrolling over our content, suddenly the scroll behavior would become erratic and jumpy.

It was strange, because when we grab the drag handle, and stay over the "track" of the scroll area, it worked fine. Also, if we moved our cursor outside the container and kept dragging it worked fine. Finally, if we were dragging and went over a container INSIDE the jumpy canvas it would scroll normally.

What fixed the issue was taking the backgroundimage property off the canvas, giving the canvas a stylename, then in the mxml document added a style block and defined the backgroundImage property with a value of Embed("imageName.png").

This immediately stopped the jumpy-ness and it works great.

ASP.NET UpdatePanel, Ajax, and jQuery problems and solution

I am finishing work on an eCommerce application and there is some AJAX functionality that I had to add to several of the pages.

Prior to this, I was adding some behaviors to elements of the page using jQuery's ready function:

// inside my script.js file
jQuery(function($) {
$(document).ready(function(){
   // code here
}});

I added several UpdatePanels that were being updated by some AJAX calls. Everything seemed to work great, until I noticed that once any of the AJAX updated the UpdatePanel that all the behaviours I was setting up using jQuery were gone!!

I spent a while digging around and found a comment by "gt1329a" here:
http://forums.asp.net/p/1189519/2039138.aspx#2039138

In his/her comment they mention that "pageLoad fires after every partial postback" - which was essentially resetting the page without re-initializing the jQuery $(document).ready()...

So to clarify his/her "quick and dirty solution", I modified the code so it looks like this:

// inside my script.js file
/* // sorry jQuery
jQuery(function($) {
$(document).ready(function(){ */

function pageLoad()
{
   // code here
}

/*}});*/

I have some concerns about doing this, but being a pragmatist, I am satisfied with the result. The AJAX calls all work, and all the behaviors I need to add into the page are functioning as expected.

Please comment if this post is helpful.

Another day lost due to Internet Explorer 7. Thanks IE.

I've had to find this solution twice, and both times it has cost me dearly - so I am posting here for as much my benefit as anyone else's.

Scenario: Calling a JavaScript function from within Flash using ExernalInterface when Flash is in a form.
Problem: IE7 throws an error when we call ExternalInterface. The error says "player is not defined" - "player" is the id I use for my flash object.
Reason: Apparently, IE can't find an object by ID within the DOM if that object is within a form.
Solution: At the end of the javascript that I use to write out the flash tags, I put this line of code:
player = document.getElementById('player');

Here is a better explanation and the solution (see the comment by IsaacTheIceMan from 19 Oct 2007)

DotNetNuke, jquery.js and interface.js bugs and resolutions

I'm building a new DotNetNuke site that has all sorts of slick ajax-y stuff going on in the interface. I ran into some problems with prototype.js and scriptaculous early on so I opted to use jQuery.js and interface.js.

I develop primarily in Firefox 2.x and check code in IE after the fact.

I was making use of 2 interface objects: Slider and Resizable

Everything was looking great in both major browsers until I logged into IE and got an alert saying "Internet Explorer cannot open the Internet site http://localhost/dnn455/

Operation Aborted" - then the page went to a default IE error page.

bummer.

I was able to fix this by editing idrag.js (from the interface library) and changing the following 2 lines:
jQuery('body',document).append('

');
jQuery('body', document).append(jQuery.iDrag.helper.get(0));

in both cases I changed jQuery('body', document) to jQuery('#wrapper') and this cleared the problem up right away. This is consistent with some posts I've seen around the web related to appending directly to the body in IE if certain conditions are true.

In my example, #wrapper is a the ID of a div immediately inside the body and everything goes inside it.

The second problem I ran into was with Resizable objects.

I was getting an error in IE when I assigned a handler: "Object does not support this property or method"

The quick fix was to change this line in iresizable.js in the interface library:
handle = jQuery(el.resizeOptions.handlers[i])

to

var handle = jQuery(el.resizeOptions.handlers[i])

I changed is later so I declare a variable outside the "for (i in el.resizeOptions.handlers) {" loop and reuse it within the loop.

In both cases the results were great and now I can use jquery.js and specific elements within interface.js. I am only using the specific libraries that I need rather than including all of interface.js.

Please comment if this is helpful.

DNN 4.05.05
jquery 1.1.2 (there are more current versions but i was having some trouble with interface compatibility)
interface 1.2

IE6 bug with semitransparent png background and nested links not working

So I had a div that had a tall, wide semi-transparent png as the background image.

Inside this div I had an absolutely positioned link.

Since IE 6 cannot display semitransparent png's as background using the CSS "background-image" property, I had to use the IE-specific "filter:" property.

For those of you unaware, the style declaration looks like this:


.semitransparent {
position:relative;
background-image:url(transparent.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='transparent.png');
}

.semitransparent a
{
position:absolute;
left:20px;
top: 20px;
}


For a quick explanation, the background-image works fine in all other modern browsers with a semi-transparent png file - BUT NOT IE! - the underscore before the next line is a hack that only IE sees, so it renders the background-image:none in IE. "filter" is ignored by other browsers, but I hate this problem so much I don't even want to declare it correctly, so I used "_filter:..." for IE.

A side note is that apparently in IE 5.x if you don't comma-separate the values in parenthesis after "AlphaImageLoader" the background-image won't work. I don't normally care about IE 5.x since if people are still using those browsers the internet looks like crap to them anyhow. (I don't like IE by the way, in case you were wondering)

So after hacking all this together for IE, I went to my page in Firefox, clicked the link and everything looked great. I went to the page in IE and everything looked great until I tried to click the link. There was no cursor when I rolled over the link, and the link did nothing when I clicked it. I tried a few things (including adding cursor:pointer to the style) and nothing seemed to work.

After much Googling, the solution came from the comments on this page:
http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217.

Here's what I had to do: I changed the position to static on the div, then the link worked fine, but the positioning no longer worked. SO I added another div inside the first div, gave it a position of "relative" and everything worked fine.

Here's the CSS:

.semitransparent {
position:static;
background-image:url(transparent.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='transparent.png');
}

.semitransparent div
{
position:relative;
}

.semitransparent a
{
position:absolute;
left:20px;
top: 20px;
}


Here's the simplified HTML:


<div class="semitransparent">
<div>
<a href="#">Blah<a>
</div>
</div>


I hope this saves someone else from some grief.

** one last note is that some folks found that by changing the size of the background png file the links started working in IE (you can read that on the page I linked to above) - but in my case I had a large png to begin with, so this wasn't an option. I get so frustrated with IE...**