Adding Custom js code to page load rule

[yabagna_segreda]

Hi I'm trying to set a page load rule to only fire when a div is been displayed so i tried using this custom code: 

if($(".av_hidden-content").css('display') == "none"){return false;}

But the rule does not fire and I get this from the console

(){return"none"==$(".av_hidden-content").css("display")?!0:!1} for rule "Redd's Apple Ale: AV test" not met.

Would you please let me know if i'm doing this right? or if I need to change something in my script?

:) thank you!

[yabagna_segreda]

I also tried setting it like this but it did not work either :(

($(".av_hidden-content").css('display') == "none")? true : false;

[Former Community Member]

Hi, Yabagna.

You are trying to have the rule fire when a div with the class "av_hidden-content" is visible?

If so, I recommend you simplify your script a bit. You do not need the if statement/block, nor do you need the shorthand ?true:false bit. Just wrap a statement that you want to be true in parentheses.
Assuming you have jQuery loaded and available on your page, you could use something like:

($(".av_hidden-content").css("display") != "none")

If not using jQuery, then plain JS would be something like:

(document.getElementsByClassName("av_hidden-content")[0].style.display != "none")

Note that, if you are instead trying to fire the rule when the div is actually being viewed, then you might instead consider using an event-based rule with the 'enters viewport' event type.

[i8sand · Accepted solution]

AllDayDev wrote...

Hi, Yabagna.

You are trying to have the rule fire when a div with the class "av_hidden-content" is visible?

If so, I recommend you simplify your script a bit. You do not need the if statement/block, nor do you need the shorthand ?true:false bit. Just wrap a statement that you want to be true in parentheses.
Assuming you have jQuery loaded and available on your page, you could use something like:

1. ($(".av_hidden-content").css("display") != "none")

If not using jQuery, then plain JS would be something like:

1. (document.getElementsByClassName("av_hidden-content")[0].style.display != "none")

Note that, if you are instead trying to fire the rule when the div is actually being viewed, then you might instead consider using an event-based rule with the 'enters viewport' event type.

I did something similar with Event Based Rules. Because our devs change class names and IDs without much notice, we decided to use HTML data attributes for consistency (read: untouched by anyone other than folks on the analytics team) in our tracking names. For example, we used our CMS to include an attribute called data-lead-confirmed on any screen displaying a confirmation message whenever a lead form is completed. We then use an EBR with a Condition>Event Type=Element Exists>Element Tag or Selector=*[data-lead-confirmed] to pull the value of the data attribute, assign it to a prop or evar. We track this EBR as an event as well. The nice thing about this set up is that, using our CMS, we can post multiple data attributes alongside this [data-lead-confirmed] attribute and pull the value of each of those additional attributes and assign them to props or evars as well.