Archive for the 'Tips' Category




Script Include Sans “HTTP”

Author: TheHahn
April 20, 2010

So according to the Facebook tracking guide the URL recommended for including the tracking script is: //ah8.facebook.com/js/conversions/tracking.js

This is potentially a very convenient way to include a script regardless of SSL (http vs https), which will cause an alert or warning on computers with common settings. Unfortunately, this method does not work in Chrome. IE6 and FF3 will redirect to the appropriate full path with http(s). Chrome will assume the link is a relative local file, adding the prefix “file://”.

I assumed this was a typo, but the implementation guide is very deliberate in the “http” omission. I was surprised to find this works in some browsers and I wish it was a great revelation, however it is entirely impractical.



Credit Card Autocomplete

Author: TheHahn
August 21, 2009

When working on a shared computer, there is a lot of risk involved with personal data. For example, buying something online with a credit card. Best practice is to clear all saved data from the computer as one logs off. However, I am not convinced a majority of users know / remember to do so. The first idea that comes to a developer’s mind is to leverage the “autocomplete” attribute of form fields. Unfortunately, this does nothing other than prevent the auto-complete from appearing, not the browser from storing data; I would consider the auto-complete attribute worse than not, as it provides a false sense of security. The solution I’m thinking of is a small hack.

Correct me if I am wrong [andrew.hahn@peaksystems.com], but browsers do not store hidden form field data, only fields of input type “text”. My testing suggests that it does not.

So, the proposed hack is to create two forms. One form contains a dummy text field that will not be submit.

<form><input type="text" id="CCN_prop" /></form>

The second form will be actually submit. It will contain a hidden input and a submit button. When the submit button is pressed, javascript will update the hidden field (CCN) with the value from the dummy field (CCN_prop).
<form method="post" onsubmit="
    $('#CCN').val($('#CCN_prop').val());">
  <input type="hidden" name="CCN" id="CCN" />
  <input type="submit" />
</form>



Horizontal Scroll

Author: TheHahn
August 7, 2009

For some reason I haven’t seen many examples of a horizontal scrolling div. These are commonly used for image slideshows (we have a number of photography clients).

CSS:
div {
width:380px;
height:80px;
padding: 15px 0 30px 0;
overflow-x:auto;
white-space:nowrap;
}

By default, img tags are display:inline, so you need only something like this:
<div>
  <img />
  <img />
  <img />
</div>



Dreamweaver code on black

Author: TheHahn
June 23, 2009

Your poor peepers. Too much white all day long. Not only should you do this, you should use Blackle instead of regular Google to save on energy (alternatively, you can use iGoogle and just pick a darker theme). I’ve gone through and replaced the backgrounds with black and white text with CCC. Some colors (009 and 00F) have been slightly adjusted (039 and 03F) for better contrast. Other than those, the greens, reds, oranges, etc are the same. Make sure to enable “Highlight Invalid Code” or lines containing unclosed tags and the like will change to black text. Screen cap

Backup “colors.xml” in the following folder.

Vista: C:\Users\<username>\AppData\Roaming\Adobe\Dreamweaver CS4\<language>\Configuration

Windows XP: C:\Documents and Settings\<username>\Application Data\Adobe\Dreamweaver CS4\<language>\Configuration

Mac OS X: Macintosh HD:<username>:Library:Application Support:Adobe:Dreamweaver CS4:<language>:Configuration

Then replace it with this: colors.rar. Should be ready to rock.

Oh, on a side note, the font Anonymous is great for coding, very easy to read. I like it on the smallest font size setting.



Coldfusion Query Of Queries

Author: TheHahn
April 21, 2009

I’m trying to do a list of results from a query with upper and lower bounds. Normally one would just do a query then add the StartRow and MaxRows attributes to a cfloop or cfoutput, but I’m stubborn / don’t want to do it that way. QoQ allows for a max row argument, but not a start row.

