2

I'm trying to implement an offcanvas to a site using zurb's foundation framework, for mobile viewing, and just copied the code for it from the documentation, but it just doesn't work.

the code is the following:

<script src="/js/vendor/custom.modernizr.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>

<script>
    $(document).foundation();
</script>
</head>
<body>
<!--offcanvas begin-->
    <div class="off-canvas-wrap">
        <div class="inner-wrap">

            <nav class="tab-bar show-for-small">
                <a class="left-off-canvas-toggle menu-icon">
                    <span>Foundation</span>
                </a>  
            </nav>


            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Foundation</label></li>
                    <li><a href="#">The Psychohistorians</a></li>
                    <li><a href="#">The test!</a></li>
                </ul>
            </aside>

            <section class="main-section">
            <!--offcanvas begin-page-content-->

                <!--content-->

            <!--offcanvas end-page-content-->
            </section>

            <a class="exit-off-canvas"></a>

        </div><!--inner-wrap-->
    </div><!-- off-canvas-wrap -->
<!--offcanvas end-->
</body>

Am I doing something wrong?

Iacchus
  • 2,671
  • 2
  • 29
  • 24

5 Answers5

5

In some instances this can be fixed by supplying the HTML data attribute data-offcanvas

  <div class="off-canvas-wrap" data-offcanvas>

See this fiddle for the working changes to your markup: http://jsfiddle.net/vooaqtxt/

Adam Elsodaney
  • 7,722
  • 6
  • 39
  • 65
3

I have replicated the problem, and found that moving jquery, foundation.min.js resources and the initialization call:

$(document).foundation();

to just before the closing </body> tag fixed the problem (leave modernizr.js in the head).

Edit: As @Jigar pointed out offcanvas.js does not need to be loaded externally.

p.s. In just about every case, it's best to place all your script references at the end of the page, just before </body>

Community
  • 1
  • 1
danwild
  • 1,886
  • 1
  • 26
  • 31
2

Unfortunately, Ribena's answer is not working anymore, at version 5.2.3, though it was at version 5.0.3.

For it to work now, the trigger javascript needs to be put:

  • or at the end of the <body> tag as it said in the docs, like Daniel said
  • or inside the <head> this way (using JQuery):

<script> $(window).bind("load", function () { $(document).foundation(); }); </script>

Iacchus
  • 2,671
  • 2
  • 29
  • 24
  • 1
    Thank you, solved my problem. The OR may not have been strong enough, took me several tries to finally move the code to the head of the document. Thanks! – nycynik Dec 08 '14 at 13:49
1

Update to Foundation 5.0.3 and your code should work fine again.

Ribena
  • 1,086
  • 1
  • 11
  • 20
1

You are missing the href="#" on your toggle button link

If the href="#" is missing, it will not work on mobile devices.

This is what your nav should look like:

<nav class="tab-bar show-for-small">
    <a class="left-off-canvas-toggle menu-icon" href="#">
        <span>Foundation</span>
    </a>
</nav>
iamtirado
  • 11
  • 2