How To Write Google Event Tracking Codes with JQuery

Google event tracking works via some code inside the onclick attribute of links. Rather than putting the code inside every link, you can write a few lines of jQuery and have the codes go into every link on your page.  You can set the parameters of the code so each link will be uniquely identified.  You can also set it to know which URL you were on when you clicked the link.  This is useful for tracking links on sites which have shared files such as headers, footers, and sidebars.

Here is the format of the google event tracking code:

[code]
onclick = "javascript: pageTracker._trackEvent('category', 'action', 'label');
[/code]

1. category -
The name you supply for the group of objects you want to track.
2. action -
A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
3. label -
An optional string to provide additional dimensions to the event data.

This jQuery iterates over each link (a element) within the container. It gets the name attribute and page URL as variables. Then it sets the onclick attribute to each link. The onclick attribute forms the google event tracking code, and it sets the last paramter (the only unique parameter) with a combination of the name attribute (this could be anything you want to uniquely identify the link) as well as the current URL (helpful for tracking).

The most difficult part was passing the variables into the string without it just printing the whole thing as a string. The proper way to do it is this:

[code]"'+$set+url+'"[/code]

[code lang="javascript"]
$(function() {

$("#container a").each(function (i) {
var $a = $(this); // 'this' is the element being iterated
var url = window.location.pathname; //gets current url
var $set = $a.attr('name'); // gets name attributes
if($set) {
$a.attr('onclick', 'javascript: pageTracker._trackEvent("PPC_Landing", "CreditCards", "'+$set+url+'");');
} //creates event tracking onclick attribute, and makes the last parameter set as the name attribute of the link, and current url as an identifier

});

});

[/code]

Posted in Uncategorized, jQuery | Tagged , | Leave a comment

How To Create Active State Navigation with JQuery

great little article with code samples here: http://www.andrew-turn.net/jquery-for-active-state-navigation

jQuery is a clean and fast way to do active state navigation (using a specific class to denote that this link is the current page you are on). I recently updated a long and crusty javascript function to use jQuery instead. here is what I ended up with, after following examples from the above article:

//active state for sidebar navs

	$(function() {
		var path = document.location.protocol + "//" + window.location.hostname + window.location.pathname;
		var url = window.location.href;
		$("#sidebar_tabs a[href='" + url + "'], #sidebar_tabs a[href='" + path + "']").addClass('sidebar_nav_active');
});
Posted in Uncategorized, jQuery | Tagged , | Leave a comment

How to Create a WordPress Database with MySQL Commands

http://codex.wordpress.org/Installing_WordPress#Detailed_Instructions


$ mysql -u adminusername -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 5340 to server version: 3.23.54

Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql>  CREATE DATABASE databasename;
Query OK, 1 row affected (0.00 sec)

mysql> GRANT ALL PRIVILEGES ON databasename.* TO "wordpressusername"@"hostname"
    -> IDENTIFIED BY "password";
Query OK, 0 rows affected (0.00 sec)

mysql> FLUSH PRIVILEGES;
Query OK, 0 rows affected (0.01 sec)

mysql> EXIT
Bye
$

Notes: hostname is localhost.
The little arrow after hostname just means to continue typing what is on the next line, do not actually type the arrow symbol. This script also shows what you will see after each command, so you are NOT typing this entire thing verbatim. Type what is in bold, then hit enter to run each command. The only other thing you need to do is enter your password when prompted, after you type in the first command.

Posted in MySQL, linux, wordpress | Tagged , , , | Leave a comment

How To Detect Doctype With Javascript

I had an interesting problem recently where I actually had a need to detect which doctype a page was using, and run some css depending on which HTML version was being used (the publicId property). It took me a long time to figure out how to do this, since it is not done very often. The solution I found at first only worked for firefox, but I needed it to work for IE. I finally found a solution that works in ie.

Here’s the solution that only works in firefox:

The correct way to get the doctype publicId (which works in firefox) is:

[code lang="javascript"]var pubid = document.doctype.publicId;[/code]

