{"id":551,"date":"2016-02-09T14:50:51","date_gmt":"2016-02-09T14:50:51","guid":{"rendered":"http:\/\/popupdomination.com\/docs\/?p=551"},"modified":"2016-02-09T14:50:51","modified_gmt":"2016-02-09T14:50:51","slug":"on-object-click-triggering","status":"publish","type":"post","link":"https:\/\/popupdomination.com\/docs\/on-object-click-triggering\/","title":{"rendered":"Triggering On Object Click"},"content":{"rendered":"

How to set up PopUp triggering On Object Click?<\/h1>\n

If you want PopUp to be triggered by clicking the object, there are basically two ways to do it, however in both cases you’ll have to use some easy coding.<\/h2>\n


\n
+<\/span>-<\/span>Object Class from Source Code<\/a><\/div>
<\/p>\n

1. Let’s say, we want PopUp to trigger when someone click on the website top, we right click on the object we are interested in and click Inspect (Chrome) or Inspect Element (FireFox, Edge):<\/h3>\n

\"Click1\"<\/p>\n

2. In the HTML we look for class that is associated with the object we’re interested in. In our case it’s top:<\/h3>\n

\"Click2\"<\/p>\n

3. Now we go to PopUp Wizard and in Step 3 at When to show choose On Object Click and type the class name\u00a0 top in input field. That’s it!<\/h3>\n

\"Click3\"
\n 
\n<\/div>
\n

+<\/span>-<\/span>Self made Object Class<\/a><\/div>
<\/p>\n

1. If your website platform allows some custom HTML you can make your own Object Class name. Let’s say, we want to PopUp to appear, when someone clicks the advertising image named ad_<\/em>image.png<\/em> and it’s stored at <\/strong>http:\/\/popupdomination.com\/images\/03\/ . <\/em>We add the following line in our page: <a class=”popdom” href=”#”><img src=”http:\/\/popupdomination.com\/images\/03\/ad_image.png” alt=”umbrellas with 50% discount” width=”425″ height=”319″ \/><\/a>. <\/em>Where:<\/strong><\/h3>\n
    \n
  • \n

    <a class=”popdom” href=”#”><\/em><\/strong> – we tell that Class name will be popdom and there’s no link attached;<\/h3>\n<\/li>\n
  • \n

    <img src=”http:\/\/popupdomination.com\/images\/03\/ad_image.png”<\/em>\u00a0 – we tell the address of the image; <\/strong><\/h3>\n<\/li>\n
  • \n

    alt=”umbrellas with 50% discount” width=”425″ height=”319″ \/><\/em><\/strong> – tell the alt <\/em>name, dimensions of image and close the script;<\/h3>\n<\/li>\n
  • \n

    <\/a><\/em><\/strong> – we close the class.<\/h3>\n<\/li>\n<\/ul>\n

    Note: <img class=\u201cpopdom\u201d> without <a> and <\/a> is also acceptible, however with <\/a> the cursor changes on hovering object such visitor sees, that object is clickable.<\/strong><\/h3>\n

    2. Now we go to PopUp Wizard and in Step 3 at When to show choose On Object Click and type the Class name\u00a0 popdom in input field. That’s it!<\/h3>\n

    \"Click3-1\"
    \n<\/div>
    \n<\/div>
    \n <\/p>\n","protected":false},"excerpt":{"rendered":"

    How to set up PopUp triggering On Object Click? If you want PopUp to be triggered by clicking the object, there are basically two ways to do it, however in both cases you’ll have to use some easy coding.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[47,63,78],"_links":{"self":[{"href":"https:\/\/popupdomination.com\/docs\/wp-json\/wp\/v2\/posts\/551"}],"collection":[{"href":"https:\/\/popupdomination.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/popupdomination.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/popupdomination.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/popupdomination.com\/docs\/wp-json\/wp\/v2\/comments?post=551"}],"version-history":[{"count":0,"href":"https:\/\/popupdomination.com\/docs\/wp-json\/wp\/v2\/posts\/551\/revisions"}],"wp:attachment":[{"href":"https:\/\/popupdomination.com\/docs\/wp-json\/wp\/v2\/media?parent=551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/popupdomination.com\/docs\/wp-json\/wp\/v2\/categories?post=551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/popupdomination.com\/docs\/wp-json\/wp\/v2\/tags?post=551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}