Import a jQuery Plugin to my TW?
84 views
Skip to first unread message
MikeS
Aug 20, 2009, 12:54:02 PM8/20/09
to TiddlyWiki
I read about this jQuery plugin here:
http://allinthehead.com/retro/338/supersleight-jquery-plugin
I've heard that TW uses the jQuery engine (or something).
Anyone know how I would import this?
I need it so transparent PNGs display correctly in IE6. While I use
Firefox, most of the audience that will see my TW uses IE6 (corporate
environment).
http://allinthehead.com/retro/338/supersleight-jquery-plugin
I've heard that TW uses the jQuery engine (or something).
Anyone know how I would import this?
I need it so transparent PNGs display correctly in IE6. While I use
Firefox, most of the audience that will see my TW uses IE6 (corporate
environment).
Mark S.
Aug 20, 2009, 4:09:34 PM8/20/09
to TiddlyWiki
Can you give an example of what you want to do?
I went through all the motions, and thought it was great because a
transparent PNG displayed fine (showing the background color I had
set). But it still displayed fine, after I turned off the plugin. So,
now I'm puzzled. I'm using IE 6.0.2900.2180...
Are you sure transparent PNG's don't display in IE 6 ?
-- Mark
I went through all the motions, and thought it was great because a
transparent PNG displayed fine (showing the background color I had
set). But it still displayed fine, after I turned off the plugin. So,
now I'm puzzled. I'm using IE 6.0.2900.2180...
Are you sure transparent PNG's don't display in IE 6 ?
-- Mark
MikeS
Aug 21, 2009, 7:59:26 AM8/21/09
to TiddlyWiki
Per this:
http://homepage.ntlworld.com/bobosola/
and this:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
it is a problem. I just found out myself when I put my first PNG
image in my TW.
So are you saying you were to install the plugin?
http://homepage.ntlworld.com/bobosola/
and this:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
it is a problem. I just found out myself when I put my first PNG
image in my TW.
So are you saying you were to install the plugin?
rakugo
Aug 21, 2009, 11:05:50 AM8/21/09
to TiddlyWiki
The easiest way to do this would be to add the jquery plugin to your
MarkupPrehead tiddler.
eg.
<script type='text/javascript' src='supersleight.js'></script>
Then you'd need to make sure everytime your page is refreshed the
function is called
try something like this:
var oldrestart = restart;
restart = function(){
jQuery('body').supersleight();
oldrestart();
};
Might work.
If I remember correctly the way supersleight works is you put a
transparent gif in the same folder as the page.
like this one: http://www.jonrobson.me.uk/x.gif
Note if you targetting users in in IE6 environment, my recommendation
would be to try to resort to using gifs where-ever possible, possibly
using conditional if css statements. Javascript is not really the
right way to do these sort of things in my opinion, but the code above
should do the trick for you.
Jon
MarkupPrehead tiddler.
eg.
<script type='text/javascript' src='supersleight.js'></script>
Then you'd need to make sure everytime your page is refreshed the
function is called
try something like this:
var oldrestart = restart;
restart = function(){
jQuery('body').supersleight();
oldrestart();
};
Might work.
If I remember correctly the way supersleight works is you put a
transparent gif in the same folder as the page.
like this one: http://www.jonrobson.me.uk/x.gif
Note if you targetting users in in IE6 environment, my recommendation
would be to try to resort to using gifs where-ever possible, possibly
using conditional if css statements. Javascript is not really the
right way to do these sort of things in my opinion, but the code above
should do the trick for you.
Jon
Mark S.
Aug 21, 2009, 11:52:49 AM8/21/09
to TiddlyWiki
Hi Mike,
What I've done so far works, but is probably too ugly to use in real
life. I put:
<script src="supersleight.plugin.js"></script>
in MarkupPreHead.
I have Eric Shulman's InlineScriptPlugin installed. In the tiddler
where I want the graphic to display, I put:
<html>
<img src="transparent.png">
</html>
[img[transparent.png]]
//<script>
jQuery('#tiddlerTestTransparency').supersleight({shim: '/img/
transparent.gif'});
;
</script>
The jQuery script has to be at the *bottom* of the tiddler, because
its re-applying supersleight to the current tiddler. There is probably
a more intelligent way to hook the script, so that it deploys whenever
a tiddler is displayed.
Anyways, it works but ... it puts a ugly little mark on the image --
just like it would for an image it couldn't find. There's also a
slight framing box, but maybe some CSS would get rid of that. Try and
you'll see.
-- Mark
What I've done so far works, but is probably too ugly to use in real
life. I put:
<script src="supersleight.plugin.js"></script>
in MarkupPreHead.
I have Eric Shulman's InlineScriptPlugin installed. In the tiddler
where I want the graphic to display, I put:
<html>
<img src="transparent.png">
</html>
[img[transparent.png]]
//<script>
jQuery('#tiddlerTestTransparency').supersleight({shim: '/img/
transparent.gif'});
;
</script>
The jQuery script has to be at the *bottom* of the tiddler, because
its re-applying supersleight to the current tiddler. There is probably
a more intelligent way to hook the script, so that it deploys whenever
a tiddler is displayed.
Anyways, it works but ... it puts a ugly little mark on the image --
just like it would for an image it couldn't find. There's also a
slight framing box, but maybe some CSS would get rid of that. Try and
you'll see.
-- Mark
Eric Shulman
Aug 21, 2009, 11:55:46 AM8/21/09
to TiddlyWiki
> The easiest way to do this would be to add the jquery plugin to your
> MarkupPrehead tiddler.
>
> eg.
> <script type='text/javascript' src='supersleight.js'></script>
or, copy the source code from supersleight.js and paste it into a
> MarkupPrehead tiddler.
>
> eg.
> <script type='text/javascript' src='supersleight.js'></script>
tiddler tagged with systemConfig (i.e., make it a plugin)
> Then you'd need to make sure everytime your page is refreshed the
> function is called
> try something like this:
> var oldrestart = restart;
> restart = function(){
> jQuery('body').supersleight();
> oldrestart();};
page is refreshed...
Rather than hijacking the core's restart() function, you could create
a tiddler called, for example, [[SiteStartup]], that would contain a
tiny inline script [1] that calls the supersleight() initialization,
like this:
<script> jQuery('body').supersleight(); </script>
Then, transclude this tiddler at the end of the PageTemplate, like
this:
<span macro='tiddler SiteStartup'></span>
Each time the PageTemplate is rendered (i.e., when the whole TW page
is drawn), the inline script in SiteStartup will be processed, and the
supersleight() init function will be invoked.
Alternatively, if you don't want to have a separate tiddler to hold
the inline script, you could use a 'hidden section' in the
PageTemplate itself, so that everything is in one place, like this:
<span macro='tiddler PageTemplate##SiteStartup'></span><!--
!SiteStartup
<script> jQuery('body').supersleight(); </script>
!end
-->
Note: there is an important (and useful) difference between using this
inline script technique and using a standard 'systemConfig' tiddler
(i.e., a plugin) to invoke custom code during startup: plugins get
loaded in *before* the initial page content has been rendered, while
the 'SiteStartup' scripts, being triggered at the end of the
PageTemplate, are processed *after* the initial rendering has been
completed. Thus, startup *scripts* can be used to manipulate the
rendered DOM elements, while plugins cannot.
enjoy,
-e
Mark S.
Aug 21, 2009, 11:57:22 AM8/21/09
to TiddlyWiki
BTW, it appears to me that IE6 will handle *straight*, gif-like
transparent PNG's OK. Its only if you want the newer, levels-of-
transparency in PNG that you have the problems.
-- Mark
transparent PNG's OK. Its only if you want the newer, levels-of-
transparency in PNG that you have the problems.
-- Mark
Mark S.
Aug 21, 2009, 2:33:42 PM8/21/09
to TiddlyWiki
Hi Eric,
That technique only works when the tiddler is part of the permaview.
That is, if I click on my sample tiddler, the images come up with the
opaque background. But, if I make a permaview, and refresh the screen,
then the sample tiddler displays correctly. The technique I mentioned
previously, where the script is at the bottom of the tiddler, works
whenever a tiddler is opened.
Whether it works or not, the result is still a bit ugly, showing the
graphic but with a slight border and the little "no image" mark
(despite there being an image). Maybe that's what the shim is
about ... I'll have to read more.
But one more issue. Is there an id# or mechanism to avoid using
'body' ? Just the supersleight (ss) documentation recommends against
using 'body'. My first experiment with ss I used 'body', and ... maybe
just by coincidence ... ended up with a corrupt TW file.
Thanks!
Mark
That technique only works when the tiddler is part of the permaview.
That is, if I click on my sample tiddler, the images come up with the
opaque background. But, if I make a permaview, and refresh the screen,
then the sample tiddler displays correctly. The technique I mentioned
previously, where the script is at the bottom of the tiddler, works
whenever a tiddler is opened.
Whether it works or not, the result is still a bit ugly, showing the
graphic but with a slight border and the little "no image" mark
(despite there being an image). Maybe that's what the shim is
about ... I'll have to read more.
But one more issue. Is there an id# or mechanism to avoid using
'body' ? Just the supersleight (ss) documentation recommends against
using 'body'. My first experiment with ss I used 'body', and ... maybe
just by coincidence ... ended up with a corrupt TW file.
Thanks!
Mark
Eric Shulman
Aug 21, 2009, 3:09:48 PM8/21/09
to TiddlyWiki
> That technique only works when the tiddler is part of the permaview.
> That is, if I click on my sample tiddler, the images come up with the
> opaque background. But, if I make a permaview, and refresh the screen,
> then the sample tiddler displays correctly. The technique I mentioned
> previously, where the script is at the bottom of the tiddler, works
> whenever a tiddler is opened.
You're right. Instead of changing the PageTemplate, add this to the
> That is, if I click on my sample tiddler, the images come up with the
> opaque background. But, if I make a permaview, and refresh the screen,
> then the sample tiddler displays correctly. The technique I mentioned
> previously, where the script is at the bottom of the tiddler, works
> whenever a tiddler is opened.
bottom of the ViewTemplate:
<span macro='tiddler ViewTemplate##ssinit'></span><!--
!ssinit
<script>
var id='#'+story.findContainingTiddler(place).id;
jQuery(id).supersleight();
</script>
!end
-->
The first line gets the DOM element ID for the tiddler being rendered,
so that the enhanced supersleight PNG features are only applied to the
current tiddler element. (Note: 'place' is an 'environment variable'
defined by InlineJavascriptPlugin, and refers to the location where
the script's output, if any, will be 'wikified' and rendered. See
InlineJavascriptPluginInfo for details)
> But one more issue. Is there an id# or mechanism to avoid using
> 'body' ? Just the supersleight (ss) documentation recommends against
> using 'body'.
includes everything defined by the PageTemplate HTML, but *not* the
'backstage' area, thus, you could write:
<script> jQuery('#contentWrapper').supersleight(); </script>
enjoy,
-e
Markk S.
Aug 21, 2009, 7:33:13 PM8/21/09
to TiddlyWiki
Thanks, Eric. That seems to have done the trick. Probably don't even
need the "#contentWrapper" with the code you set up. Hmm, haven't
tried it in CSS, so maybe that's when a different selector might be
needed.
The last little bit was the shim -- a transparent gif. Apparently the
GIF that Rakugo linked to is corrupt. In any event, it didn't work for
me. So I created my own 1x1 pixel transparent graphic called "x.gif",
and put it in the same directory.
Presto! Basic transparency works, and its no longer ugly!
-- Mark
need the "#contentWrapper" with the code you set up. Hmm, haven't
tried it in CSS, so maybe that's when a different selector might be
needed.
The last little bit was the shim -- a transparent gif. Apparently the
GIF that Rakugo linked to is corrupt. In any event, it didn't work for
me. So I created my own 1x1 pixel transparent graphic called "x.gif",
and put it in the same directory.
Presto! Basic transparency works, and its no longer ugly!
-- Mark
Reply all
Reply to author
Forward
0 new messages