My cfm page calls a cfc which has a function for a standard query, which I’m caching. I have another function that is going to list results by paging and by search params. I don’t want to touch the cached query so here’s what I’m going to do.

<cfquery datasource="mydsn"
		cachedwithin="#CreateTimeSpan(0,1,0,0)#"
		name="qryProps">
	SELECT *, @intRow:=@intRow+ 1
	FROM myTable, (SELECT @intRow:=0) AS r
	ORDER BY p_id
</cfquery>

<cfquery dbtype="query" name="QoQProps">
	SELECT ∗
	FROM qryProps
	WHERE intRow
		BETWEEN #offStart# AND #offLimit + 1#
</cfquery>

As long as the order of the first query is expected (I have it under control) then it’s going to work awesome.

For those curious, here are methods for getting a row number into the query in…

MSSQL:
SELECT ∗, ROW_NUMBER() OVER(ORDER BY p_id) AS intRow
FROM myTable

ORACLE:
SELECT ∗, ROWNUM as intRow
FROM myTable



Lessons Learned

Author: TheHahn
December 12, 2008

I have no way of testing IE7. Certain restrictions apply that force me to do dev work on a remote box. Today that fact made my life hell.

Random LI tags were not displaying. This worked fine on every browser I had access to.
Problem was that my list items were floated left and contained in an absolutely positioned element. This was in tandem with a bug involving the first non-native font chosen, “Gill Sans” or something. I of course had backup fonts listed, but the first one caused a problem not allowing the browser to use the remaining fonts listed.

I installed IE7 standalone, though the entire page appears to break if any flash is used, which almost makes it worthless. When I’ve more time I’ll look up solutions, I’m sure the app deserves more credit.



Ya know who actually has ties to terrorists?!? IE6!

Author: TheHahn
October 13, 2008

If I had guns or religion, I’d cling to them because of this browser. I would shoot it in the face and pray to god that my bullets obliterate this heathen.

So here it is, for my consideration and yours, the bare minimum for a flicker-less image swap hover for IE6.

First, ALWAYS set your doc type to strict!

<style type="text/css">
	a { display:block; }
	a:hover { background-color:#FFF; }
	/* YOU MUST HAVE A BACKGROUND COLOR HERE. */

	a img { height:0; width:0; }
	a:hover img { height:50px; width:50px; }
</style>

<a>text or image<img src="image.gif"></a>

I was about to shatter a cd and shove the best shiv into my eye socket because of this.



I don’t know why anyone would not have Google Analytics set up on their website. It’s one of the best website statistic packages out there, is constantly being improved upon and is FREE! Yes, Google rocks the house again.

So, as I’m adding Google Analytics to this site, I’ll share the process with you!

  1. If you don’t already have a Google account, get with the program and get your free Gmail account at www.gmail.com
  2. Now go to http://www.google.com/analytics/ and sign in.
  3. Click on ‘Add Website Profile’
  4. Enter the URL and timezone for your domain and Continue.
  5. This next page will give you 2 options: the Legacy Tracking Code or the new option. Click on the ‘New Tracking Code’ option.
  6. You’ll see a bunch of Javascript code. You’ll need to add this to the bottom of your web pages. If you don’t know how to do this, contact your web designer! Since our site is built using WordPress, I have to open the footer.php for the template that I have selected.
  7. After you have that javascript added to your pages and your files uploaded, click on the finish button. You’ll see your site listed under Website Profiles.
  8. Now you have to wait. Sometimes it’ll take a while for Google to find the tracking code that you put on your site but as soon as that happens, you’ll start getting all the stats you could ever want on your site, set up marketing goals and much, much more!


Every little bit helps

Author: admin
May 21, 2008

When it comes to Internet marketing, Google page rank is paramount to people finding you. One of the best ways to get a high page rank is to have relevant sites linking to yours. Since we’re a Web Design company, we searched out Web Designer directories that would list us. Since they’ve already obtained a good search engine ranking, being listed gives us potential click-thrus from their site and boosts our own page rank at the same time.

Here’s where we are listed: