I am having trouble with this github repo: https://github.com/Atharva404/Wordle-Plus

Website: https://atharva404.github.io/Wordle-Plus/

I am trying to deploy it however it is not working.

Any help is amazing.

Steps to reproduce:

1. Select images with equal sizes and smaller than your viewport
2. Create a Cocoen comparison where both images are smaller than the Cocoen containing element.
   (see the example for a simple html+js which causes the issue)

Expected:

The images are stretched or not in the same way.

Actuall results:

The "after" slot is stretched to fit the container width and the before slot is kept untouched.

Workaround

Add this style (remove stretching from the "after" slot):

cocoen-component > img[slot="after"] {
    width: auto!important;
}

Example:

https://jsfiddle.net/e75zmsfc/

For posterity, in case jsFiddle goes away:

<div class="container">
  <div class="cocoen">
    <!-- Both images are 380x380 pixels as of the creation of this example. -->
    <img src="https://cdn02.nintendo-europe.com/media/images/11_square_images/games_18/nintendo_switch_5/SQ_NSwitch_MetroidDread_image380w.jpg">
    <img src="https://cdn02.nintendo-europe.com/media/images/11_square_images/games_18/nintendo_3ds_26/SQ_3DS_MetroidSamusReturns_image380w.jpg">
  </div>
</div>

<script src="https://unpkg.com/cocoen/dist/cocoen.js"></script>
<script>
Cocoen.parse(document.body);
</script>

The script crash when I put inside an accordion, please, how can I got this great script full working inside a accordion?

The issue is that the slider don't go back and forth, and the left image is barely "moved" ;-(

I'm pretty sure that the fix is CSS only.

Currently,
I am able to place a div on the right side, that is overwritten by the slider as you drag it right.
However, this is not possible on the left side when using standard z-index methods.

Would it be possible to update this to allow revelation of text boxes on the left, and on the right based on the position of the slider.

Temporary work around, that is not SEO friendly, is to, of course, place the text into the image itself. However, for content reasons and SEO benefits along with anchor links and such, having actual HTML that is obscured by the left/right drag would be beneficial.

Could you do this?

Wonderful Before/After Slider, and easy to install and get working on a plain page.

However, the slider doesn't seem to work when it's installed within the content of a Bootstrap 4 Modal Popup window, which is where I'd really like to use it.

I converted the demo sample page to a test page that resembles the Bootstrap layout of the page I want to use it on. I've put the before/after images in the "spotlight card", and also in the Modal Popup code section, where I really like to get it working. The slider works fine in the spotlight card. But when the Modal Popup (with the full page text rather than just the excerpt) is opened, by clicking the Read More button at the bottom of the card, it looks like it might work, ie one image and the slider are displayed, but the slider won't move.

I've zipped up the demo page and the dependent css, js, and grafix files and attached it here.

Thanks,

Muiz
cocoenDemo.zip

I have several cocoens into tabs or accordion structure. The cocoens that are "collapsed" are broken.

My idea is to call a destroy method and the recreate.

How can I do it manually? I mean revert this

document.querySelectorAll('.cocoen').forEach(function(element){
  new Cocoen(element);
});

To execute it again.

Thank you!

It would be great to be able to specify the starting position (and other settings like min/max offsets) for the slider using a data attribute on the div.

<div class="cocoen" data-position="75%" data-right-offset="10" data-left-offset="10">

Hello! There is a problem, that mobile phone user can't slide page to up/down. But can slide to left/right.

this.element.addEventListener('touchmove', this.onDrag.bind(this));

This rewrites touchmove and allows only scroll to left/right.

Hello!

Demo https://koenromers.com/cocoen/index.html doesn't work in the latest Mi Browser (https://play.google.com/store/apps/details?id=com.mi.globalbrowser)

Any idea how to fix it?

Thanks

I installed cocoen with npm, included the stylesheet and the script in my index.html file, created the package.json, and it works fine when testing from my local computer.

When I push to my github (github pages), I get 'Failed to load resource: the server responded with a status of 404 ()' for both the cocoen.min.css and cocoen.min.js. I connected the package.json with the repo and tried to change the css and js paths but the files still can't be found.

Here's my repo: https://github.com/brendaboudaie/brendaboudaie.github.io/blob/master/index.html.

Appreciate any help!

Seems you released off develop branch? If that was intentional, perhaps you should remove master & make develop the main branch in GH?

thanks for your image comparer!

There is a Drupal module that uses version 2 of this project. It does not seem to support swiping, is that correct for version 2?

I ran the npm install --save cocoen and received the following error message:
npm ERR! 404 'requestAnimationFrame' is not in the npm registry. It seems that the NPM package has moved from camel-casing its name to all lower-case.

Hi,

Does this plugin support RTL?

Marmik

Module build failed: ReferenceError: Unknown plugin "transform-object-assign" specified in "/node_modules/cocoen/.babelrc" at 0, attempted to resolve relative to "/node_modules/cocoen"

You're using the babel-plugin-transform-object-assign plugin for dev but those who use babel RC with nodejs are getting the error above. You may wanna move that to dependencies.

Hi,

I'm currently in the process of setting up my site to make use of this plugin, pretty much all is going great but dragging on touch isn't working for me. If I tap the image, the slider jumps across but I can't grab the slider and drag it across on mobile (works fine on desktop).

I'm getting the following error when trying:

Uncaught TypeError: Cannot read property 'touches' of undefined

This is the same on your demo (https://koenromers.com/cocoen/demo.html) but does work fine on another demo that I found (http://web.uvic.ca/~wanthony/etc/ImageSlider-Cocoen.htm).

What am I missing?

Thanks,

Ben

Hi,

Is it be possible to call a function that animates the slider?

Id ultimately like to be able to tell it to animate from 50% to 55% to 45% to 50% again - that way it would make it look like a wiggle and thus attract a users attention.

Thanks!

Hi, how are you guys?

This plugin is amazing, and it's very cool. But I change my tags from to and doesn't work. Do you know if there have a way to work with this tag?

Thanks for any help :)

Hi, if I use Cocoen inside any slider, for example Owl or TinySlider, only the first slide works.
For the rest of the slides, when dragging or clicking, the values are set to either 2% or 98%. I found that it considers the coordinates/ratio incorrect

let openRatio = (this.leftPos + (this.dragElementWidth / 2)) - this.elementOffsetLeft;

Next I found a question and solution on SO:
https://stackoverflow.com/questions/50154738/cocoen-slider-in-bootstrap-carousel

I added this.dimensions (); in functions: onDragStart() and onTap()
It really solved the problem.

I think this should be included in the library, because there is no way to override methods, so I had to fix the source code.

What do you think about this topic? What is the best way to use it? I would suggest or always recalculate the coordinates or add an option to enable/disable this feature.

Click-dragging over cocoen somethimes makes you drag the instead

Is there a way to change the look of the drag element? I really like the double arrows on the twenty twenty plugin - https://zurb.com/playground/twentytwenty. It conveys immediately that the user should move the slider left and right.

Hello

I'm wanting to use multiple instances of Cocoen on my website as it's a great way to illustrate my skills in Digital Imaging and Photo Restoration.

The slider was working fine while building and testing the site offline, but for the left image to appear and the slider to move when online, an F5 refresh is required:

Has anyone experienced this same issue?
If so, can you offer advice on how to overcome this?

Any help would be much appreciated.

Thanks

Steps to reproduce:

• Right click
• Normal click outside context menu to close it

What happens:
You get stuck in drag mode

What's expected:
You do not get stuck in drag mode.

Just wanted to share.

https://gist.github.com/ruffiem/2a62243ffbe1e0b78a6d1afa6b240a99

Hello!
Could you do auto play? Mean, vertical line to slide left-right-left in auto mode?

Hi Koenoe,

I want to use this code for a project as a banner ad example (on squarespace) but I don't know the first thing about code. Is there any way you could send me a tutorial or video on how I should go about this?

Thanks!

I note that when element gets resized after creation, that the image on the right gets larger, but the one on the left does not. One option would to be destroy and recreate upon resize, but I don't see a destroy method. Is there a way to fix the sizing?

I'm trying to apply the script to picture elements, but it isn't working 😢

The slider does not react to left arrow and right arrow making it inaccessible for keyboard users. I suggest that an actual <input> element be used instead of the existing div, or if some Javascript can be introduced to make it keyboard-accessible.

The demo doesn't work on any other browsers then Firefox.

Uncaught TypeError: n.before is not a function

Drag on Mouse Movement over the element, instead of click and drag?

For example I want to use the start="10" option. Where would I write this? I have tried every place I can think of. My code at the moment is basically the example code from the readme.
Thanks!

Hi there,

It would be very helpful if the library had custom events. Events such as leftImageRevealed, rightImageRevealed and other dragging related events.

Kind regards,
Kreshnik