1

This is what I'm trying. unable to generate alert with text "resized". Does resize event on table work?? If it doesn't how can i achieve it??

<!DOCTYPE html>
<html lang="en">
<head> 
<script  src="js/jquery.js"></script>
<script type="text/javascript">
  $(function(){ 
  $("#btn").click(function(e){
            $("#normal").css("width", "1200px");
        });
   });
   </script>
   <script type="text/javascript">
    function myFunction(){
        alert("resized");}
</script>
</head>
<body>
    <div class="center" >
    <div style="float:left;">
        <div style="height:100px; width: 50px; float:'left'">
            <button style="height:30px; width: 150px; float:'left'" id="btn">Click</button>
        </div>
         <table id="normal" width="75%" border="0" cellpadding="0" cellspacing="0" style="float:left;" onresize="myFunction()">
            <tr><th>header</th><th>header</th><th>header</th></tr>
            <tr><td class="left">cell</td><td>cell</td><td class="right">cell</td></tr>
            <tr><td class="left">cell</td><td>cell</td><td class="right">cell</td></tr>
            <tr><td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td></tr>                                                                    
        </table>
    </div></div>    
</body>
</html>
Agnivesh Reddy
  • 65
  • 2
  • 10
  • `table` elements don't raise a resize event. If you want this behaviour you would need to `trigger()` a custom event when you change the size of the table, or just call the function manually. – Rory McCrossan May 22 '17 at 13:31

1 Answers1

1

Use the window.resize event. You don't resize a table: You resize the window, which may just happen to adjust the flow on the webpage, including your table.

If you're going to be resizing it, with other means than the window, check out the MutationObserver here.

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
        //Check if resized here
    });    
});

var target = document.getElementById('normal');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

console.log('After 2 seconds, the style will change');
setTimeout(function() {
    $("#normal").css("width", "1200px");
}, 2000);
#normal
{
  width: 200px;
}

.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="normal"></div>
Blue
  • 22,608
  • 7
  • 62
  • 92