jQuery DIV (height and width) TABLE

DIV which jQuery dynamically queries height and width and reports back in a seperate DIV.

by Andy Blueman

HTML

<body>
    <div id="measure2" class="measure2"></div>
    <BR />
    <BR />
    <div id="bob1" class="measure">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non diam commodo, commodo quam ac, semper ipsum. Mauris nisi mi, tempor sed facilisis et, tempor ac ex. Mauris euismod tempor finibus. Fusce orci orci, efficitur eget aliquet quis, sagittis molestie massa. Vivamus pretium nunc et dolor aliquet, ac porta turpis sagittis. Mauris malesuada ut enim molestie commodo. Pellentesque ac enim ut odio tempor ultricies. Praesent scelerisque vehicula ultrices. Quisque pharetra fringilla risus.</p>
    </div>
    <BR />
    <div id="bob2" class="measure">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non diam commodo, commodo quam ac, semper ipsum. Mauris nisi mi, tempor sed facilisis et, tempor ac ex. Mauris euismod tempor finibus. Fusce orci orci, efficitur eget aliquet quis, sagittis molestie massa. Vivamus pretium nunc et dolor aliquet, ac porta turpis sagittis. Mauris malesuada ut enim molestie commodo. Pellentesque ac enim ut odio tempor ultricies. Praesent scelerisque vehicula ultrices. Quisque pharetra fringilla risus.</p>
    </div>
    <div id="bob3" class="measure">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non diam commodo, commodo quam ac, semper ipsum. Mauris nisi mi, tempor sed facilisis et, tempor ac ex. Mauris euismod tempor finibus. Fusce orci orci, efficitur eget aliquet quis, sagittis molestie massa.</p>
    </div>
    <div id="bob4" class="measure">
        <p>Vivamus pretium nunc et dolor aliquet, ac porta turpis sagittis. Mauris malesuada ut enim molestie commodo. Pellentesque ac enim ut odio tempor ultricies. Praesent scelerisque vehicula ultrices. Quisque pharetra fringilla risus.</p>
    </div>
    <div id="bob5" class="measure">hfirwygfliy rfifhr urfhiuhrf ruif rufhif rfuhrf i</div>
</body>

CSS

.measure {
}
.measure2 {
    border:1px solid red;
}
.measurelog {
    display: inline-block;
    padding: 1px 10px 1px 10px;
    color: #B4B4B8;
    outline:1px solid #CDCDD1;
    width:45%;
}
.measurelog2 {
    display: inline-block;
    padding: 1px 10px 1px 10px;
    color: #B4B4B8;
    outline:1px solid #CDCDD1;
    width:45%;
}

JavaScript

/*	if ($('div').hasClass('measure')) {
	    $('.measure').each(function (iterate, val) {
	        var self = $(this);
	        twoDivs = "<BR /><div id='measurelog" + iterate + "' class='measurelog'></div>";
	        self.append(twoDivs);
	        $("#measurelog" + iterate).text('Browser (Width: ' + $(window).width() + 'px, Height: ' + $(window).height() + 'px) | DIV  (Width: ' + self.width() + 'px, Height: ' + self.height() + 'px) ');
	        $(window).resize(function () {
	            $("#measurelog" + iterate).text('Browser (Width: ' + $(window).width() + 'px, Height: ' + $(window).height() + 'px) | DIV  (Width: ' + self.width() + 'px, Height: ' + self.height() + 'px) ');
	        });
	    });
	}*/

/*--------------------------------------------------------*/
$("div").each(function (iterate, val) {
    var self = $(this)
    var balls = $(this).attr("id");
    twoDivs2 = "<div id='measurelog2" + iterate + "' class='measurelog'></div><div id='measureid" + iterate + "' class='measurelog'></div><BR />";
    $(measure2).append(twoDivs2);
    $("#measureid" + iterate).text(balls);
    $("#measurelog2" + iterate).text(' DIV  (Width: ' + self.width() + 'px, Height: ' + self.height() + 'px) ');

    $(window).resize(function () {
        $("#measureid" + iterate).text(balls);
        $("#measurelog2" + iterate).text(' DIV  (Width: ' + self.width() + 'px, Height: ' + self.height() + 'px) ');
    });

});