Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: little contribution - accordion menu for anycontent  (Read 2770 times)

0 Members and 1 Guest are viewing this topic.

Quinti

  • Translator
  • Coppermine regular visitor
  • **
  • Offline Offline
  • Gender: Male
  • Posts: 79
    • Quinti.net
little contribution - accordion menu for anycontent
« on: July 12, 2006, 02:55:15 pm »

Hi

i'm using it into project_vii theme

and is an AJAX menu type "accordion" from: http://openrico.org/rico/demos.page

look: http://www.fotosdesarria.com/dautomne

to insert it in anycontent.php, put:

in anycontent.php
Code: [Select]
<?php
starttable
("100%""TABLE TITLE");
?>

<tr><td class="tableb">
<!--MENU -->
<div style="border-bottom: 1px solid rgb(31, 102, 155); margin-top: 6px; border-top-width: 1px; border-top-style: solid; " id="accordionExample">

<div id="panel1">
  <div style="background-color:#828282; color:#FFFFFF; font-weight: bold;" id="panel1Header" class="accordionTabTitleBar">
  TITLE ONE HEREEEEEEEEE
  </div>
  <div style="border-style: solid; border-color: rgb(31, 102, 155); border-width: 0px 1px; margin: 0px; overflow: visible; height: 500px;" id="panel1Content" class="accordionTabContentBox">
CONTENT ONE HEREEEEEEEEEEEE

  </div>
</div>

<div id="panel2">
  <div style="background-color:#828282; color:#FFFFFF; font-weight: normal;" id="panel2Header" class="accordionTabTitleBar">
  TITLE TWO HEREEEEEE
  </div>

  <div style="border-style: solid; border-color: rgb(31, 102, 155); border-width: 0px 1px; margin: 0px; overflow: hidden; height: 1px; display: none;" id="panel2Content" class="accordionTabContentBox">

CONTENT TWO HEREEEEEEEEE
 </div>
  </div>

<div id="panel3">

  <div style="background-color:#828282; color:#FFFFFF; font-weight: normal;" id="panel3Header" class="accordionTabTitleBar">
  TITLE THREE HEREEE
  </div>
<div style="border-style: solid; border-color: rgb(31, 102, 155); border-width: 0px 1px; margin: 0px; overflow: hidden; height: 1px; display: none;" id="panel3Content" class="accordionTabContentBox">

THE CONTENT THREE HEREEEEE
</strong>
  </div>
</div>


</div>

<script type="text/javascript"> onloads.push( accord ); function accord() { new Rico.Accordion( 'accordionExample', {panelHeight:227} ); } </script>
<!--fin MENU -->
</td></tr>
<?php
endtable
();

?>


and in your template.html
put:
in head
Code: [Select]
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/rico.js" type="text/javascript"></script>
<script src="js/util.js" type="text/javascript"></script>

and body:
Code: [Select]
<body onload="javascript:bodyOnLoad()">
<script type="text/javascript">
   var onloads = new Array();
   function bodyOnLoad() {
      new Rico.Effect.Round( null, 'roundNormal' );
      new Rico.Effect.Round( null, 'roundCompact', {compact:true} );
      for ( var i = 0 ; i < onloads.length ; i++ )
         onloads[i]();
   }
  showMenuContext()     
</script>


now, we need the JS files, waht must be in yourgallery.com/js folder.
what i attack here


ups, i forget the css, to insert into your css theme and play with it
Code: [Select]
.accordionTabTitleBar {

   font-size           : 12px;

padding             : 4px 6px 4px 6px;

   border-style        : solid none solid none;

border-top-color    : #BDC7E7;

border-bottom-color : #182052;

   border-width        : 1px 0px 1px 0px;

}



.accordionTabTitleBarHover {

   font-size        : 11px;

background-color : #828282;

color            : #000000;

}



.accordionTabContentBox {
font-size        : 11px;
border           : 1px solid #1f669b;
border-top-width : 0px;
height: 300px;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;

}
#accordionExample {
width : 100%;
}
« Last Edit: February 21, 2007, 02:20:42 pm by Quinti »
Logged
Pages: [1]   Go Up
 

Page created in 0.013 seconds with 20 queries.