Menu icon Foundation

My Posts





My Comments

Clement commented on Clement's post over 5 years

I've ditched the foundation off-canvas and am using this one instead: http://mmenu.frebsite.nl/ so I haven't been able to troubleshoot this anymore. One thing I didn't try though was tweaking the off canvas toggle z-index. Though the toggle was visible there might have been an invisible part of some element covering it and preventing it from being activated?

Clement commented on Clement's post over 5 years

@Lisa, I'm not seeing your off-canvas menu on my phone OR on my desktop, just your top-bar menu. @Karl – are you sure Lisa's off-canvas menu works ok?

Clement commented on Clement's post over 5 years

@Karl Ward

I followed your advice and tried disabling all non-essential js and all non-essential css. Didn't work. I also tried replacing my html with the one from the advanced section of the off-canvas docs. Didn't work either. Any other ideas?

Clement commented on Clement's post over 5 years

@Karl Ward, even with that javascript disabled, I'm not having any luck. Strange thing is it works fine when I select mobile devices with Chrome's 'emulate' developer tool. Could it be a Rails-specific fault? Oters are having this issue, it seems: https://github.com/zurb/foundation/pull/3643#issuecomment-32803517

Clement commented on Clement's post over 5 years

OK. Here's the link to what I've got so far: http://thawing-sea-3784.herokuapp.com/

Clement commented on Clement's post over 5 years

I should specify that i'm not using the topbar javascript due to Rails issues, just the styling. The dropdown uses the foundation dropdown javascript.

Clement commented on Paolo Visnoviz's post over 5 years

