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