New Foswiki release 2.1.6 is available with important security fixes.
Sourceforge foswiki email lists being discontinued. Subscribe to the new Foswiki announce and discuss lists at MailingLists

You are here: Foswiki>Extensions/Archived Web>YahooGridsAddOn (12 Dec 2017, GeorgeClark)Edit Attach

This is an discontinued version of YahooGridsAddOn. Extensions in the Extensions/Archived web are obsolete and no longer maintained.

How to configure your Foswiki to install from this repository

In lib/LocalSite.cfg, add this web's URL to {ExtensionsRepositories}:


Foswiki.org=(http://foswiki.org/Extensions/,http://foswiki.org/pub/Extensions/);Local=(http://foswiki.org/Extensions/Archived/,http://foswiki.org/pub/Extensions/Archived/)

Yahoo Grids add-on

An interface to Yahoo Grids. Improves layout of topics by enabling columns in topics. Various column widths and configurations are supported. Nested columns are possible.

This add-on only installs 1 css file, and can be used safely with non-Yahoo javascript libraries.

Examples
Usage
Column definitions
Stylesheet classes
Installation Instructions
- Test
Troubleshooting
- TML formatting messed up
- Overlapping columns
Further information
AddOn Info

Examples

Sandbox.YahooGridsAddOnExamples

Usage

Creating a 2 column grid - at a glance:

Create content sections, one for each column
Include the column definition
Load the required stylesheet

Step 1: Create content sections

We have 2 columns, let's call them mainleft and mainright (you are free to choose section names). The section stubs are:

%STARTSECTION{"mainleft"}%
contents of the main left column
%ENDSECTION{"mainleft"}%

%STARTSECTION{"mainright"}%
contents of the right side column
%ENDSECTION{"mainright"}%

If you do not want to have the section definitions appear twice on the page, wrap these inside a hidden verbatim:

<verbatim class="foswikiHidden">
%STARTSECTION etcetera
</verbatim>

Step 2: Include the column definition

Include TwoColumnDefinition and pass column type and section names.

To make the section contents appear in a two column grid, where the right column is 300px wide:

%INCLUDE{
"%SYSTEMWEB%.TwoColumnDefinition"
section="300right"
CONTENTTOPIC="%BASEWEB%.%BASETOPIC%"
COL1="mainleft"
COL2="mainright"
}%

Explanation of the attributes passed to this macro:

section name: one of the column type configurations of the definition topic
- for example: onethirdleft, 160left, 300right
CONTENTTOPIC: the topic the content resides in. This can be a different topic.
For 2 columns (defined in TwoColumnDefinition):
- COL1: name of the section that contains left column contents
- COL2: name of the section that contains left column contents
For 4 columns (defined in FourColumnDefinition):
- COL1: name of the section that contains column 1 contents
- COL2, COL3, COL4: section names for the other columns

Step 3: Load the stylesheet

Load the CSS file either in a template or in a topic.

In a template write:

<style type="text/css" media="all">
   @import url("%PUBURLPATH%/%SYSTEMWEB%/YahooGridsAddOn/grids-min.css");
</style>

To use this in a topic only:

%ADDTOHEAD{"yahoogridsaddon" text="<style type=\"text/css\" media=\"all\">
@import url(\"%PUBURLPATH%/%SYSTEMWEB%/YahooGridsAddOn/grids-min.css\");
</style>"}%

Column definitions

Choose from several configurations:

TwoColumnDefinition - defines for example: onethirdleft, 160left, 300right
ThreeColumnDefinition
FourColumnDefinition

Stylesheet classes

This addon uses a number of CSS classes, mainly to set extra paddings or background colors:

.ygColumnLeft - right column
.ygColumnRight - right column
.ygColumn - a column that is not a left nor a right column

To create even spacing of .5em between columns, use this style definition:

.ygColumn {
   padding:0 .5em;
}
.ygColumnLeft {
   padding:0 .5em 0 0;
}
.ygColumnRight {
   padding:0 0 0 .5em;
}

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Test

If installed, you will see 2 columns. View the source (view raw) if you want to start with a working example.

%STARTSECTION{"testleft"}%
3/4 <br />
contents of the main left column
%ENDSECTION{"testleft"}%

%STARTSECTION{"testright"}%
1/4 <br />
contents of the right side column
%ENDSECTION{"testright"}%

Warning: Can't find topic System.TwoColumnDefinition

Troubleshooting

TML formatting messed up

If TML markup doesn't create proper HTML, a reason could be that you have written STARTSECTION in a condensed way, like:

%STARTSECTION{"mainleft"}%---+ Topic title%ENDSECTION{"mainleft"}%

This doesn't work out, because the content of the section definition does not start on a newline. Instead, put the contents on a new line:

%STARTSECTION{"mainleft"}%
---+ Topic title
%ENDSECTION{"mainleft"}%

Overlapping columns

Overlapping can occur when columns are nested - this is a known bug with the grid library. Even if you don't do the nesting yourself, it can occur if you use a skin with a sidebar that is based on Yahoo Grids.

Further information

This add-on uses YUI Grids version 2. See http://developer.yahoo.com/yui/grids/

AddOn Info

Copyright ©:	2009, 2010 Arthur Clemens
License:	GPL, Yahoo licence (BSD)
Dependencies:	None
AddOn Version:	1.1 (02 Jan 2010)
02 Jan 2010	1.1 Changed `LEFTCOL` and `RIGHTCOL` to `COL1` and `COL2`. The definitions now ignore empty section names. Added examples.
04 Dec 2009	1.0 First release.
Demo url:
Home:	http://foswiki.org/Extensions/YahooGridsAddOn
Support:	http://foswiki.org/Support/YahooGridsAddOn

PackageForm edit

ExtensionClassification	Interface and Visualisation
ExtensionType	ContribPackage
Compatibility
ImageUrl
DemoUrl
SupportUrl	YahooGridsAddOn
DevelopedInSVN	Yes
ModificationPolicy	PleaseFeelFreeToModify

Topic attachments
I	Attachment	Action	Size	Date	Who
md5	YahooGridsAddOn.md5	manage	168 bytes	02 Jan 2010 - 18:42	ArthurClemens
sha1	YahooGridsAddOn.sha1	manage	192 bytes	02 Jan 2010 - 18:42	ArthurClemens
tgz	YahooGridsAddOn.tgz	manage	167 K	02 Jan 2010 - 18:42	ArthurClemens
zip	YahooGridsAddOn.zip	manage	170 K	02 Jan 2010 - 18:41	ArthurClemens
EXT	YahooGridsAddOn_installer	manage	4 K	02 Jan 2010 - 18:42	ArthurClemens
png	example.png	manage	158 K	02 Jan 2010 - 18:44	ArthurClemens
css	grids-min.css	manage	4 K	05 Dec 2009 - 22:21	ArthurClemens