collapsing some headings on html export?

collapsing some headings on html export?

[Matt Price]

does anyone have any advice on the following: I'm thinking I would
like to collapse certain segments of a document when exporting to
HTML, so e.g., if it looks like this:

* Outline: Semester 1
** 1.<2011-09-15 Thu> [[file:./syllabus/what-is-history-for][What is
History For?]]
Why we should write history, why everyone should do it, and why that
means we need the Web.  Hacker cultures, collaborative learning,
knowledge sharing, non-expert culture.
Background: [[http://www.journalofamericanhistory.org/issues/952/interchange/index.html][JAH
- The Promise of Digital History]]
*** Lab:  Introduction to Wordpress & the course site.  Blogging &
social media review. Preliminary listing of potential NGO partners.

I'd like to display just this by default:

Outline: Semester 1
1. Sept. 15, 2011 What is History For

but permit viewers to click on the headline or a '+' box to see the
details. Is it possible to do this somehow, e.g. by embedding some
javascript code somewhere or something?

Really just wondering...
Thanks,
Matt

Re: collapsing some headings on html export?

[Christian Moe]

Hi,

org-info-js may be your best bet, but for a lightweight solution that 
works with your sample text without a single line of javascript, try 
this (mouse over headings to display contents):

---------

#+TITLE: Folded headings in html export
#+style: <style>.folded > div {display: none;}
#+style:        .folded > *:after {content: " ...";
#+style:		           background: yellow}
#+style:        .folded:hover > div {display: block}
#+style:        .folded:hover > *:after {content: ""}</style>

* Outline: Semester 1
** 1.<2011-09-15 Thu> [[file:./syllabus/what-is-history-for][What is 
History For?]]
    :PROPERTIES:
    :HTML_CONTAINER_CLASS: folded
    :END:

Why we should write history, why everyone should do it, and why that
means we need the Web.

Hacker cultures, collaborative learning, knowledge sharing, non-expert
culture.

Background: 
[[http://www.journalofamericanhistory.org/issues/952/interchange/index.html][JAH 
- The Promise of Digital History]]

*** Lab:  Introduction to Wordpress & the course site.
     :PROPERTIES:
     :HTML_CONTAINER_CLASS: folded
     :END:
Blogging & social media review. Preliminary listing of potential NGO
partners.

---------

Drawbacks: You need to set a HTML_CONTAINER_CLASS property to "folded" 
on any subtree you want hidden from the start. And the unfolded text 
folds away again when your reader mouses out of the containing div.

Yours,
Christian

On 8/25/11 5:41 PM, Matt Price wrote:
> does anyone have any advice on the following: I'm thinking I would
> like to collapse certain segments of a document when exporting to
> HTML, so e.g., if it looks like this:
>
> * Outline: Semester 1
> ** 1.<2011-09-15 Thu>  [[file:./syllabus/what-is-history-for][What is
> History For?]]
> Why we should write history, why everyone should do it, and why that
> means we need the Web.  Hacker cultures, collaborative learning,
> knowledge sharing, non-expert culture.
> Background: [[http://www.journalofamericanhistory.org/issues/952/interchange/index.html][JAH
> - The Promise of Digital History]]
> *** Lab:  Introduction to Wordpress&  the course site.  Blogging&
> social media review. Preliminary listing of potential NGO partners.
>
> I'd like to display just this by default:
>
> Outline: Semester 1
> 1. Sept. 15, 2011 What is History For
>
> but permit viewers to click on the headline or a '+' box to see the
> details. Is it possible to do this somehow, e.g. by embedding some
> javascript code somewhere or something?
>
> Really just wondering...
> Thanks,
> Matt
>
>

Re: collapsing some headings on html export?

[Christian Moe]

OK, the simple css solution I posted last night fails too easily. 
Should have known, but it's been a while.

