Gilluminate » Developer Blog

Using JQuery to reveal using a slide up effect

2009-09-12T21:08:21Z

The slideUp() method in JQuery is intended to hide the element rather than reveal it. It is basically the opposite of slideDown() which “unhides” your element by sliding it down.

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;
	});
});

Force Rails Version When Creating a New App

2009-10-12T17:06:26Z

I have multiple versions of the Rails gem installed on my development server. We’ve been using Rails long enough now that we have many apps created for many versions. As I make changes to each app I need to test them in their specific version (the version listed in the environment.rb file) so having multiple Rails versions installed is a necessity.

But if I try to spin up a new application using

$rails new_app

I get a rails app created specifically for the latest version of Rails installed.

But what if you need to create a new app for an older version of rails that is also installed? The following easy command does the trick:

$rails _1.2.3_ new_app

Where 1.2.3 is the desired version of Rails I want new_app to run. Note the underscores before and after the version.

Titleize an Array List in Rails

2009-09-04T01:03:10Z

First, a trick. If you want to display a comma separated list from an array all you need to do is multiply that array by a comma. “What’s that”, you say? You heard right. If you have an array in the variable @my_array you can simply place the following in your view:

<%= @my_array * ", " %>

The comma and space in your string will be added to the end of every string in your array except for the last one. Beautiful! I love rails.

Now for the reason for my post. While I’ve known this little trick for a while, I came across the need to titleize the outcome because my array contained all lowercase strings and I wanted to diplay them as titles.

It took a little trial and error, but the solution is rather simple:

<%= (@my_array * ", ").titleize %>

To apply the titleize method, you simply wrap your multiplication is parenthesis and add the .titleize as you normally would.

(Note: I still have not upgraded to Rails 2.0, so I cannot guarantee any of this will work in newer versions)

Print Better, Cleaner Reports from Omniture’s SiteCatalyst

2009-03-06T22:59:04Z

If you use the latest version of Omniture’s SiteCatalyst, you are probably aware of how poorly their nice pretty reports translate to PDF, Word, and Excel when you use the “save” tools available right there in the suite. Images get removed, text gets misaligned, and colors get skewed.

Today I devised a nice, quick method for getting a printable report that looks identical to the report you see on your screen. The one downside, no selectable text for copy/paste later. But if that’s your concern, rather than printing, you probably aren’t worried about format as much anyway.

The solution I created involves downloading a FireFox extension called Pdf It! and Omniture’s own print feature.

Once you have Pdf It! installed and your report you wish to print is on the screen, simply click the print icon in SiteCatalyst’s toolbar at the top of your report. This will open a new window with limited browser chrome (toolbars, status bars, etc.) and will load your report without any of the extra navigation at top or left of your report. Basically a nice printable report. Only to print from this screen doesn’t always give the result you desire as browser to printer support isn’t always the greatest. You will still run into issues with missing images, cut off edges, etc.

So, the next thing to do is cancel the print job that automatically appears. Now you are left with just the print window. Right click somewhere in that print window and select Pdf It! > Save as PDF > Whole Page. Pdf It! will open a save dialogue and you can save that page to your desired directory. From here you can simply open that newly created PDF and print. Or if you prefer, attach it in an email to the people who care.

copy/paste deterrent no longer works in Flash Player 10

2009-02-20T01:53:03Z

Thanks to Robert who gave me this bit of information.

Apparently in Flash Player 10 the clipboard can only be invoked by user interaction. My copy/paste deterrent—that I previously blogged about and subsequently became my most popular and most frequently visited post—was based on the idea that the clipboard would be written to several times per second because it was fired in the EnterFrame event. So, needless to say, it will not work in the latest version of the Flash Player Plugin.

Here’s what Adobe has to say about it on their website:

“In Flash Player 9, ActionScript could set data on the system Clipboard at any time. With Flash Player 10, the System.setClipboard() method may be successfully called only through ActionScript that originates from user interaction. This includes actions such as clicking the mouse or using the keyboard. This user interaction requirement also applies to the new ActionScript 3.0 Clipboard.generalClipboard.setData() and Clipboard.generalClipboard.setDataHandler() methods.”

Maybe someone will be able to take my idea and figure out a way to detect “user interaction” outside the 1px by 1px flash file I was using to accomplish the task. Then maybe we can get it working again.

Oh well, it was fun while it lasted!

Adobe CS4 Installation Fail

2009-01-24T04:16:22Z

I’ve spent the past 3 days trying to install Adobe CS4 Web Premium on my home Windows XP computer (as the second install of my license at work). I kept getting an error before anything would install telling me something like “the following programs failed to install” (I forget the exact wording).

