Poprop triggered by a html link - Solution

Big White Duck BWD Support
1

I am struggling to create some HTML code to use in a Foundation1 TopBar Custom zone using RW7 and S4.

Thinking this might be a Custom Zone issue, I recreated the code in a HTML stack on the page, but this still doesn’t trigger the popdrop. Setting up a ButtonPlus with a link set to just javascript:void(0), the correct Add a data attribute of data-pop-drop and Data Value of popDrop1 does work when using BP2.

Then copying the button HTML using inspector, removing the button specific stuff, I still can’t get the HTML link to trigger the popdrop. I looked in the BP2 HTML and I wasn’t expecting the following data-pop-drop="" data-popdrop-linked="popDrop1".

So what would be the correct way to make a link such as <li><a href='#'>CONTACT</a></li> trigger a popdrop?

2

It should work if you just add it to your code like this:

<li><a href="#" data-pop-drop="popDrop1">CONTACT</a></li>

2 Likes
3

That worked perfectly. Thanks

4

What @habitualshaker says.

@Webdeersign don’t over think it - just follow the PopDrop instructions and don’t try to reverse engineer it from the browser inspector. You are looking at the attributes added after the PopDrop JS has run. By adding the data-popdrop-linked attribute you have excluded it from processing as PopDrop adds this when its events are bound to prevent recursion.

5

I would still not use the # though - just to make sure you don’t trigger a jump to the top of the page. You don’t need a url. We only have to use the javascript:void(0) trick when using the RW link dialog to prevent an empty URL or a # which both can jump.

<li><a data-pop-drop="popDrop1">CONTACT</a></li>

6

Good to know. Many thanks. PopDrop is still a bloody brilliant stack.

7

Thanks