Does the markup have to be exact same?

[anujgakhar]

Hi there,

Excellent plugin!

However, I've got a quick question. Does the markup have to be exactly the same?

<dl>
 <dt>Heading 1</dt>
 <dd>Item 1</dd>
 <dd>Item 2</dd>
 <dd>Item3></dd>
 <dt>Heading 2</dt>
 <dd> Item 4</dd>
 <dd>Item 5</dd>
 </dl>

Or can I have a different markup like below ie. each set of dt and dd would be wrapped by a containing div?

e.g. the above would be rewritten like below

  <dl>
  <div>
    <dt>heading 1</dt>
    <dd>Item1</dd>
    <dd>Item2</dd>
     <dd>Item3</dd>
   </div>

     <div>
     <dt>heading 2</dt>
     <dd>Item4</dd>
       <dd>item5</dd>
      </div>

      </dl>

Any ideas?

[samatcd]

Your suggested markup would be Invalid HTML: DL can only directly contain DD and DT elements.

Aside from that, the plugin should work just fine with this provided the browser renders it correctly, you may need to use the 'headerSelector' option as defined in the documentation.

[anujgakhar]

Thanks for the quick response. I tried changing the 'headerSelector' but it didn't seemed to work. What would be the headerSelector given the above HTML ? I am looking at it in Safari and seems to render fine. But plugin doesn't work.

[samatcd]

Seems to work just fine when I try it... check out this demo.

[anujgakhar]

Thanks a lot for a quick demo... :)

Does the plugin needs to be called from the HEAD section of the page? I have a similar markup but when I debug it in the console, I don't see the fakeheader prepended to the HTML. I am calling the plugin from an AngularJS directive after the content has been rendered.

[samatcd]

No, the plugin can be called from anywhere, as long as the list already exists in the DOM. Are you certain that your code is being run? Perhaps put an alert, or log message where you're calling the plugin to make sure.

I've updated the example to show it being called from within the body, immediately after the list has been parsed.

[anujgakhar]

Hmm, the plugin code is definitely working in my case as I can see the inline styles being applied to the list. I just don't see the fakeheader which is what will make it all work I guess.

[samatcd]

Weird. Do you have anywhere you can leave an example for me to look at?

[anujgakhar]

OK, I was able to get it working. I had to delay the plugin execution by a second or so within the AngularJS directive to get it to work. Thanks for all your help.

I have noticed another issue. If you use -webkit-overflow-scrolling:touch on iOS the headers don't change until after the user has stopped scrolling. This is probably because on iOS, the scroll event only gets fired when scrolling has stopped. The solution would be use ontouchmove events along with the scroll event to change the headers with animation while the user is scrolling.....

[samatcd]

Thanks — Could you please open up a separate issue for that?