CODEWITHSUNDEEP
jquerycsshovermouseenter
V_RocKs
V_RocKs

Reputation: 134

JQuery mouseenter causes div elements to move

Problem: When using JQuery to swap out elements (images) inside DIV tags the DIV's move around vertically. When not actually swapping the images and just hovering mouse with a border color change the DIV's don't move. So I know it isn't tied to :hover CSS problems. Ultimately the images will swap out to include an embed video preview. I have simplified it by using the cute kitten images and they produce the same problem.

The CSS:

.placecard { 
  margin:5px;
  display:inline-block;
  position:relative;
  overflow:auto;
  padding:0px;
  border: 1px solid #12142E;
  overflow:hidden;
}
@media (max-width: 1250px) {
  .placecard {
    max-width:23.64%;
    height:auto;
  }
}

@media (max-width: 1110px) {
  .placecard {
    max-width:31.64%;
    height:auto;
  }
}
@media (max-width: 900px) {
  .placecard {
    max-width:31.32%;
    height:auto;
  }
}

@media (max-width: 768px) {
  .placecard {
    max-width:47.52%;
    height:auto;
  }
}
@media (max-width: 552px) {
  .placecard {
    max-width:46.5%;
    height:auto;
  }
}
@media (max-width: 480px) {
  .placecard {
    max-width:44.5%;
    height:auto;
  }
}

The Javascript:

$(".placecard").mouseenter(function() {
$(this).find(".modelimg").attr("id","object_container");

    var model = $(this).attr("title");
    var width = $(this).width();
    var height = $(this).height();
console.log(model+":"+width+":"+height);

var container    = document.getElementById('object_container'),
    parent       = container.parentNode,
    newContainer = document.createElement('div'),

    i            = 0;
while( !!document.getElementById('object_container_' + i ) ) { i++; }

newContainer.id = 'object_container_' + i;
newContainer.className = 'npt-object-container';
newContainer.style.display = 'inline-block';

newContainer.innerHTML = "<img width="+width+" height="+height+" src=\"http://placekitten.com/300/200\" >"
parent.insertBefore(newContainer, container);
$(container).css("display","none");
console.log($(newContainer).height());

}).mouseleave(function() {
    $("#object_container_0").remove()
    $("#object_container").css("display","block");
    $(this).find(".modelimg").removeAttr("id");
});

The HTML:

<div class="placecard"  data-profile="" title="Cat1">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat2">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat3">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat4">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat5">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat6">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat7">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

And A handle JSFiddle: http://jsfiddle.net/5snwxy6v/

JSFiddel updated: http://jsfiddle.net/5snwxy6v/3/

Upvotes: 0

Views: 128

Answers (2)

Frisbetarian-Support Palestine
Frisbetarian-Support Palestine

Reputation: 1309

Kind of hacky, but placing line-height:0; attribute on placecard solves the issue.

Upvotes: 1

Benjamin
Benjamin

Reputation: 2670

Check this out

.placecard { 
    margin:5px;
    display:inline-block;
    position:relative;
    overflow:auto;
    padding:0px;
    height:200px;/*added*/
    overflow:hidden;
}

Updated Fiddle

Upvotes: 0

Related Questions