jQuery: "little applications as demonstration models for people to try and see some of the advantages of jQuery"

[Alex Hough]

Following Moris's suggestion [1] here is a small a demonstration [2]
using a jQuery plugin - DropSort.

Alex

[1] http://groups.google.com/group/TiddlyWiki/msg/a9139b194e7f2139
[2] https://files.getdropbox.com/u/1316865/DragSortTW.html

[Mark S.]

Interesting, and with only one line of code!

Is there a way to make the effect permanent? It seems to disappear the
moment the tiddler is open. Even if you save the file and reload, it
disappears. I think to be useful, the effect would need to stick
around.

-- Mark

[Alex Hough]

Mark,

I looked at your tree plugin to work out where to include the plugin
(PostbodyMarkup)
I this plugin, there is an external link to make it persistent.
Perhaps something similar for this one?

Alex

2009/7/8 Mark S. <thro...@yahoo.com>:

--
http://www.multiurl.com/g/64

[Morris Gray]

On Jul 8, 7:17 pm, Alex Hough <r.a.ho...@googlemail.com> wrote:
> Following Moris's suggestion [1] here is a small a demonstration [2]
> using a jQuery plugin - DropSort.

"That's one small step for man, one giant leap for mankind."

Thanks,

Morris ;-)

[Alex Hough]

I thought that others could add record of their own giant leaps on this thread.

Here is even more!

I've recently been using jQuery with inline scripts then using
<<tiddler nameOfTiddlerWithjQuery>>

Tiddler contains stuff like this;
<script>
jquery("#foo").hide();
jquery("#foo").fade();
jquery("#foo").addclass();
</script>

I've got a feeling that it will get easier soon.

Its all about showing, hiding and moving page elements isn't it?

ALex

>
> "That's one small step for man, one giant leap for mankind."
>
> Thanks,
>
> Morris ;-)
>
> On Jul 8, 7:17 pm, Alex Hough <r.a.ho...@googlemail.com> wrote:
>> Following Moris's suggestion [1] here is a small  a demonstration [2]
>> using a jQuery plugin - DropSort.
>>
>> Alex
>>
>> [1]http://groups.google.com/group/TiddlyWiki/msg/a9139b194e7f2139
>> [2]https://files.getdropbox.com/u/1316865/DragSortTW.html
> >
>

--
http://www.multiurl.com/g/64

[Mark S.]

This code (unlike the Treeview library) doesn't have any concept of
persistence, though. I'm guessing that to make it persistent you would
need to put some code in the "dragEnd" feature that would know how to
write the changes to the underlying tiddler. Since this might involve
converting DOM structure back into mediawiki format, it would lose
some of that one-line luster.

-- Mark

On Jul 8, 5:35 am, Alex Hough <r.a.ho...@googlemail.com> wrote:
> Mark,
>
> I looked at your tree plugin to work out where to include the plugin
> (PostbodyMarkup)
> I this plugin, there is an external link to make it persistent.
> Perhaps something similar for this one?
>
> Alex
>

> 2009/7/8 Mark S. <throa...@yahoo.com>:

[Morris Gray]

On Jul 9, 2:02 am, Alex Hough <r.a.ho...@googlemail.com> wrote:

> I thought that others could add record of their own giant leaps on this thread.

> I've recently been using jQuery with inline scripts then using
> <<tiddler nameOfTiddlerWithjQuery>>

That's great Alex you don't know what a significant step this is.

However let's do some baby steps too. TiddlyWiki is notorious for
poor documentation let's try to turn over a new leaf and start to
change that.

Let's set a precedent on how to document things like this so that
every post that offers a snippet like you provided gives step by step
instructions on how someone else can duplicate it.

Assuming I know nothing about jQuery (which is nearly true;-) how
would one go about to implementing what you put here?

Morris

[Morris Gray]

On Jul 8, 11:35 pm, Alex Hough <r.a.ho...@googlemail.com> wrote:
> Mark,
>
> I looked at your tree plugin to work out where to include the plugin
> (PostbodyMarkup)

Another step:

https://files.getdropbox.com/u/1316865/DragSortTW.html

I was thinking that MarkupPostBody could get pretty crowded after a
while. Why not take the <script> tags off of it and run it as a
systemConfig plugin.

Cut the code from MarkupPostBody create a tiddler called
DragSortPlugin and tag it systemConfig - save and reload.

Now it's not such a drag on MarkupPostBody;-)

Morris

On Jul 8, 11:35 pm, Alex Hough <r.a.ho...@googlemail.com> wrote:
> Mark,
>
> I looked at your tree plugin to work out where to include the plugin
> (PostbodyMarkup)
> I this plugin, there is an external link to make it persistent.
> Perhaps something similar for this one?
>
> Alex
>

> 2009/7/8 Mark S. <throa...@yahoo.com>:

[Ken Girard]

Oddness found.
I tried out the Example1 demo, closed all tiddlers, and then couldn't
get any tiddlers to open after that. The screen just shimmied a
little, but no tiddlers showed up.
Once I refreshed it was working just fine, so then I duplicated what i
had done the last time with the same results.
This was in Firefox 3.5b4pre on Ubuntu.

