jquery - javascript: how can i get DIV widthheight instantly even if changed on hover

i am trying to get a div width and height through Java-script, and i got width and height when page load, but i hover div so it is not showing me width/height update size. i need when div on hover increase width or height also move/increase and show in div size increasing. i also need when i make css animation with/height 50% to 100% so also show me the width/height animation in pixels.

here is Example what i need. when div width/height increase so also increase values in top black area Video Link

$(document).ready(function() {
  $("#w-count").html($('.animating-width').width());
  $("#h-count").html($('.animating-width').height());
});

html {
  background: #292a2b;
  color: #FFF;
}

.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
  -moz-transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;
  -webkit-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;
}
.animating-width:hover {
  cursor: pointer;
  width: 100%;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src=".1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

here is Example what i need. when div width/height increase so also increase values in top black area Video Link

$(document).ready(function() {
  $("#w-count").html($('.animating-width').width());
  $("#h-count").html($('.animating-width').height());
});

html {
  background: #292a2b;
  color: #FFF;
}

.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
  -moz-transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;
  -webkit-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;
}
.animating-width:hover {
  cursor: pointer;
  width: 100%;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

Share Improve this question edited Nov 19, 2018 at 12:42 asked Nov 19, 2018 at 12:22 Hassan Javed 1601 silver badge13 bronze badges

@hasan u can try this . api.jquery./height here u will get a plete example – sayalok Commented Nov 19, 2018 at 12:37
@misorude i need the value in id="w-count" and id="h-count" – Hassan Javed Commented Nov 19, 2018 at 12:37
Well then you need an interval or something to constanlty check the current values and update your output. – misorude Commented Nov 19, 2018 at 12:39
Possible duplicate of stackoverflow./questions/35822889/… – misorude Commented Nov 19, 2018 at 12:39
Now brother, see this Link this is example i need this when hover div so show me what width/height is. – Hassan Javed Commented Nov 19, 2018 at 12:41

Add a ment |

5 Answers 5

Sorted by: Reset to default 3

You can create interval using setInterval() and get width of element in interval.

setInterval(function(){
  $("#w-count").html(
    Math.round($('.animating-width').width())
  );
  $("#h-count").html(
     Math.round($('.animating-width').height())
  );
}, 10);

$("#w-count").html($('.animating-width').width());
$("#h-count").html($('.animating-width').height());
setInterval(function(){
  $("#w-count").html(
    Math.round($('.animating-width').width())
  );
  $("#h-count").html(
     Math.round($('.animating-width').height())
  );
}, 10);

html {
  background: #292a2b;
  color: #FFF;
}
.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
  -moz-transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;
  -webkit-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;
}
.animating-width:hover {
  cursor: pointer;
  width: 100%;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

Also you can use .animate() instead of CSS transition.

$("#w-count").html($('.animating-width').width());
// store first width of element
var width = $(".animating-width").width();
// mouseover & mouseout event
$(".animating-width").mouseover(function(){
  anim('100%');
}).mouseout(function(){
  anim(width);
});
// function of animation
function anim(width){
  $(".animating-width").stop().animate({
    width: width
  }, {
    duration: 1500,
    step: function(){
      $("#w-count").html($(this).width());
    }
  });
}

html {
  background: #292a2b;
  color: #FFF;
}
.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
}
.animating-width:hover {
  cursor: pointer;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

Using setInterval will render the height and width of the div at specific intervals on hover.

$(document).ready(function() {
  $("#w-count").html($('.animating-width').width());
  $("#h-count").html($('.animating-width').height());
});

$(".animating-width").hover(function(){
   setInterval(function(){
      $("#w-count").html( Math.trunc($('.animating-width').width()));
      $("#h-count").html( Math.trunc($('.animating-width').height()));
   }, 100);
});

html {
  background: #292a2b;
  color: #FFF;
}

.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
  -moz-transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;
  -webkit-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;
}
.animating-width:hover {
  cursor: pointer;
  width: 100%;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

Personally, I wouldn't bind it to a .hover() or .mouseover() method. I'd build it externally and encapsulated to be more flexible.

const [d,resize,opt,ani] = [
    $('div'),
    ()=> d.html(Math.ceil(d.width())+'px'),
    {duration:1e3, step:()=> resize()},
    n=> ()=> d.stop().animate({width:n+'%'}, opt)
]
d.hover(ani(100),ani(50))

const [d,resize,opt,ani] = [
	$('div'),
	()=> d.html(Math.ceil(d.width())+'px'),
	{duration:1e3, step:()=> resize()},
	n=> ()=> d.stop().animate({width:n+'%'}, opt)
]
d.hover(ani(100),ani(50))
resize()

div {
  width: 50%;
  background: orange;
  text-align: center;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

fiddle

You can also use transition end event

    $(document).ready(function () {
        DetectTransitionEnding = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';


      calcSize = function() {
          $("#w-count").html($('.animating-width').width());
          $("#h-count").html($('.animating-width').height());
      }

      calcSize(); // first writting

      myBox = $(".animating-width");


      myBox.hover(function () { 
          myBox.addClass('changeSize');
          myBox.one(DetectTransitionEnding, calcSize);
      });

      myBox.mouseout(function () { 
          myBox.removeClass('changeSize');
          myBox.one(DetectTransitionEnding, calcSize);
      });

    });

    html {
      background: #292a2b;
      color: #FFF;
    }

    .animating-width {
      padding: 10px 0;
      text-align: center;
      background: #e78629;
      color: white;
      height: 100px;
      width: 50%;
      -moz-transition: width 2s ease-in-out;
      -o-transition: width 2s ease-in-out;
      -webkit-transition: width 2s ease-in-out;
      transition: width 2s ease-in-out;
      cursor: pointer;
    }

    .animating-width.changeSize {
      width: 100%;
    }

    hr {
      border-color: #e78700;
      border-bottom: none;
    }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%
        <hr />
        <span id="w-count"></span>
        x
        <span id="h-count"></span>
    </div>

var targetElement = document.getElementById('target');
var height = 0;
var width = 0;
var updatePosition = function(){
   height = targetElement.offsetHeight;
   width = targetElement.offsetWidth;
};
updatePosition();
targetElement.addEventListener("mouseover", updatePosition);
window.addEventListener("resize", updatePosition);
window.addEventListener("scroll", updatePosition);

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745400218a4626065.html

jquery - javascript: how can i get DIV widthheight instantly even if changed on hover - Stack Overflow

5 Answers 5

发表回复

评论列表（0条）

联系我们

400-800-8888

jquery - javascript: how can i get DIV widthheight instantly even if changed on hover - Stack Overflow

5 Answers 5

相关推荐