Upon checking the Windows System Logs (Event Viewer -> Application), all it would tell me was “Product: Adobe Anchor Service CS4 — Installation operation failed.” With no other explanation.

After spending a bunch of time trying to find the answer with Google and on Adobe’s website, I finally came across the solution. Part of the problem, as I see it, is that CS4 is so new there isn’t much help out there for it yet. In the end, the solution is for CS3 but works beautifully for CS4 as well.

Basically you need to complete 2 simple steps.

1) Download and install the Windows Installer CleanUp Utility here:
http://support.microsoft.com/kb/290301

2) Download, unzip, and run the Adobe Windows CS3 Cleanup Script (which relies on the Windows program mentioned above to run) here:
http://www.adobe.com/support/contact/cs3clean.html

I only had to run level 1 of the cleanup script to make it work.

As I said before, even though the Cleanup Script says it’s for CS3, it did work for me in installing CS4 as well.

Scriptaculous Autocomplete Page Jump Using Arrow Keys

2009-09-04T01:06:00Z

When you use overflow:auto in your css in conjunction with Scriptaculous’ Autocomplete, there is a bug that makes the entire page jump around when you use the arrow keys on your keyboard to navigate up and down through the suggestion list. This bug normally appears only when the page itself is long enough to require a scroll bar.

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.

IE6 Empty Div spacing issue

2009-09-04T01:29:07Z

It has become fairly common practice to use CSS to fill the contents of an empty DIV tag. For example, I’m working on a project now that uses the following DIV:

<div id="main_nav_top_shadow"></div>

And with CSS I’m giving that div a fixed height and a repeating background image that creates the appearance of a shadow being cast upward on top of my main nav.

#main_nav_top_shadow {
height: 6px;
background-image: url(../images/main_nav_top_shadow_x.gif);
background-repeat: repeat-x;
}

The problem is that IE6 thinks that the empty space consists of text. Empty text, but text nonetheless. So what happens is that whatever the default font size for that particular DIV becomes the height of the DIV, rather than my specified height: 6px; in the CSS. There are 2 fixes for this problem, one of which I’ve been using forever and another I just stumbled upon and which prompted me posting both solutions. Both are fairly easy.

Solution #1
This solution is the one I’ve been using forever. Basically, you just choose a font size that’s smaller than the height you are setting.

#main_nav_top_shadow {
height: 6px;
<strong>font-size: 1px;</strong>
background-image: url(../images/main_nav_top_shadow_x.gif);
background-repeat: repeat-x;
}

That usually does the trick. But this has always seemed wrong. I can’t say why, it just feels weird. Maybe it’s the fact that I’m setting a font size for no text at all.

Solution #2
This solution I found this week and actually makes more sense to me. It involves using simple HTML comments. And not the [if IE] stuff either. Just a plain simple comment:

<div id="main_nav_top_shadow"><!--Leave this empty--></div>

It does not matter what text you put in there. It’s not any command to the browser or anything. But it works, by darn! I guess IE6 feels more comfortable not having anything in that div, as long as you put a comment there.

Not only does that work, but it is the right thing to do. After all, the next guy to come along and read your code might see an empty DIV and be tempted to remove it because it contains no content. This way you can leave some nice little message pleading the proverbial programmer to leave well enough alone!

SVN batch commands for adding or deleting multiple files (Linux)

2009-09-04T03:48:20Z

Here are a few little hints that may help speed up your SVN workflow if you are using SVN in a Linux environment. I found the first one on Snipplr and used that to create the second one for myself.

Deleting multiple missing files (ie. the ones with a “!” next to them):
svn delete $( svn status | sed -e '/^!/!d' -e 's/^!//' )
Adding multiple new files (ie. the ones with a “?” next to them):
svn add $( svn status | sed -e '/^?/!d' -e 's/^?//' )

Google is spying on me…sweet!

2008-09-26T21:38:56Z

I just pushed a new redesign for our corporate website CHG Healthcare and less than an hour later found out that the new pages that never existed before were already indexed by Google and were showing up in the rankings.

I had not yet added the new pages to my sitemap.xml. I had not yet created 301 redirects from the old content.

Not only that, but a quick look into Google’s Webmaster tools told me that the last time the spiders had been there was 4 days ago.

So how did Google know to index these new pages? My suspicion is Google Chrome. I suppose someone somewhere (probably those of us inside the company testing the pages) accessed the new site with Google Chrome and that somehow triggered Google’s indexing service to grab the new content. While this might seem a bit scary to the Chrome user, it makes my job a lot easier of getting new content indexed and I welcome the notion.

That is, assuming my hunch is correct. Anyone heard if Chrome is doing this? What about the Google Toolbar?