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.

These images are both generated on the fly via Google Maps.

[sourcecode lang=”html”]<img src="http://maps.google.com/maps/api/staticmap?center=Risdall+Marketing+Group,550+Main+St,New+Brighton,MN+55112&zoom=14&size=200×200&sensor=false&markers=size:mid|color:blue|550+Main+St,New+Brighton,MN+55112" />[/sourcecode]

[sourcecode lang=”html”]<img src="http://maps.google.com/maps/api/staticmap?center=Risdall+Marketing+Group,550+Main+St,New+Brighton,MN+55112&zoom=14&size=200×200&sensor=false&markers=size:mid|color:green|550+Main+St,New+Brighton,MN+55112&maptype=satellite" />[/sourcecode]

The bandwidth limitation is 1000 unique (different) image requests per viewer per day. Which means you would only see a limit on users who happen to view 1000 DIFFERENT static Google Maps images within a 24 hour period.

Here’s the full api developers guide.

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