If you're having the same issue i was, the answer is simple but not evident: it's not enough to change the media query ranges, you ALSO need to leave the following uncommented underneath (even if you don't alter the default!)...

$screen: "only screen";

$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";

$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

Clement commented on Scott Anderson's post over 5 years

What a mess it's been so far using this gem. If only the gem had a readme file which explained what files we're meant to have and where they're meant to be.

Clement commented on Greg Blass's post over 5 years

I get around this with a fadeIn jquery function. Here it is in coffeescript:

 jQuery(document).ready ->
  jQuery("#orbit").hide(0).fadeIn(2000);

Looks fairly nice so I'm happy with this solution.

Clement commented on Albert's post over 5 years

Here's an update on Albert's fiddle to show what I mean: http://jsfiddle.net/Sbt75/9/

And here is the pure html:

<body>
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Menu</label></li>
                    <li><a>item 1</a></li>
                    <li><a>item 2</a></li>
                    <li><a>item 3</a></li>
                    <li><label>FAQ</label></li>
                    <li><a>item 4</a></li>
                    <li><a>item 5</a></li>
                </ul>
            </aside>
            <nav class="tab-bar show-for-small">
                <a class="left-off-canvas-toggle menu-icon">
                    <span></span>
                    Small
                </a>
            </nav>

<!--use Foundation top-bar element for all but small screens-->

            <div class="contain-to-grid fixed">
                <nav class="top-bar hide-for-small" data-topbar>
                    <section class="top-bar-section">
                        <ul class="title-area left">
                            <li class="hide-for-small">
                                <a>Large Title</a>
                            </li>
                        </ul>

<!-- Right Nav Section -->

                        <ul class="right">
                            <li><a>item 1</a></li>
                            <li><a>item 2</a></li>
                            <li class="has-dropdown"> <a href="#">FAQ</a>
                                <ul class="dropdown">
                                    <li><a>item 4</a></li>
                                    <li><a>item 5</a></li>
                                </ul>
                            </li>
                            <li><a>item 3</a></li>
                        </ul>
                    </section>
                </nav>
            </div> <a class="exit-off-canvas" href="#"></a>
            <article class="small-12 columns">
                <br/>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </article>
            <footer class="small-12 columns">
                <div>...</div>
            </footer>
        </div>
    </div>
</body>

Posts Followed




  • 5
    Replies
  • Orbit jumps around on load

    By Greg Blass

    Orbit

    I'm on chrome on OSX 10.9, and the orbit slider jumps around on a page load. You can see each individual slide for a split second with <li> bullets to the left of them before the javascript executes on the example page (and the same thing is happening for... (continued)

    Last Reply by Clement over 5 years ago





Following

    No Content

Followers

My Posts

My Comments

You commented on Clement's post over 5 years

I've ditched the foundation off-canvas and am using this one instead: http://mmenu.frebsite.nl/ so I haven't been able to troubleshoot this anymore. One thing I didn't try though was tweaking the off canvas toggle z-index. Though the toggle was visible there might have been an invisible part of some element covering it and preventing it from being activated?

You commented on Clement's post over 5 years

@Lisa, I'm not seeing your off-canvas menu on my phone OR on my desktop, just your top-bar menu. @Karl – are you sure Lisa's off-canvas menu works ok?

You commented on Clement's post over 5 years

@Karl Ward

I followed your advice and tried disabling all non-essential js and all non-essential css. Didn't work. I also tried replacing my html with the one from the advanced section of the off-canvas docs. Didn't work either. Any other ideas?

You commented on Clement's post over 5 years

@Karl Ward, even with that javascript disabled, I'm not having any luck. Strange thing is it works fine when I select mobile devices with Chrome's 'emulate' developer tool. Could it be a Rails-specific fault? Oters are having this issue, it seems: https://github.com/zurb/foundation/pull/3643#issuecomment-32803517

You commented on Clement's post over 5 years

OK. Here's the link to what I've got so far: http://thawing-sea-3784.herokuapp.com/

You commented on Clement's post over 5 years

I should specify that i'm not using the topbar javascript due to Rails issues, just the styling. The dropdown uses the foundation dropdown javascript.

You commented on Paolo Visnoviz's post over 5 years

If you're having the same issue i was, the answer is simple but not evident: it's not enough to change the media query ranges, you ALSO need to leave the following uncommented underneath (even if you don't alter the default!)...

$screen: "only screen";

$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";

$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

You commented on Scott Anderson's post over 5 years

What a mess it's been so far using this gem. If only the gem had a readme file which explained what files we're meant to have and where they're meant to be.

You commented on Greg Blass's post over 5 years

I get around this with a fadeIn jquery function. Here it is in coffeescript:

 jQuery(document).ready ->
  jQuery("#orbit").hide(0).fadeIn(2000);

Looks fairly nice so I'm happy with this solution.

You commented on Albert's post over 5 years

Here's an update on Albert's fiddle to show what I mean: http://jsfiddle.net/Sbt75/9/

And here is the pure html:

<body>
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Menu</label></li>
                    <li><a>item 1</a></li>
                    <li><a>item 2</a></li>
                    <li><a>item 3</a></li>
                    <li><label>FAQ</label></li>
                    <li><a>item 4</a></li>
                    <li><a>item 5</a></li>
                </ul>
            </aside>
            <nav class="tab-bar show-for-small">
                <a class="left-off-canvas-toggle menu-icon">
                    <span></span>
                    Small
                </a>
            </nav>

<!--use Foundation top-bar element for all but small screens-->

            <div class="contain-to-grid fixed">
                <nav class="top-bar hide-for-small" data-topbar>
                    <section class="top-bar-section">
                        <ul class="title-area left">
                            <li class="hide-for-small">
                                <a>Large Title</a>
                            </li>
                        </ul>

<!-- Right Nav Section -->

                        <ul class="right">
                            <li><a>item 1</a></li>
                            <li><a>item 2</a></li>
                            <li class="has-dropdown"> <a href="#">FAQ</a>
                                <ul class="dropdown">
                                    <li><a>item 4</a></li>
                                    <li><a>item 5</a></li>
                                </ul>
                            </li>
                            <li><a>item 3</a></li>
                        </ul>
                    </section>
                </nav>
            </div> <a class="exit-off-canvas" href="#"></a>
            <article class="small-12 columns">
                <br/>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </article>
            <footer class="small-12 columns">
                <div>...</div>
            </footer>
        </div>
    </div>
</body>

Posts Followed

Following

  • No Content

Followers

  • No Content