Urs Hunkler

Hi,

some questions which have been asked about CSS possibilities kept me thinking (Martin asked for a 2 Column layout, Tony asked for a small-screen PDA version ...).

From the artikel JavaScript Triggers from Peter-Paul Koch at ALA I want to cite the starting paragraph.

The front end of a website consists of three layers. XHTML forms the structural layer, which contains structural, semantic markup and the content of the site. To this layer you can add a presentation layer (CSS) and a behavior layer (JavaScript) to make your website more beautiful and user-friendly. These three layers should remain strictly separate. For instance, it should be possible to rewrite the entire presentation layer without touching either the structural or the behavior layer.

Having this principles in mind I have build a model with a XHTML layer, several CSS layers and a small behaviour layer which gives some answers to those questions: Variable Layout. With the "Styleswitcher" on top of the page you can change the layout part of the CSS and you will see how the whole page changes. I see many chances ...

Have fun and please tell me, what you think

That is great, thank you.

Sorry if my posting was ambiguous. I wanted to ask you for one or two additional parameter/s for the two functions print_table() and print_simple_box() to hand CLASSes and an ID over to the table and the box. I don't dare to change such complex functions.

I'll work on an example page.

By the way - I saw you started a quiz section in the developer wiki. I wish you will be able to attract everybody involved in Moodle quiz development to participate working on the wiki.

css-discuss uses their wiki as a repository to collect the results of the discussion in their forum. Perhaps this is one way to successfully work with wikis.

Well, let's start.

Couldn't we make a deal You add parameters to the functions print_table() and print_simple_box() to transmit CLASSes and IDs and I will start building an illustrated guide and use the quiz/edit.php page as an example. This guide should show the tasks of the used CLASSes and IDs and some examples of their uses.

With the CLASS names for the three tables on the quiz/edit.php page not only those areas could be colored differntly - I wouldn't like this way of usage either - but text design of one block could be changed, to make it for example the dominant information on the page. One could change text alignment in another area from center to left. With the CSS "Contextuel Selectors" you could address the headline of one special area and change only it's color - this would be hard work with firefox's dom inspector to target this headline and would have to be changed with every change in the page structure.

What do you think?

Hi Jon,

onclick="..." (I was wondering, why was it done this way?)

I'm not a programer, you know . I found several actual and good websites (design websites) doing the show/hide of informationchunks on webpages this way, so there was no reason to do it different. What would be the advantage of using "onclick" instead of "a href"?

and then detect which element the click happened on and set its display properties accordingly.

If I understand you right, you propose something different. As shown in the figure below there are two DIVs, the header and the content. Within the header the user can activate the "switch". The fast and secure way is to activate a JavaScript with the content's ID as a parameter to hide/show this object. As I understand your proposal you want to hide the triggered object itself - I don't see a chance to show the hidden block, when the header is gone too

Using the whole header as the clickzone does not work, because the header would catch all events and would disable the edit buttons of the blocks in edit mode.