element overflow detection

js_element_overflow_detection.js

//Lidlanca 10/03/2014

function identify_overflow_elements($main_container,remove){
    var main_container =  $main_container;
    var potential_overflow_elements = [];
    
    main_container.each (function (a,b){ 
      var max_w = $(b).width()+ ($(b).offset().left) ;
      var min_w = ($(b).offset().left);
      console.log ("Container max_w, min_w" , max_w,min_w);
      
        $(b).find("*:not(script)").each( function (c,d){ //rough element query
          var el_left = $(d).offset().left;
          var el_right = $(d).width() + el_left;
          if (  el_right > max_w || el_left < min_w ){
            console.warn("Out of container bounds: ",d ,  el_right , el_left   );
            potential_overflow_elements.push ($(d));
            $(d).css("background-color","rgba(255, 250, 83,0.9)");
          } 
        });
    });

//generate a visual indicator next to the offending element 
$(potential_overflow_elements).each (function (e,f){
        var el = $("<div>").css({
                  "position":"absolute",
                  "z-index":"100",
                  'border':'1px solid gray',
                  "display":"block",
                  "left": $(f).offset().left + "px",
                  "top": $(f).offset().top-20 + "px",
                  "background":"red",
                  "color":"#fff",
                  'font-size':'12px'
                  });
                  el.html("&#9660;");
              $("body").append(el);
      });

    //run with the remove flag on to remove all offending elements
    if (remove){
      $(potential_overflow_elements).each (function (a,b){
        b.remove();
      });
    }

}


//container provided is used as a reference to boundary check for all of its children
identify_overflow_elements($("div.container.posts"),false);