OTTO Digital http://kb.ottodigital.com/blog Knowledge Base Thu, 24 Jul 2008 21:40:46 +0000 http://wordpress.org/?v=2.5.1 en Javascript DOM Swizzling examples http://kb.ottodigital.com/blog/?p=53 http://kb.ottodigital.com/blog/?p=53#comments Thu, 24 Jul 2008 21:40:46 +0000 jfavre http://kb.ottodigital.com/blog/?p=53 Here are just a few DOM swizzling code snippets I found on my hard drive. I used them for Yahoo store implementations and I decided to place them here so I wont lose them.

Basically, this allows you to take a div tag that has an ID as an attribute and swap it with the placement of another.

<script type=”text/javascript”>
function swizzleDOM() {

var B = document.getElementById(’ys_paypalPayNow’);
var c = document.getElementById(’ys_paypalOrContainer’);
var a = document.getElementById(’ys_proceedContainer’);

if (B) {
B.style.position = “relative”;
B.style.right = “265px”;
B.style.bottom = “40px”;
B.style.float =”left”;
B.style.top = “-80px”;

c.style.position = “relative”;
c.style.right = “115px”;
c.style.bottom = “40px”;
c.style.float = “left”;
c.style.top = “-30px”;

a.appendChild(c);
a.appendChild(B);
window.clearInterval(swizzleInterval);
}
}
var swizzleInterval = window.setInterval(”swizzleDOM();”,20);
</script>

left checkout no or

<script type=”text/javascript”>
function swizzleDOM() {

var B = document.getElementById(’ys_paypalPayNow’);
var a = document.getElementById(’ys_proceedContainer’);

if (B){
B.style.position = “relative”;
B.style.right = “115px”;
B.style.bottom = “40px”;
B.style.float = “left”;
B.style.top = “-30px”;

a.appendChild(B);
}

var c = document.getElementById(’ys_paypalOrContainer’);

if(c) {
c.style.display = “none”;
c.style.visibility = “hidden”;
window.clearInterval(swizzleInterval);
}
}
var swizzleInterval = window.setInterval(”swizzleDOM();”,20);
</script>

left edge

<script type=”text/javascript”>
function swizzleDOM() {

var c = document.getElementById(’ys_paypalOrContainer’);

if(c) {
c.style.display = “none”;
c.style.visibility = “hidden”;

var sp1 = document.getElementById(’ys_paypalPayNow’);
var sp2 = document.getElementById(”ys_cartInfo”);

sp2.appendChild(sp1);
window.clearInterval(swizzleInterval);
}
}
var swizzleInterval = window.setInterval(”swizzleDOM();”,20);
</script>

vertical no or

<script type=”text/javascript”>
function swizzleDOM() {

var B = document.getElementById(’ys_paypalOrContainer’);

if(B) {
B.style.display = “none”;
B.style.visibility = “hidden”;
window.clearInterval(swizzleInterval);
}
}
var swizzleInterval = window.setInterval(”swizzleDOM();”,20);
</script>

]]> http://kb.ottodigital.com/blog/?feed=rss2&p=53 Quickstart Discovery Call Deck http://kb.ottodigital.com/blog/?p=52 http://kb.ottodigital.com/blog/?p=52#comments Thu, 24 Jul 2008 18:38:44 +0000 jbroady http://kb.ottodigital.com/blog/?p=52 This deck is used for discovery calls for new Quickstart clients. Very handy, and includes some best practices.

discovery_call_slide_deck

]]> http://kb.ottodigital.com/blog/?feed=rss2&p=52 GMAC - Public Case Study http://kb.ottodigital.com/blog/?p=50 http://kb.ottodigital.com/blog/?p=50#comments Thu, 24 Jul 2008 17:42:59 +0000 jbroady http://kb.ottodigital.com/blog/?p=50 GMAC public case study

This case study is public and can be shared around the world! Great work Joel.

]]> http://kb.ottodigital.com/blog/?feed=rss2&p=50 Old RFI Materials http://kb.ottodigital.com/blog/?p=45 http://kb.ottodigital.com/blog/?p=45#comments Wed, 23 Jul 2008 21:37:52 +0000 mkrypel http://kb.ottodigital.com/blog/?p=45 Since we’re revising the RFI, I thought I would post the old stuff:

* two versions of the RFI we currently in play

20080626_otto_freshpair_rfi

20080314_otto_rfi

* some key questions we discussed during our offiste (some of which may be better to ask in the course of prepping for a brainstroming session)

