dmotz/oridomi

🪭 Fold up DOM elements like paper

oridomi's Issues

Compatibility with browsers

Hello
I tried the application in diferent browsers and here are the results:

Google Chrome v. 28.0.1500.95 m:
Works perfect.

Firefox version: 22:
Works perfect

Firefox v. 8:
Doesn't work (visualizes all the page, but don't allows to modify the objects)

Opera v. 12.15:
Doesn't work (the same that in Firefox 8)

Internet Explorer v. 10:
Works parcialy (Visualizes all the page, allows to modify the objects, but not totaly)

Internet Explorer v. 9:
Doesn't work

Screenshots for IE 10:

That is all.
Goodbye

can i use this lib in react or vue?

React and vue using MVVM to render dom,
If i use this lib, maybe i have to use modifyContent frequently?
Is there a demo about this?

OriDomi inaccurately alters width of element

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!

Firefox Antialias fix

Little known secret... adding

hMask.style.outline = '1px solid transparent';

should fix your firefox antialias issue.

Bug in Firefox

well it's kinda hard to explain what i mean so i just post screenshots
firefox

and chrome (for comparison how it should be)

in firefox the last fold somehow goes to the top
only tested with firefox nightly (28.0a1) don't know if it happens in other versions too

I see no way to define the direction of the "folds" of the paper...

---When you make the oriDomi works on onLoad he folds the element making the 1st fold of the paper go "back" according to the viewer perspective, and then, when you unfold it, he make the reverse animation. But, on the second event of the folding, he folds the 1st fold to the front of the viewer, inverting the "folds" of the paper...---

---Examples:---
---The 1st event folding: http://i.imgur.com/VQch0UL.png---

---The 2nd and nexts: http://i.imgur.com/g02OlVC.png---

---How can I control this?---

---

Oh geez, im sorry, I discovered how to control this now... When u want to use the "backwards" fold, u use positive numbers, negative is for "forwards" fold...

Thanks and sorry again!

Height responsive on close

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/

Center a OriDomi element?

Thanks for your work on this, its a beautiful effect!

Is it possible to horizontally center a oridomi element somehow, even while part folded? At the moment it seems like the width of the element stays at the unfolded original value, so when folded the whole element is off to the side. Any workarounds?

Ty!

Targeting multiple elements, or individual elements within .each()

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?

Having problems to implement oriDomi with hover

I'm kinda newbie here, i've got this to work using this:

var $domi = $('.ejemplo').oriDomi();
$(".ejemplo").hover(
function() {
$domi.oriDomi('accordion', -50, 'top');
},
function() {
$domi.oriDomi('accordion', 0, 'top');
});
});

But doesn't seems to be working as it should be.

Blurred text contents

When I apply oriDomi to a box containing text, this gets blurred and poorly readable.

Panels with different widths

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?

how to remove oriDomi by click?

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!

Prevents Interaction With Form Elements

I have a div that contains form items (some basic text inputs, a drop-down menu, a jQuery datepicker etc.) - when I apply the fold oriDomi folding, it unfolds as expected, but I can no longer interact with the form elements.

I'm using this within a Foundation 4 framework if that makes a difference.

The effect I'm going for is that the div element 'foldMe' is completely folded on page load, then when you click a button, it unfolds to reveal itself. This is more or less working (though I doubt how I did it is the most effective way).

Not sure how to attach code here...won't attach a text file, and comment editor eats the code...

Internet Explorer 10

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.

The anchor to fold in latest version

"You can specify the anchor to fold from (left, right, top, or bottom) as the second argument:
folded.curl(-50, 'top');"

It works fine in previous versions, but don't work in latest, also in previous version on mouseover events oridomi looks much more better works better. Maybe I am doing something wrong...

Here is my code:

It works in old version, but doesn't work in new:

<style> #accord{ width: 400px; height: 150px; background: #3775f4; color: #fff; text-align: center; font-size: 2em; } </style>

Hello World

<script src="oridomi.js"></script> <script> (function(){ function init(){ var Accord = document.getElementById('accord'); var AccordOptions = new OriDomi(Accord, { vPanels: 4, hPanels: 4, perspective: 500, shading: true, touchEnabled: false, speed: 1000 }); AccordOptions.accordion(0,'r'); Accord.addEventListener('mouseover', function(){ AccordOptions.accordion(100); }, false); Accord.addEventListener('mouseout', function(){ AccordOptions.reset(); }, false); } document.addEventListener('DOMContentLoaded', init, false); })(); </script>

Unable to fold up in vertical direction

Hi! This may be a simple and dumb question, I'm unable to fold vertically, I've tried the demo example but I'm unable to get it working, weird thing is that I've set the hPanels setting but it sill folds horizontal.

Clarify easingMethod option

I would suggest to make it clearer that the easingMethod option refers to css easing method names - had me wondering why my JS easing methods didn't work...

Pushing another element

It would be great if there was a way for the element as it is unfolding to have other element appear connected to it for things like folding menus. the way the main application looks attached to the menu in this video.

http://vimeo.com/41495357

unfold doesn't appear to be doing anything

Tested this in Chrome 36 and Firefox, tried to run unfold, to have a page reveal, but nothing appears to be happening.

I looked over the documentation, thinking I was doing something incorrect, so I tried this:
folded.curl(50).collapse().setSpeed(2000).stairs(-29).foldUp().unfold();

It appears to be doing everything up until unfold, nothing appears on the screen, and it isn't draggable to bring it back.

Screen shot here: http://cl.ly/image/0K0C3b3R3M2j

Calculation of width

Been playing around with the oriDomi and I love it!, such a snazzy little gem that I will no doubt be using in some upcoming applications. I found an issue when I put together a small parent > details kind of layout which has the same css applied to both. The problem I came across was that when the child element (which has oriDomi applied) is rendered, it does not respect the proper box model. In fact it kind of looks like it goes the other way and is smaller by a factor of the padding applied.

This also happens when you set the element width at 100%. Has an unsightly gap down the right hand side. :(

Have a peek at this fiddle and see what you think? (http://jsfiddle.net/y8z72y6q/)

Is there a smooth way to apply effects angle by angle?

Hi dmotz,

oriDomi is awesome, but it can only be interactive with dragging by mouse and touch. I want to apply effects by scrolling to change the angle continuously, I disabled the animation speed to 0 and set ripple to false, but it's almost frozen.

Thanks!

setting accordion when speed is 0 doesn't work properly

I'm trying to set the accordion value programmatically, but when the speed is zero, it will only set once.

var demo = new OriDomi('.menu', {
  vPanels: 5,
  speed: 0,
  touchEnabled: false
})

demo.accordion(10); //sets correctly
demo.accordion(50); //does nothing, stays at 10

Google Map integration

Hello, Thank you for such an amazing library. I used this to show google map on this. But when i embade google map on the same. It seems to have some problem. It splits the whole google map into number of vPanels i define.

Here is my example code i am using:

(function() {
  document.addEventListener('DOMContentLoaded', function() {

    if (!OriDomi.isSupported) {
      document.getElementById('unsupported').style.display = 'block';
      return;
    }
     var folded = new OriDomi('.demo3', {
        maxAngle: 60,
        vPanels: 5,
        // ripple: true
      }).accordion(60, 'left');

      var elemt = document.getElementById("demo3");
      elemt.addEventListener("mouseenter", function(){
          folded.accordion(100, 'left').unfold();
      }, false);
      elemt.addEventListener("mouseleave", function(){
          folded.accordion(60, 'left');
      }, false);
  });
}).call(this);

<li>
        <div class="demo demo3" id="demo3">
         
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30710983.209769644!2d64.45235976587381!3d20.01273993518969!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1604060354400!5m2!1sen!2sin" width="100%" height="200"  frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>


        </div>
        <div>
          <div class="label">accordion(-20)</div>
          <div class="button" data-n="2">fold</div>
        </div>
      </li>

Please let me know if i am doing something wrong in here. Or is there any solution so after unfold it will behave as a single google map element.

Looking forward to know this!

Thank you!

Currently unable to fold up in vertical direction.

Hi! I'm currently able to fold in the horizontal direction, but I wanted to fold upwards. What is weird is that I've set the hPanels: 3 like in the demo6, but it still does horizontal. I'll post if I find solution, maybe something is overriding my setting..

awesome code btw, ty.

changes the overall height of my object

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?

even folding + complete folding

Is it possible distribute the folds evenly? Also couldn't find how to fold an area completely so it becomes invisible once folded?

Thanks!

hPanels issue

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>

.

jQuery: oriDomi is not a function

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?

How to apply the oridomi functions to all the edges

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.

folded dives behind elements in chrome, but is a-okay in firefox.

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.

Whitespace appears

After binding oriDomi to an element a strange amount of whitespace appears at the bottom of the container.

Before Binding

After Binding

Trigger OriDomi to scroll

Hi!

I´m trying to found a method to handle oriDomi triggered to the scroll event but I can´t figure out how to do this properly. Could you give me some advice in this line? I mean, I´m trying to trigger the scroll up/down with the plugin´s dragging features. Which would be the easiest way to achieve this? Any help will be very grateful :)

Many thanks!

Oridomi folds to back rather staying in front

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?

sometimes refreshing impairs folding

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.

save the image file

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 -

Using without Random Generation

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?

Start element folded up

Is there a way to load the page with the element already folded up to being not visible, and then when an event occurs to unfold it into view?

Javascript Errors in Firefox

Hi,

I got the following errors in Firefox 17.0a1 while trying to view oridomi.com. Hope this helps.

[18:53:46.945] TypeError: css.transform.match(...) is null @ http://oridomi.com/oriDomi.js:70
[18:53:46.993] TypeError: $(...).oriDomi is not a function @ http://oridomi.com/js/demo.js:20
[18:53:47.509] TypeError: chromeAPI.timers is undefined @ resource://jid0-hc7vb1gcmvr7ibb5b5adujtjb3u-at-jetpack/api-utils/lib/cuddlefish.js -> resource://jid0-hc7vb1gcmvr7ibb5b5adujtjb3u-at-jetpack/api-utils/lib/sandbox.js -> resource://jid0-hc7vb1gcmvr7ibb5b5adujtjb3u-at-jetpack/api-utils/data/worker.js:130

Doesn't work in Opera

I'm not sure why anyone would build something and release it without ensuring it works in ALL BROWSERS. Come on. Get real.

oridomi worse now in android lollipop?

I'm not sure what android has changed but it used to work better.

Any ideas?

Semantic document outline and accessibility

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?

Needs more `swan`

Example:

$('body').oriDomi().swan();

Expected Output:

Button and Input do not work on a oriDomi paper

I've been trying putting Button and Input element on a paper,but it appears that does not work.I was wondering is the reason that paper has the attr "webkit-grab",ohh~~ I was confused.Someone help me,thanks.

Using the unfold() method

I'm using Oridomi to achieve a paper folding animation. Specifically, I would like to have a div unfold on page load (picture a book opening).

However I am having difficulty getting the unfold() method to work, despite being a method which can be called on.

You can see from this example, that I can only get the div to fold back, rather than unfold from a folded state (in effect, I would like the animation to be reversed).

My javascript function -

(function(){ function init(){

var $domi = $('.unfold').oriDomi({ vPanels: 2, hPanels: 1, speed: 500, shading: false });

setTimeout(function(){
$domi.oriDomi('reveal', -90);
}, 600);}

document.addEventListener('DOMContentLoaded', init, false);

})();

And CSS -

.unfold {
    font-family: "Abril Fatface", "Hoefler Text", Constantia, Palatino, Georgia, serif;
    font-size: 4.5rem;
    width: 25rem;
    height: 10rem;
    text-align: center;
    line-height: 1;
    color: #ff676d;
    background-color: #6ac1ff;
    padding: 2.5rem 0;
}

The documentation on http://oridomi.com is not very clear on how this can be implemented. Any help would be very much appreciated. Thanks

Ability to fix perspective of a single panel?

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?