All geek questions in one place

Div Overlay for each div in an array

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

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

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

So, how can I get an overlay that works for each div, not class. I was able to create a div with all my desired settings for each array of objects along with the overlay.

In my finished documentation, you will find the code that currently hides / shows each overlay div.

I want to define this for individual divs in an array, and not for 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 also experience two other problems with this code.

  • Image links are not working, I just copied and pasted from my css file

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

Thank you for your help.

+5
source share
1 answer

You must apply mouseenter and mouseleave to the parent .pagesListBtn . From $(this) where .pagesListBtn is located, find the pagesListOverlay children 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>
+2
source

Source: https://habr.com/ru/post/1271517/

More articles:


All Articles