scotch-io / scotch-panels Goto Github PK

I know there was a CDN link for the last version of Scotch Panels. Any chance we can get one for the current and future versions?

I've run into some issues trying to animate the clickable overfly in firefox.

I started with this example http://codepen.io/ncerminara/pen/EdaBm

Everything works well except for the fadeIn on the overlay. Tested in Safari and Chrome and works fine.

Haven't found a solution yet.

Here's the altered css I used:

.overlay {
  // Overlay base styles
  position: fixed;
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  display: none;
  z-index: 999999;
  cursor: pointer;

  // Set transition for overlay
  -webkit-transition:         all 425ms ease;
  -moz-transition:            all 425ms ease;
  -ms-transition:             all 425ms ease;
  -o-transition:              all 425ms ease;
  transition:                 all 425ms ease;


  // Set the animation duration
  -webkit-animation-duration:   1.1s;
  -moz-animation-duration:      1.1s;
  -ms-animation-duration:       1.1s;
  -o-animation-duration:        1.1s;
  animation-duration:           1.1s;

  // Set the animation fill mode
  -webkit-animation-fill-mode:  both;
  -moz-animation-fill-mode:     both;
  -ms-animation-fill-mode:      both;
  -o-animation-fill-mode:       both;
  animation-fill-mode:          both;

  // Name the Animation
  -webkit-animation-name:       fadeIn;
  -moz-animation-name:          fadeIn;
  -ms-animation-name:           fadeIn;
  -o-animation-name:            fadeIn;
  animation-name:               fadeIn;
}

// When is show class is applied
// made the overlay display block
.scotch-is-showing .overlay {
  display: block;
}

// Setup keyframes animations
// Chrome
@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

// Firefox
@-moz-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

// Opera
@-o-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

// All other browsers
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

The scotch panels produce a lot of reflow and flickering on the site when loading on (slower) mobile devices (tested on iphone 4s). This does not happen when taking off the panel from the site.

I guess it's because the CSS is loaded via javascript. In my case the javascript got deferred, but i can reproduce this same kind of reflow on the panels.scotch.io site too.

I think the reflow could be prevented by writing the css into a stylesheet rather than loading it via javascript.

Hey,
nice library!

Do you think is possible dooing something like this?

I was using your example of nested panels but when defining the width/distanceX of each panel, it is relative to the parent panel and I need it to be relative to the size of document, in my case 1024px.

I tried changing the distanceX of the level 1 panel using beforePanelOpen when opening level 2 panel but it is not working..

Any advice?

It would be great if i could disable it for desktop. I only want to show the panels on mobile.
Perhaps that could be mixed in with a issue that i also read here, the one that requested for brakepoints.

for example:

$('.scotch-panel').scotchPanel({
containerSelector: '#super-container',
distanceXS: '200px',
distanceSM: '300px',
distanceMD: false,
distanceLG: false
});

Trying to figure out how to use the scotch-panel-canvas to close a panel.

Right now, I have two panels. One on the left side of my screen and one on the right. I have a menu button for each panel, one on the left and one on the right.

I tried adding .scotch-panel-canvas as another click selector, but there are two problems. 1. I only want to use it to close the panel. Not open it. And 2. Since I have two panels, when one panel is open and I click the scotch-panel-canvas it closes the open panel but also immediately opens the other panel.

Any clue on how to do what I'm looking for here?

Excellent script, btw. Nicest off canvas panel plugin I have seen by far.

var panel = $('selector').scotchPanel({ ... });
...
panel.open();

....isn't the jQuery way :-)

How about this?

$('selector').scotchPanel({ ... });
...
$('selector').scotchPanel('open');

....then we can always call the public methods without having to store the panel object at the time of creation.

And this way the object is still chainable, the jquery way :-)

$('selector').scotchPanel({ ... });
...
$('selector').addClass('something').data('whatever',true).scotchPanel('open');
...
$('selector').removeClass('something').data('whatever',false).scotchPanel('close');

You could also expand the number of public methods available like..

