if($(".cform").length!=0){
  $(".cform select option").each(function(){
    if($(this).val() == "groupstart"){
      var label = $(this).text();
      $(this).nextUntil('option[value|="groupend"]')
        .wrapAll("<optgroup label='"+label+"' />");
      $(this).detach();
    }
  });
  $('option[value|="groupend"]').detach();
}

Once you have that code in place, all you need to do is add groupstart and groupend codes to your cforms settings for your select box. For the groupstart you will add it as though it were just another option, with the label being the label you want for your group, and the value being the literal string “groupstart.” For the groupend, it doesn’t matter what the label is, as long as the value is “groupend.” It’s easiest just to use groupend as the label, and leaving the value empty so that CForms will automatically use the label as the value.

Here’s an example of how to form your CForms settings in conjunction with the JQuery code above:

Color#Choose|#Warm Colors|groupstart#red#orange#yellow#groupend#Cool Colors|groupstart#blue#green#purple#groupend#brown#black#white

Which will result in the following:

Let me know if this works as well for you as it did for me.

$j('#mw-panel').addClass('collapsible-nav');
$j('#mw-panel > div.portal').each(function(){if($j.cookie('vector-nav-'+$j(this).attr('id'))=='true'){$j(this).addClass('expanded').find('div.body').show();}else{$j(this).addClass('collapsed');}});
$j('#mw-panel > div.portal > h5').click(function(){$j.cookie('vector-nav-'+$j(this).parent().attr('id'),$j(this).parent().is('.collapsed'));
$j(this).parent().toggleClass('expanded').toggleClass('collapsed').find('div.body').slideToggle('fast');return false;});});
$j(document).ready(function(){if(!wgVectorEnabledModules.collapsibletabs){return true;}

So, I came up with this tiny bookmarklet that I find extremely useful. So I decided to share.

Before you start using it, you need to find your Basecamp ID. When you first run the report I mentioned above, your ID is the 7 digits that appear in the URL after subject_id=. Once you have that, you need to tweak the bookmarklet to contain that ID, otherwise it won’t work. That being said, you can technically create more bookmarklets for everyone/anyone in your company using their ID. If that tickles your fancy.

[added 1/20/2010] You also need to tweak the bookmarklet to contain your domain. Replace “yourdomain” in the url with yours.

So, you have 2 options.

1) Copy this code, create a New Bookmark using your favorite browser, paste it in and edit the ID where it says “YourID,” edit the domain where it says “yourdomain” and then save it:

javascript:void(cd=new%20Date());if(cd){location.href=%22https://<em><strong>yourdomain</strong></em>.basecamphq.com/time_entries/report?subject_id=<em><strong>YourID</strong></em>&from=%22+cd;}

— or —

2) Drag this link to your bookmarks, then edit the bookmark to contain the ID in place of “YourID” and your domain in place of “yourdomain”:

Today’s Time

I hope this helps someone else. Comment below and let me know if you end up using it.

As you can see on this blog, I have an “About Jason Gill” tab in my heading. When clicked, this tab reveals information about who I am by sliding upward. In figuring out how to do this, I of course consulted the Google gods and came up with a lot of people asking how, but few people providing answers. So, I’ve decided to post the solution I finally came up with hoping it will benefit others.

Basically, I am using two different effects to create what looks like one effect. What you are seeing is essentially a slideDown() in conjunction with an animate() effect. The animate() is literally moving the info box upward at the same speed it is sliding down (in my case, “slow”).  I just had to measure the height of the #about_me box and animate it upward exactly that many pixels (in my case it was 171 pixels). To close the box, I simply animate downward at the same rate I slideUp. Technically, I’m using animate in conjunction with slideToggle(), but you get the idea.

You can take a look at my source, but I’ll post the javascript here for your convenience:

$(document).ready(function(){
	var opened = false;
	$("#about_tab").click(function(){
		if(opened){
			$("#about_me").animate({"top": "+=171px"}, "slow");
		}else{
			$("#about_me").animate({"top": "-=171px"}, "slow");
		}
		$("#about_content").slideToggle("slow");
		$("#about_tab .close").toggle();
		opened = opened ? false : true;
	});
});

I managed to come up with a very clean working solution by hacking the controls.js file that comes with scriptaculous. The solutions requires replacing the markPrevious and markNext functions and adding a small line of code to the updateChoices function.

Currently, markPrevious and markNext are telling the page to jump around like that, and I’m not sure why! As far as I can tell (please let me know otherwise) this solution could be included in the scriptaculous without breaking a thing (hint, hint to the scriptaculous team).

To implement the solution, replace:

markPrevious: function() {
 if(this.index > 0) this.index--;
  else this.index = this.entryCount-1;
   this.getEntry(this.index).scrollIntoView(true);
},

markNext: function() {
 if(this.index < this.entryCount-1) this.index++;
  else this.index = 0;
  this.getEntry(this.index).scrollIntoView(false);
},

With:

markPrevious: function() {
 if(this.index > 0) {this.index--;}
 else {
  this.index = this.entryCount-1;
  this.update.scrollTop = this.update.scrollHeight;
 }
 selection = this.getEntry(this.index);
 selection_top = selection.offsetTop;
 if(selection_top < this.update.scrollTop){
  this.update.scrollTop = this.update.scrollTop-selection.offsetHeight;
 }
},

markNext: function() {
 if(this.index < this.entryCount-1) {this.index++;}
 else {
  this.index = 0;
  this.update.scrollTop = 0;
 }
 selection = this.getEntry(this.index);
 selection_bottom = selection.offsetTop+selection.offsetHeight;
 if(selection_bottom > this.update.scrollTop+this.update.offsetHeight){
  this.update.scrollTop = this.update.scrollTop+selection.offsetHeight;
 }
},

Now find the updateChoices function and just after the code this.stopIndicator(); add this.update.scrollTop = 0; so that it looks like this:

this.stopIndicator();
this.update.scrollTop = 0;
this.index = 0;

I’ve tested in FF 2.0.0.4, FF 3.0.5, Chrome 1.0.154.43, Safari 3.2.1, Opera 9.5.1, IE 7.0.5730.13 and IE 6.0.2600 without problems.

I am already using SWFObject to load the flash piece on our homepage to users with a specified version. So I figured I could hack that code a bit in order to pull the version it was already determining for me, and plug it into the Omniture code.

After mulling through the SWFObject code, I finally was able to run this page successfully, which will alert the exact version of flash I am using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript" src="swfobject.js"></script>
</head><body>
<script type="text/javascript">
alert(deconcept.SWFObjectUtil.getPlayerVersion().major+
"."+deconcept.SWFObjectUtil.getPlayerVersion().minor+
"."+deconcept.SWFObjectUtil.getPlayerVersion().rev);
</script>
</body>
</html>

Basically, you can use deconcept.SWFObjectUtil.getPlayerVersion().major to get the major version, etc.

Once I got that working, I was able to use that same concept to plug it into my tracking code.

NOTE: This script is no longer supported in Flash Player 10.

(It was fun while it lasted!)

Let’s face it, there is such a thing as sensitive material on the web. I was recently put to the task of protecting a certain page on our company’s intranet from being redistributed outside the company. In other words, we have a page on the intranet that is so sensitive, upper managment doesn’t want our employees to be capable of sending it to anyone outside the company.

So, I started thinking, what are the ways an average, non-techie employee, could reproduce this information? Since it’s on our password/firewall protected intranet, the risk of someone just emailing the link isn’t an issue. Of course the obvious is that they could copy and paste the text into an email and send it that way. They could also press the Print Screen button and paste a snapshot of the page as an email attachment or whatever.

I decided that beyond more “advanced” measures (like view source then save as), the clipboard was the method most people know how to use. So, the question became “how to disable the clipboard?”

I started tinkering around with JavaScript solutions, attempting to intercept any ctrl+c or PrintScreen commands and over-ride them with a call to write a message to the clipboard: “You’re fired! Pack your things and go home.” which would in turn be pasted into their email if they attempted it. But this was klugy at best. First, JavaScript really needs a form field to have focus in order to fire an onClick type event. I figured the best way around that was to run as an onBlur and onFocus in the <body> tag and just over-ride the clipboard whether they tried to copy or not. This seemed to be a great solution until I realized that for some unknown reason, when you select text and then blur (remove focus) a browser window, it doesn’t actually fire any onBlur commands. Not only that, but it’s a big mess to add anything to the clipboard with Firefox (IE makes it really, really easy). I suppose that Firefox doesn’t make writing to the clipboard easy due to security issues, and I’m not going to complain about any attempt to make my favorite browser more secure.  ;)

Then I remembered an Adobe Flash (that still sounds weird, doesn’t it?) application that I worked on a few years ago that used Flash’s built in clipboard functions. Booya! I cranked up Flash and wrote the following simple and very easy actionscript in the first line of the first frame:

this.onEnterFrame = function(){
System.setClipboard(“As long as this page is open your copy/paste functionality has been disabled.”);
}

(Added 08/28/2007: for the new CS3 use:)

addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(E){

System.setClipboard(“As long as this page is open your copy/paste functionality has been disabled.”);
}

I then set the movie size to 1px wide and 1px high and published. I then placed the Flash somewhere on the sensitive document.

Since I left my movie at the default 12 frames per second, the text “As long as this page is open your copy/paste functionality has been disabled.” will be set on the clipboard 12 times per second. Go ahead, try to beat that time with ctrl+c and then ctrl+v!

As invasive as this method is, it works. As long as that page is open even in the background, it will prevent any copying and pasting and even Print Screen and paste. The only problem is, that it requires Flash v6 or higher, which is required in my company to use many of our Flash based applications. But just in case, I left the following IE only code as a backup:

<body onBlur=’window.clipboardData.setData(“Text”, “As long as this page is open your copy/paste functionality has been disabled.”);’>