CONTENIDO Forum

Code: Alles auswählen

<div id="accordion">
...
</div>

Code: Alles auswählen

<?php
$id = ($contenido && $edit) ? "accordion" : "";
?>
<div id="<?php echo $id ?>">

..,. hier kannst du dann deine CMS_HEADER und CMS_HTML ausgeben ...

</div>

Code: Alles auswählen

/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname   :     accordion_sd
* Author(s)   :     Seamless-Design Markus Hübner
* Copyright   :     Seamless-Design Markus Hübner
* Created     :     17.05.2012
************************************************/
?>
<table cellspacing="0" cellpadding="10" border="0">
    <tr>
        <td>Reihenfolge von max. 10 Containern:<br/>(1#2#5#4#3)</td>
        <td valign="top"><input type="text" name="CMS_VAR[10]" value="CMS_VALUE[10]"/></td>
    </tr>
    </tr>
</table>
<?php   

Code: Alles auswählen

<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname   :     accordion_sd
* Author(s)   :     Seamless-Design Markus Hübner
* Copyright   :     Seamless-Design Markus Hübner
* Created     :     17.05.2012
************************************************/
?>


<div id="results">
 <div id="accordion">
	<dl class="accordion" id="slider">

<script language="JavaScript" type="text/javascript">

var var_width_dd=document.getElementById('slider').offsetWidth;
document.write('<style type="text/css">.accordion dd {overflow:hidden;width: 100%;margin-left: 0px;width:'+var_width_dd+'px;}</style>');

var accordion=function()
  {
	var tm=sp=10; //speed of slide-effect
	function slider(n)
	  {
/* 1 */
//alert('function slider');
	  this.nm=n; this.arr=[]
	  }
	slider.prototype.init=function(t,c,k)
	  {
/* 2 */
//alert('slider.prototype.init');
		var a,h,s,l,i;
		a=document.getElementById(t);
		this.sl=k?k:'';
		h=a.getElementsByTagName('dt');
		s=a.getElementsByTagName('dd');
		this.l=h.length;
		for(i=0;i<this.l;i++)
		  {
		  var d=h[i];
//alert('2 d: '+d);
		  this.arr[i]=d;
		  d.onclick=new Function(this.nm+'.pro(this)');
		  if(c==i)
		    {
		    d.className=this.sl
		    }
		  }
		l=s.length;
//alert('2 l: '+l);
		for(i=0;i<l;i++)
		  {
		  var d=s[i];
      //d.mh=d.offsetHeight; // read note at the top!
      d.mh=d.offsetHeight;
//alert('2 d.mh: '+d.mh)
		  if(c!=i)
		    {
		    d.style.height=0;
		    d.style.display='none'
		    }
		  }
	  }
	  
	slider.prototype.pro=function(d)
	  {
/* 3 */
//alert('slider.prototype.pro');
	  //alert(this.l); // Anzahl der Elemente die aufgeslidet werden können
		for(var i=0;i<this.l;i++)
		  {
			var h=this.arr[i], s=h.nextSibling;
			s=s.nodeType!=1?s.nextSibling:s;
			clearInterval(s.tm);
			if(h==d&&s.style.display=='none')
			  {
			  s.style.display='';
			  su(s,1);
			  h.className=this.sl
			  }
			  else if(s.style.display=='')
			    {
			    su(s,-1);
			    h.className=''
			    }
		  }
	  }

	function su(c,f)
	  {
/* 4 */
//alert('function su');
	  c.tm=setInterval(function(){sl(c,f)},tm)
	  }

	function sl(c,f)
	  {
/* 5 */
//läuft in Schleife
//alert('function sl');
		var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h;
		c.style.height=h+(Math.ceil(d/sp)*f)+'px';
/*
alert('c: '+c); //html object
alert('f: '+f); //1 wert bleibt gleich
alert('h: '+h); //height of container erhöht sich
alert('d: '+d); //height of container erhöht sich
alert('m: '+m); //height of container wert bleibt gleich
alert('c.style.height: '+c.style.height); //height of container wert bleibt gleich
*/
//alert(c.style.height);
		c.style.opacity=h/m;
		c.style.filter='alpha(opacity='+h*100/m+')';
		if(f==1&&h>=m)
		  {
		  clearInterval(c.tm)
		  }
		  else if(f!=1&&h==1)
		    {
		    c.style.display='none';
		    clearInterval(c.tm)
		    }
    }

	return{slider:slider}
  }();

</script>



	
<?php

$order_of_appearance="CMS_VALUE[10]";
$array_order_of_appearance=explode("#",$order_of_appearance);

$CMS_TYPE = array(
    array("head" => "CMS_HTMLHEAD[101]","html" => "CMS_HTML[101]"),
    array("head" => "CMS_HTMLHEAD[102]","html" => "CMS_HTML[102]"),
    array("head" => "CMS_HTMLHEAD[103]","html" => "CMS_HTML[103]"),
    array("head" => "CMS_HTMLHEAD[104]","html" => "CMS_HTML[104]"),
    array("head" => "CMS_HTMLHEAD[105]","html" => "CMS_HTML[105]"),
    array("head" => "CMS_HTMLHEAD[106]","html" => "CMS_HTML[106]"),
    array("head" => "CMS_HTMLHEAD[107]","html" => "CMS_HTML[107]"),
    array("head" => "CMS_HTMLHEAD[108]","html" => "CMS_HTML[108]"),
    array("head" => "CMS_HTMLHEAD[109]","html" => "CMS_HTML[109]"),
    array("head" => "CMS_HTMLHEAD[110]","html" => "CMS_HTML[110]")
);

foreach($array_order_of_appearance AS $element)
  {
  if($edit) echo '<br/><strong>'.mi18n("Element").': '.$element.'</strong>';
  $element=$element-1; // numbering in configuration does not start with 0 but 1, so adressing the array has to be corrected
  if ($CMS_TYPE[$element]["head"] != "")
    {
    if($edit) echo '<div style="border: 2px solid #999999; font-weight: 900;">'.$CMS_TYPE[$element]["head"].'</div>';
      else echo '<dt>'.$CMS_TYPE[$element]["head"].'</dt>';
    }
  if ($CMS_TYPE[$element]["html"] != "")
    {
    if($edit) echo '<div>'.$CMS_TYPE[$element]["html"].'</div>';
      else echo '<dd>'.$CMS_TYPE[$element]["html"].'</dd>';
    }
  }

?>
	</dl>
</div>
</div>

<script type="text/javascript">
var slider1=new accordion.slider("slider1");
slider1.init("slider");
</script>

Code: Alles auswählen

.accordion dt {
border: 1px solid #cccccc;
padding: 5px;
cursor: pointer;
font-size: 1.2em;
font-weight: 900;
color:#666666;
text-decoration:none;
transition:opacity 2s;
-moz-transition:opacity 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:opacity 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:opacity 2s, -o-transform 2s; /* Opera */
opacity: 0.5;
}
.accordion dt:hover {
color:#ffffff;
text-shadow: 2px 0 2px #333333, -2px 0 2px #333333;
opacity: 1;
transition:opacity 2s;
-moz-transition:opacity 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:opacity 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:opacity 2s, -o-transform 2s; /* Opera */
}
.accordion dd {
margin-left: 0px;
padding: 5px;
}