The example above saves a reference to the publicId of the doctype. So if we were on a page with an XHTML 1.0 Strict doctype, the pubid variable would have the value -//W3C//DTD XHTML 1.0 Strict//EN.

Here’s the solution that works in all versions of ie, and the full code for what I needed to do:

[code lang="javascript"]
//this script finds ie browsers using html4 doctype and then does a fix for input field height
var findDOC = document.all[0].text;//gets doctype, works in ie
if (navigator.appName == "Microsoft Internet Explorer" && findDOC = '') {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i
if(inputs[i].getAttribute("className", "affiliate_submit")) {
inputs[i].setAttribute("className", "affiliate_submit");
}
else{inputs[i].setAttribute("className", "html4fix");}
}
}
[/code]

The key piece of this code is
[code lang="javascript"]document.all[0].text[/code] which is the only way to get the entire contents of the doctype in ie. IE can get the doctype, but it can't get the publicId (which is the information that contains which version of HTML is being used). Since I needed the publicId, I had to use this method.

The code above searches for all ie browsers, and then gets the doctype publicId. If the publicId is using HTML4, then I run some code to add a special css class for this scenario only.

More resources on this:
here
and here

Posted in Javascript, Uncategorized, ie6, ie7, ie8 | Tagged , , , | Leave a comment

line breaks in alt attribute using css white-space property

I recently had to put a bunch of text in the alt attribute of an image, that I wanted to display with line breaks:

[code lang="html"]some text here<br />
second line of text<br />
third line of text[/code]

There is only one way that I found that was able to render the line breaks, and that is to use the useful but under-utilized css property: white-space.

In the css, I added a white-space property to the img[alt] selector like so:

[code lang="css"]
img[alt] {
white-space:pre;
}
[/code]

By setting the white-space property to pre, it tells the text to render essentially like a pre tag, thus displaying the alt text exactly how I typed it, with line breaks.

I also added font-size and font-family to my img[alt], but it only seemed to render correctly in firefox. Oh well, at least the white-space:pre rendered correctly in firefox and ie6-8. Pretty cool stuff.

Posted in css | Tagged , , , , | Leave a comment

How To Use Multiple Onload Functions in Javascript – addLoadEvent

Onload functions are used when you want something to happen as soon as the page is loaded.

Here is an example of how you could write it, placing it in the head of the document:

[code lang="html"]window.onload = someFunction;[/code]

The bad part is, you can only call one function this way. What if you need to call more than one? The most awesome way to do this is by using a function written by Simon Willison. You can put this code in a .js file that is included in the pages you need to call the onload functions. You don’t need to put ANY code in the pages themselves. This is totally onobtrusive javascript.

[code lang="javascript"] function addLoadEvent(func) { /* used for unobtrusive, multiple onload functions */
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
}else{
window.onload = function() {
if(oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(yourFirstFunction);
addLoadEvent(yourSecondFunction);
//add more functions if you want
[/code]

Posted in Javascript | Tagged , , | Leave a comment

How To SVN Revert to Previous Revision

What do you do when you need to revert back to a previous revision of a file in svn? You can revert to a previous version, or do what is called a “reverse merge.”

Here is an explanation of how to do it that I found straightforward and clear:
http://www.sampablokuper.com/2009/03/27/svn-revert-to-revision/

Here’s a quick rundown of the steps, if you simply want to revert to a previous revision, and your current revision has been checked in:

1. figure out which revision you need by doing an svn diff:
svn diff path/file.txt -r xx:yy

xx is the revision number you want to start comparing at, and yy is the current revision number

2. now that you have your magic number, you need to merge your current revision number back to this other number: svn merge path/file.txt -r xx:yy

xx is the current revision number and yy is the revision number you want to revert to. (The reverse of the previous step, hence the “reverse merge”).

3. now you’re done, crisis averted.

Posted in svn | Tagged , , , | Leave a comment

Show Hide Toggle Div Element with Javascript

Showing and hiding, or ‘toggling’ elements is one of the most common tasks in javascript. Here’s a great resource that shows 7 different ways to do this:

7 ways to toggle a div

My personal favorite is the ternary operator:

[code lang="javascript"]function toggle(obj) {
var el = document.getElementById(obj);
el.style.display = (el.style.display != 'none' ? 'none' : '' );
}[/code]

You can adjust your examples to use display:none/display:block or visibility:hidden/visibility:visible, which have slightly different ways of rendering.

Posted in Javascript, Uncategorized | Tagged , , | Leave a comment

How To Fix Thickbox Position Bug in IE6

Thickbox has a bug in ie6 that makes the box position messed up. Sometimes it will pop up off of the screen, or if you have overflow:scroll enabled in the css, it will make the box really long and it doesn’t scroll properly. Here is the way to fix it:

find this code in the thickbox.js

[code lang="javascript"]function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) +
'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take
away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) +
'px'});
}[/code]

