The filter that is used for this example is ‘wysiwyg_tinymce_settings‘. This filter makes it possible to edit the TinyMCE  settings immediately before the field is initialized. What I decided to do was to make use of the existing CSS wrapper field in the ACF admin:

Then, using the previously mentioned filter, I grab those values and apply them to the WYSIWYG editor’s iframe body tag:

Now, if I specify the correct class names within my ‘editor-styles.css’ file, the editor will get the custom styling I’ve set.

Now I can easily style all the ACF WYSIWYG fields in my admin so that they exactly reflect how the content will look on the front end.

The full code is available on Github.

Uncaught ReferenceError: jQuery is not defined

There’s an extremely hidden bit of documentation on how to override this behavior here:

<?php
add_filter("gform_init_scripts_footer", "init_scripts");
function init_scripts() {
return true;
}
?>

This code should be placed within your theme’s functions.php file.

http://www.gravityhelp.com/documentation/page/Gform_init_scripts_footer

Initially, the sidebar area is set to a non-fixed position.  In my example I’m just floating it to the left of the main content area.  It also has overflow set to hidden.  Here is the CSS for the sidebar:

<style type="text/css">
#sidebar { float: left; width: 180px; margin: 10px 0 0 0; font-size: 11px; line-height: 15px; }
#sidebar #pinned { width: 180px; height: 100%; overflow-y: hidden; }
#sidebar #pinned.pin-set { position: fixed; height: 100%; top: 0px; z-index: 99; }
#sidebar:hover #pinned { overflow-y: auto !important; }
</style>

The pin-set class is what I’ll apply to the sidebar content area (#pinned) when the user scrolls far enough down that the header is covered.  Here is the JavaScript required for that effect.  I’m using jQuery for simplicity of selectors and events:

<script type="text/javascript">
(function($) {
$(function() {
var int_sideheight = $(window).height() - $('#header').height() - 10;
$('#pinned').css('height',int_sideheight+'px');
$(window).scroll(function() {
if ($(this).scrollTop() > $('#header').height()) {
$('#pinned').addClass('pin-set').css('height','100%');
} else {
var int_sideheight = $(window).height() - $('#header').height() - 10;
$('#pinned').removeClass('pin-set').css('height',int_sideheight+'px');
}
});
});
})(jQuery);
</script>

What I’m doing is checking to seel when the scrollTop() is greater than the height of the header area. If it is, then apply that pin-set class to the sidebar navigation area.  If it isn’t, I’m clearing the class so that the sidebar area will always remain below the header area.  The mouseover scroll bar effect is purely CSS-driven.

View a working demo of this code here.

$('li:contains("findthis")').filter(function() {
  return $(this).text() == "findthis";
}).addClass('active');

HTML

<div class="agreement">
  <div class="agreement-inner">
    Content for agreement goes here...
  </div>
</div>
<div class="agreement-agree">
  This is the stuff I want activated when the agreement has been read.
</div>

jQuery JavaScript:

$(".agreement").scroll(function() {
  if ($(this).scrollTop() >= ($('.agreement-inner',this).height() - $(this).height())) {
    $('.agreement-agree').removeClass('disabled');
    $('.agreement').unbind('scroll');
    $('.agreement-agree').fadeTo(0,1);
  }
});

I’m currently working on deploying this to a generic jQuery plugin that will let you specify the content that needs to be scrolled through as well as the content should become enabled once that criteria is met.

https://www.hereswhatidid.com/coding/autocomplete/

The project site is here: http://jqueryui.com/demos/autocomplete/

jQuery Code:

[sourcecode lang=”javascript”](function($) {
$(function() {
$( ‘#s’ ).autocomplete({
source: ‘tags.php’,
minLength: 2
});
});
})(jQuery);[/sourcecode]

PHP for JSON Remote Data:

[sourcecode lang=”php”]$return_arr = array();

$dbhost = ‘hostname’;
$dbuser = ‘username’;
$dbpass = ‘password’;
$dbname = ‘databasename’;

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die (‘Error connecting to database’);
mysql_select_db($dbname);
if ($conn) {
$fetch = mysql_query("SELECT * FROM `sample-dinosaurs` WHERE DinoName LIKE ‘%".$_GET[‘term’]."%’");
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array[‘label’] = $row[‘DinoName’];
array_push($return_arr,$row_array);
}
}
mysql_close($conn);
echo json_encode($return_arr);[/sourcecode]

http://jsperf.com/jquery-data-vs-jqueryselection-data

http://closure-compiler.appspot.com/home

It let’s you specify some basic rules for the compression as well as creates the actual resulting .js file if you don’t want to bother with copy/paste for the results.