(If you add a second folding subheading beneath a folding heading (as 
you mouse down toward the second subhead, the first subhead folds, 
leaving you no longer hovered over the parent div, so the parent 
heading also folds... with the upshot that you can never unfold the 
second subhead.)

CM


On 8/25/11 10:19 PM, Christian Moe wrote:
> Hi,
>
> org-info-js may be your best bet, but for a lightweight solution that
> works with your sample text without a single line of javascript, try
> this (mouse over headings to display contents):
>
> ---------
>
> #+TITLE: Folded headings in html export
> #+style: <style>.folded > div {display: none;}
> #+style: .folded > *:after {content: " ...";
> #+style: background: yellow}
> #+style: .folded:hover > div {display: block}
> #+style: .folded:hover > *:after {content: ""}</style>
>
(...)

Re: collapsing some headings on html export?

[Daniel Clemente]

  If you only want to expand/collapse headers in a web page, you may use jQuery to handle each click.

  I did it with this code:
http://www.danielclemente.com/pagina/esquemadorg.js
http://www.danielclemente.com/pagina/esquemadorg.css

Demo: http://www.danielclemente.com/hacer/emacs.html


  The code is a bit more difficult than that because you should handle links to collapsed sections in order to expand them as needed.


Daniel

El Thu, 25 Aug 2011 22:19:55 +0200 Christian Moe va escriure:
> 
> Hi,
> 
> org-info-js may be your best bet, but for a lightweight solution that 
> works with your sample text without a single line of javascript, try 
> this (mouse over headings to display contents):

Re: collapsing some headings on html export?

[Daniel Clemente]

El Fri, 26 Aug 2011 09:41:38 -0400 Matt Price va escriure:
> 
> On Fri, Aug 26, 2011 at 4:58 AM, Daniel Clemente <n142857@gmail.com> wrote:
> >  I did it with this code:
> > http://www.danielclemente.com/pagina/esquemadorg.js
> > http://www.danielclemente.com/pagina/esquemadorg.css
> >
> > Demo: http://www.danielclemente.com/hacer/emacs.html
>
> ah, that's pretty cool,daniel.  any suggestions for how I might
> implement this selectively, only for certain headings or heading
> levels?  My javascript is I think even worse than my elisp...

You should start by adding jQuery to your page. Then take this code fragment:

		// handle the click event for each header
		for(var i=2;i<=7;++i) {
			$("h"+i).each(
				function(){
					$(this).css({cursor: "pointer"});
					$(this).bind('click', function(){ toggleForOrg_whenclicked( $(this).parent().children("div").eq(0) ); });
				});
		}

It searches all h2, h3, h4, h5, h6, h7 elements. You can remove the loop and use another jQuery selector which finds the headers you want. They are like CSS selectors. For instance this should work: $("h2.myclass") or $("h2, h4")

For that code to work, you should copy at least these functions from esquemadorg.js: toggleForOrg_whenclicked, hideForOrg_whenclicked, showForOrg_whenclicked. Then add some CSS and custom behaviours.


-- Daniel

> 
> Thanks everyone for the suggestions, I am keeping them filed away for
> when I actually finish this project...
> Matt

Re: collapsing some headings on html export?

[Matt Price]

[-- Attachment #1: Type: text/plain, Size: 1701 bytes --]

On Fri, Aug 26, 2011 at 12:04 PM, Daniel Clemente <n142857@gmail.com> wrote:

> El Fri, 26 Aug 2011 09:41:38 -0400 Matt Price va escriure:
> >
> > On Fri, Aug 26, 2011 at 4:58 AM, Daniel Clemente <n142857@gmail.com>
> wrote:
> > >  I did it with this code:
> > > http://www.danielclemente.com/pagina/esquemadorg.js
> > > http://www.danielclemente.com/pagina/esquemadorg.css
> > >
> > > Demo: http://www.danielclemente.com/hacer/emacs.html
> >
> > ah, that's pretty cool,daniel.  any suggestions for how I might
> > implement this selectively, only for certain headings or heading
> > levels?  My javascript is I think even worse than my elisp...
>
> You should start by adding jQuery to your page. Then take this code
> fragment:
>
>                // handle the click event for each header
>                for(var i=2;i<=7;++i) {
>                        $("h"+i).each(
>                                function(){
>                                        $(this).css({cursor: "pointer"});
>                                        $(this).bind('click', function(){
> toggleForOrg_whenclicked( $(this).parent().children("div").eq(0) ); });
>                                });
>                }
>
> It searches all h2, h3, h4, h5, h6, h7 elements. You can remove the loop
> and use another jQuery selector which finds the headers you want. They are
> like CSS selectors. For instance this should work: $("h2.myclass") or $("h2,
> h4")
>
> For that code to work, you should copy at least these functions from
> esquemadorg.js: toggleForOrg_whenclicked, hideForOrg_whenclicked,
> showForOrg_whenclicked. Then add some CSS and custom behaviours.
>
>
> fantastic, daniel.  thanks so much for this.
matt

[-- Attachment #2: Type: text/html, Size: 2529 bytes --]