Menu icon Foundation
Off-canvas unresponsive

Version 6.2.4- I downloaded the most basic package with the basic styles from the site. No NPM or Bower or any of that.

I was going through a tutorial and everything worked until I got to the off-canvas. I made sure I add the proper code for this version. The one there now is for the 6.3 but I found the one I think was for my version.

I had a bunch of JS errors, like $document.foundation is not a function, and unexpeced token for the dot (.)  Now I seem to have cleared those up. This is my script list inserted at the the bottom of the page.

<script src="js/vendor/jquery.js"></script>
  <script src="js/vendor/what-input.js"></script>
  <script src="js/vendor/foundation.js"></script>
  <script src="js/vendor/foundation.js"></script>
  <script src="js/app.js"></script>

Now I  have a button the top corner as it is supposed to be, but it just does nothing. There are no errors thrown so I don't know how to debug. In the tutorial it works for the guy right away. I am very disappointed with how much time this has taken. 

I'm using Chrome. Can anyone assist? I should also mention I have a Sinatra (ruby) server backend.

 

off-canvas

Version 6.2.4- I downloaded the most basic package with the basic styles from the site. No NPM or Bower or any of that.

I was going through a tutorial and everything worked until I got to the off-canvas. I made sure I add the proper code for this version. The one there now is for the 6.3 but I found the one I think was for my version.

I had a bunch of JS errors, like $document.foundation is not a function, and unexpeced token for the dot (.)  Now I seem to have cleared those up. This is my script list inserted at the the bottom of the page.

<script src="js/vendor/jquery.js"></script>
  <script src="js/vendor/what-input.js"></script>
  <script src="js/vendor/foundation.js"></script>
  <script src="js/vendor/foundation.js"></script>
  <script src="js/app.js"></script>

Now I  have a button the top corner as it is supposed to be, but it just does nothing. There are no errors thrown so I don't know how to debug. In the tutorial it works for the guy right away. I am very disappointed with how much time this has taken. 

I'm using Chrome. Can anyone assist? I should also mention I have a Sinatra (ruby) server backend.

 

This post has been closed. No new replies can be added.

vere diongzon almost 3 years ago

try the code below

 

<script src="js/vendor/jquery.js"></script>

 <script src="js/vendor/what-input.js"></script>

 <script src="js/vendor/foundation.js"></script>

<script>

$(document).foundation();

</script>

Chris almost 3 years ago

It does not work :(

 

I wanted to see if the page was pulling in the JS at all. I added the `<script src="js/app.js"></script>` back in

and inside I added a click event to the button, just to see if the button was working.

 

$(document).ready(function(){

  $('#test-button').on('click', function(){

    alert('test')

  })

});

(I added random id for test purposes.)

 

The alert did work so I know the app is pulling in the JS. 

 

Just to  lay it all out, I have 

<div class="off-canvas-wrapper">
      <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
           <p>Off campus Menu</p>
         </div>

  <div class="off-canvas-content" data-off-canvas-content>
        <button type="button" class="button" id='test-button' data-toggle="offCanvasLeft">Open Menu</button>

</div>
</div>
</div>

UPDATE:

I started brand new sites in 6.2.4 and 6.3 just to test out the off-canvas from fresh projects. I used the index.html that they come with, no server, and neither of them work, even right out of the box. 

The 6.2.4 gives me a page not found error. The 6.3 displays the off-canvas menu on the index, and the button still does not open the menu (this might be a syntax error, but I am pretty sure it is not)

<div class="off-canvas position-left" id="offCanvas" data-off-canvas>

    <!-- Close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>

    <!-- Menu -->
    <ul class="vertical menu">
      <li><a href="#">Foundation</a></li>
      <li><a href="#">Dot</a></li>
      <li><a href="#">ZURB</a></li>
      <li><a href="#">Com</a></li>
      <li><a href="#">Slash</a></li>
      <li><a href="#">Sites</a></li>
    </ul>

  </div>

  <div class="off-canvas-content" data-off-canvas-content>
  <!-- Your menu or Off-canvas content goes here -->
<button type="button" class="button" data-toggle="offCanvasLeft">Open Menu</button>
</div>

Brett Mason almost 3 years ago

Hi Chris

Lets see if we can get this working for you.
Firstly, is your code online anywhere?

So looking at your latest code I can see one error. The ID of the off canvas panel needs to match the `data-toggle` of the button.

You need to change your button code to:

<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>

Could you try that and let me know if that works?

Chris almost 3 years ago

Hey Brett, 

 I put it up here https://jsfiddle.net/drumgod/cjxk7688/

I changed that piece U said above and it didn't change anything. Perhaps U could take a look and see what is going on? 

This uses the non-minified version of both CSS and JS.

Brett Mason almost 3 years ago

Hey Chris

So I forked your fiddle: https://jsfiddle.net/tdvpakkp/
As you can see thats working now.

You will see that I have removed the inline CSS/JS and just added them via external links (on the left).

There was a few errors that I noticed. Your CSS had no styles for off canvas in it, hence why it looked unstyled.
There was also no jQuery and Foundation wasn't being initialized.

Where did you get your JS/CSS from? Did you compile it yourself?

Let me know if that helps.

Chris almost 3 years ago

So the purpose of this was all because the off-canvas is not working in my original project, the one that I began this thread with. The one I used in the Fiddle is actually a different version, one I began only to see if I could get it working from scratch.

How could I have gone so wrong?

What do U mean did I compile it myself? It's pretty bad that I don't even know what that means.

I downloaded it from the zurb site under installation. Did I need to write my own functions and create my own CSS? In the tutorial the off-canvas just works for the guy. 

 I added the other project to a fiddle as well.

Chris almost 3 years ago

I added the project that really matters to another fiddle. Please see if U can find the error here!

https://jsfiddle.net/drumgod/t1qmzcou/1/

Please ignore the weirdness in the html. That's the ruby from the .erb template which doesn't compile here. 

Brett Mason almost 3 years ago

Hi Chris

So it's the same problem as your first example. The data toggle on the button needs to match the ID of the off canvas. 

Here's an updated example: https://jsfiddle.net/dqhpwu4x/

Chris almost 3 years ago

I got it to work. I didn't take that last sentence into account "The value of the data attribute should be the ID of the off-canvas." Like I said, the guy in the tutorial didn't say anything about it.

 

Still, it's fixed. Thanks for your assistance. I would have taken me alot longer to fix this without it.