Multiple Painterro instances on one page

#StandWithUkraine
Today, 25th June 2022, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putin’s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.

Support for multiple Painterro instances introduced in versions 1.2.29+.

First of all, let's create 2 div elements:

<div id="holder">
  <div id="p1" class="pa"></div>
  <div id="p2" class="pa"></div>
</div>

Now in JavaScript we will initialize Painterro instances and define IDs to put them in our divs:

Painterro({id: "p1"}).show();
Painterro({id: "p2"}).show();

Now we need to apply styles. An important rule to remember when you use Painterro's id option: Apply correct positioning for holding block. The thing is that internally Painterro uses absolute positioning, that why holding div should have position value, one from:

If you will not define it, the div will receive a default value which is static and it might break Painterro look and functionality.

So we are going to add next styles:

#holder {
  display: flex;
}

.pa {
  position: relative;
  width: 300px;
  height: 200px;
}

#p1 {
  border: 2px solid red;
}

#p2 {
  border: 2px solid green;
}

Here is the result:

Multiple painterro instances

You can also touch it on jsfiddle

Don't hesitate to create issues on Painterro github page

#painterro
0
Ivan Borshchov profile picture
Feb 06, 2021
by Ivan Borshchov
Did it help you?
Yes !
No

Best related