$('selector').scotchPanel({ ... });
$('selector').scotchPanel('open');
$('selector').scotchPanel('switch', 'right'); // change panel layout?
$('selector').scotchPanel('trigger', '.selector'); // add a new trigger
$('selector').scotchPanel('do_something', 'var 1', 'var 2'); // something entirely different?

ps.:
Of course we could still store $('selector') in a variable so we don't call it over and over again, but you get the point, I hope.

It would be awesome to have the ability to define multiple "distanceX" for one scotch panel at the different breakpoints in Bootstrap (xs, sm, md, lg). At smaller screens, an offcanvas navigations needs to be wider than a larger screen.

For example:

$(function() {
$('.scotch-panel').scotchPanel({
containerSelector: '#super-container',
enableEscapeKey: true, // Allow the user to quickly shut this down if unwelcomed
distanceXS: '80%', // phones ,  .visible-xs
distanceSM: '70%', // tablets.  .visible-sm
distanceMD: '50%', // desktop, .visible-md
distanceLG: '30%' //  large, visible-lg
});
});

My site has a fixed header, for some reason installing the plugin makes it so my header isn't fixed anymore even though the css is still position fixed.

suggest changing the link text to

<a href="#" class="btn btn-danger btn-block toggle-direction-content-iframe">I <i class="fa fa-heart"></i>&nbsp;But not now...<i class="fa fa-times"></i></a>

setting width to 10.8em

#direction-content .toggle-direction-content-iframe {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 999999;
    width: 10.85em; /* stops full-width bar destroying scrollbar UI */
}

also if you remove the loader element, or at least give it css class states because it rotates even after loading the iframe... On a small site it wont matter, on a larger site, it will cost in productivity.

Nice work though, I may do something similar with some web-app components I have developed...

i have two panels: top and right, and it seems the page loads sluggishly, even when the top panel only re-loads a background image

Does anyone find this?

Hi,
when you use the http://buildinternet.com/project/supersized/ with scotch-panels after opeing teh panel , the background image get croped and gets scrollable:
https://photos-6.dropbox.com/t/0/AAAPP1Jk69I2myErvCpXByZh5Y1j-Hzox1bkn-1w3EUQ7g/12/75681914/png/1024x768/3/1410310800/0/2/Screenshot%202014-09-10%2001.47.37.png/tDdBPSbSoqmFeNDrK8UzmPtzXygnZNuGkMtMLP-PkOE

How to hide the panels until hover or clicked?

would like an option to hide the panel unless its required

display:hidden

would it be revealed by this script?

i have a panel up top which loads on page load, but it would be better hidden until hover on activator

Is there a method to detect if a panel is open, but another panel is toggled, that the scotch panel should remain open but adjust it's height to the new panel and show the new panel also? Similar to the 'Business types' and 'Products' menus on https://squareup.com/.

This might be more of a request than an issue. Still, I love the animation, container, and direction options available in the offcanvas element. I just wish there was a way to use it such that the offcanvas content slid on top of some content instead of _pushing _content one way or another. Is there a setting for this? Am I just missing something? If not, I think it would be incredibly valuable to have a mode option that included "push" and "layer" or something like that.

I am trying to use the script with a fixed header.

I have placed the link that toggles the panel in the header and I want the header to always stay on the top of the page when I scroll down.

But when I scroll down and trigger the panel, the header disappears (it goes on the very top of the page). Also the contents of the panel are on the very top of the page which isn't so useful.

Since translateY gets called with a negative height when direction is set to bottom, forceMinHeight is ignored. Should be an easy fix

You can see this working on my current site on mobile:

http://nyytalk.com/

$('#nyy-mobile-menu').scotchPanel({
    containerSelector: '#container',
    direction: 'left',
    duration: 300,
    transition: 'ease',
    clickSelector: '.menu-trigger',
    distanceX: '70%',
    enableEscapeKey: true
});

This should be working based off the setup, what am I doing wrong?

It seems Scotch Panels don't place nice in Angular. Is there an Angular version of the library?

Nicholas, is there an 'Over' or 'Parallax' option/property as shown in the examples: https://scotch.io/demos/body-class-menus-over-right
I did do not see the option in the scotchPanels API documentation.

