toomuchdesign / offside Goto Github PK

My site contains more than the demos. It makes the mobile menu to blink. With blink I mean that the menu appear at the top for a half second or so. I got around it with some extra CSS.

.offside-menu { // Menu selector (which is in the HTML on init and not added by JS)
    display: none;
}

.offside { // Core class added by JS
    // ... some other suff first
    display: block;
}

If I have a left offside element that is larger than the screen, I can scroll it independently of
the main part of the page that is pushed to the right.

Is there a way to make both the main part of the page and the offside element scroll together down the page. So scrolling the main section also scrolls the offside element?

Thanks.

-- rouilj

I'm use to Pushy. In fact, I like Pushy and searched for a version without jQuery. This plugin seems to be a good fit.

One thing that don't work the same as Pushy is that I can't close the menu by clicking outside the menu.

Hey,
really liking your library, but is there a way to use it with browserify?
If I try

var offside = require('offside-js');
offside( '#main-navigation', {
        slidingElementsSelector:'#container',
        buttonsSelector: '.toggle-navigation',
    });

Chrome throws Uncaught TypeError: Cannot read property 'factory' of undefined.

Is it possible to disable the pushing and just open over the content?

Now Pushy can fade to dark. It increase the readability to the menu. Maybe it would be nice here as well?

Hello, I'm working on a site with 2 offside section as header element. I have a bug on something weird.
Let's say I have 2 sections (Projects & About) layout like this:

PROJECT MY SITE ABOUT

if I click on Project, project is active (open), and If i want to click on about to make about active, my layout is getting broken !

My problem only happen on mobile

Here is my site
https://albinmetthey.fr/

Can you help me out ?

Thanks a lot

I got tired of most of the drawer libraries out there. Most of them cause problems and require a container for the content, so I have built my own.

https://github.com/jenstornell/tinyDrawer.js

It's only 1 KB compressed and does not require a content container. I don't think the setup can be any simpler than that. Feel free to get inspired of it.

Hello, I'm using your plugin in my application.
I'm also using swup for page transition. I want to bind offside callback function inside swup, shall I use offsideInstance.close() method ?

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency grunt-contrib-uglify to ~5.2.0
• Update dependency grunt-contrib-jshint to v3
• Update dependency grunt-replace to v2

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency grunt to ~1.6.0

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Hello:

The web site I am designing (a tracker implementation for the roundup issue tracker) has a nav element on the left in desktop mode. When the screen size drops below a certain amount, the nav element is hidden. Then it is displayed when the user hits the menu link. If the user resizes the screen to a larger size, the nav column is once again displayed automatically.

I have implemented display of the nav column using offside with a menu button. It works fine pushing the main section to the right and allowing the nav column to move in from the left. I can scroll the left nav column independently from the right column.

However the nav element is hidden in all cases including desktop. However in desktop mode, the menu button is hidden making the nav element inaccessible.

What is the preferred way to allow an offside menu only at certain breakpoints/screen sizes?

I can think of two ways:

1. add media queries that wrap all of offside.css so that the styles only trigger with a
   media query spec that also displays/enables the menu button.
2. Add javascript matchmedia calls (along with listeners for changes) that will call
   offside() or offside.destroy() as the page size changes.

Is there another method that I missed? What is the recommended way of handling this?

Thanks.

-- rouilj

Hello;

Testing the demo pages on a Android 9, on Chrome, the behavior of the offcanvas seems broken to me.

I've tested both with and without 3d transforms:
http://toomuchdesign.github.io/offside/demos/multiple-elements
http://toomuchdesign.github.io/offside/demos/multiple-elements-no-css-3d-transforms

Basically, the "fixed" position is not respected, the offcanvas menu takes 100% of the height of the page (not viewport height, even if I force it) and it scrolls along the page instead of remaining in view.

Also, I'm able to free move the page.

See the following GIF of my android device, captured using Chrome Devtools.
I delete the "height:100%" css in order to let you see how the element behaves as a static, not fixed element.

Feel free to contact me if you need more info about my devices / setup.

Many might not try this because the docs are confusing. In the HTML the menu id is "my-offside" and in the JS it is "my-menu". It can seem like a detail but when copy paste from the docs we expect it to work right away without changing anything. Then we modify it to our needs, when we see that it works.

 <!-- Off-canvas element  -->
  <nav id="my-offside">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

<!-- Put this right before the </body> closing tag -->
  <script>

    //Offside minimal setup
    var myOffside = offside( '#my-menu', {

        slidingElementsSelector:'#my-content-container',
        buttonsSelector: '#my-button, .another-button',
    });
  </script>

Zero stars, zero issues, zero PRs, when it has much better documentation than the super popular https://github.com/codrops/SidebarTransitions and https://github.com/codrops/OffCanvasMenuEffects.

Maybe a demo would help.

Hi,

at first i want to thank you for the great plugin. It works like a charm.

My Problem is, that i have two instance off offside and i want to open the current one at loading the page.

I have two variables var offside1 and var offside2.

Now i check the url if contains offside1 or offside2 and then i use the snippet offside1.open(); if offside1 exist.

But now everytime open offside2. although offside1 is declared.

This is the page http://mein.rheiderland.de/karte
and the left iconbar is the trigger for offside.

Thanks in advance

greatings R. Buchenau