Menu icon Foundation
Foundation scripts not running

Hi,

I've been stuggling with this for far too long... I'm wanting to use only the JS bits of foundation (interchange, abide, magellan) and write my own custom CSS.

I've included all the required scripts and am calling foundation but nothing is happening.... Any advice or ideas would be greatly appreciated.

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hi...</title>
    <script src="/js/vendor/modernizr.js"></script>
	</head>
	<body class="body">	
	
	<div data-interchange="[files/small.html, (small)], [files/mediul.html, (medium)], [files/large.html, (large)]">
	loading...
	</div>

	<script src="/js/vendor/jquery-1.11.0.js"></script>
    <script src="/js/vendor/fastclick.js"></script>
    <script src="/js/vendor/foundation/foundation.js"></script>
    <script src="/js/vendor/foundation/foundation.interchange.js"></script>
    <script>
    $(document).foundation();
    </script>
	</body>
</html>

Screen shot 2014 03 13 at 12.51.56 pm

jsjavascript

Hi,

I've been stuggling with this for far too long... I'm wanting to use only the JS bits of foundation (interchange, abide, magellan) and write my own custom CSS.

I've included all the required scripts and am calling foundation but nothing is happening.... Any advice or ideas would be greatly appreciated.

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hi...</title>
    <script src="/js/vendor/modernizr.js"></script>
	</head>
	<body class="body">	
	
	<div data-interchange="[files/small.html, (small)], [files/mediul.html, (medium)], [files/large.html, (large)]">
	loading...
	</div>

	<script src="/js/vendor/jquery-1.11.0.js"></script>
    <script src="/js/vendor/fastclick.js"></script>
    <script src="/js/vendor/foundation/foundation.js"></script>
    <script src="/js/vendor/foundation/foundation.interchange.js"></script>
    <script>
    $(document).foundation();
    </script>
	</body>
</html>

Screen shot 2014 03 13 at 12.51.56 pm
Martijn over 5 years ago

I think I have the same problem. When I delete the modernizr script everything is working (in Chrome). Cant figure out what the problem could be. I've tried different versions of modernizr without any luck.

Could you test your site without modernizr to check if we have the same problem?

Darren Wood over 5 years ago

Okay—so I've found out how to fix this issue. As I mentioned I was using my own CSS therefore I was not including any foundation CSS—therein lies the issue... There are a number of critical lines of CSS required to get the scripts to run.

Obviously change the font-family values to match whatever you need...

meta.foundation-version {
  font-family: "/5.2.0/"; }

meta.foundation-mq-small {
  font-family: "/only screen and (max-width: 40em)/";
  width: 0em; }

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 40.063em; }

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em; }

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.063em)/";
  width: 90.063em; }

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.063em)/";
  width: 120.063em; }

meta.foundation-data-attribute-namespace {
  font-family: false; }