Kind regards,
Mark

Is there a way to turn this off? It prevents scrolling on the entire page, not just the scotch panel.

Or rather, it just prevents me from scrolling by putting everything into a scotch-panel-canvas and that is unscrollable unless I ADD overflow:auto, but this makes the scotch panel disappear and be replaced by a white screen.

Having an issue with the overlay in IE11 metro.

When the menu button is clicked, the overlay covers the entire screen (due to z-index). Beyond that, IE11 has a bug with the way it handles opacity so the overlay was covering the entire viewport.

More info on this bug below:

http://stackoverflow.com/questions/23504400/css-opacity-not-working-in-ie11

Jquery 2.2.x,

Hi there,

firstly i wanted to say thank you for creating this. without a doubt the best navbar menu and so flexible.

I wanted to ask if there is a tutorial or code example for the menu on panels.scotch.io? I'm creating a site and am using the plugin and absolutely love how the hamburger menu at the top switches to an X as the menu opens up.

Thanks in advance.

https://github.com/leafo/sticky-kit

I had sticky kit working previous but when i inserted scotch panels....its stopped, can anyone help debug it?

http://judicial-corruption-australia.tk/forumdisplay.php?fid=2

I'm using bootstrap and I've integrate the basic side panel similar to the one here: https://panels.scotch.io/

The problem I'm having is that I'm using a static header, so if the user scrolls down the page, then clicks the still visible "menu" button, they don't see the nav-items or any of the content as that stays at the top of the screen.

Possible to have the slide out menu not "push" the existing content over? Perhaps the option to have the slide out menu appear above the content? etc.

Some possible options and examples:

http://beta.semantic-ui.com/modules/sidebar.html#/definition

Thanks!

Panel content stays at top of page - so on long pages, the panel content get stuck at top, where it would be nice if panel content stuck to top of browser window.

I might be missing something, but I tried fiddling with css positioning on panel and sub panel elements with no luck. Fixed elements seem to be stuck relative the panel wrapper.

Hello,
thank you for this elegant and rock solid plugin. In order to control / restric scotch-panels at different breakpoints and/or for different devices/browser features, a destroy method will come in hand. If a destroy method is hard to achive any kind of workaround will be more than welcome too.

Possibly related to #27 and #18

Hi! Awesome stuff you've build. I did some testing with your fixed header example: http://codepen.io/ncerminara/pen/rtesj

Works flawless, only I found out that in Chrome there is a scrollbar (the vertical browser scrollbar), but you can't touch nor use it. So I figured I could switch off this scrollbar in chrome using html::-webkit-scrollbar { display: none }.

However this brings me to the following. I'm using this on a onepager, but there is no scrollbar whatsoever. Is there a way to bring back the vertical browser scrollbar in the codepen example?

Hi,

great plugin, thank you! I'm planning to use it for one of my projects as an offcanvas menu. Is it possible to use it for toggling submenus within a vertical menu? And is there a code example? The "Nested Panels" example shows only one panel within a panel.

For your thoughts on this many thanks in advance!

Dave

Hi,
is there a way to make a Panel Fixed, 100% height of Browser, not scrolling , please?

Hi scotch people,
trying to do an install via bower bower install scotch-panels all verbose install info is saying #1.0.3 but the js files that show up are all 1.0.0 in the header comments. I even tried installing scotch-panels#1.0.3 directly with the same results. I'm thinking it may have something to do with the '1.0.3' tag? I'm not an expert but the '1.0.3' tag appears to have older file version
https://github.com/scotch-io/scotch-panels/blob/1.0.3/bower.json
https://github.com/scotch-io/scotch-panels/blob/1.0.3/dist/scotchPanels.js

First of all, great great plugin. Thanks for all your hard work.

I think Mobile Only solution could be adjusted a bit. In your JS/CSS examples we have Menu markup two times in the code which doesn't seem to be very optimal due to many reasons.

Couldn't we just use Modernizr / JS browser size detector and then bind / unbind your script? That would do the trick.

