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'
});
Related
Hey guys I am kind of new to web dev and would appreciate some guidance. I am attempting to add a mouseenter event to an img tag in order to make a sibling div visible, however I have run into some weird behavior. The mouseenter event only seems to be successful for every single img tag besides the ones in the first row of the grid. So in my desktop view both trackid-img and stussy-img do not work and in mobile view only trackid-img does not work. Is my logic bad? Would I be better off placing these images in a div as a background image, instead of img tags, and applying the mouseenter/hover to the div? Essentially, all I would like to be able to do is hover over the image and upon hovering over the image another element is revealed. These elements would be links related to the image hovered.
var trackid = document.querySelector(".trackid-img")
var stussy = document.querySelector(".stussy-img")
var caltrends = document.querySelector(".caltrends-img")
var br8s = document.querySelector(".br8s-img")
var trackid_links = document.querySelector(".trackid-links")
var stussy_links = document.querySelector(".stussy-links")
var caltrends_links = document.querySelector(".caltrends-links")
var br8s_links = document.querySelector(".br8s-links")
trackid.addEventListener('mouseenter', showTrackidLink)
stussy.addEventListener('mouseenter', showStussyLink)
caltrends.addEventListener('mouseenter', showCaltrendsLink)
br8s.addEventListener('mouseenter', showbr8sLink)
function showTrackidLink(){
trackid_links.style.visibility = "visible"
}
function showStussyLink(){
stussy_links.style.visibility = "visible"
}
function showCaltrendsLink(){
caltrends_links.style.visibility = "visible"
}
function showbr8sLink(){
br8s_links.style.visibility = "visible"
}
.projects {
height: 100vh;
background: linear-gradient(to right, rgb(26, 26, 26), rgb(2, 2, 2));
}
.project-container {
position: relative;
top: 10vh;
}
.work-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.work-col {
margin: 1rem 0;
margin-left: auto;
margin-right: auto;
}
.project-card {
position: relative;
min-height: 38vh;
width: 36rem;
text-align: center;
}
.trackid-img {
position: relative;
top: 10vh;
height: auto;
width: 30rem;
}
.stussy-img {
position: relative;
top: 2vh;
height: auto;
width: 15rem;
}
.caltrends-img {
position: relative;
top: 4vh;
height: auto;
width: 16rem;
}
.br8s-img {
position: relative;
top: 10vh;
height: auto;
width: 20rem;
}
.work-link {
visibility: hidden;
}
.trackid-links {
position: relative;
top: 20vh;
}
.stussy-links {
position: relative;
top: 2vh;
}
.caltrends-links {
position: relative;
top: 10vh;
}
.br8s-links {
position: relative;
top: 15vh;
}
<section class="projects">
<div class="outer-container">
<div class="project-container">
<div class="work-row">
<div class="work-col">
<div class="project-card trackid-card">
<img class="trackid-img" src="images/TRACKID.png">
<div class="work-link trackid-links">
<a href="">
<img class="github-img" src="images/github.png">
</a>
<img class="linkedin-img" src="images/linkedin.png">
</div>>
</div>
</div>
<div class="work-col">
<div class="project-card stussy-card">
<img class="stussy-img" src="images/stussy.png">
<div class="work-link stussy-links">
<a href="https://github.com/br8S/Stussy-Landing-Page">
<img class="github-img" src="images/github.png">
</a>
<a href="https://br8s.github.io/Stussy-Landing-Page/">
<img class="linkedin-img" src="images/linkedin.png">
</a>
</div>
</div>
</div>
</div>
<div class="work-row">
<div class="work-col">
<div class="project-card caltrends-card">
<img class="caltrends-img" src="images/CALTRENDS.png">
<div class="work-link caltrends-links">
<img class="github-img" src="images/github.png">
<img class="linkedin-img" src="images/linkedin.png">
</div>
</div>
</div>
<div class="work-col">
<div class="project-card br8s-card">
<img class="br8s-img" src="images/br8SLOGO.png">
<div class="work-link br8s-links">
<img class="github-img" src="images/github.png">
<img class="linkedin-img" src="images/linkedin.png">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Because you want to do the same thing regardless of which image is moused over (make the next sibling div visible), you should avoid writing separate event handlers and just use one. The way to accomplish this is to, rather than relying on ids or unique class names, use relative references to the next sibling element after the one that triggered the event.
Additionally, instead of setting up event handlers on each image, you can just set one up at a common ancestor of all the images and let the event bubble up to that ancestor. Then handle the event there and based on what element actually triggered the event, proceed as needed. This is called "event delegation" and makes the code, it's performance and scalability much better.
In the code below, notice that I've added an additional class of mouse to any image that needs to be responsible for triggering the event, but also notice that there are no loops, no references to ids or unique class names and no repeating of essentially the same function. If you have a new project-card in the future, just add the proper HTML structure to what's already there and it will work without any other changes.
// Just set up one event handler on a common ancestor
// of all the images that "might" be moused over
document.querySelector(".project-container").addEventListener("mouseover", function(event){
// Determine if the event originated with one of the
// images that we care about handling (I have given
// each of the images that need to be originators of
// this event an additional HTML class of "mouse").
if(event.target.classList.contains("mouse")){
// Make the next element sibling visible
event.target.nextElementSibling.classList.remove("work-link");
}
});
.projects {
height: 100vh;
background: linear-gradient(to right, rgb(26, 26, 26), rgb(2, 2, 2));
}
.project-container {
position: relative;
top: 10vh;
}
.work-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.work-col {
margin: 1rem 0;
margin-left: auto;
margin-right: auto;
}
.project-card {
position: relative;
min-height: 38vh;
width: 36rem;
text-align: center;
}
.trackid-img {
position: relative;
top: 10vh;
height: auto;
width: 30rem;
}
.stussy-img {
position: relative;
top: 2vh;
height: auto;
width: 15rem;
}
.caltrends-img {
position: relative;
top: 4vh;
height: auto;
width: 16rem;
}
.br8s-img {
position: relative;
top: 10vh;
height: auto;
width: 20rem;
}
.work-link {
visibility: hidden;
}
.trackid-links {
position: relative;
top: 20vh;
}
.stussy-links {
position: relative;
top: 2vh;
}
.caltrends-links {
position: relative;
top: 10vh;
}
.br8s-links {
position: relative;
top: 15vh;
}
<section class="projects">
<div class="outer-container">
<div class="project-container">
<div class="work-row">
<div class="work-col">
<div class="project-card trackid-card">
<img class="trackid-img mouse" src="images/TRACKID.png">
<div class="work-link trackid-links">
<a href="">
<img class="github-img" src="images/github.png">
</a>
<img class="linkedin-img" src="images/linkedin.png">
</div>>
</div>
</div>
<div class="work-col">
<div class="project-card stussy-card">
<img class="stussy-img mouse" src="images/stussy.png">
<div class="work-link stussy-links">
<a href="https://github.com/br8S/Stussy-Landing-Page">
<img class="github-img" src="images/github.png">
</a>
<a href="https://br8s.github.io/Stussy-Landing-Page/">
<img class="linkedin-img" src="images/linkedin.png">
</a>
</div>
</div>
</div>
</div>
<div class="work-row">
<div class="work-col">
<div class="project-card caltrends-card">
<img class="caltrends-img mouse" src="images/CALTRENDS.png">
<div class="work-link caltrends-links">
<img class="github-img" src="images/github.png">
<img class="linkedin-img" src="images/linkedin.png">
</div>
</div>
</div>
<div class="work-col">
<div class="project-card br8s-card">
<img class="br8s-img mouse" src="images/br8SLOGO.png">
<div class="work-link br8s-links">
<img class="github-img" src="images/github.png">
<img class="linkedin-img" src="images/linkedin.png">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I have hundreds of html-based journal articles that contain html snippets like the example below to reference images:
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe"><!-- named anchor --></a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png">
<div class="long-desc" />
<a target="xrefwindow" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" id="ID0ELD">https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png</a>
<div class="permissions">
<p class="copyright" />
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</a>
</div>
On document ready, using JavaScript and CSS3 how can I show the thumbnail image contained in the first 'a' tag, along with the contents of the 'long-desc' and 'permissions' divs beneath... and then when the thumbnail is clicked, open the image in the second (daughter) 'a' tag in a modal that fills the screen (and has a close button)?
Check this out. You can edit styles as you need for your purpose. It is just a sketch.
document.addEventListener('DOMContentLoaded', function() {
let thumbnail = document.querySelector('.thumbnail');
let close = document.querySelector('.modal-close');
let overlay = document.querySelector('.overlay');
thumbnail.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.add('visible')
});
close.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.remove('visible')
});
});
.thumbnail-image {
border: 3px solid #BBB;
border-radius: 4px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.overlay.visible{
display:block;
}
.modal-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.modal-image {
height: calc(100vh / 1.28);
width: 100vh;
margin: auto;
}
.modal-image>img {
max-width: 100%;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
border: 2px solid #444;
background: #bbb;
cursor: pointer;
}
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe">
<!-- named anchor -->
</a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="#" class="thumbnail">
<img class="thumbnail-image" src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png" alt="show full image" title="show full image" />
</a>
<div class="long-desc">
<div class="permissions">
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</div>
<div class="overlay">
<div class="modal-wrapper">
<div class="modal-image">
<img src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" alt="full image" title="full image" />
</div>
<div class="modal-close">X</div>
</div>
</div>
</div>
would you know, how to create notifications which are displayed under the notification bell without using fixed position? I would like to have something clean and resposive if possible. Thank you very much
const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")
bell.addEventListener("click", () => {
alertBtn.style.color =
"white";
notifications.innerHTML += ` <div class="member">
<li>
<span>Notifaction 1</span>
</li> </div> <div class="member">
<li>
<span>Notifaction 2</span>
</li> </div>`;
});
.member {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
background-color: darkgrey;
}
#notifications {
position: fixed;
width: 50%;
top: 70px;
right: 0px;
}
<header>
<div class="header">
<div class="logo">
<h1>YourApp™</h1>
</div>
<div class="userProfile">
<div class="bell">
<img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
<p class="active-alert">●</p>
<ul id="notifications"></ul>
</div>
<div class="user">
<img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
<p>Member 1</p>
</div>
</div>
</div>
</header>
See below. Changes documented in the source code. Hope this helps.
const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")
bell.addEventListener("click", () => {
/* alertBtn.style.color = "white"; Removed */
/* Hide button */
alertBtn.style.display = "none";
notifications.innerHTML += ` <div class="member">
<li>
<span>Notifaction 1</span>
</li> </div> <div class="member">
<li>
<span>Notifaction 2</span>
</li> </div>`;
});
.member {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
background-color: darkgrey;
}
#notifications {
/* position: fixed; Removed */
width: 50%;
/* top: 70px; Removed */
/* right: 0px; Removed */
padding: 0; /* Added */
margin-top: 0 /* Added */
}
/* Added */
.bell {
display: flex;
flex-direction: column;
}
<header>
<div class="header">
<div class="logo">
<h1>YourApp™</h1>
</div>
<div class="userProfile">
<div class="bell">
<img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
<p class="active-alert">●</p>
<ul id="notifications"></ul>
</div>
<div class="user">
<img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
<p>Member 1</p>
</div>
</div>
</div>
</header>
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.
Ok, I have this code I have done up here on how I need this solution to function:
Codepen: http://codepen.io/anon/pen/MaOrGr?editors=110
HTML:
<div class="container">
<div class="wrapper row">
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
</div>
</div>
SCSS / CSS:
.wrapper {
.box {
position: relative;
height: 340px;
overflow: hidden;
margin-top: 10px;
&:hover > .rollover-wrap {
bottom: 260px;
}
.cta-background {
background-image: url('http://ideas.homelife.com.au/media/images/8/2/8/9/0/828947-1_ll.jpg');
background-size: cover;
height: 260px;
}
.rollover-wrap {
position: relative;
bottom: 0;
transition: 0.3s;
z-index: 2;
}
.details {
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: gray;
height: 80px;
}
.summary {
height: 260px;
font-size: 15px;
padding: 15px;
background-color: #E29222;
z-index: 2;
}
}
}
This is working fine and is the effect I am wanting; however, I need to support the gray area being able to have multiple lines of text, and if one does, then the other adjacent gray sections should expand to the same height.
At the moment it uses fixed heights to assist with hiding and bringing in the transition on hover, but this hinders the ability for the gray area to expand. Even if it could expand, the other boxes need to match the height.
I have tried using flexbox and changing the html layout to no avail.
I don't mind if the image & summary sections have a fixed height, but the gray area needs to be able to expand to it's content.
Is there anyway to do what I want to do without JavaScript? If not, is there a clean way to do it with JavaScript/jQuery that doesn't have too much of a messy fallback?