Skip to content

Instantly share code, notes, and snippets.

@marklchaves
Last active June 16, 2021 02:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marklchaves/59aec333bd8b6732aa29ba52d6fa1468 to your computer and use it in GitHub Desktop.
Save marklchaves/59aec333bd8b6732aa29ba52d6fa1468 to your computer and use it in GitHub Desktop.
Highlight the popup triggers on a page. Original and minified versions provided.
(function ($) {
$("style#pum-highlighted").remove();
$("body").append(
$("")
.attr("id", "pum-highlighted")
.text(
".pum-highlighted { background-color: rgba(255, 255, 0, .75)!important; outline: 3px dashed #fe5d26ff !important; }"
)
);
function highlight() {
if ($(".pum-highlight").hasClass("pum-highlighted")) {
$(".pum-highlight").removeClass("pum-highlighted");
} else {
$(".pum-highlight").addClass("pum-highlighted");
}
}
$(".pum-trigger").toggleClass("pum-highlight");
$("[class*='launch']").toggleClass("pum-highlight"); // Your custom trigger classes.
if (window.pum_bookmark_button_highlighter === undefined) {
window.pum_bookmark_button_highlighter = setInterval(function () {
highlight();
}, 500);
}
})(jQuery);
// Add "javascript:" to the front of this code to run it as a bookmark. Don't include this comment.
(function(h){function i(){h(".pum-highlight").hasClass("pum-highlighted")?h(".pum-highlight").removeClass("pum-highlighted"):h(".pum-highlight").addClass("pum-highlighted")}h("style#pum-highlighted").remove(),h("body").append(h("").attr("id","pum-highlighted").text(".pum-highlighted { background-color: rgba(255, 255, 0, .75)!important; outline: 3px dashed #fe5d26ff !important; }")),h(".pum-trigger").toggleClass("pum-highlight"),h("[class*='launch']").toggleClass("pum-highlight"),void 0===window.pum_bookmark_button_highlighter&&(window.pum_bookmark_button_highlighter=setInterval(function(){i()},500))})(jQuery);
@marklchaves
Copy link
Author

marklchaves commented Jun 15, 2021

If the highlighting doesn't work right away, manually add the custom CSS below.

/** Highlight for Popup Maker debug tools. */
.pum-highlighted { 
	background-color: rgba(255, 255, 0, .75)!important; 
	outline: 3px dashed #fe5d26ff !important; 
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment