NZMAI NZMAI - 4 months ago 10
HTML Question

Adjust created div to parent div

How to make width of the created div adjust to parent div when width of the parent div changes.
For example when my web page shrinks created div (kind of caption) overflow parent div.

enter image description here

var $discDiv = $("<div></div>");
$discDiv.css({
width:$(".col-md-8").width(),
height:$(".col-md-8").height()*0.3,
backgroundColor:"blue",
position:"absolute",
zIndex: 1,
opacity:0,

});
$(".col-md-8").append($discDiv);

$(".col-md-8").mouseenter(function() {
$discDiv.css({
opacity:0.3

});

});


Pen

Answer

just change height to percentage value

$discDiv.css({
  width:$(".col-md-8").width(),
  height:"100%",
  backgroundColor:"blue",
  position:"absolute",
  zIndex: 1,
  opacity:0,

});

and add mouse leave for better rendering :

$(".col-md-8").mouseleave(function() {
  $discDiv.css({
     opacity:0
  });
});
Comments