How to create a tiddly link in HTML
46 views
Skip to first unread message
Kolya33
Dec 2, 2010, 7:52:39 AM12/2/10
to TiddlyWiki
I need to create a tiddly link in HTML, that is a link from one
tiddler to another. The reason for the HTML is that the link will
embrace a thumbnail image which will be loaded via another script into
an IMG element that has to be marked with a CSS ID. So I tried
something like this:
function getVIMNail(id, title) {
if (id != "") { return "<html><a href=\"%23%5B
%5B"+encodeURIComponent(title)+"%5D%5D\"><img id=\"vimeo-"+id+"\" src=
\"\" /></html><script>vimeoLoadingThumb("+id+");</script> "; } else
return "";}
The above function gets passed a video-ID and the according
tiddler.title and correctly writes a linked thumbnail-image, for
example linking to:
http://www.schwarzsilber.de#[[James Blake - The Limit To Your Love]]
But clicking this link of course opens a new instance of the TW in
another tab/window. So how do I write a tiddly link in HTML?
tiddler to another. The reason for the HTML is that the link will
embrace a thumbnail image which will be loaded via another script into
an IMG element that has to be marked with a CSS ID. So I tried
something like this:
function getVIMNail(id, title) {
if (id != "") { return "<html><a href=\"%23%5B
%5B"+encodeURIComponent(title)+"%5D%5D\"><img id=\"vimeo-"+id+"\" src=
\"\" /></html><script>vimeoLoadingThumb("+id+");</script> "; } else
return "";}
The above function gets passed a video-ID and the according
tiddler.title and correctly writes a linked thumbnail-image, for
example linking to:
http://www.schwarzsilber.de#[[James Blake - The Limit To Your Love]]
But clicking this link of course opens a new instance of the TW in
another tab/window. So how do I write a tiddly link in HTML?
Kolya33
Dec 2, 2010, 10:05:13 AM12/2/10
to TiddlyWiki
I realise I may not have been very precise in my question, because I'm
not looking for a *pure* HTML solution of course. But one that will
work inside HTML tags, inside a tiddler. I'll try to be more specific:
Is there a Javascript function that I can pass the name of a tiddler,
which will then open that tiddler, like clicking on a wikified link?
Regards, Kolya
not looking for a *pure* HTML solution of course. But one that will
work inside HTML tags, inside a tiddler. I'll try to be more specific:
Is there a Javascript function that I can pass the name of a tiddler,
which will then open that tiddler, like clicking on a wikified link?
Regards, Kolya
rakugo
Dec 2, 2010, 11:29:40 AM12/2/10
to TiddlyWiki
Look for createTiddlyLink in the TiddlyWiki source.
That should give you what you need.
It returns a dom element which you can add whereever you need it.
That should give you what you need.
It returns a dom element which you can add whereever you need it.
Eric Shulman
Dec 2, 2010, 3:00:52 PM12/2/10
to TiddlyWiki
> Is there a Javascript function that I can pass the name of a tiddler,
> which will then open that tiddler, like clicking on a wikified link?
story.displayTiddler(after,title,template)
> which will then open that tiddler, like clicking on a wikified link?
where:
after = tiddler DOM element or null or "top" or "bottom"
the location in which the tiddler will be displayed
title = tiddler title
the name of the tiddler to be displayed
template = template title or NULL or DEFAULT_VIEW_TEMPLATE or
DEFAULT_EDIT_TEMPLATE
the name of the tiddler defining the template to be used when
rendering
Thus, the following will open SomeTiddler at the top of the story
column:
story.displayTiddler(null,'SomeTiddler')
To open a tiddler immediately following the current one (the usual TW
core behavior for a TiddlyLink), you can also *find the current
containing tiddler element* and pass it along, like this:
story.displayTiddler(story.findContainingTiddler(this),'SomeTiddler')
To open a tiddler for *editing* using a standard core TW editor, you
can write:
story.displayTiddler(null,'SomeTiddler',DEFAULT_EDIT_TEMPLATE)
To open a tiddler for viewing with a custom template:
story.displayTiddler(null,'SomeTiddler','SomeViewTemplate');
enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
Kolya33
Dec 2, 2010, 7:04:56 PM12/2/10
to TiddlyWiki
Wow! Thank you. I can't believe I got this working with your help and
my non-existent JS skills.
Now all thumbnails are linked to their respective tiddlers. (http://
www.schwarzsilber.de/#Video)
The thumbnails are pulled from 3 different video sites (Youtube,
Vimeo, Dailymotion). That didn't make it too easy.
I also used your (Eric's) ImageSizePlugin to size some of them. I had
to change it a bit because the SHIFT-CLICK and CTRL-CLICK message and
move-cursor came in the way of the link.
Anyway, I'm glad it works now. Thanks again.
Regards, Kolya
my non-existent JS skills.
Now all thumbnails are linked to their respective tiddlers. (http://
www.schwarzsilber.de/#Video)
The thumbnails are pulled from 3 different video sites (Youtube,
Vimeo, Dailymotion). That didn't make it too easy.
I also used your (Eric's) ImageSizePlugin to size some of them. I had
to change it a bit because the SHIFT-CLICK and CTRL-CLICK message and
move-cursor came in the way of the link.
Anyway, I'm glad it works now. Thanks again.
Regards, Kolya
rakugo
Dec 3, 2010, 6:30:37 AM12/3/10
to TiddlyWiki
Very nice.
Just to let you know I see this error message several times when I
view it:
TypeError: Result of expression '$(id_img).before' [undefined] is not
a function
Jon
Just to let you know I see this error message several times when I
view it:
TypeError: Result of expression '$(id_img).before' [undefined] is not
a function
Jon
Kolya33
Dec 3, 2010, 10:55:19 PM12/3/10
to TiddlyWiki
Huh, that's interesting. It works fine in Firefox and IE but Chrome
throws an error message on a few items which is similar to the one you
wrote, but not the same. What browser do you use?
Thanks for the heads-up anyway.
Kolya
throws an error message on a few items which is similar to the one you
wrote, but not the same. What browser do you use?
Thanks for the heads-up anyway.
Kolya
rakugo
Dec 4, 2010, 11:00:28 AM12/4/10
to TiddlyWiki
I'm using Safari, which is most similar to Chrome so if you fix it in
Chrome it should fix for Safari too. Good luck solving.
Jon
Chrome it should fix for Safari too. Good luck solving.
Jon
Kolya33
Dec 4, 2010, 7:21:21 PM12/4/10
to TiddlyWiki
I managed to fix this by using "jQuery" instead of "$" in the script,
unlinking an external jQuery library and instead updating the one
integrated in TiddlyWiki with the current jQuery 1.4.4. (Upgrade
instructions:
http://groups.google.com/group/tiddlywiki/browse_thread/thread/9ce2f7abab3acc82/d7bc7890c07fabf0?lnk=gst&q=jquery#d7bc7890c07fabf0)
unlinking an external jQuery library and instead updating the one
integrated in TiddlyWiki with the current jQuery 1.4.4. (Upgrade
instructions:
http://groups.google.com/group/tiddlywiki/browse_thread/thread/9ce2f7abab3acc82/d7bc7890c07fabf0?lnk=gst&q=jquery#d7bc7890c07fabf0)
Reply all
Reply to author
Forward
0 new messages