vendredi 23 octobre 2015

Use Cookies to prevent user clicking link twice

I am trying to prevent the class .activeAdv being added if the link within has it's URL stored in cookie, this cooke is added if user clicks links so basically I am trying to stop returning users clicking same link twice.

The link is by default hidden underneath a div which animates on addition of .activeAdv class, revealing link.

Current code is below along with codepen example of project. I'm guessing I need to wrap the activeAdv addClass in an IF conditional which:

  • Gets value of child link's href
  • Check to see if a matching cookie exists
  • Only add .activeAdv if condition returns false

I think I have the right idea and have got as far as setting cookie on click of link, I am struggling with the IF statement though, could anyone lend a hand?

http://ift.tt/1PFQE7Y

        <article>
             <div id="on-1" class="box">
                 <h2>1 dec</h2>
             </div>
             <div class="present">
                content
               <a href="http://www.google.com">http://ift.tt/19KruvX;
             </div>
         </article>


    // Checks for content within .present, if TRUE adds .activeAdv animation class
    $(".present").filter(function(){
        return $(this).html().trim().length > 0;
    }).parent().addClass('activeAdv');


    // When link clicked, store its URL in cookie
    $( ".present a" ).click(function() {
       $.cookie($(this).attr('href'), true);
    });

    if ( '(".present").html().trim().length > 0;' ) {
        if ( '(".present a").attr("href")' === "http://www.google.com") {
            $(this).parent().addClass('activeAdv');
        }
    }

After a bit of thinking I have come up with a different IF statement which may be along the right lines

    // Checks if content exists
    if ( '(".present").html().trim().length > 0;' ) {

        // Checks if HREF of child link matches existing cookie (using a string for testing)
        if ( '(".present a").attr("href")' === "http://www.google.com") {
            $(this).parent().addClass('activeAdv');
        }
    }

Aucun commentaire:

Enregistrer un commentaire