Then simply add an else statement at the end of it like so:

[code lang="javascript"]function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) +
'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take
away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) +
'px'});
}
else {
var scrolledDown = $(document).scrollTop()-200;
$("#TB_window").css("margin-top", scrolledDown +"px");

}
[/code]

Where it says “.scrollTop()-200;” you can change that number to move the box higher up. I changed mine to-350 and it pulls it higher up closer to the top of the window.

Posted in ie6, jQuery | Tagged , , | Leave a comment

How To Force IE8 to Render Pages as IE7 Using a Meta-Tag

Possibly the best (although dirty) ie8 browser hack is to avoid ie8 entirely, by using the meta http-equiv tag to force a page to render in the ie version of your choice.

It is possible to use a meta tag that forces pages to render as if they were being viewed in ie7, even if they are actually being viewed in ie8.

This is a dirty little trick I often use, because IE is just so annoying I want to hit it with a hammer.

[code lang="html"][/code]

You can also do the reverse, that is force pages to render as ie8 instead of ie7:

[code lang="html"][/code]

Hopefully this will make your life a little easier when dealing with ie browser issues.

This documentation from microsoft explains in more detail.

Posted in ie7, ie8 | Tagged , , , | Leave a comment

Generating Random Numbers With Math.random() Javascript

The JavaScript function Math.random() randomly generates a number from 0 to slightly less than 1 (shown as <1).

Generate random numbers from 0 to <3
Math.random() * 3

This gets us numbers from 1 to <3
Math.random() * 2 + 1

Math.random() is explained more here.

Use Math.floor() to round numbers downward to the nearest integer:

Math.floor(Math.random()*3+1)
will get a whole number between 1 and 3

To generate random numbers between 1 and max —
Math.floor(Math.random()*max+1)

This article discusses how to generate a random negative number or a random number between a range including both negative and positive numbers. Here is the basic rule:

For negative values from -9 to 0 subtract 9 from the previous result:

var negativeRandomN = Math.floor(Math.random()*10) – 9

To generate a random integer from m to n:

var randomN = Math.floor(Math.random() * (n-m+1)) + m

Posted in Javascript, Uncategorized | Tagged , , | Leave a comment

javascript class and className with ie8 and ie7

I often need to access CSS classes to get or set attributes using javascript, and have run into problems with internet explorer support.

Here is a way to change the class of an element by ID:

[code lang="javascript"]
var someId = document.getElementById('nameOfId');
someId.setAttribute('class', "someClassName");
[/code]

This does NOT work in IE6 and IE7 because they recognize className instead of class. I found a nifty way to solve this by using a ternary operator:

[code lang="javascript"]
var someId = document.getElementById('nameOfId');
someId.setAttribute(document.all ? 'className' : 'class', 'someClassName');
[/code]

I thought this was totally awesome UNTIL I found out it doesn’t work with IE8 for some weird reason. I finally found a method of doing it that works in firefox, ie6, ie7, and ie8. It is embarrassingly simple:

[code lang="javascript"]
var someId = document.getElementById('nameOfId');
someId.setAttribute('className', "someClassName") ||
someId.setAttribute('class', "someClassName")
[/code]