Ken Girard

[Mark S.]

Actually, I was wondering if there wouldn't be some sort of clash. The
sample code should work on ALL unordered lists -- not just the lists
inside the current tiddler. Once you've activated the sample code, it
applies to the entries in the sidebar, which are actually list items.
I'm guessing that instead of working as links, the code is grabbing
the focus in preparation for drop-sort. If you click on the "getting
started" from the left menu, you can open up a tiddler still.

Probably one fix would be to wrap the targeted list in a class
{{myclass{...list}}} and then specify that list in the jQuery selector
(e.g. jQuery("myclass ul").dragsort() ;) ... but I'm too lazy to
try ;-)

-- Mark

[Morris Gray]

On Jul 9, 3:41 pm, "Mark S." <throa...@yahoo.com> wrote:

> Probably one fix would be to wrap the targeted list in a class
> {{myclass{...list}}} and then specify that list in the jQuery selector
> (e.g. jQuery("myclass ul").dragsort() ;) ... but I'm too lazy to
> try ;-)

I was going to run some tests but I can't import anything into
https://files.getdropbox.com/u/1316865/DragSortTW.html
because it is version 2.5.2

FND says he can using backstage but I can't. No one else has
responded to posts on the import problems I am experiencing so I guess
it's just my system.

Morris

[Alex Hough]

Re: import in backstage
It hasn't worked for me for ages. When I select a locally, i
automatically adds the file i am importing into. when this doesn't
happen the import often freezes. I cut and paste stuff in and have
done for ages.

Re selecting lists
jQuery selectors [1] is a good place to start. I think that the jQuery
documentation will be easy to follow and that writing tiddlywiki
documentation before the full jQueryification might be a waste of
time. jQuery is a lot easier to learn than TW.

<<tiddler nameOfTiddlerWithjQuery>>
Morris said: Assuming I know nothing about jQuery (which is nearly true;-) how

would one go about to implementing what you put here?

The discovery came from when I went down to the Osmoplex, I saw Simon
McMannus using jQuery in Firebug. I didn't understand what he was
doing at the time but found out that you can type jQuery into the
firebug console to test it out. The breakthough came from jQuery help
that FND put me onto [2] where the recommendation is to try the code
in Firebug.

First i tried stuff like
jQuery("#mainMenu").hide();
jQuery("#mainMenu").show();

I wanted to get certain menus to show and others to hide after a
particular tiddler had been read. I also experimented with
jQuery(".tiddler").fadeIn(slow);

I then put them into tiddlers between script tags -- something you can
do when you have inlinescriptplugin
<script>
code here
</script>

Then once this works, and i want to use it again, I cut and paste it
into a new tiddler. Then each time i want to use it i can use tiddler
transclusion;
<<tiddler nameOfTiddlerWithjQuery>>

Its a bit like a macro I guess, but you have to have the prefix tiddler.


[1] http://docs.jquery.com/Selectors
[2] http://docs.jquery.com/Types


ALex

>> Probably one fix would be to wrap the targeted list in a class
>> {{myclass{...list}}} and then specify that list in the jQuery selector
>> (e.g. jQuery("myclass ul").dragsort() ;) ...

Or use another jQuery selector to pick up the tiddler by id.

--
http://www.multiurl.com/g/64

[Mark S.]

Ok, the proper invocation, after wrapping the bulleted items in a
class, is:

<script>
jQuery(".myclass").find("ul").dragsort();
</script>

It was suggested that you could also use a tickler id (#). But I don't
know how you specify an #id for a tiddler.

After making these changes, I could open tiddlers from the timeline
menu.

-- Mark

On Jul 8, 8:45 pm, Ken Girard <ken.gir...@gmail.com> wrote:

[Alex Hough]

> It was suggested that you could also use a tickler id (#). But I don't
> know how you specify an #id for a tiddler.

the id of a tiddler is "tiddlerTiddlerTitle"

so if you wanted to select a tiddler with title 'example' the id is
"tiddlerExample"

ALex

--
http://www.multiurl.com/g/64

[Corey S]

Its actually "...That's one small step for a man, one giant leap for
mankind." In an interview, Neil Armstrong said for *a* man, but the
comm system was too sensitive and didn't kick in to transmit his
entire sentence.

I will now turn off my nit-pick-o-matic :-)

But keep it up. Its amazing what you can do inside a browser.

[Corey S]

Documentation: I just want to add my two cents.

There is nothing more frustrating for a new user and someone who has
virtually no knowledge of CSS and no javascript and jQuery knowledge
at all, to try and find something out when you're trying to do it. You
just start to pick up steam and learning what to do, then you have to
slam on the brakes, send a question out through here and hope to get
an answer before you lose track of where you were and what little
progress you've made.

...Gee I think I resemble that remark ;-)

And some of the documentation is quite old, and out-of-date. Mind you
for CSS and HTML twhelp is really useful. What about a documentation
tag for this type of tiddler? Then you could include it with the blank
tiddlywiki.com file and users can delete tiddlers with the
documentation tag if they chose?? Or import them into their own if
they want?