oriDomi creates many copies of HMTL elements to create the fold effect. This can really bloat the semantic document outline with copies of headings in particular, potentially causing headaches for accessibility (see screenshot).

Could this be mitigated by applying an attribute such as aria-hidden="true" to all the duplicate layers?

total newbie.

sometimes the oridomi effect works perfect upon 1st loading. if i refresh the page though, all of a sudden the handle to fold the image doesn't appear when mousing over parts of the image, but only around the edges. if i refresh a few more times it seems to work perfect again and the handle appears anytime i mouseover any of the area of the image.

i'm confused why it would work sometimes but then doesn't work.

Hy there I would LOVE to be able to specify panels with varying sizes.

For example 3 vertical panels with 50px, 10px and 50px width.

Is there a way how this could be achieved?

Hey,

this plugin is really awesome. thanks for your hard work first.

So i tried this plugin in Internet Explorer 10 and 9. And there isn't a fold up effect, it's nearly an folding effect. I thought IE 10 is supporting all the nice css3 features. But it seems that the plugins doesn't support these.

Hello! I use oridomi by your example with jquery i.e

$('#startButton').click(function(){
var $folded = $('.paper').oriDomi({/* options object */});
// when using jQuery, iterate OriDomi methods over multiple elements like this:
$folded.oriDomi('accordion', 20);
// to access the OriDomi instance at the top of the jQuery selection directly:
var folded = $folded.oriDomi(true);
});

How to remove oridomi by click?

$('#cancelButton').click(function(){
// remove oridomi?
});

Sorry for the noob question!

I disabled the mouse-over effects on image and now using folded curl. I want to save the image file on right click but it won't save as 3D instead it save as simple image(2D).

I want this one-

but it save like -

Hi - I am experiencing an issue where my object fits its container before oridomi is called, but afterwards, it shrinks it down. I would like to maintain the height, so it can fit my grid. Any idea how to do this? Here's my code:

<script>
        var flight = new OriDomi('#flight',{
            vPanels: 4
        });
        flight.stairs(0,'left');
        flight.collapse();
</script>

and styles

#flight {
    position: relative;
    top: 134px;
    left: 195px;
    height: 802px;
    width: 750px;
    background: url('../images/foldout.jpg') no-repeat;
}

but here's what ends up happening:

If you look closely you can see in the black space above the folding image that there is some panel shading - so the panels are actually set to the right height, but the image is being shifted down, or not filling the panels somehow. I'm guessing it's a css thing. Any idea how to fix this?

Whenever I completely unfold my div the outer bit then folds behind the inner part thus hiding behind it.

This can be reproduced like so:

1. Use an accordion fold
2. Completely unfold it
3. Now rather than folding back to where "it came from" the fold goes behind.

It's also possible with the example in the website:

Is there a way to prevent this behavior?

I'm using the plugin and have everything working except for the hPanels setting.

I've been over the documentation and the source and cant figure out why my setup isnt working. Am I doing something wrong or is there a bug?

Version 1.1.5

Example; https://stackblitz.com/edit/oridomi-angular?file=app/app.component.ts

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as _ from 'lodash';
declare var OriDomi: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private $el;
  private paper;

  ngOnInit() {
    this.$el = document.getElementsByClassName('paper')[0] ;
    this.paper = new OriDomi(this.$el, {
      hPanels: 10,
      ripple: true,
      shading: true
    });
  }

  toggle() {
    const methods = ['accordion', 'stairs', 'curl', 'reveal', 'foldUp', 'ramp', 'twist', 'fracture'];
    this.paper[_.sample(methods)](_.random(0, 80, true));
  }
}

app.component.html

<button (click)="toggle()">Randomise</button>
<div style="text-align:center"  class="paper">
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>

Hi there! Great plugin.

I have several elements on the page using the same class that, on hover, I would like to apply an oriDomi effect to. I currently have the hover event set up inside a .each() that loops through all of the elements with the class in question.

Unfortunately, it seems that oriDomi only targets the first DOM element that matches the selector provided. Is there a way to target a specific element via the selector (i.e., $(this).find('.my-element')), or to target all elements of a specific class name?

I am trying to get this working with jQuery, and keep getting that great jQuery error "oriDomi is not a function".

