CSS targets
-
Hello,
I’m trying to add custom css to a pop up to make it appear when a image has been clicked or page has been clicked. I have added “div classes” into the field provided for css on the editing page but the pop up is not shoeing when the image or field is clicked. Is there a certain way you must input it to make it appear once specific div class is clicked?
Thank you.
-
@jbradford2010 – If you are using the Custom Selectors field then yes you can use any CSS or jQuery Selector there. This should get you started https://www.sitepoint.com/web-foundations/css-selectors/
Hope that helps. Please take a moment to rate and review the plugin and or support.
@danieliser – I have tried using multiple classes and I still can’t seem to get it the work.
This is what I’m working with. Picture.
I tried inserting the “wpb_wrapper” class ID but it is not working. Thanks.
@jbradford2010 – As I don’t have a link I may be off, but you say class and ID side by side, the 2 are signifigantly different so we need to clarify which you mean.
< element id=”uniqueID” class=”some-class”
So in CSS selectors
#uniqueID {} .some-class
So if your class is wpb_wrapper you would insert .wpb_wrapper, but be careful as that sounds like a general class meaning it could be on dozens or more elements making them all trigger the popup.
Hope that helps.
@danieliser – I did finally get it to work. Just had to identify the exact class that was being clicked. Also, could you tell me file location in back end that will let me set the “click”. I want to be bale to change it from one click to about 3 or 4 clicks.
Thanks!
@jbradford2010 – Can you elaborate on 3 or 4 clicks, do you mean multiple elements or you want it to work on triple clicking?
If multiple elements add a comma between each rule.
.my-class, #some-ID, .another-class
Now all of those will trigger it. Hope that helps.
@danieliser – Sorry for not being clear. I wanted to change it for it not to open until the css target specified has been clicked 3 times. It opens after being clicked once. I want to change it to open after 3 clicks. Thank you.
@jbradford2010 – Just to clarify, do you mean 3 clicks in one page view, one session or over the lifetime of the user?
In any case you will need to consider writing some custom JavaScript for the on click event of your button.
Change button.my-button to a CSS selector for your button.
Change popmake-123 to match your popup ID of popmake-# (# = postID)(function ($, document, undefined) { "use strict"; $('button.my-button').on('click', function () { var count = $.pm_cookie('my_custom_cookie'); if (count === undefined) { count = 1; } else { count = parseInt(cookie, 10) + 1; } // Open popup #123 if count >= 3. if (count >= 3) { $('#popmake-123').popmake('open'); } else { $.pm_cookie( 'my_custom_cookie', count, null, // Null for sessions (close browser clears it), otherwise use something like "1 week 2 days 3 hours". '/' ); } }); }(jQuery, document));
You can add it to your footer using something like this https://docs.wppopupmaker.com/article/84-getting-started-with-custom-js
Hope that helps, please take a moment to rate and review the plugin and or support.
I was wanting it to reset every day. I have added the code properly with all the changes and I’m not getting the popup after three clicks. I have tried it with the popmake ID number and name and still nothing. Also, should I have the pop up still linked to the specific page I want it to appear on in the popupmaker editor in order for this to work? I have tried almost every combination of things I would know to do. I even created a whole new popup just to see if I could get it ti appear and still nothing. Any help would be great. Yes I plan on supporting because I believe this can work and the support for this plugin is amazing. This is what mine looks like.
((function ($, document, undefined) { "use strict"; $('.custom_masonry_gallery_item_content').on('click', function () { var count = $.pm_cookie('1 day'); if (count === undefined) { count = 1; } else { count = parseInt(cookie, 10) + 1; } // Open popup popmake-new-winner if count >= 3. if (count >= 3) { $('popmake-new-winner').popmake('open'); } else { $.pm_cookie( '1 day', count, null, // Null for sessions (close browser clears it), otherwise use something like "1 week 2 days 3 hours". '/' ); } }); jQuery, document));
If I’m doing something wrong please let me know. Thank you.
@jbradford2010 – I think you need to scroll sideways and read the longer comment ??
Here is a breakdown of the pm_cookie function args
$.pm_cookie( 'my_custom_cookie', // Cookie Name (no spaces) count, // Cookie Value null, // Cookie Time : null = session, otherwise "1 day" '/' // Path, / means sitewide );
So you need to change the 3rd value to “1 day” and the first value to something like “triple_click_button_check”
Also your popup selector is incorrect. In this case you have to use the numeric ID as you are selecting the popup itself. Our built in click triggers look for the popmake-# and popmake-name classes on other elements, but those won’t work to select the popup itself.
So in your case it needs to be $(‘#popmake-123’) where # indicates an ID rather than a class.
Correct those issues and try again, if that doesn’t work let me know if there is a link I can look at.
OK. Maybe I’m just really terrible at this. Bu This is what I have now. I was not sure if I was supposed to change the ‘#123’ to the ID as well but when I checked the ID live on the website the inputed numbers are the ones I got. Here is the code now and the link to my site is below it.
((function ($, document, undefined) { "use strict"; $('.custom_masonry_gallery_item_content').on('click', function () { var count = $.pm_cookie('1 day'); if (count === undefined) { count = 1; } else { count = parseInt(cookie, 10) + 1; } // Open popup popmake-15751 if count >= 3. if (count >= 3) { $('popmake-15751popmake-123')').popmake('open'); } else { $.pm_cookie( '"triple_click_button_check"', // Cookie Name (no spaces) count, // Cookie Value null, // Cookie Time : null = session, otherwise "1 day" '/' // Path, / means sitewide ); } }); jQuery, document));
@jbradford2010 – Given the info you updated here is what it should look like.
((function ($, document, undefined) { "use strict"; $('.custom_masonry_gallery_item_content').on('click', function () { var count = $.pm_cookie('triple_click_button_check'); if (count === undefined) { count = 1; } else { count = parseInt(cookie, 10) + 1; } // Open popup popmake-15751 if count >= 3. if (count >= 3) { $('#popmake-15751').popmake('open'); } else { $.pm_cookie( 'triple_click_button_check', count, "1 day", '/' ); } }); jQuery, document));
Hope that helps.
@danieliser – It did not work. Would you be open to me hiring you to finish the rest?
Email me at [email protected].@jbradford2010 – That is an option, we also have a priority support option which you can purchase. Though it may be more cost effective at this point to do something based on time since you seem to just need help getting over the finish line.
In any case drop me a line via support at wppopupmaker.com
- The topic ‘CSS targets’ is closed to new replies.