Menu icon Foundation

My Posts

  • 9
    Replies
  • Using grid with handlebars template

    By Chris

    templategrid

    I'm using one of the grids with a handlebars template. The way it was, I had it so one column contained the template, and the other column something else. Now I want the template to display like Cards, going across the page, so having 2-3 iterations of th... (continued)

    Last Reply by david 3 months ago


  • NEW
  • CSS on page does not match the page, in Chrome

    By Chris

    CSS not match

    The CSS in my editor does not change the page. But the page is full of other CSS. At some point the styles in the footer, this is where the problem is, just froze and I can no longer change them.  I switched to FF, but this is probably not a great s... (continued)


  • 9
    Replies
  • Off-canvas unresponsive

    By Chris

    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... (continued)

    Last Reply by Chris almost 3 years ago


My Comments

Chris commented on Chris's post almost 3 years

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.

Chris commented on Chris's post almost 3 years

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. 

Chris commented on Chris's post almost 3 years

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 commented on Chris's post almost 3 years

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.

Chris commented on Ryan McCready's post almost 3 years

Can I get some assistance with my off-canvas issue. 
http://foundation.zurb.com/forum/posts/49878-off-cavas-unresponsive 
I'd really appreciate it! I've tried a few dif versions of foundation, including this one, and can't get it to work. 
 

Chris commented on Chris's post almost 3 years

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>

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

&lt;!-- Menu --&gt;
&lt;ul class="vertical menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Foundation&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Dot&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;ZURB&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Com&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Slash&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Sites&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</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>

Posts Followed


Following

    No Content

Followers

My Posts




My Comments

You commented on Chris's post almost 3 years

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.

You commented on Chris's post almost 3 years

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. 

You commented on Chris's post almost 3 years

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.

You commented on Chris's post almost 3 years

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.

You commented on Ryan McCready's post almost 3 years

Can I get some assistance with my off-canvas issue. 
http://foundation.zurb.com/forum/posts/49878-off-cavas-unresponsive 
I'd really appreciate it! I've tried a few dif versions of foundation, including this one, and can't get it to work. 
 

You commented on Chris's post almost 3 years

It does not work :(
 
I wanted to see if the page was pulling in the JS at all. I added the &lt;script src="js/app.js"&gt;&lt;/script&gt; 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>

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

&lt;!-- Menu --&gt;
&lt;ul class="vertical menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Foundation&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Dot&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;ZURB&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Com&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Slash&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Sites&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</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>

Posts Followed

Following

  • No Content

Followers

  • No Content