cferdinandi / tabby

Lightweight, accessible vanilla JS toggle tabs.
MIT License
598 stars 73 forks source link

Combining tabby with a Shop CMS #44

Closed Zariss closed 8 years ago

Zariss commented 8 years ago

Hi there,

I am rly happy with tabby so far. My Static sites work pretty well with it. But i have a question. I am currently trying to add tabby into a Shop CMS called "ShopWare"... it wen pretty well so far. The Javascript is loaded the css also. But somehow... chrome says me there is an error wich i dont get...

Uncaught TypeError: Cannot read property 'classList' of null (anonymous function) @ tabby.js:232 forEach @ tabby.js:58 hideOtherTabs @ tabby.js:229 tabby.toggleTab @ tabby.js:279 eventHandler @ tabby.js:294

i never changed something in the js. The only thing thats diffrent then usual is thats on a cms, the arel that is loaded gets another css style after 7 second via js timeout command. and the execusen of tabby.init(); is delayed by 8 seconds.

I dont know what to do. Tabby is kinda my last hope on my template. Hope someone has any idea what i can do to get that fiex. If you need any files to understand how it it's build just ask.

cferdinandi commented 8 years ago

@Zariss I'm looking at the code that's throwing the error, and it actually looks like an error in my code. The code assumes the tab has a sibling element, but if their are none, it will throw an error and stop working. I'll push a bug fix for this today.

Thanks!

Zariss commented 8 years ago

Oh, okay. Well just to make sure. This error only hapens on this CMS. Never happend on any html pages so far. The CMS works with TPL files to build the page. Hope this may help for analyse the problem.

Thanks for the quick reply!

Edit: Ah one thing i forgot to mention. The script only removes and adds the active on the default selected Tab. And this error message only shows up if i use any other button then the active.

cferdinandi commented 8 years ago

I'm thinking it's also possible that your CMS is stripping out the data attributes that make it all work. Take a look at the rendered markup. Do you still see data-tab on the elements? TinyMCE has a tendency to remove those.

If that's happening, you can change the selector in the init. Instructions here: https://github.com/cferdinandi/tabby#global-settings

Zariss commented 8 years ago

You may look it up. But i exatly used it liek always, and thats how its n the Demo only exeption is that i put an extra div arount UL and tabs-content. the {s namespace} is for text that will be added via backend of the CMS. The JS will be loaded on the index.tpl at the end of the page and the css in the header.tpl. The Regular way.

The data-tab is still there when the content is fully loaded.

filed deleted

Thanks the fix helped a lot now it's working ^^

cferdinandi commented 8 years ago

I just pushed a fix for the one issue here I'm aware of, but there may be more going on. Please update to version 9.1.0. I unfortunately cannot help debug specific CMS platforms.