Zurb Foundation tabs modX problem

☆ A M B ☆
1,780 Posts

Frogabog Reply #11, 13 years, 11 months ago

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

MODX gets really surreal after a few beers... wooo wooo....

I'm only on #2.

lol, forgot to pinpoint it:

 <dd class="active"><a href="#contactForm">Contact Our Company</a></dd>
        <dd><a href="#contactPeople">Specific Person</a></dd>
      </dl>

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 #12, 13 years, 11 months ago

I don't understand, because my template is not formatted in that way, that is the source of the page after it is rendered.

here is my modx chunk:

<!-- Contact Details -->


    <div class="nine 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="#contactForm">Contact Our Company</a></dd>
        <dd><a href="#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="ten 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="ten 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 -->

☆ A M B ☆
1,780 Posts

Frogabog Reply #13, 13 years, 11 months ago

The extra class is mucking it up.

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

change contact-us#contactForm to #contactForm

OK, hang on. You're saying that the code you posted is the source?

Somehow the contact-us class is being applied.

It might be a good idea to break this down into chunks, and then apply the ID's necessary for the tabs. The contact-us class is what breaks the tab function. Wherever you're applying it, omit it and add it in another div. if needed.

[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 #14, 13 years, 11 months ago

That's the problem. I'm not applying it. My last post contains the actual modx source, and my previous post with code was the source of the page after it was rendered. I am not sure where the extra class is coming from. It makes sense, but I cannot figure out why its jacked up or where that class is being applied.

☆ A M B ☆
1,780 Posts

Frogabog Reply #15, 13 years, 11 months ago

OK, it must be coming from the contact form somehow. But I can't find the documentation for it, or the example you're referring to. I'd like to see it.

Try changing the ID for the contactForm. Call it something else entirely.

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 #16, 13 years, 11 months ago

http://foundation.zurb.com/download.php
use the customize feature and add the HTML templates. then look at the structure of the Contact.html
or you can see them live here:
http://foundation.zurb.com/templates.php

interesting tidbit:
If I load up the contact.html locally it works. if i load the exact same html/css/js code to my modx test site, the tabs will not work.

☆ A M B ☆
1,780 Posts

Frogabog Reply #17, 13 years, 11 months ago

Foundation won't give me the templates from the customize page. Weird.

I copied the contact html from the templates documentation page, stuck that into the same test page I used previously and it again, works fine. This is a Flexibility with Foundation 3.1 install.

Try searching the Foundation forums, at Github too. This is Foundation's handiwork, not MODX's. MODX doesn't do anything you don't tell it to do, especially adding classes.

Have you inspected the element to see where the contact-us class is coming from?

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 #18, 13 years, 11 months ago

I am not using flexibility. This is a base MODx install, with a few packages and base Foundation 3.2. I had the same issues with 3.1.1

This IS a MODx issue in my instance. That class is being added by MODx for some reason. Like I said, if I load up the contact.html locally it works fine, if I do a direct copy of that contact.html to a MODx install, it adds those classes once rendered. it could be a setting in MODx or a conflicting package, but it most definitely is something in my MODx install/config causing these issues.

Renaming the classes doesnt fix my issue. There is definitely something going on here with my particular instance. I will test everything later today by putting up some test MODx installs to rule out packages.

☆ A M B ☆
1,780 Posts

Frogabog Reply #19, 13 years, 11 months ago

Flexibility is Foundation nearly raw except for the MODX TV's and chunks. This particular install is using Foundation 3.1.

MODX doesn't have classes to add, even if it could on it's own. It does not have a contact-us class in the installation, or the configuration. It's simply not possible for MODX, on it's own to just add a class to a certain element. There is something causing MODX to add the class, not the other way around.

What does inspection of the contact-us element say? Is it linked to a certain css file perhaps? Have you searched through the js for "contact-us"? Adding classes in output is almost certainly coming from one of the js files.

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 #20, 13 years, 11 months ago

i know what flexibility is. i have it installed on one of my test sites. its very cool, however, i wanted a fresh foundation install, and i am creating my own migx/settings pages. i love the implementation flexibility uses, but i have began creating my own.

i understand that MODX doesnt have classes to add, i have been using MODX for quite a few years now.

but please, listen and explain to me why i can load STRAIGHT HTML from my computer, like AS-IS from the templates that foundation provides, but yet when i put that EXACT same configuration/HTML code into MODx, that class gets added....

Running the HTML from local with no CMS at all, just straight HTML/CSS/JS, that class is not there. That is the piece I am trying to figure out. Obviously I am not blaming MODx in general, but something, and I cannot stress this enough, IN MY MODX CONFIGURATION/INSTALL, is causing this. It appears that by me saying that its something IN MY MODX INSTALL/CONFIGURATION/SETUP that is wrong here, it rubs you the wrong way. I am in no way trying to say this is a MODX problem in general, but it IS a modx problem HERE, RIGHT HERE, RIGHT NOW, ON MY SITE, in the configuration i currently have.

I was looking for pointers, but am getting nowhere here. Every other piece of Foundation is working fine in my site but the tabs, and its driving me nuts. i showed my code, i showed the source of the rendered page, yet something is happening between the CODE and the RENDER....i have searched through the js and found nothing about contact-us, nothing about setting classes like that, etc. I am literally going through the entire thing over again.