Show Pop-up divs on your calendar (or any other looping post)

[lunac]

Hi All,

 

I use this forum all the time to ask questions and get help. Well this time I'm sharing. I came up with a way to show a hidden div to give details on a calendar entry. Actually, it will work for any code that is looping where you need to show/hide multiple items with in the loop. Basically, the loop is serving back each entry. For each one I have a clickable link that will then show more hidden content.

 

Basically to get it to work, you have to output the style at the same time you create the link and related div.

 

it will read something like:

//style
$x = '<style> #add_pop-' . $i['id'] . ' { z-index: 15;  position: absolute;  display: none; text-align: left;}</style>';
//link
$x .='<a href="javascript:toggleLayer(\'add_pop-' . $i['id'] . '\');">' . $i['label'] . '</a>';

//div
$x .= '<div id="add_pop-' . $i['id'] . '">' . $i['description'] .'</div>';

 

Here is the javascript function to show hide layers

 

/* this function toggles a  layer and was created by http://www.netlobo.com/div_hiding.html */
function toggleLayer( whichLayer )
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}

function toggleExpandLayer( whichLayer, whichimage, close, expand)
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
  //vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  if(elem.offsetWidth!=0&&elem.offsetHeight!=0){
  	vis.display = 'block';
  	document.images[whichimage].src=close;
  } else {
  	vis.display = 'none';
  	document.images[whichimage].src=expand;
  }
  //vis.display = (vis.display==''||vis.display=='block')?'none':'block';
  if(vis.display==''||vis.display=='block'){
  	vis.display = 'none';
  	document.images[whichimage].src=expand;
  } else {
  	vis.display = 'block';
  	document.images[whichimage].src=close;
  }

 

Enjoy!