Download
User Rating: 5/5 ( 1 votes)
OnImpression.js is a simple jQuery plugin that triggers a function when an element is displayed on the screen. By using onImpression.js, you will be able to track specific elements as a user scrolls down a page.
Source: jaseowns.com
1. INCLUDE JS FILES
<script src="/Content/js/jquery.js"></script>
<script src="/public/jquery.onimpression.js"></script>
2. HTML
<div>
<h3>
This is a H3 Tag. It will be tracked!
</h3>
<p>
P tag, nothing to see here.
<p>
Another P Tag, nothing tracked.
</p>
</div>
3. JAVASCRIPT
$(function () {
$("h3").onImpression({
offset: -5,
callback: TrackImpression
});
});
// The callback function! Your app logic goes in here.
function TrackImpression() {
$("#debug").append("h3:" + $(this).text());
}
4. OPTIONS
callback: new Function(){ alert('onImpression triggered'); }; Callback is the function that will be called when onImpression is triggered. Your application logic goes within that function.
offset: -50 (default: 0) This allows you to control when the impression is triggered. I normally use an offset of -50 to allow a little space before triggering onImpression which calls the callback.
attribute: "src" (default: null) Specific attribute you want passed back to the callback function as a parameter. This is not neccessary but can save some logic inside the callback if used properly.
alwayscallback: false (default: false) If false, the callback is triggered on the first impression. If true, the callback is triggered anytime the element is in the viewport.
scrollable: "#id" (default: null) If your content is in a scrollable area, make sure you pass that id or classname as "scrollable" -- this will make sure the onImpression events are triggered even if you are viewing a small scrollable area.
JS Tutorial
