Loading...
 
Skip to main content

History: ShowHideModulesAndColumns

Preview of version: 17

SHOW/HIDE ("FLIP") MODULES AND RIGHT/LEFT COLUMNS WITH SAVED STATE


See the menus over on http://TikiMODS.com for an example. There you can also see an implementation of using the same icons to "flip" entire modules, as well as the entire left and right columns, all with saved states. I used only what is already in tiki-js.js.

Thanks to mdavey for finishing and committing this enhancement for v1.9!

In Tiki 1.9


To enable flip for an individual module, goto Admin->Modules and put "flip=y" (without the quotes) into the parameters for that module, and save your changes.

To display the module without the title bar and border for an individual module, goto Admin->Modules and put "decorations=n" (without the quotes) into the parameters for that module, and save your changes.

The following styles override one or more modules and don't currently have module shading (flip show/hide content):

  • geo
  • moreneat
  • mose
  • neat
  • simple
  • tiki
  • damian


Please let mdavey know if you think one or more of these themes should be updated and he'll gladly make the changes. Alternatively you could pop into ConnectingToIrc and mention it there.

NOTE: Currently the method above does not collapse the menus completely - a certain amount of space is left between the module title bars that you can't remove by adjustments to the style sheets (at least I could not make it work). The method below DOES collapse the menus all the way, with no space between the menu titles when collapsed. Maybe mdavey or someone else can fix this? — Colorado -- Fixed

mdavey u rock! Now how about instead of just the little icon, make click anywhere in the title bar (or at least also clicking on the title text) flip the menu? (P.S. Love the "decorations" option!)

In Tiki 1.8.x


OK here is an example of a module. I used the Last Changes module because most of us use it on our sites. I also included some default input text and the Hot Key for quick focus using ALT-C:

Image

BELOW IS WHAT I HAVE IN MY STYLESHEETS FOR THE FLIPPING MODULES:

div.box {

overflow : hidden;
font-size : 10px;
text-align: left;
}

div.box-title {
background-image: url(blackdesk/menucap.png);
border: 0px;
color: #FFFFFF;
font-size: 10px;
font-weight: bold;
width: 100%;
margin : 0px;
padding:5px 2px 6px 6px;
}

div.box-title table {
width: 100%;
}

div.box-data {
overflow: hidden;
color: white;
margin-left: 5px;
margin-right: 5px;
font-family: Verdana, Helvetica;
font-size: 10px;
width: 170px;
border-left : 1px solid #330099;
border-right : 1px solid #330099;
border-bottom : 1px solid #330099;
background-color: #000000;
}

.flipmodtitle {
color: #FFFFFF;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}

.flipmodtitle a, .flipmodtitle:link, .flipmodtitle:active, .flipmodtitle:visited {
color: #FFFFFF;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}

.flipmodtitle:hover {
color: #FFFFFF;
text-decoration: underline;
}

.flipmodimage {
border:0px;
float:right;
padding-right:10px;
margin-left:0px;
}

.flip-data {
overflow : hidden;
padding: 5px;
margin : 0px;
border-left : 1px solid #330099;
border-right : 1px solid #330099;
border-bottom : 1px solid #330099;
background-color: #000000;

}


-- colorado

How to Show/Hide entire right and left columns


Image

Colorado

History

Information Version
Michael Davey 21
View
Michael Davey 19
View
colorado 18
View
colorado 17
View
colorado 16
View
colorado 15
View
colorado 14
View
colorado 13
View
Michael Davey 12
View
colorado 11
View
colorado 10
View
Michael Davey 9
View
colorado 8
View
colorado 7
View
colorado 6
View
colorado 5
View
colorado 4
View
colorado 3
View
colorado 2
View
Michael Davey added description 1
View