Re: Some Javascript Adventures

From: Sebastian Rose <sebastian_rose@gmx.de>
To: Carsten Dominik <carsten.dominik@gmail.com>
Cc: emacs-orgmode@gnu.org
Subject: Re: Some Javascript Adventures
Date: Tue, 12 May 2009 17:51:14 +0200	[thread overview]
Message-ID: <87eiuuxqtp.fsf@kassiopeya.MSHEIMNETZ> (raw)
In-Reply-To: <F3BD871D-0C95-4C8B-A0C6-18DF547BF990@gmail.com> (Carsten Dominik's message of "Tue, 12 May 2009 15:49:27 +0200")

If your Sitmap looks like this normaly:

  * Folder 1
    - item 1.1
    - item 1.2
    * folder 1.1
      - file 1.1.1
    * folder 1.2
      - file 1.2.1
  * Folder 2
    - item 2.1
    - item 2.2

It collapses all, but the top folders on startup:

  * Folder 1
  * Folder 2

Each folder can be clicked, to expand and collapse from now on.

To do this with each TOC, just use another CSS selector in the jQuery
code: 

 <!--/*--><![CDATA[/*><!--*/
 $(document).ready(
  function(){
  $("#text-table-of-contents ul").eq(0).find("li").each(

 //      ^--- and here

    function(){if($(this).children().eq(0)){
      $(this).css({cursor: "pointer"});
      $(this).bind(
        "click",
        function(){
          if($(this).children().eq(0).is(":visible")) $
 (this).children().eq(0).slideUp(250);
          else $(this).children().eq(0).slideDown(250);
          return false;});}});
  $("#text-table-of-contents ul").eq(0).find("ul").hide();

 //      ^--- and here

 });

If you use correct styles, you could even create a horizontal menubar
with dropdown menus from this.

Best

   Sebastian

Carsten Dominik <carsten.dominik@gmail.com> writes:
> On May 12, 2009, at 3:48 PM, Sebastian Rose wrote:
>
>>
>> jQuery is  _the_ JS framework :-)
>> I use it all the time here...
>>
>>
>> I have this in my Sitemap:
>>
>> <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
>> <script type="text/javascript">
>> <!--/*--><![CDATA[/*><!--*/
>> var doMenu = true;
>> $(document).ready(
>>  function(){
>>  $("ul").eq(0).find("li").each(
>>    function(){if($(this).children().eq(0)){
>>      $(this).css({cursor: "pointer"});
>>      $(this).bind(
>>        "click",
>>        function(){
>>          if($(this).children().eq(0).is(":visible")) $
>> (this).children().eq(0).slideUp(250);
>>          else $(this).children().eq(0).slideDown(250);
>>          return false;});}});
>>  $("ul").eq(0).find("ul").hide();
>> });
>
> What does this code do?  Just curious....
>
> - Carsten
>
>
>>
>>
>>
>>
>> Ian Barton <lists@manor-farm.org> writes:
>>> Yesterday on my bike ride I was listening to an old FLOSS Podcast about
>>> jQuery. There are a few things that Sebastian's org-info-js doesn't do, that
>>> I
>>> would like. Unfortunately, my knowledge of javascript is almost zero.
>>>
>>> However, the jQuery library seems to have excellent documentation. More
>>> importantly using jQuery seems to mostly protect you from trying to debug
>>> your
>>> code on lots of different browsers, since the jQuery author has already done
>>> it
>>> for you.
>>>
>>> After some experiments I cam up with the following snippets which toggle the
>>> visibility of DONE tasks and also timestamps. Hope someone finds them useful!
>>>
>>> Ian.
>>>
>>> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js
>>> "
>>> type="text/javascript"></script>
>>>
>>> <script type="text/javascript" >
>>> <!--/*--><![CDATA[/*><!--*/
>>>
>>>     $(document).ready(function(){
>>>
>>>       $('#toggletimestamp').click(function() {
>>>            $('span.timestamp-wrapper').toggle();
>>>       });
>>>
>>>       $('#toggledone').click(function() {
>>>            myParent = $("span.done").parent();
>>>            myParent.toggle();
>>>       });
>>>     });
>>> /*]]>*/-->
>>> </script>
>>>
>>> You can set up a buttons to call these functions:
>>>
>>> <input type="submit"
>>> name="toggletimestamp"
>>> value="Toggle Time Stamp"
>>> id="toggletimestamp" />
>>>
>>> <input type="submit"
>>>   name="toggledone"
>>>   value="Toggle Done"
>>> id="toggledone" />
>>>
>>
>>
>> _______________________________________________
>> Emacs-orgmode mailing list
>> Remember: use `Reply All' to send replies to the list.
>> Emacs-orgmode@gnu.org
>> http://lists.gnu.org/mailman/listinfo/emacs-orgmode