Otherwise CSS method could be tweaked a bit to have only one markup code for the menu structure.
Furthermore CSS code can be adjusted just slightly.
e.g.

header .toggle-panel { 
    display: block;
}
@media only screen and (min-width : 768px) {
    header .toggle-panel {
        display: none;
    }
    .scotch-panel-canvas {
        -o-transform: translate3d(0px, 0px, 0px) !important;
        -ms-transform: translate3d(0px, 0px, 0px) !important;
        -moz-transform: translate3d(0px, 0px, 0px) !important;
        -webkit-transform: translate3d(0px, 0px, 0px) !important;
        transform: translate3d(0px, 0px, 0px) !important;
    }
    .scotch-panel-top / right / left or bottom (depends on the direction used) {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
}

Anyway, a bit nasty method to use !important in the CSS though ;)

$('#scotch-panel').scotchPanel({

                    hoverSelector: '.toggle-panel-on-hover',

                    clickSelector: '.toggle-panel',
                    containerSelector: 'body',
                    direction: 'top',
                    duration: 300,
                    transition: 'ease',
                    distanceY: '200px',
                    enableEscapeKey: true
                });

doesnt work for me

If content is lower than viewport there is no good way to fit menu to fullscreen height.
forceMinHeight and minHeight does not work for this.

I think it's connected to #26

This may be more a lack of knowledge on my part than an issue with Scotch Panels. I have a box shadow on the containers holding the Scotch Panel. When I wire it up, everything works great except all the box-shadows and border-radius on the containers with the same class name disappear. I tried putting the same box shadow and border-radius on the Scotch Panel div to no avail.

Thanks for considering this issue.

Awesome work.
Is that possible to make multiple panels on the same side of a div?
With this function, we can build even a multilevel off canvas navigation

example:
http://codyhouse.co/demo/side-team-member-bio/

Although the dist/scotchPanels.js works fine on this, the accompanying minified dist/scotchPanels.min.js fails to translate the hidden panel into view when toggled.

I encountered the bug on version 1.0.0 and updated to 1.0.3, but it seems to be present in both.

Take a look at this code pen:

http://codepen.io/anon/pen/CazBH

The menu up top is fixed position. You can see as you scroll down the page.

Once you press the button to open the scotch panel, the navbar is no longer fixed. This is because the .scotch-panel-canvas container has

 -webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);

added to it. If those styles are removed, then the navbar becomes fixed again.

The animated text is blurry in the "horizontal-percentage-width" demo when the left/right direction is set. Top or bottom options do not make the text blurry.

Really loving the idea of the plugin, but I'm struggling to find something for long scrolling content on a mobile device. Basically I'm trying to find a way that no matter at what point of the page the toggle is triggered, the panels would always appear within the view port. Could this be done with 100vh 100wh container? Only need support for modern browsers. Hope this makes sense. Any suggestions would be greatly appreciated.

We use olark chat for customer support and after I added scotch-panels it stopped showing olark on our page. Site is www.municibeta.com

Hoping you could help us trouble shoot.

Olark code:

As it says in the title if useCSS is set to false, animation delays same amount of the duration.

It would be cool if scotchPanels also implemented a feature that is present in mmenu as well: optionally closing the panel when swiping left or right on your smartphone (instead of having to click/touch the toggle button).

Is there a way to assign different widths for the off canvas navigation based on different CSS break points?

Thank you

Hi,

First of all, thank you so much for such an absolutely amazing plugin. This is truly fantastic.

I was wondering after looking at your demos though if it's somehow possible to merge two of them together?

These are the two demos I'm referring to :
https://panels.scotch.io/demos/side-menu-mobile-only-with-css/index.html
and
http://codepen.io/ncerminara/full/fwHjL

I'd really love to be able to have a menu which doesn't have the hamburger for desktop machines and then at a certain breakpoint / size then the hamburger menu comes in but I'd also like the header of the menu to be fixed at the top of the page.

Is that somehow easy to do by mixing those two examples together possibly?

Many thanks for any help with this.

Best wishes,

Mark