Transcluding TableHighlight

[Mike]

Good Morning,

I am transcluding the following script via the view template - would
this work better via a plugin?
**Requires InlineJavascriptPlugin **

<script>
/*Table Highlighting for Sortable TW Tables*/
/*add .evenRow {background-color: #333;} to StyleSheet for alternating
table row color*/
(function($) {
$(document).ready(function( ) {
$('table.sortable tbody tr').mouseover(function(){
$(this).addClass('highlight')
$(this).removeClass('evenRow');
});
$('table.sortable tbody tr').mouseout(function(){
$(this).removeClass('highlight');
$('table.sortable tr:even').addClass('evenRow');
})
});
})(jQuery);
</script><script>
/*Table Highlighting for TW Tables*/
/*add .evenRow {background-color: #333;} to StyleSheet for alternating
table row color*/
(function($) {
$(document).ready(function( ) {
$('table.twtable tbody tr').mouseover(function(){
$(this).addClass('highlight')
$(this).removeClass('evenRow');
});
$('table.twtable tbody tr').mouseout(function(){
$(this).removeClass('highlight');
$('table.twtable tr:even').addClass('evenRow');
})
});
})(jQuery);
</script>

Note: I tried just removing the script tags and tagging a tiddler with
systemConfig - and the highlighting did not work . . .

Thanks,

Mike

[Alex Hough]

Hi Mike,

This is how i would do this.

1) Create a tiddler for scripts, using script tags (e.g. tableScripts
2) replace "$" with "jQuery" - you need to tell TW that you are using jQuery.
3) put <<tiddler tableScirpts>> in the tiddler you want it to work in.

If you want to make a systemConfig tiddler work, add the code in
between<script></script> tags.

I have found firebug [1] very useful for trying out jQuery. I type
jQuery into the console to see if it works then transfer to a tiddler
when it works.

Alex
[1] http://getfirebug.com/


2009/7/13 Mike <eri...@gmail.com>:

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

[Eric Shulman]

> <script>
...

> (function($) {
> $(document).ready(function( ) {
>         $('table.sortable tbody tr').mouseover(function(){

...

>         });
>         $('table.sortable tbody tr').mouseout(function(){

...
>         })});
> })(jQuery);
> </script>

It seems that the intent of your script is to use jQuery selectors,
e.g., $('table.sortable tbody tr'), to add mouseover/mouseout handlers
to any table row elements of specific tiddler content, each time that
tiddler is displayed. If this is the case, then the use of "$
(document).ready(...)" is not correct here. That function is used to
register a 'callback' handler that is invoked when the document is
initially loaded... an event that occurs just once, *prior* to any
TiddlyWiki code being invoked (not even the TW core!), and long before
any inline script can be applied to *rendered* tiddler content.

Try this simplified [[TableHighlight]] code structure:

<script>
jQuery('table.sortable tbody tr').mouseover(function(){ ... });
jQuery('table.sortable tbody tr').mouseout(function(){ ... });
jQuery('table.twtable tbody tr').mouseover(function(){ ... });
jQuery('table.twtable tbody tr').mouseout(function(){ ... });
</script>

Then, to invoke this script, just place
<<tiddler TableHighlight>>
at the end of any desired tiddler content. Or... if you want to apply
the script to *every* tiddler, add the following at the end of the
[[ViewTemplate]]:
<span macro='tiddler TableHighlight'></span>

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

[Alex Hough]

RE:

<span macro='tiddler TableHighlight'></span>

A penny just dropped! I have a TW with <<tiddler tiddlerScripts>> in
all the tiddlers. I knew there was a simple way. "Come in!", as the
kids at Alsager Comprehensive School used to say.

This is the kind of thing that should be saved. Its a valuable
question with an excellent answer which goes further than answering
the initial question. It illuminates something else.

@Mike, is that example from the Javascript Missing Manual?


Alex



2009/7/13 Eric Shulman <elsd...@gmail.com>:

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

[Mike]

@Alex, Yes I found this in the magical Javascript Missing Manual :D

I am currently doing this via the view template <span> method -
because I was to lazy to add the line to every tiddler with a table :D
I will definitely try the simplified code tips - thx ELS ! (beginning
to learn JS - so I tend to take the long route . . .)

the actual code is pretty small, so back to my original question - is
it better to leave it as a script - or convert to a plugin?

Last Question - the original code had (1) problem, when I had tables
inside tabs (via the tabs macro) it only rendered highlighting on the
first tab, will the simplified code or a plugin version fix this?

Off to experiment - Thank You for all of the suggestions !!

On Jul 13, 12:16 pm, Alex Hough <r.a.ho...@googlemail.com> wrote:
> RE:
>
> <span macro='tiddler TableHighlight'></span>
>
> A penny just dropped! I have a TW with <<tiddler tiddlerScripts>> in
> all the tiddlers. I knew there was a simple way. "Come in!", as the
> kids at Alsager Comprehensive School used to say.
>
> This is the kind of thing that should be saved. Its a valuable
> question with an excellent answer which goes further than answering
> the initial question. It illuminates something else.
>
> @Mike, is that example from the Javascript Missing Manual?
>
> Alex
>

> 2009/7/13 Eric Shulman <elsdes...@gmail.com>:

[Mike]

Updated Script:

/%
Table Highlighting for Sortable & TW Tables Version 07.19.2009
ELS simplified code structure

add .evenRow {background-color: #333;} to StyleSheet for alternating
table row color

%/<script>

jQuery('table.sortable tbody tr').mouseover(function(){

jQuery(this).addClass('highlight');
jQuery(this).removeClass('evenRow');

});
jQuery('table.sortable tbody tr').mouseout(function(){

jQuery(this).removeClass('highlight');
jQuery('table.sortable tr:even').addClass('evenRow');

});
jQuery('table.twtable tbody tr').mouseover(function(){

jQuery(this).addClass('highlight');
jQuery(this).removeClass('evenRow');

});
jQuery('table.twtable tbody tr').mouseout(function(){

jQuery(this).removeClass('highlight');
jQuery('table.twtable tr:even').addClass('evenRow');
});
</script>

Still may need to "finesse"
Also - did not fix my problem with tiddlers inside tabs . . .
any suggestions?

I tried this as a plugin - but didn't have any luck (minus the script
tags)

Thanks,

Mike

[Mike]

I have created a minimal test site for anyone wishing to help me
debug / troubleshoot this script.
http://www.strm.us/TidlyWiki/Examples_TWGG/highlightscriptexample.html
In the tiddler About --> Known Issues:
1. When multiple tables exist inside one tiddler, sometimes one or
more table will fill entirely instead of every evenRow, upon highlight
this will correct until next render. See TestTable1 or TestTable2 for
examples.
1. Possible CSS / JQuery conflict with the handling of
evenRow
2. When transcluding via the tabs macro, only the first table is
rendered with the script, a refresh has to be invoked to use the
script on the next table / tab. See TestTabs1 for an example.
1. normal transclusion works fine i.e. <<tiddler TestTable1>>
2. might be a symptom of transcluding the script via the
ViewTemplate

I appreciate any ideas / suggestions / feedback,

Thanks,
Mike