This question already has an answer here:
javascript setAttribute style
(1 answer)
Closed 3 years ago.
I am trying to place an svg over an image using javascript. However, the position:relative style isn't working. I think it might be due to the style getting overwritten by the style sheet. Is there something im missing?
function button() {
var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
for (var i = 0; i < evenPic.length; i++) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
svg.setAttribute("position", "absolute");
svg.setAttribute("top", "0");
svg.setAttribute("left", "0");
svg.setAttribute("fill", "yellow");
svg.setAttribute("opacity", "0.5");
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "30");
circle.setAttribute("cy", "45");
circle.setAttribute("r", "31");
svg.appendChild(circle);
evenPic[i].appendChild(svg);
}
}
#container {
max-width: 400px;
}
header {
text-transform: uppercase;
padding-left: 7%
}
ol {
list-style: none;
}
ol li {
max-width: 400px;
}
.user {
margin: 20px;
padding-left: 20%;
font-family: arial;
}
.name {
/*font-weight: bold;*/
font-size: 120%;
margin-bottom: 10px;
}
.status {
font-size: 110%;
/*font-weight: bold;*/
margin-bottom: 10px;
}
.avatar {
position: relative;
}
.avatar img {
width: 17%;
padding-top: 4%;
float: left;
}
<div id="container">
<header>
Recent Conversations
</header>
<ol id="userList">
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
</ol>
<div id="buttons">
<button id="btn" onclick="button()">Button</button>
</div>
</div>
With this code, the svg image is created next to the avatar. Is there a way to create it on top of the avatar?
svg.setAttribute("position", "absolute");
position isn't an HTML or SVG attribute, it is a CSS property
svg.style.position = "absolute";
Simply add this CSS to .avatar svg :
position: absolute;
left: 0;
Since position: relative is set on your avatar, your SVG will be placed over it.
You could actually do this using CSS only instead of an SVG (simply by creating a yellow circle and placing it over it using the code below) :
<!DOCTYPE html>
<html>
<head>
<style>
#container {
max-width: 400px;
}
header {
text-transform: uppercase;
padding-left: 7%
}
ol {
list-style: none;
}
ol li {
max-width: 400px;
}
.user {
margin: 20px;
padding-left: 20%;
font-family:arial;
}
.name {
/*font-weight: bold;*/
font-size: 120%;
margin-bottom: 10px;
}
.status {
font-size: 110%;
/*font-weight: bold;*/
margin-bottom: 10px;
}
.avatar {
position:relative;
}
.avatar:after {
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background: yellow;
/* Using the same width and float as your image */
/* Forced to set a height using pixels since its parent has no height */
float: left;
width: 17%;
margin-top: 4%;
height: 62px;
opacity: 0;
transition: opacity 300ms;
}
.avatar.active:after {
opacity: 0.5;
}
.avatar img {
width: 17%;
padding-top:4%;
float: left;
}
</style>
</head>
<body>
<div id = "container">
<header>
Recent Conversations
</header>
<ol id = "userList">
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
</ol>
<div id = "buttons">
<button id="btn" onclick="button()">Button</button>
</div>
</div>
</body>
<script>
function button(){
var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
for(var i=0; i<evenPic.length; i++){
evenPic[i].classList.add("active");
}
}
</script>
</html>
Related
Current Behavior
I have the following basic structure:
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<!-- ... dozens of .boxes ... -->
</section>
#containers is .display: flex; flex-wrap: wrap, so the number of boxes on any one row is dynamic. This is an important feature that must be maintained.
Here's a minimal working example:
$(document).ready(function() {
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
});
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0.5em;
margin-left: 16px;
display: none; /* Initially collapsed */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content">Content</div>
</div>
</section>
</body>
I can easily use .slideToggle() to toggle visibility of a sibling (.content) underneath one of the clickable .collapsible divs:
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
Desired Behavior and Remarks
What I'd like is, on click of any .collapsible div in a row, the entire row will be toggled. That is, every .content div on the same horizontal row as displayed in the current viewport.
This must handle rows with dynamic number of columns, including viewport resizing. I'm flexible on the precise behavior, though.
Is this possible? And how much will it hurt?🙂 Changes to the document structure (such as adding some sort of row container) are OK, and I don't mind using some JS/jQuery code of course. The main thing I can't do is hard code the number of columns, as I need my site to remain responsive on vertical phones and fullscreen desktop browsers.
Maybe the jQuery slideToggle() function is not the best method.
Since a row will be the same height , you may look at a method to set size from 0 to another value. anybox resized will stretch other boxes on the same row.
here an example of the idea, setting a max-height from 0 to 200px and a transition.
it toggles a class.
$(document).ready(function() {
$(".collapsible").click(function() {
this.classList.toggle('slide');// plain javascript to toggle a class
});
});
*{box-sizing:border-box}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p{margin-top:0;}
.collapsible:hover {
background: #aaf;
}
.content {
margin:0 0.5em;
margin-left: 16px;
max-height:0; /* Initially collapsed */
transition:0.5s
}
.slide + .content{max-height:400px;/* which one got the class*/ color:darkred}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content"><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content"><p>Content</p><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content"><p>Content</p></div>
</div>
</section>
</body>
What you are missing here , is to set the height of the row to the height of the taller box, unless they will all be the same height.
For this, you can look for every box at the same top offset that the one clicked, and look for the tallest innercontent of the .contents and use this height .
Here comes the idea looking where each are standing and resets a max-height rule, you can inspire from too:
// defaut : supposed to be with no class 'slide' set on html elements
$(document).ready(function () {
let boxes = document.querySelectorAll(".collapsible");
let contents = document.querySelectorAll(".content");
$(".collapsible").click(function (event) {
let arrayContent = [];//reset
let hide=false;
for (i = 0; i < contents.length; i++) {
contents[i].style.maxHeight = "min-content";
let index = i;
let heightC = contents[i].offsetTop;
let boxOffset = contents[i].parentNode.offsetTop + 1;
// a few infos .add/remove what is needed
arrayContent.push({
index,
heightC,
boxOffset
});
contents[i].setAttribute("style", "");// resets inline style
}
let rowOffset = this.offsetTop;
if(this.classList.contains('slide')) {
hide=true;
}
let classState = this.classList;
arrayContent.forEach(function (obj) {
if (obj.boxOffset == rowOffset) {
if(hide == true) boxes[obj.index].classList.add('slide');/* reset needed if window resized => rows reorganized ? */
boxes[obj.index].classList.toggle("slide");
} else {
boxes[obj.index].classList.remove("slide");
}
});
});
});
* {
box-sizing: border-box
}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p {
margin-top: 0;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0 0.5em;
margin-left: 16px;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.5s!important
}
.slide~.content {
max-height: 400px;
/* which one got the class*/
color: darkred;
}
.collapsible:before {
content: attr(class)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible">
<h2>Box 1</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box2">
<div class="collapsible">
<h2>Box 2</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box3">
<div class="collapsible">
<h2>Box 3</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box4">
<div class="collapsible">
<h2>Box 4</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box5">
<div class="collapsible">
<h2>Box 5</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</section>
</body>
I made many changes on this code but it didn't work, what step should I follow? I want to make whole section that include icon and button's text clickable. I have tried this method already but not sure is it true or not: onclick="location.href='http://www.example.com';"
You can make corrections as you want, I'm open to any help, thank you.
#ana_div {
height: 400px;
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #f7f7f7;
}
.ikon {
margin-left: 30px;
margin-top: 15px;
position: absolute;
}
.div {
display: inline-block;
float: left;
height: 80px;
width: 300px;
margin: 10px;
}
.btn {
border: none;
color: black;
height: 80px;
width: 300px;
font-size: 19px;
cursor: pointer;
background-color: #fff;
}
.btn:hover {
background-color: #4d4d4d;
}
<div id="ana_div">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button1
</button>
</div>
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button2
</button>
</div>
</div>
This is as simple as it gets, a div tag enclosed by an anchor tag.
a {
text-decoration: none;
}
.big-div {
height: 100px;
width: 200px;
background-color: red;
}
<a href="https://www.facebook.com/">
<div class="big-div">
<p>Click anywhere</p>
</div>
</a>
you can write button click like this:
<button onclick=" window.open('http://www.google.com', '_blank'); return false;">Continue</button>
if you don't want to use JS in your code, just add a tag before your columns
check this code
#ana_div {
height: 400px;
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #f7f7f7;
}
.ikon {
margin-left: 30px;
margin-top: 15px;
position: absolute;
}
.div {
display: inline-block;
float: left;
height: 80px;
width: 300px;
margin: 10px;
}
.btn {
border: none;
color: black;
height: 80px;
width: 300px;
font-size: 19px;
cursor: pointer;
background-color: #fff;
}
.btn:hover {
background-color: #4d4d4d;
}
<div id="ana_div">
<a href="https://google.com">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button1</button>
</div>
</a>
<a href="https://microsoft.com">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button2</button>
</div>
</a>
</div>
Try enclosing div into anchor tag.
<a href= "http://www.example.com">
<div id="ana_div">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button1
</button>
</div>
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button2
</button>
</div>
</div>
</a>
Add an anchor tag and add the href attribute to it. Then add some style to remove the line and change the color. finally you can add anything you want inside it.
Otherwise you can create a anchor tag add the href and id. inside the onclick function of your div call a function redirect(). Inside the redirect() function add this code:
document.getElementById("your-tag-id").click()
You need to create an event listener, then you can use a function to run the javascript you wish when the user clicks the div / button.
As for your redirect, you can create a new <a> tag element using JS, then add the appropriate attributes for target, src and lastly, use the click() function on it.
See JS Fiddle
Javascript:
let btn = document.querySelectorAll('.btn')
function redirectHeader(){
let url = 'https://google.com'
const a = document.createElement('a')
a.target = '_blank'
a.href = url
a.click()
}
btn.forEach(button => {
button.addEventListener('click', redirectHeader)
})
OK now I understood. Use this code snippet:
<div id="ana_div">
<a href="https://example.com">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button1
</button>
</div>
</a>
<a href="https://example.com">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
</div>
<button class="btn"> button2
</button>
</div>
</a>
</div>
So i'm using three unique IDs "titleselected0", "titleselected1", "titleselected2". Each with an onclick function which runs a function "myFunction0", "myFunction1", "myFunction2". I'm using this to change the styling. My question is whether I can use a loop so i only need to use one function instead of three?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style type="text/css">.collapse {
display: none;
}
.collapse.in {
display: block;
}
.title {
background-color: #005FAA;
border: none;
border-radius: 0;
padding: 30px;
}
.title:hover {
background-color: #009cde;
border: none;
border-radius: 0;
padding: 30px;
}
.container{
margin-top:25px;
float:left;
width: 32%;
margin-right: 2%;
}
.container:last-child{
margin-right:0px;
width:32%;}
#media only screen and (max-width: 800px) {
.container{
margin-top:15px;
width: 100%;
}
.container:last-child{
margin-top:15px;
width: 100%;
}
}
.titleselected{
background-color: #009cde;
border:none;
border-radius:0;
padding: 30px;
}
</style>
<div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse" id="titleselected0" onclick="myFunction0()">
<h4>System Information</h4>
</div>
<div class="collapse" id="collapse" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting</strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
<p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse2" id="titleselected1" onclick="myFunction1()">
<h4>Product Specification</h4>
</div>
<div class="collapse" id="collapse2" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting:</strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse3" id="titleselected2" onclick="myFunction2()">
<h4>Case Study</h4>
</div>
<div class="collapse" id="collapse3" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting appeared in the CIBSE Journal</li>
</ul>
</div>
</div>
</div>
</div>
<script>
function myFunction0() {
var element = document.getElementById("titleselected0");
element.classList.toggle("titleselected");
}
function myFunction1() {
var element = document.getElementById("titleselected1");
element.classList.toggle("titleselected");
}
function myFunction2() {
var element = document.getElementById("titleselected2");
element.classList.toggle("titleselected");
}
</script>
Those elements already have a class of title, so you can just loop over all .title elements and attach the listener:
document.querySelectorAll('.title').forEach((element) => {
element.addEventListener('click', () => {
element.classList.toggle("titleselected");
});
});
(feel free to delete all of their ids and the inline attribute onclick handlers - best to attach listeners with Javascript, not HTML)
You could also use event delegation on the container which has all .titles:
<div class="container-for-all">
<div class="container">
...
</div>
<div class="container">
...
</div>
<!-- etc -->
and
document.querySelector('.container-for-all').addEventListener('click', ({ target }) => {
const closestTitle = target.closest('.title');
if (!closestTitle) {
return;
}
closestTitle.classList.toggle('titleselected');
});
I have these progress bars which are suppose to work as ratings and they look good:
I have applied some CSS and I change their width with JavaScript by reading values from text files.
But are not responsive at all and whenever the window is resized:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript to change progress bar width:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
How could I make it more responsive? Thank you in advance!
I recommend using css flexbox, so the items wrap instead of overlap when the page is resized. You could use media queries with this to adjust the size of the items and container so they don't overlap/wrap. This site has a good explanation of flexbox: A Complete Guide to Flexbox.
When I use Material Box from Materialize along with Muuri grid items, the maximized Material Box will still display behind the subsequent Muuri grid items even though the Material Box's z-index is set high.
Here's my plunker example https://plnkr.co/edit/aM2427AEwuWIqV3N9GvE/.
In the example, if you click on box three it appears to work, but if you click on boxes one and two you will see that they will still have the other boxes overlapping them.
Here's the CSS:
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
}
Here's the HTML:
<div class="grid">
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" />
</div>
</div>
</div>
Here's the JavaScript:
$(function() {
var grid = new Muuri('.grid');
});
I just created a new example from your code and it's working fine. Hope this will help!
here is the link to that example MUURI EXAMPLE
code:
HTML
<div class="grid">
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" />
</div>
</div>
</div>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
background: #fcfaf9;
}
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
height: 200px;
width: 200px;
line-height: 200px;
margin: 5px;
text-align: center;
z-index: 1;
}
.item.muuri-item-dragging {
z-index: 3;
}
.item.muuri-item-releasing {
z-index: 2;
}
.item.muuri-item-hidden {
z-index: 0;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
color: #fff;
background: #59687d;
font-size: 40px;
text-align: center;
}
.item.muuri-item-dragging .item-content {
background: #8993a2;
}
.item.muuri-item-releasing .item-content {
background: #152c43;
}
JS
const grid = new Muuri(".grid", {
dragEnabled: true
// dragAxis: 'y'
});