Ask your WordPress questions! Pay money and get answers fast! (more info)

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

  • SOLVED

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

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


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)

2012-12-07

John Cotton answers:

Hey Robert

I think you want a function that can test initially (after load) and then again on a [[LINK href="http://api.jquery.com/resize/"]]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
}
}
resizeMapDIVs();
$(window).resize(resizeMapDIVs);
});


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

JC


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!

2012-12-07

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>');
});