> I made a tiddler containing the jquery-ui-1.10.0.custom.css and linked it
> to the stylesheet tiddler.
ok. Sounds right. Make sure your CSS is all valid, and that the
embedded 'link' (e.g. [[NameOfTiddlerWIthJqueryCustomCSS]]) is not
enclosed within CSS-style comment braces (/*** and ***/)
> I link to the js in the postbody (and tried posthead)
> <script src="js/jquery-ui-1.10.0.custom.js"></script>
ok. Either MarkupPostBody or MarkupPostHead will work, since this is
just loading the custom jQUery UI code library, prior to actually
invoking any functions it contains.
> I add the css:
> #resizable { width: 150px; height: 150px; padding: 0.5em; }
> #resizable h3 { text-align: center; margin: 0; }
ok. You can put this either directly in the [[StyleSheet]] tiddler,
or in your custom CSS tiddler.
> I put the script in the postbody (also tried posthead:
> <script>
> $(function() {
> $( "#resizable" ).resizable();});
> </script>
> and I add the html to a tiddler:
> <html>
> <div id="resizable" class="ui-widget-content">
> <h3 class="ui-widget-header">Resizable</h3>
> </div>
> </html>
> In the end all of the styling looks right, the js looks like it loads, but
> the area isn't re-sizable?
Here's the problem: the MarkupPostBody (or MarkupPostHead) script is
invoked as soon as the document is loaded, but the HTML content in the
tiddler is not rendered until that tiddler is actually displayed in
the story column of the document. To make things work, you need to
invoke the script from within that tiddler, after the HTML content is
rendered.
To invokes scripts from within content-bearing tiddlers, install this
plugin:
http://www.TiddlyTools.com/#InlineJavascriptPlugin
Then, you can write:
-------------
<html><nowiki>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</html>
<script> jQuery("#resizable").resizable(); </script>
-------------
When the tiddler is displayed, the HTML is rendered before the script
is processed; thus, the jQuery(...) function will be able to find the
"#resizable" element and successfully apply the .resizable() function
to it, as you had intended.
Note: In order to avoid conflicts with other javascript libraries that
may also be installed in TiddlyWiki documents, the shorthand $(...)
function name is deliberately NOT enabled by default, so you should
use the full jQuery(...) function name for simple one-line scripts
like the one above.
enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
http://www.TiddlyTools.com/#Donations
Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:
http://www.TiddlyTools.com/#Contact
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/tiddlywiki?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
