Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

how to check size of parent container & resize certain elements? WordPress


I am the developer of the plugin and would like to add support for responsive themes in the next release.
Currently my code output looks like this (simplified):

<div style="width:640px;" id="mapid">
<div style="width:640px;" id="listmarkersid">
<table style="width:640px;" id="tableid">...</table>

mapwidth is stored in $mapwidth;

The problem is, that if the parent container above the mapid-div is smaller than 640px;, the full map is not shown.
I therefore would need a jquery statement which checks the size of the parent element of the mapid-div and if this
element is smaller than $mapwidth all 3 values should be set to 100%

What is the best approach for this? jquery.width()? jquery.outerWidth()? when to load - .ready? .live?

Answers (2)


John Cotton answers:

Hey Robert

I think you want a function that can test initially (after load) and then again on a [[LINK href=""]]resize[[/LINK]] event.

jQuery(document).ready( function($) {
function resizeMapDIVs() {
// check the parent value...
var size = $('#map').parent().width();

if( $size < 640 ) {
// ...and decrease...
} else {
// ..or increase as necessary

Definitely .width() you need to check and then use .css to set the values.


Robert Harm comments:

I know I could count on you John :-) many thanks for your solution - didnt think about the .resize()-method. Makes perfectly sense! Thanks!


Francisco Javier Carazo Gil answers:

If you want to do it as responsive, remember resize event:
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');