Add support for "data" attributes to template regions

I am creating a responsive template using Percussion’s base (non-responsive) template and adding all the Foundation file references manually.

So in order to use the Foundation drop downs and the off-canvas menus, the following type of attribute needs to be assigned to the div class and here are a couple of actual examples (the ones that begin with “data-”:

How can I assign these to Percussion container regions that don’t have content? As far as I know, I can only assign classes to a region or widget. Please advise how I can accomplish this.


You are correct, you cannot assign data attributes directly through the CM1 interface. You would have to use javascript to add the data fields to the divs.

Hi Matt,

Can you please show me how to do that?

Sure Debbie. I’m going to show you two different ways to do this. Either way will work just fine.

Example 1

<script> <br /> $(document).ready(function(){ <br />
  document.getElementById('div_id').setAttribute('data', "[att]: ''); <br /> }); <br /> </script>   

In the above example, you will want to set the div_id to the id/name that you gave the div/region in Percussion. The [att] needs to be changed to whatever data- attribute you want. This is the part after data- . The []'s are not needed. If you need to do more than one attribute doe the following:

<script> <br /> $(document).ready(function(){ <br />
  document.getElementById('div_id').setAttribute('data', "[att]: 'att_value', [att2]: 'att2_value'''); <br /> }); <br /> </script>   

Example 2

<script> <br /> $(document).ready(function(){ <br />
  document.getElementById('div_id').dataset.[att] = "att_value"; <br /> }); <br /> </script>   

In this example, you will want to create the

document.getElementById('div\_id').dataset.[att] = "att\_value";

for each attribute you want to use. Like before change the div_id to the div/region id/name and then set [att] to the type of data attribute and then set the value it needs to have.

You will want to either do this at a page or template level depending on how ofter you need this.

That definitely solved the issue of adding the “data” attribute, thanks. There’s just one more obstacle to getting the Foundation off-canvas menu to work.

The entire page needs to be nested inside an “inner-wrap” class and then an “off-canvas-wrap” class. Percussion adds another div in between them and as a result the off-canvas menu will not function. To test this, I downloaded the source code that Percussion created, removed that extra div class=" perc-vertical " and the feature now works.

Here are the 3 divs and I believe I need to be able to do one of two things: either remove that extra div OR be able to assign the “inner-wrap” class to it.

Which is more doable?


With the way Percussion adds extra div’s, the easiest way would be to use javascript to add the class to a specific div.

You can use the following code


How do I single out a div called “perc-vertical” that Percussion automatically adds and is also not unique?

If that perc-vertical is inside another div that has a name/id you can do the following:

$('#div\_id .perc-vertical').addClass("inner-wrap");   

You will notice that the div_id has a # symbol in front of it. That signifies that it is the name/id of a div. The second one per-vertical has a . before it to signify it is a class.

The above code appeared to add the “inner-wrap” class to all Percussion-generated DIVs inside the outermost wrap. Our back-end developer just tweaked it and now it works. Thank you.

 $('#container-area \> .perc-vertical').addClass("inner-wrap"); 

Your welcome Debbie. I’m glad everything is working now.