Permalink
Browse files

moved functions into plugin definition. added test page. added minifi…

…ed. added browser support to readme
  • Loading branch information...
1 parent 661679e commit 06ef2220eeca0674ae9302a6f59662e94022abb1 @robflaherty committed Apr 7, 2012
Showing with 98 additions and 43 deletions.
  1. +66 −40 jquery.scrolldepth.js
  2. +6 −0 jquery.scrolldepth.min.js
  3. +3 −3 readme.md
  4. +23 −0 test/index.html
View
@@ -1,5 +1,5 @@
-/*
- * jquery.scrolldepth.js
+/*!
+ * jquery.scrolldepth.js | v0.1
* Copyright (c) 2012 Rob Flaherty (@robflaherty)
* Licensed under the MIT and GPL licenses.
*/
@@ -10,65 +10,91 @@
var defaults = {
elements: [],
minHeight: 0,
- offset: 0,
- percentage: true
+ offset: 0, // Not used yet
+ percentage: true,
+ testing: false
},
$window = $(window),
cache = [];
- function sendEvent(action, label) {
- _gaq.push(['_trackEvent', 'Scroll Depth', action, label]);
- }
-
- function calculateMarks(docHeight) {
- return {
- '25%' : parseInt(docHeight * 0.25, 10),
- '50%' : parseInt(docHeight * 0.50, 10),
- '75%' : parseInt(docHeight * 0.75, 10),
- '100%': docHeight
- };
- }
-
- function checkMarks(marks, scrollDistance) {
- // Check each active mark
- $.each(marks, function(key, val) {
- if ( $.inArray(key, cache) === -1 && scrollDistance >= val ) {
- sendEvent('Percentage', key);
- cache.push(key);
- }
- });
- }
-
- function checkElements(elements, scrollDistance) {
- $.each(elements, function(index, elem) {
- if ( $.inArray(elem, cache) === -1) {
- var position = $(elem).offset().top;
-
- if (scrollDistance >= position) {
- sendEvent('Elements', elem);
- cache.push(elem);
- }
- }
- });
- }
+ /*
+ * Plugin
+ */
$.scrollDepth = function(options) {
options = $.extend({}, defaults, options);
+ // Return early if document height is too small
if ( $(document).height() < options.minHeight ) {
return;
}
// Establish baseline (0% scroll)
sendEvent('Percentage', 'Baseline');
+ /*
+ * Functions
+ */
+
+ function sendEvent(action, label) {
+ if (!options.testing) {
+ _gaq.push(['_trackEvent', 'Scroll Depth', action, label]);
+ } else {
+ $('#console').html(action + ': ' + label);
+ }
+ }
+
+ function calculateMarks(docHeight) {
+ return {
+ '25%' : parseInt(docHeight * 0.25, 10),
+ '50%' : parseInt(docHeight * 0.50, 10),
+ '75%' : parseInt(docHeight * 0.75, 10),
+ '100%': docHeight
+ };
+ }
+
+ function checkMarks(marks, scrollDistance) {
+ // Check each active mark
+ $.each(marks, function(key, val) {
+ if ( $.inArray(key, cache) === -1 && scrollDistance >= val ) {
+ sendEvent('Percentage', key);
+ cache.push(key);
+ }
+ });
+ }
+
+ function checkElements(elements, scrollDistance) {
+ $.each(elements, function(index, elem) {
+ if ( $.inArray(elem, cache) === -1 && $(elem).length ) {
+ if ( scrollDistance >= $(elem).offset().top ) {
+ sendEvent('Elements', elem);
+ cache.push(elem);
+ }
+ }
+ });
+ }
+
+ /*
+ * Scroll Event
+ */
+
$window.on('scroll.scrollDepth', function() {
+
+ /*
+ * We calculate document and window height on each scroll event to
+ * account for dynamic DOM changes.
+ */
+
var docHeight = $(document).height(),
winHeight = $window.height(),
scrollDistance = $window.scrollTop() + winHeight,
+
+ // Offset not being used yet
offset = parseInt(winHeight * (options.offset / 100), 10),
+
+ // Recalculate percentage marks
marks = calculateMarks(docHeight);
// If all marks already hit, unbind scroll event
@@ -90,4 +116,4 @@
};
-})( jQuery, window, document );
+})( jQuery, window, document );
Oops, something went wrong.
View
@@ -1,7 +1,7 @@
# jQuery Scroll Depth
-So this is a jQuery plugin that keeps and eye on how far down the page a user has scrolled and then reports data back to Google Analytics using the GA Events API. The default behavior reports on the 25%, 50%, 75%, and 100% scroll marks. It also sends an initial "Baseline" event to use as a benchmark.
+This is a jQuery plugin that keeps and eye on how far down the page a user has scrolled and then reports data back to Google Analytics using the GA Events API. The default behavior reports on the 25%, 50%, 75%, and 100% scroll marks. It also sends an initial "Baseline" event to use as a benchmark.
-In addition to the percentage scroll marks you can trigger events based on specific DOM elements. For example you can tell the plugin to report whenever the article comments DIV is scrolled into view, or whenever the footer is reached.
+In addition to the percentage scroll marks you can trigger events based on specific DOM elements. For example you can tell the plugin to report whenever the article comments div is scrolled into view, or whenever the footer is reached.
Data is sent to Google Analytics so it's required that you have Google Analytics tracking implemented on your site.
@@ -21,7 +21,7 @@ $.scrollDepth({
});
```
## Browser Support
-(Coming soon)
+Tested in Chrome (18), Firefox (8), Safari (5), Opera (10), IE (7-10). Also tested on iOS, Opera Mobile, and a few Android emulators.
## Contact
[@robflaherty](https://twitter.com/#!/robflaherty)
View
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>jQuery Scroll Depth Test</title>
+</head>
+<body>
+ <div id="console" style="background: #aaa; width: 200px; position: fixed; top: 0; right: 0; text-align: center; padding: 20px; line-height: 1; font-family: sans-serif;"></div>
+ <h1>jQuery Scroll Depth Test Page</h1>
+ <div id="top" style="background: #eee; height: 500px">#top</div>
+ <div id="main" style="background: #ccc; height: 2000px">#main</div>
+ <footer style="background: #999; height: 200px; display: block;">footer</footer>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="../jquery.scrolldepth.js"></script>
+ <script>
+ $.scrollDepth({
+ testing: true,
+ elements: ['#main', 'footer']
+ });
+ </script>
+</body>
+</html>

0 comments on commit 06ef222

Please sign in to comment.