Zurb Foundation tabs modX problem

83 Posts

stefonline Reply #1, 14 years, 3 months ago

i try to make tabs on a webpage with the Zurb Foundation framework. Everthing looks fine but the tabs are not working. When i click on a tab the browser goes the the first page of the website.
I do something wrong.......
regards
Stefan

http://www.stefan-as.nl/graf/index.php?id=5

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 14 years, 3 months ago

The links aren't being generated properly; your site uses http://www.stefan-as.nl/graf/index.php?id=2 as an example, so you would need something like http://www.stefan-as.nl/graf/index.php?id=5#simple1. When generating your links, you'll need something like

[~[*id*]~]#simple1

to let MODx generate the proper URL plus the anchor.

For Revo, that would be

[[~[[*id]]]]#simple1

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

83 Posts

stefonline Reply #3, 14 years, 3 months ago

Thanks!

34 Posts

pirateghost Reply #4, 13 years, 11 months ago

mine is generating the links properly, but the tabs just plain refuse to work.

☆ A M B ☆
1,780 Posts

Frogabog Reply #5, 13 years, 11 months ago

Did you make sure to add the ID to both the dd and the li?

If you want functional tabs, just be sure that each tab is linked to an ID, and that the corresponding tab has an ID of #tabnameTab.



<dl class="tabs">
  <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
  <dd><a href="#simple2">Simple Tab 2</a></dd>
  <dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content">
  <li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
  <li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
  <li id="simple3Tab">This is simple tab 3s content.</li>
</ul>

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

34 Posts

pirateghost Reply #6, 13 years, 11 months ago

yes.

i even tried the example you just posted.

the active class displays, and the url changes to the new anchor upon clicking a tab, but it remains on the active class tab

☆ A M B ☆
1,780 Posts

Frogabog Reply #7, 13 years, 11 months ago

That's odd. Might you have any other "active" classes in css that are interfering? Have you styled any IDs from your tabs yet? What does the source of the page show?

I just plunked tabs into a Foundation 3.1 site this morning, and it worked right away. I used the "tabs contained" class and markup in a chunk, each li tab calling chunks with getResources calls, dropped into a TV using the If snippet in the template for an optional 6 column row. (my point, a lot of MODX stuff going on and it still worked - my only complaint is the paragraph tag tinyMCE added to the TV in the output)

for kicks and giggles, here's my chunk:

<dt><h3>Support Groups</h3></dt>
<dl class="tabs four-up contained">
  <dd class="active"><a href="#sbsnwGroups">SBS Groups</a></dd>
  <dd><a href="#otherGroups">Other Groups</a></dd>
  <dd><a href="#oregonGroups">Oregon Groups</a></dd>
  <dd><a href="#washingtonGroups">Washington Groups</a></dd>
  </dl>
<ul class="tabs-content contained">
  <li class="active" id="sbsnwGroupsTab">[[$sbsnwGroupsList]]</li>
  <li id="otherGroupsTab">[[$otherGroupsList]]</li>
  <li id="oregonGroupsTab">[[$oregonGroupsList]]</li>
  <li id="washingtonGroupsTab">[[$washingtonGroupsList]]</li>
</ul>

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

34 Posts

pirateghost Reply #8, 13 years, 11 months ago

thanks. I am attempting to use the contact.html example from foundation 3.2 to style a contact us page for a site I am working on. this is the source of what I have at the moment:

<!-- Contact Details -->


    <div class="eight columns">

      <h3>Get in Touch!</h3>
      <p>We'd love to hear from you. You can either reach out to us as a whole and one of our awesome team members will get back to you, or if you have a specific question reach out to one of our staff. We love getting email all day <em>all day</em>.</p>

      <dl class="contained tabs">
        <dd class="active"><a href="contact-us#contactForm">Contact Our Company</a></dd>
        <dd><a href="contact-us#contactPeople">Specific Person</a></dd>
      </dl>

      <ul class="tabs-content contained">
        <li id="contactFormTab" class="active">
          <div class="row collapse">
            <div class="two columns"><label class="inline">Your Name</label></div>
            <div class="nine columns"><input type="text" id="yourName" placeholder="Jane Smith" /> </div>
          </div>
          <div class="row collapse">
            <div class="two columns"><label class="inline">Your Email</label></div>
            <div class="nine columns"><input type="text" id="yourEmail" placeholder="[email protected]" /> </div>
          </div>

          <label>What's up?</label>
          <textarea rows="4"></textarea>

          <button type="submit" class="radius button">Submit</button>
        </li>

        <li id="contactPeopleTab">
          <ul class="block-grid five-up">
            <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[person]" /><br />Mal Reynolds</a></li>
            <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[person]" /><br />Zoe Washburne</a></li>
            <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[person]" /><br />Jayne Cobb</a></li>
            <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[person]" /><br />Simon Tam</a></li>
            <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[person]" /><br />River Tam</a></li>
            <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[person]" /><br />Hoban Washburne</a></li>
            <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[person]" /><br />Shepherd Book</a></li>
            <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[person]" /><br />Kaywinnet Lee Fry</a></li>
            <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[person]" /><br />Inarra Serra</a></li>
          </ul>
        </li>
      </ul>

    </div>

    <!-- End Contact Details -->

as you can see, I am attempting to just get it working without any MODx variables or code at all at first. just a basic working tab structure. I am having no problems with accordion content (using MIGX for accordions on my site) and everything else appears to be working fine. It is just the tabs giving me issues.

☆ A M B ☆
1,780 Posts

Frogabog Reply #9, 13 years, 11 months ago

To my untrained eye, it looks as if the contact-us class is interfering with the contactForm ID you're using for tabs.

I dropped this into a test page, removed the contact-us class and the tabs seems to work. The non-active tab has no styling, but I can click it and switch to the peoples tab.

Edit: I see now that the non-active tab has no styling in my install either. So I assume it's not supposed to out of the box. [ed. note: frogabog last edited this post 13 years, 11 months ago.]

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

34 Posts

pirateghost Reply #10, 13 years, 11 months ago

what contact-us class are you referring to? i must be missing something in my drunken state