collapsing some headings on html export?

emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed

* collapsing some headings on html export?
@ 2011-08-25 15:41 Matt Price
  2011-08-25 20:19 ` Christian Moe
  0 siblings, 1 reply; 6+ messages in thread
From: Matt Price @ 2011-08-25 15:41 UTC (permalink / raw)
  To: Org Mode

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

^ permalink raw reply	[flat|nested] 6+ messages in thread

* Re: collapsing some headings on html export?
  2011-08-25 15:41 collapsing some headings on html export? Matt Price
@ 2011-08-25 20:19 ` Christian Moe
  2011-08-26  5:08   ` Christian Moe
  2011-08-26  8:58   ` Daniel Clemente
  0 siblings, 2 replies; 6+ messages in thread
From: Christian Moe @ 2011-08-25 20:19 UTC (permalink / raw)
  To: Matt Price; +Cc: Org Mode

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
>
>

^ permalink raw reply	[flat|nested] 6+ messages in thread

* Re: collapsing some headings on html export?
  2011-08-25 20:19 ` Christian Moe
@ 2011-08-26  5:08   ` Christian Moe
  2011-08-26  8:58   ` Daniel Clemente
  1 sibling, 0 replies; 6+ messages in thread
From: Christian Moe @ 2011-08-26  5:08 UTC (permalink / raw)
  Cc: Org Mode

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>
>
(...)

^ permalink raw reply	[flat|nested] 6+ messages in thread

* Re: collapsing some headings on html export?
  2011-08-25 20:19 ` Christian Moe
  2011-08-26  5:08   ` Christian Moe
@ 2011-08-26  8:58   ` Daniel Clemente
       [not found]     ` <CAN_Dec_Svf_DpsNxr0cUpwq=bvHcWm8uDUq5a6cqVqmm5JCA2Q@mail.gmail.com>
  1 sibling, 1 reply; 6+ messages in thread
From: Daniel Clemente @ 2011-08-26  8:58 UTC (permalink / raw)
  To: mail; +Cc: Org Mode


  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):

^ permalink raw reply	[flat|nested] 6+ messages in thread

[parent not found: <CAN_Dec_Svf_DpsNxr0cUpwq=bvHcWm8uDUq5a6cqVqmm5JCA2Q@mail.gmail.com>]

* Re: collapsing some headings on html export?
       [not found]     ` <CAN_Dec_Svf_DpsNxr0cUpwq=bvHcWm8uDUq5a6cqVqmm5JCA2Q@mail.gmail.com>
@ 2011-08-26 16:04       ` Daniel Clemente
  2011-08-26 16:08         ` Matt Price
  0 siblings, 1 reply; 6+ messages in thread
From: Daniel Clemente @ 2011-08-26 16:04 UTC (permalink / raw)
  To: Matt Price; +Cc: org-mode Mailinglist

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

^ permalink raw reply	[flat|nested] 6+ messages in thread

* Re: collapsing some headings on html export?
  2011-08-26 16:04       ` Daniel Clemente
@ 2011-08-26 16:08         ` Matt Price
  0 siblings, 0 replies; 6+ messages in thread
From: Matt Price @ 2011-08-26 16:08 UTC (permalink / raw)
  To: Daniel Clemente; +Cc: org-mode Mailinglist

[-- 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 --]

^ permalink raw reply	[flat|nested] 6+ messages in thread

end of thread, other threads:[~2011-08-26 16:14 UTC | newest]

Thread overview: 6+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2011-08-25 15:41 collapsing some headings on html export? Matt Price
2011-08-25 20:19 ` Christian Moe
2011-08-26  5:08   ` Christian Moe
2011-08-26  8:58   ` Daniel Clemente
     [not found]     ` <CAN_Dec_Svf_DpsNxr0cUpwq=bvHcWm8uDUq5a6cqVqmm5JCA2Q@mail.gmail.com>
2011-08-26 16:04       ` Daniel Clemente
2011-08-26 16:08         ` Matt Price

Code repositories for project(s) associated with this public inbox

	https://git.savannah.gnu.org/cgit/emacs/org-mode.git

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).