emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
From: Carsten Dominik <carsten.dominik@gmail.com>
To: Sebastian Rose <sebastian_rose@gmx.de>
Cc: emacs-orgmode@gnu.org
Subject: Re: Some Javascript Adventures
Date: Wed, 13 May 2009 14:07:06 +0200	[thread overview]
Message-ID: <A040E185-C7BD-4C28-878C-2D6F32D2191F@gmail.com> (raw)
In-Reply-To: <87eiuuxqtp.fsf@kassiopeya.MSHEIMNETZ>

That is pretty cool, thanks.

- Carsten

On May 12, 2009, at 5:51 PM, Sebastian Rose wrote:

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

  reply	other threads:[~2009-05-13 16:00 UTC|newest]

Thread overview: 12+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2009-05-12 11:42 Some Javascript Adventures Ian Barton
2009-05-12 13:48 ` Sebastian Rose
2009-05-12 13:49   ` Carsten Dominik
2009-05-12 15:51     ` Sebastian Rose
2009-05-13 12:07       ` Carsten Dominik [this message]
2009-05-12 14:03 ` Sebastian Rose
2009-05-13 13:57   ` Sebastian Rose
2009-05-14 12:14     ` Ian Barton
2009-05-15 11:17       ` Sebastian Rose
2009-05-14 12:19   ` Ian Barton
2009-05-14 12:30     ` Carsten Dominik
2009-05-14 18:50     ` Sebastian Rose

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

  List information: https://www.orgmode.org/

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=A040E185-C7BD-4C28-878C-2D6F32D2191F@gmail.com \
    --to=carsten.dominik@gmail.com \
    --cc=emacs-orgmode@gnu.org \
    --cc=sebastian_rose@gmx.de \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
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).