I have included the oridomi.min.js file and confirmed that the path is correct, but as soon as I call oriDomi() with a selector (for items that I can confirm are there), I get this error. The code is within a click handler:

$('container').on('click', '.item', function () {
   $folded = $(this).find('.member-info').oriDomi();
});

It is my understanding from the documentation that I should not need to do anything special to get it working with jQuery, that the library itself works out if jQuery is being used or not and will act accordingly.

Am I missing something here?

I'm currently trying to update the code to just use the foldUp and accordion methods and rotate specifically between those two. I want the accordion to fold out at a specific angle instead of a randomly generated angle as well as have the method function switch between foldUp and accordion and not be randomly generated.

(function() { document.addEventListener('DOMContentLoaded', function() { var demos, methods;

demos = [
  new OriDomi('.paper-map', {
    vPanels: 8,
    ripple: true
  })
];
setTimeout(function() {
  demos[0].accordion(15);
}, 1000);
methods = ['accordion', 'foldUp'];
return document.getElementById('content').addEventListener('click', function(e) {
  var angle, el, method, n;
  if ((el = e.target).className !== 'button') {
    return;
  }
  n = el.getAttribute('data-n');
  method = methods[Math.abs(Math.floor(Math.random() * methods.length - Math.random()))];
  angle = ['15'];
  demos[n][method](method !== 'foldUp' ? angle : void 0);
  if (method === 'foldUp') {
    angle = '';
  }
  return el.parentNode.getElementsByClassName('label')[0].innerHTML = method + "(" + angle + ")";
}, false);

});

}).call(this);

There's the updated code. Every time I try to specifically define the angle, it throws this error "Cannot set property 'innerHTML' of undefined" - relating to the demos[n] function. Could you point me in the right direction for switching between the two specific methods with pre-set angles?

I have downloaded and used this library and had a lot of fun. But, I have an issue that we can only manipulate one side. I have a requirement in which I want to manipulate and apply oridomi functions to all the sides of the div. I want to ask if it is possible, if yes then how and if not then why.

Thank you.

I pulled this out of my other issue, because it is unrelated.

• Tested on firefox that this works okay. too glitchy on chrome to test well. the mouse dragging animation just snaps into place, and if folding is triggered by JS, then it goes too fast to catch.
• in chrome, folded.accordion(100) works smoothly, folded.accordion(0) happens instantly. folded.unfold() halfway works. The first unfold motion glitches, then the remainder are okay. my intuition is that it is diving behind other DOM elements, even though the container has a z-index of 1000.
• yeah, this is the case. I can test with folded.ramp(6) versus folded.ramp(-6). In firefox everything is a-okay, in Chrome only folded.ramp(-6) is okay because it goes towards the viewer instead of folded.ramp(6) which dives behind other elements.

Hello, thank you for this library. I have encountered an issue with my implementation, i would like to use Oridomi to show/hide additional information in a list. Is there a way to remove the space taken (on the flight) by the element being closed?

Here a sample of my problem : http://jsfiddle.net/n8jLd9dc/

First off, this is a superb plugin - thank you!

One question - if I have three custom panels, is there a way to keep the last panel from changing perspective so that it appears 'flat' during animation? I'm trying to do this so that the flow of the page appears to be pushing the page down.

edit: just to elaborate, after reading the docs the Custom Behaviour looks like it will do what I'm after:

"...For example, if you wanted to create a fold-in effect that keeps the first and last panels flat against the page surface"

So I'm after an accordion effect with 3 panels, the last panel to appear "flat". Not sure how to implement - any suggestions?

Hi there! I've been having quite a bit of fun with OriDomi – thanks for making it available to us. I have, however, encountered an issue with one implementation in particular that I was hoping to execute: I would like to have an OriDomi overlaying another aligned element, such that folding it up would more or less seamlessly reveal what's beneath. Unfortunately, after OriDomi has done it's magic on my overlay DOM element, it no longer aligns with what's beneath. You can see more specifically what I'm talking about in this fiddle: http://jsfiddle.net/crowjonah/8vn7r/

You'll notice that if you comment out the OriDomi JS, the vertical columns line up perfectly.

Let me know if you have any suggestions for me!