php - Wordpress: Show extra sidebar widgets based on size of adjoining content? -

i'd able show or hide content in sidebar based on height of adjoining content div, i'm not sure if/how can done.

for example, on blog page of current project (http://djryanmcnally.pixelworx.it/?page_id=18) have 2 widgets in sidebar (one latest tweets, , 1 latest music news) however, can see on page, content of blog posts (all test posts...) longer height of 2 widgets, , of course, larger more posts added. leaves amount of blank space below last widget in sidebar, fill based on height of adjoining #content div.

suppose, example, wanted put sidebar other content divs, such #latest-pics, #latest-mixes , #latest-events if adjoining content large enough create space them, how that?

i thought using inline styling variables, such as: (pseudocode)

$i = #content(height);  if $i > 500px { $display1 = 'inline' }      else { $display1 = 'none' }  elseif $i > 1000px { $display2 = 'inline' }      else { $display2 = 'none' }  elseif $i > 1500px { $display3 = 'inline' }     else { $display3 = 'none' }  .......  endif; 

and using <div id="latest-pics" style="display:<?php $display1 ?>;"> etc...

but, highly doubt anywhere close doing want, but, y'know, thought process, etc! lol!

i of course use floating sidebar moves down use scrolls, it'd nice touch able somehow!

any thoughts?

p.s - excuse sketchy code example, i'm typing in rush have go work!

thanks in advance! :d

definitely looks javascript kinda thing. want vertically responsive layout, close impossible pure php. webserver loads php code first runs javascript; meaning can't reference javascript variables php.

looks theme has jquery installed might work that.

in opinion, i'd have divs on side bar there make sure hidden (style="display:none"). once page has loaded , content div on document, can grab height of main content div on left with

var h = $('#main').height(); 

now tricky part knowing how content in each of sidebar widgets going populated. might want put limits on make things easier, or else you're going require alot more post processing.

once know how going handle heights of individual widgets, , tier schema want them show in, can show them as

$('#widgetid').show(); 

where '#widgetid' going id="" attribute on div set display: none.

so end being like

if(h > 100) $('#widget1').show(); if(h > 300) $('#widget2').show(); ... 

ect

if of widgets tall (say widget2 500px usually) can set height of widget javascript , handle overflow you'd like. can use overflow-y:scroll that'd pretty ugly, maybe overflow:hidden, , make sure height @ consistently asthetic place widget.