20080723_mk_topquestions

]]> http://kb.ottodigital.com/blog/?feed=rss2&p=45 Gotvmail - Using Site Catalyst Reports in Test & Target Results Deck http://kb.ottodigital.com/blog/?p=43 http://kb.ottodigital.com/blog/?p=43#comments Tue, 22 Jul 2008 22:44:41 +0000 molson http://kb.ottodigital.com/blog/?p=43 otto-how-it-works-a_b_c-layout-test-results-summary-07222008

Hi OTTO,

So here’s a deck where I incorporate Site Catalyst data in a Results Deck for Gotvmail.

Background:

- The test was a page layout (A/B/C) and Gotvmail went against Omniture guidelines and actually named the new page recipes to correspond with the Recipe that it was a part of so it was easy to see how this data was tracked in Site Catalyst as well.

Default Page: How It Works

Recipe B: How It Works - B

Recipe C: How It Works - C

Remember to make sure the date range in Site Catalyst matches that in T&T

The report I ran was the Next Page Flow Report

]]> http://kb.ottodigital.com/blog/?feed=rss2&p=43 Offsite 2008: Peter Callahan’s Presentation http://kb.ottodigital.com/blog/?p=40 http://kb.ottodigital.com/blog/?p=40#comments Tue, 22 Jul 2008 20:27:44 +0000 kmccurdy http://kb.ottodigital.com/blog/?p=40 Peter Callahan’s OTTO Digital Offsite presentation, July 2008.

]]> http://kb.ottodigital.com/blog/?feed=rss2&p=40 Weight Watchers - Engagement Deck http://kb.ottodigital.com/blog/?p=35 http://kb.ottodigital.com/blog/?p=35#comments Tue, 22 Jul 2008 14:37:57 +0000 sratpojanakul http://kb.ottodigital.com/blog/?p=35 This is the Weight Watchers Engagement Deck that I created with Kripa and Michael. The client appreciated having background information, traffic sources, brainstorm ideas and wireframes consolidated into one deck. I will update later once we have added the final recipes and test results into the deck.

The information included will vary based on clients’ preferences. For example, with Real we will occasionally include slides on the Taguchi methodology because the client likes to explain it to their internal audience.

otto_ww_wave1testplan_initialrecs_0715081

]]> http://kb.ottodigital.com/blog/?feed=rss2&p=35 Magazines.com - Javascript hero image example http://kb.ottodigital.com/blog/?p=37 http://kb.ottodigital.com/blog/?p=37#comments Tue, 22 Jul 2008 14:13:27 +0000 jfavre http://kb.ottodigital.com/blog/?p=37 I took what Step Change did, and adjusted their code to make it look like this:

Here is a link to the actual page example I have hosted on our ottoteam server: http://www.ottoteam.com/jfavre34/testMagazines.html

You can see how to scroll through the magazines on the hero image there. The OTTO Dev team can do similar work for your next project.

]]> http://kb.ottodigital.com/blog/?feed=rss2&p=37 Javascript example - reading query strings from the URL http://kb.ottodigital.com/blog/?p=34 http://kb.ottodigital.com/blog/?p=34#comments Tue, 22 Jul 2008 13:09:12 +0000 jfavre http://kb.ottodigital.com/blog/?p=34 This bit of code reads a query string contained in the URL of a page.  This is useful to pass values into hosted flows or other pages.

function gup( name )
{
name = name.replace(/[\[]/,”\\\[").replace(/[\]]/,”\\\]”);
var regexS = “[\\?&]“+name+”=([^&#]*)”;
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return “”;
else
return results[1];
}

To read the query string of ?fw=whatever call the function like this:

x = gup(’fw’);
]]> http://kb.ottodigital.com/blog/?feed=rss2&p=34 OTTO - setting up your computer for Ruby on Rails http://kb.ottodigital.com/blog/?p=32 http://kb.ottodigital.com/blog/?p=32#comments Mon, 21 Jul 2008 22:08:29 +0000 jfavre http://kb.ottodigital.com/blog/?p=32 This is a link to all the sites I used to setup my computer to run Ruby on Rails. Rails is the language we use for all of our hosted flow sites. It is easy to develop in and makes for quick application builds.

Intalling mysql on leopard http://hivelogic.com/articles/2007/11/installing-mysql-on-mac-os-x

Setting up RoR on leopard http://hivelogic.com/articles/2008/02/ruby-rails-leopard

Subversion cheat sheet http://www.abbeyworkshop.com/howto/misc/svn01/

Subversion is the tool we use for version control and deployment.

]]> http://kb.ottodigital.com/blog/?feed=rss2&p=32