uhhuhyeah

Optimizely's script is included in the document's head so they're able to make DOM/Styling changes before the browser has really had the time to render anything. The point of this is to prevent the "flash" of changing the content in front of the user.

This paradigm breaks down with "single page apps". The paradigm that "single page apps" use is one where the initial page load contains just enough HTML and JavaScript to bootstrap the app. The app then downloads/renders the remaining HTML. The problem is that all this happens after Optimizely has tired to make changes and because these elements Optimizely is trying to change are not present on the page yet, it cannot successfully run the code to make the variation.

Here's the workaround we've been using. Create your variation as per norm with the WYSIWYG editor Optimizely provides. Click on 'Edit Code' in the bottom right to reveal the JavaScript Optimizely will run on the page. This is usually jQuery-esque show/hide/replace etc. Write a function that che

uhhuhyeah

for (var i=0; i < window.optimizely.data.state.activeExperiments.length; i++) {
  var experimentID = window.optimizely.data.state.activeExperiments[i];
  var experimentName = window.optimizely.data.experiments[experimentID].name;
  var variationName = window.optimizely.data.state.variationNamesMap[experimentID];

  console.log(experimentName + " - " + variationName);
}

uhhuhyeah

window.utils = window.utils || {};

utils.Grid = function() {
  // Defaults
  var that = this;
  this.idealColumnWidth = 320;
  this.marginHoriz = 15;
    
  // Public Interface
  this.setupGrid = function(opts) {

uhhuhyeah

@media all {
  .page-break  { 
    display: none; 
  }
}

@media print {
  .page-break  { 
    display: block; 
    page-break-before: always; 

uhhuhyeah

.foo {
     background: url( image_path 'image.png' );
}

uhhuhyeah

.foo {
  background: url(<%= asset_path 'image.png' %>);
}

uhhuhyeah

// grab the ids (or other attribute) from a set of DOM elements
var ids = $("#mydiv span[id]") // find spans with ID attribute
  .map(function() { return this.id; }) // convert to set of IDs
  .get(); // convert to instance of Array (optional)

uhhuhyeah

if ( foo == "bar" || foo == "foobar" || foo == "foo" ) {
  //...
}

// can be written as
if ( foo in { bar:1, foobar:1, foo:1 } ) {
 //...
}

uhhuhyeah

* html .some-floated-element { /* IE6 */
  height: 1%;
}

*:first-child+html .some-floated-element { /* IE7 */
  min-height: 1px;
}

uhhuhyeah

.some-floated-element:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}