This version uses the ‘or’ operator to do the same thing with either ‘className’ or ‘class’. Theoretically, this is doing the same thing as the ternary operator version above. I have no idea why this one works in ie8 and the other one doesn’t. But there you have it!

Also here is another example of using the above method to get the class name (using getAttribute).

Posted in Javascript, ie8 | Tagged , , , , | Leave a comment

How to change the background color in Photoshop CS4

It is really easy to change the background color in photoshop cs4:

1. Select the layer (if your background layer is locked, click on it to unlock it)

2. Select the foreground color you want (click on the top square of the overlapping squares icon on the very bottom of your toolbar)

3. type option(windows) or alt(mac) + delete at the same time

Posted in Uncategorized, photoshop | Tagged | Leave a comment

How to create a transparent .GIF with white text in Fireworks

I have often noticed when I save my images as transparent GIF files, if they have white text the white turns transparent (which is NOT what I want).

A common type of image I use is a rounded green button with white text. Since I use these buttons on different color backgrounds, I like to save it as a transparent GIF.

Here is the correct method for saving a transparent GIF with white text in Fireworks:

1. File>Export Preview
2. Choose GIF file type
3. Choose matte color
4. Now you will see that they white text may have turned transparent. In order to turn it back to white:
5. Select Alpha Transparency
6. Click on the eye dropper with the minus sign
7. Click on the space you want to remain white
8. If it looks ok, choose export, and you’re done

For a detailed explanation of this process check out http://www2.sfasu.edu/msri/Helpdesk/S14_transparent_gif.htm

Posted in Uncategorized, fireworks | Tagged , , | Leave a comment

How To Get The Selected Value From Select Drop Down Using Javascript

The desired behavior is to access the selected value from the select tag (select drop down list) by creating a javascript function that can be applied with an event handler (most likely onclick).  Here is an example of the markup:

[code lang="html"]

[/code]

Now what we want to do is use Javascript to access the value of the option tag that a user selects. In this example, I have made the values URLs, so that when a user selects an option and clicks the submit button, they will be sent to the correct URL.

First, we want to access the drop down list. The drop down menu is the select tag, or the select node in the DOM. I have given my select tag an id, named “mylist”. Your select tag can have any id name you want.

Keep in mind that option nodes are children of the select node, in the form of an array. Once we have gotten the id of our select list, using getElementById, we can then get the options of the list by using the options[] property which returns an array of all the options in a dropdown list. But instead of accessing the whole array, we just want to access the specific option selected, so we can use the selectedIndex property which does just that. But what we REALLY want is the value of the selected option, so we add the value property on the end.

Also notice that I set the value of the selected option equal to window.location.href, which means it will send the value as a link to a page, which is the behavior we want when someone clicks the submit button.

[code lang="javascript"]
function goValue() {
var sel = document.getElementById("mylist");
window.location.href = sel.options[sel.selectedIndex].value;
}
[/code]

There are other ways of doing this function, but this one I have found to actually work in all browsers with no difficulties. Enjoy!

Here is a formula to follow to target the selected option. Name your form and your select menu, then you can target the selected option:
[code lang="javascript"]
document.myForm.myList.options[document.myForm.mylist.selectedIndex].value;
[/code]

[code lang="html"]

[/code]
Continue reading

Posted in Javascript, Uncategorized | Tagged , | Leave a comment

Bear Valley Snowmobile

www.bvsnowmobile.com

www.bvsnowmobile.com

Continue reading

Posted in Uncategorized, portfolio | Leave a comment

Power 9 Pro

www.power9pro.com

www.power9pro.com

Continue reading

Posted in Uncategorized, portfolio | Leave a comment

All Up In Yo Biz

www.allupinyo.biz

www.allupinyo.biz

Continue reading

Posted in Uncategorized, portfolio | Leave a comment

GLOW Zambia

www.glowzambia.org

www.glowzambia.org

Continue reading

Posted in Uncategorized | Leave a comment

Motherlode Motorsports

www.motherlodemotorsports.com

www.motherlodemotorsports.com

Continue reading

Posted in Uncategorized | Leave a comment