div Overlay for every div in an array

Question

I'm trying to make a simple list that shows me a div overlay for every div in the array, but I am having problems defining each div.

My current java/jQuery script involves creating a div for each object in the array along with a background image (which I am also have trouble with links. I got an online link working for the background image though.).

What I want to do is provide an overlay for every item in the list and then in the future use the same code to provide the ability to open a link or show an image preview, but that's for another list.

So, how can I get the overlay working for each div rather than acting by class. I was able to create a div with all my desired settings for each object array, along with the overlay.

You will find in my document ready function the code that currently hides/shows every overlay div.

I want to define this to individual divs' in the array rather than all.

 $(document).ready(function() { displayDesign(); $( ".pagesListOverlay" ).mouseenter(function() { $( ".pagesListOverlay" ).hide() ; }); }); var arrayVariableDesign = [ {name: "object1", type:"type1", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"}, {name: "object2", type:"type1", company:"company1", dateYear:"2017", dateMonth:"01", dateDay:"20", image:"../images/preview/noimg.png"}, {name: "object3", type:"type2", company:"company2", dateYear:"2016", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"}, {name: "object4", type:"type3", company:"company3", dateYear:"2016", dateMonth:"03", dateDay:"04", image:"../images/preview/noimg.png"}, {name: "object5", type:"type1", company:"company2", dateYear:"2017", dateMonth:"02", dateDay:"24", image:"../images/preview/noimg.png"}, {name: "object6", type:"type2", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"20", image:"../images/preview/noimg.png"}, ]; var arrayLength_Design = arrayVariableDesign.length; var temp_Design; function displayDesign() { for (i = 0; i < arrayLength_Design; i++) { var sortDate_Design = arrayVariableDesign[i].dateYear + arrayVariableDesign[i].dateMonth + arrayVariableDesign[i].dateDay; temp_Design = document.createElement('div'); temp_Design.className = 'pagesListBtn mobilePagesListBtn'; temp_Design.style.background = "url(" + arrayVariableDesign[i].image.src + ")"; // https://stackoverflow.com/questions/9790347/set-an-image-object-as-a-div-background-image-using-javascript temp_Design.style.backgroundSize = "100%"; temp_Design.style.backgroundRepeat = "no-repeat"; temp_Design.style.backgroundPosition = "50% 50%"; temp_Design.style.backgroundColor = "#C02024"; temp_Design.innerHTML = "<div class='pagesListOverlay mobilePagesListOverlayBtn'>" + arrayVariableDesign[i].name + " for " + arrayVariableDesign[i].company + "<br>" + arrayVariableDesign[i].type + "<br>" + arrayVariableDesign[i].dateDay + "/" + arrayVariableDesign[i].dateMonth + "/" + arrayVariableDesign[i].dateYear + "</div>"; document.getElementById("demo").appendChild(temp_Design); } } 

 .pagesListBtn { z-index: 500; background-color: #C02024; display: inline-block; } .pagesListBtn:hover { background-color: #920400; } .pagesListOverlay { padding-top: 0; margin: 0 auto; opacity: 0.8; display: inherit; background-color: white; text-align: center; vertical-align: bottom; text-decoration:none; font-weight:900; line-height:30px; } .mobilePagesListBtn { min-height:150px; max-height:150px; width: 100%; /*295px*/ padding: 0; margin-top: 25px; margin-bottom: -15px; } .mobilePagesListOverlayBtn { min-height:150px; max-height:150px; width: 100%; /*295px*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <div id="demo"></div> 

I am also experiencing two other problems with this code.

1. The image links are not working, I just copied and pasted from my css file

2. I get a lot of 'missing strict statements everywhere' - I fixed this by adding "use strict"; to my code.

Thanks for your help.

Answer 1

You have to apply the mouseenter and mouseleave on the parent .pagesListBtn . From $(this) , wich is the .pagesListBtn hovered, find the children pagesListOverlay to show/hide it.

 $(document).ready(function() { displayDesign(); $( ".pagesListBtn" ).mouseenter(function() { $( this ).find(".pagesListOverlay").fadeOut(800) ; }); $( ".pagesListBtn" ).mouseleave(function() { $( this ).find(".pagesListOverlay").fadeIn(800) ; }); }); var arrayVariableDesign = [ {name: "object1", type:"type1", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"}, {name: "object2", type:"type1", company:"company1", dateYear:"2017", dateMonth:"01", dateDay:"20", image:"../images/preview/noimg.png"}, {name: "object3", type:"type2", company:"company2", dateYear:"2016", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"}, {name: "object4", type:"type3", company:"company3", dateYear:"2016", dateMonth:"03", dateDay:"04", image:"../images/preview/noimg.png"}, {name: "object5", type:"type1", company:"company2", dateYear:"2017", dateMonth:"02", dateDay:"24", image:"../images/preview/noimg.png"}, {name: "object6", type:"type2", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"20", image:"../images/preview/noimg.png"}, ]; var arrayLength_Design = arrayVariableDesign.length; var temp_Design; function displayDesign() { for (i = 0; i < arrayLength_Design; i++) { var sortDate_Design = arrayVariableDesign[i].dateYear + arrayVariableDesign[i].dateMonth + arrayVariableDesign[i].dateDay; temp_Design = document.createElement('div'); temp_Design.className = 'pagesListBtn mobilePagesListBtn'; temp_Design.style.background = "url(" + arrayVariableDesign[i].image.src + ")"; // https://stackoverflow.com/questions/9790347/set-an-image-object-as-a-div-background-image-using-javascript temp_Design.style.backgroundSize = "100%"; temp_Design.style.backgroundRepeat = "no-repeat"; temp_Design.style.backgroundPosition = "50% 50%"; temp_Design.style.backgroundColor = "#C02024"; temp_Design.innerHTML = "<div class='pagesListOverlay mobilePagesListOverlayBtn'>" + arrayVariableDesign[i].name + " for " + arrayVariableDesign[i].company + "<br>" + arrayVariableDesign[i].type + "<br>" + arrayVariableDesign[i].dateDay + "/" + arrayVariableDesign[i].dateMonth + "/" + arrayVariableDesign[i].dateYear + "</div>"; document.getElementById("demo").appendChild(temp_Design); } } 

 .pagesListBtn { /*z-index: 500;*/ background-color: #C02024; /*display: inline-block;*/ display:block; } .pagesListBtn:hover { background-color: #920400; } .pagesListOverlay { padding: 0; /* changed */ margin: 0; /* changed */ height: 150px; /* added */ opacity: 0.8; display: inherit; background-color: white; text-align: center; vertical-align: bottom; text-decoration:none; font-weight:900; line-height:30px; } .mobilePagesListBtn { height: 150px; /* added */ /*min-height:150px; max-height:150px;*/ width: 100%; /*295px*/ padding: 0; margin-top: 25px; /*margin-bottom: -15px;*/ } .mobilePagesListOverlayBtn { /*min-height:150px; max-height:150px;*/ padding:0; /* added */ height: 150px; width: 100%; /*295px*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <div id="demo"></div>