Foundation CSS & Tabs

[zombiesbyte]

I'm more of a bootstrap kinda-guy but decided to try and work with Foundation, something I've not done before and so far it's been quite straight forward. I still feel there's a missing size in between small and medium but it's cool.

I'm trying to implement tabs and have struggled to get them working. I realised after about 30 minutes that I was working with the wrong version

Anyway...

Foundation 6 has a simpler form of tab insertion over 5 but after setting up the html as illustrated on their page the tab buttons just work like jump to links with no hidden tab data (i.e. everything is just served up on the page without needing to toggle the tab titles).

Then I found a part that said I needed to include js/foundation.tabs.js (http://foundation.zurb.com/sites/docs/javascript.html#initializing)

I don't have this file in the CC distro so I downloaded the foundation-6.2.3-complete from the Foundation website only to find that it is still missing foundation.tabs.js. A google search hasn't revealed anything. What am I missing?

 

Also, as a side question, I find this link a bit disconcerting as it hijacks your browser back button.

http://foundation.zurb.com/sites/docs/v/5.5.3/components/tabs.html

If you insert the address above into a tab with some history on the back button then load the page. After the page is loaded I challenge you to go back using the browsers back button. You'll see your back button is constantly hijacked. I just want to make sure that this foul play is not used in the latest version of Foundation 6?

Cheers

James

[bsmither]

Here's how I see it: If you download the Foundation package that has the "kitchen sink", all the individual sub-functions are included in the one and only foundation.js file (could be minimized). (I infer from how the docs are written that one needs the individual function javascript files, but elsewhere the docs say that the "complete" kitchen sink version has them all.)

I think the browser's History function is getting manipulated by the Foundation Docs pages and not by Foundation itself. This behavior is not seen when cyclying through a CubeCart storefront Product page's tabs.

[zombiesbyte]

I'm

The way they refer to their own scripts is silly. The wizard that builds your script collection doesn't mention anything about tabs.js.

I've copied their example and placed it inside a document without editing anything. It still doesn't work and it's from the latest Foundation ver 6.

<ul class="tabs" data-tabs="" id="example-tabs">
	<li class="tabs-title is-active"><a aria-selected="true" href="#panel1">Tab 1</a></li>
	<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
      <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. 		Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
  </div>

  <div class="tabs-panel" id="panel2">
      <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie 		magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
  </div>
</div>

 

The output of which is: (screen grab)

EDIT: Looks like the screen grab didn't save, it was just an unordered list and both divs show content (neither hidden)

I see that version 5 uses Class "tab-title" and version 6 uses "tabs-title" which is great, can you imagine if PHP was like this (this is a hideous version modification)

Anyway when I try to check their script for the version they don't use any reference: here's the header information... they seriously need to start pulling their socks up, none of this seems right to me.

 

/* Foundation Responsive Library
 * http://foundation.zurb.com
 * Copyright 2014, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 ...
 */

Also, I'm not sure what happened but CC ships with 1.foundation.min.js which isn't a min-ified version either.

So my question is what version of Foundation does CC have pre-installed/pre-packaged (this is the skin I used https://demo.cubecart.com/cc6/index.php)?

Cheers

James

 

 

 

 

Edited September 4, 2016 by zombiesbyte
Screen grab went missing after submitting

[bsmither]

In CC6012's Foundation file 1.foundation.min.js, line 296: version : '5.5.2',

(CC603 and CC602 uses version 5.5.1 not actually minified, CC601 and CC600 uses version 5.4.7 and is minified.)

However, CubeCart's code does not depend on anything about the skin (other than info provided in the config.xml file). If your skin wants to use Foundation 6, there is nothing to stop you.

The tab functionality is at line 4865.

There were several complaints from third-party developers that expressed the need for all javascript and CSS files be expanded - even if it meant the filenames continued to have 'min'. I suppose once CubeCart's Foundation skin is without defect, these files can go back to being actually minified.