Skip navigation
newbieeee
Currently Being Moderated

Div View Counter

Mar 26, 2013 8:00 AM

Tags: #counter #hits #hit_counter

Hi,

 

     I need to count how many times a div is viewed. Most hit counters count how many times a page is loaded but I want to count how many times a div is viewed. There are different pages that this div is located on and I need to know how many times it is viewed in total...regardless of what page it is viewed on. Please help!!!! I have spent 20hrs on this and I'm a newbie in desperation.

 

Thanks

 
Replies
  • Currently Being Moderated
    Mar 26, 2013 8:06 AM   in reply to newbieeee

    How are you including this 'div' in each page? Regardless, your 'div' would need to include server side code that would update your counter database. Are you already familiar with server side scripting and database. An alternative would be to use a external counter service.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 26, 2013 9:22 AM   in reply to newbieeee

    > the view counters should only increase when a div is actually viewed in a browser window and not when the page is loaded to make sure the div was actually seen

     

    That can be done with Javascript - take the offset of the div on load, on window resize, and on window scroll to determine if it's within the viewable area, then if so load a server script with AJAX to increment the counter. (The div being in the vewing area doesn't necessary mean it is actially "viewed" by human eye though...)

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 26, 2013 11:38 PM   in reply to newbieeee

    What you need is a trigger that will increase the counter.

     

    There are two types of triggers that you can use

    1. When the div is visible in the browser window like this

    var div_offset = $('#div').offset();

    if( div_offset.top < $(document).height() &&

        div_offset.left < $(document).width() ) {

        // div is within window bounds

    }

    2. Have the user click a tab or similar that opens the div. Like a sliding panel. The onclick event is the trigger.

     

    There is no need for an XML file if all you want is the count. A simple text file that contains the counter is all yhat is required.

     

    A more elaborate solution would be to use a database table that also stores the date and time of the trigger.

     

    Hopefully this will give you the pointers that you need to continue.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 3:58 AM   in reply to Ben Pleysier

    The script you gave will not work. In order to test if the top of a <div> is within the viewable  area you'd do (using jQuery):

    if($("#div1").offset().top >= $(window).scrollTop() && $("#div1").offset().top <= $(window).scrollTop() + $(window).height())

    You may also want to test against the bottom of the <div>, as well as left and right of the <div>, if necessary.

     

    Then the test needs to run on following window events: load, resize, and scroll.

     

    Finally the test should be disabled once the view counter is incremented to avoid multiple counts per view.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 8:58 AM   in reply to newbieeee

    The snippet I wrote will test if the top of #div1 is within the viewable area, regardless of screen size. It's a snippet, so if I turn it to a function:

    function topInViewport(element) {

            return $(element).offset().top >= $(window).scrollTop() && $(element).offset().top <= $(window).scrollTop() + $(window).height();

    }

    You can use it like this in your script:

    topInViewport($("#mydivname")) // returns true or false

    There are a lot more to it to complete your task though (please refer to my earlier post). Do you know jQuery at all by the way?

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 11:12 AM   in reply to newbieeee

    The script needs more code to function properly Here's a quick example - I put comments so hopefully you know what's going on:

    <script>

    jQuery(function($){ init(); }); // start jQuery when DOM is ready

     

    function init() { // start

        setWindow(); // set up window events

    }

     

    function setWindow() {

        $(window).ready(function(e) { // when window is ready

            viewportLog();

        }).resize(function(e) { // when window is resized

            viewportLog();

        }).scroll(function(e) { // when window is scrolled

            viewportLog();

        });

    }

     

    function viewportLog() { // log view counter

        if(topInViewport($("#mydivname"))) { // if the element is in viewport

            $(window).unbind(); // remove event listeners from window as not needed anymore

            $.ajax(yourServerScriptURL); // run the counter script

        }

    }

     

    function topInViewport(element) { // is the top of the element in viewport?

        return $(element).offset().top >= $(window).scrollTop() && $(element).offset().top <= $(window).scrollTop() + $(window).height();

    }

    </script>

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points