Scroll Bar Plugin Exist?

44 views
Skip to first unread message

Digital Doctor

unread,
Mar 16, 2008, 12:34:35 PM3/16/08
to TiddlyWiki
In a FAQ on Browser Security (Tiddly Tools), I read that scroll bar
implementation required 'expanded privileges'.

So my question is, is there a plug-in, that:
a) implements a scroll bar feature (and provides that privilege
consent to browsers)
b) allows easy customization, specifically color and transparency, so
as to make a
scroll bar less visually intrusive

RC

Eric Shulman

unread,
Mar 16, 2008, 2:24:43 PM3/16/08
to TiddlyWiki
On Mar 16, 9:34 am, Digital Doctor <rafiki...@gmail.com> wrote:
> In a FAQ on Browser Security (Tiddly Tools), I read that scroll bar
> implementation required 'expanded privileges'.

Actually, what it says is that you need "UniversalBrowserWrite"
privileges to add/remove the scrollbar from the *window*
object...adding a scrollbar to a fixed-height DOM element contained
*within* the window object can be done simply by appying the following
CSS to that element:

{ overflow:auto; } (adds scrollbars if needed)
or
{ overflow:scroll; } (always adds scrollbars)

For easy display of tiddler content in fixed-height scrolling area,
you can use this:
http://www.TiddlyTools.com/#ScrollBox

usage: <<tiddler ScrollBox with: TiddlerName height>>

HTH,
-e

rhonda

unread,
Mar 18, 2008, 1:30:41 AM3/18/08
to TiddlyWiki

> So my question is, is there a plug-in, that:
> a) implements a scroll bar feature...

If you're using the SinglePageMode plugin (http://www.tiddlytools.com/
#SinglePageModePlugin) to display one tiddler at a time, then here is
a simple script that finds the height of the user's browser window and
sets the maximum height of a tiddler accordingly, with a vertical
scroll bar displayed if the tiddler is longer than the window:

http://tiddlyyap.tiddlyspot.com/#ScrollHeightScript

R.

wolfgang

unread,
Mar 18, 2008, 2:47:29 AM3/18/08
to TiddlyWiki
Hi Rhonda,

I see that you call your plugin ScrollHeightScript. That's a bit
confusing since till now only scripts like those of TiddlyTools
depending on InlineJavascriptPlugin were named 'script'. And those
tagged with 'systemConfig', as in your example, either
ScrollHeightPlugin or ScrollHeightMacro.

Regards,

W.

Rafiki Cai

unread,
Mar 18, 2008, 2:57:13 AM3/18/08
to tiddlywiki

Rhonda;

Just for absolute clarity:

If the tiddler sets within an i-frame,
will your 'script/plugin' look at a) the i-frame
or b) the browser window; in calculating
whether to invoke a scroll bar or not.

If 'b', is there a way that your 'script/plugin'
could be adjusted to work with tiddlers within
i-frames; or would that matter at all, in proper
calculation for scrollbar placement.

Thanks for the patience in answering.

RC
--
"The ONENESS of The Allness is the key that we seek. When will we all catch on?"



--
"The ONENESS of The Allness is the key that we seek. When will we all catch on?"

wolfgang

unread,
Mar 18, 2008, 3:13:20 AM3/18/08
to TiddlyWiki
> Tested on Firefox 2 but should work on IE, Opera, Safari

It does work in IE7, but not in Opera - both on XP.

W.

On 18 Mrz., 07:57, "Rafiki Cai" <rafiki...@gmail.com> wrote:
> Rhonda;
>
> Just for absolute clarity:
>
> If the tiddler sets within an i-frame,
> will your 'script/plugin' look at a) the i-frame
> or b) the browser window; in calculating
> whether to invoke a scroll bar or not.
>
> If 'b', is there a way that your 'script/plugin'
> could be adjusted to work with tiddlers within
> i-frames; or would that matter at all, in proper
> calculation for scrollbar placement.
>
> Thanks for the patience in answering.
>
> RC
>
> On Tue, Mar 18, 2008 at 1:30 AM, rhonda <lanefujiwuxef...@tempomail.fr>
> wrote:
>
>
>
>
>
> > > So my question is, is there a plug-in, that:
> > > a) implements a scroll bar feature...
>
> > If you're using the SinglePageMode plugin (http://www.tiddlytools.com/
> > #SinglePageModePlugin <http://www.tiddlytools.com/#SinglePageModePlugin>)

Eric Shulman

unread,
Mar 18, 2008, 3:49:47 AM3/18/08
to TiddlyWiki

rhonda

unread,
Mar 18, 2008, 11:21:01 AM3/18/08
to TiddlyWiki

> I see that you call your plugin ScrollHeightScript. That's a bit
> confusing since till now only scripts like those of TiddlyTools
> depending on InlineJavascriptPlugin were named 'script'. And those
> tagged with 'systemConfig', as in your example, either
> ScrollHeightPlugin or ScrollHeightMacro.

I see your point. Don't want to add confusion! I was thinking of this
more as a DIY project than a ready-to-import plugin, since there is
some user adjustment needed. However, since it also works fine as a
plugin:

I renamed this FitWindowPlugin and added systemConfig to the tiddler
on TiddlySpot so that it can be imported and will work directly:

http://tiddlyyap.tiddlyspot.com/#FitWindowPlugin

This way, you can also see how it works on the site.

>It does work in IE7, but not in Opera

Hmmm...supposedly window.innerHeight works for everything but
(naturally) IE, which is covered by the clientHeight kludge. Not sure
why no go with Opera; caveat emptor for now, I'll try to get an
opportunity to test on Opera. Thanks.

R.

wolfgang

unread,
Mar 22, 2008, 7:31:36 PM3/22/08
to TiddlyWiki
Hi Ronda,

would it be possible to adapt FitWindowPlugin so that it fits
scrolling bars to the SideBarTabs too?

Regards,

W.

On 18 Mrz., 16:21, rhonda <lanefujiwuxef...@tempomail.fr> wrote:
> > I see that you call your plugin ScrollHeightScript. That's a bit
> > confusing since till now only scripts like those of TiddlyTools
> > depending on InlineJavascriptPlugin were named 'script'. And those
> > tagged with 'systemConfig', as in your example, either
> > ScrollHeightPlugin or ScrollHeightMacro.
>
> I see your point. Don't want to add confusion! I was thinking of this
> more as a DIY project than a ready-to-import plugin, since there is
> some user adjustment needed. However, since it also works fine as a
> plugin:
>
> I renamed thisFitWindowPluginand added systemConfig to the tiddler

rhonda

unread,
Mar 22, 2008, 11:20:13 PM3/22/08
to TiddlyWiki

> would it be possible to adapt FitWindowPlugin so that it fits
> scrolling bars to the SideBarTabs too?

Sure.

The last line of the plugin is:
setStylesheet(".tiddler {max-height:"+getHeight()+"px; overflow:
auto;}","ScrollStyle")

If you duplicate that line, and in one of the two change .tiddler to
#sidebar, the max height of the entire sidebar will be set to fit the
window, and you get a scroll bar if it's longer than that.

Or, if you prefer to have the scroll bar on the *tabs* section only,
not the whole sidebar, then add this line to the bottom of the plugin:

setStylesheet("#sidebarTabs {max-height:"+(getHeight()-150)+"px;
overflow: auto;}","ScrollStyle")

You can change the 150 to a higher or lower value to allow for however
many sidebar entries you may have above; 150 works about right for the
TW I tried it with.

Hope that helps,
R.
If you change .tiddler to #sidebarTabs, then the scroll bar is set for
the sidebar *tabs* section only, not for the whole sidebar. In this
case, you'll need to make windowDiff bigger, because you want to allow
room for the other sidebar entries above.

Eric Shulman

unread,
Mar 22, 2008, 11:21:20 PM3/22/08
to TiddlyWiki
> would it be possible to adapt FitWindowPlugin so that it fits
> scrolling bars to the SideBarTabs too?

Try this script:
http://www.TiddlyTools.com/#SetSidebarTabsHeight

which is part of this tagged package of scrollbar-related scripts:
http://www.TiddlyTools.com/#ScrollbarPackage

see also:
http://www.TiddlyTools.com/#SiteStartup
which is automatically invoked from the PageTemplate, by adding
<span style='display:none' macro='tiddler SiteStartup'></span>
to apply a variety of display-related scripts (including the
ScrollbarPackage scripts) each time your document is loaded.

enjoy,
-e

wolfgang

unread,
Mar 23, 2008, 6:49:25 AM3/23/08
to TiddlyWiki
Ronda, thanks for the fast solution.

> The last line of the plugin is:
> setStylesheet(".tiddler {max-height:"+getHeight()+"px; overflow:
> auto;}","ScrollStyle")
>
> If you duplicate that line, and in one of the two change .tiddler to
> #sidebar, the max height of the entire sidebar will be set to fit the
> window, and you get a scroll bar if it's longer than that.

That does work.
But then it overrides the .tiddler setting, only the sidebar is left
with a scrollbar - and not both - tiddlers and sidebar!
As I would have wanted.

> Try this script:
> http://www.TiddlyTools.com/#SetSidebarTabsHeight
>
> which is part of this tagged package of scrollbar-related scripts:
> http://www.TiddlyTools.com/#ScrollbarPackage

Thanks for your suggestions too, Eric.
But Rhonda's plugin has the window's height automatically determined,
which is a real advantage when changing to different screen.

But overall I wanted to check with this different plugin, if there is
a possible solution to the unwanted effect of scrolling TabTags:
opening the popup of scrolled down tags at a far distance below the
link.

As also can be best seen in FND's DevPad:
http://devpad.tiddlyspot.com/

Unfortunately, none of these 3 solution of adding scrollbars to
TabTags is eliminating this unwanted side effect.

Regards,

W.

Eric Shulman

unread,
Mar 23, 2008, 8:51:31 AM3/23/08
to TiddlyWiki
> But Rhonda's plugin has the window's height automatically determined,
> which is a real advantage when changing to different screen.
...
> But then it overrides the .tiddler setting, only the sidebar is left
> with a scrollbar - and not both - tiddlers and sidebar!

> > http://www.TiddlyTools.com/#SetSidebarTabsHeight

In addition to supporting the usual CSS values for setting *fixed*
heights, you can also use *both* #SetStoryHeight and
#SetSidebarTabsHeight with values of "100%"... the scripts
automatically compute the heights based on the current window height
(just like Rhonda's plugin) which gives you scrollbars on both the
story column *and* the sidebar tabs... plus, the scripts also add
'event listeners' for the window's 'resize' event, and re-adjusts the
values whenever you change the window size so that the scrollbars
always match the current window dimensions!

enjoy,
-e

wolfgang

unread,
Mar 23, 2008, 11:45:23 AM3/23/08
to TiddlyWiki
Thanks Eric, for this additional script. Resizing a window really
works amazing well!

> heights, you can also use *both* #SetStoryHeight and
> #SetSidebarTabsHeight with values of "100%"... the scripts
> automatically compute the heights based on the current window height
> (just like Rhonda's plugin) which gives you scrollbars on both the
> story column *and* the sidebar tabs...

However, for some reason SetTiddlerHeight does not work together with
TiddlersBarPlugin - only SetStoryHeight does.
Here the advantage of Rhonda's plugin lies in its easy adaptability by
even someone not javascript literate like me. Just changing:

> setStylesheet(".tiddler {max-height:"+getHeight()+"px; overflow:

to:

> setStylesheet(".viewer {max-height:"+getHeight()+"px; overflow:

allows to leave the tiddler toolbar in view, when scrolling down.

Regards,

W.

wolfgang

unread,
Mar 23, 2008, 11:53:40 AM3/23/08
to TiddlyWiki
> But overall I wanted to check with this different plugin, if there is
> a possible solution to the unwanted effect of scrolling TabTags:
> opening the popup of scrolled down tags at a far distance below the
> link.

By the way, to me it seems only DividedListsPlugin is a satisfying
solution for too many tags in the TabTags tiddler:

http://yann.perrin.googlepages.com/twkd.html#DividedListsPlugin

W.

Eric Shulman

unread,
Mar 23, 2008, 2:33:40 PM3/23/08
to TiddlyWiki
> Thanks Eric, for this additional script. Resizing a window really
> works amazing well!

> However, for some reason SetTiddlerHeight does not work together with
> TiddlersBarPlugin - only SetStoryHeight does.

> Here the advantage of Rhonda's plugin lies in its easy adaptability by
> even someone not javascript literate like me. Just changing:
> > setStylesheet(".tiddler {max-height:"+getHeight()+"px; overflow:
> > setStylesheet(".viewer {max-height:"+getHeight()+"px; overflow:
> allows to leave the tiddler toolbar in view, when scrolling down.

Hmmm... SetTiddlerHeight actually *does* set the ".viewer" class, so
the tiddler toolbar should stay in view. I've made a few changes this
morning so that SetTiddlerHeight uses the same techniques as
SetStoryHeight and SetSidebarTabsHeight... perhaps that will make a
difference. Try getting a fresh copy from TiddlyTools:
http://www.TiddlyTools.com/#SetTiddlerHeight

I will also investigate further and try it with TiddlerTabsPlugin
myself.

HTH,
-e

Eric Shulman

unread,
Mar 23, 2008, 2:39:49 PM3/23/08
to TiddlyWiki
> > opening the popup of scrolled down tags at a far distance below the
> > link.

I took this to mean that the length of the popups was the issue,
rather than the length of the TabTags.... and have created another
Set...Height script to address that:

http://www.TiddlyTools.com/#SetPopupsHeight

which adds a scrollbar *inside the popup itself*. Note that this
applies to *all* popups, not just the ones in TabTags, so that even
the tags popup at the bottom of the tiddler editor (e.g. "... add
existing tags") can be shortened to prevent excess page scrolling.

HTH,
-e

Eric Shulman

unread,
Mar 23, 2008, 3:44:15 PM3/23/08
to TiddlyWiki
> the tiddler toolbar should stay in view. I've made a few changes this
> morning so that SetTiddlerHeight uses the same techniques as
> SetStoryHeight and SetSidebarTabsHeight... perhaps that will make a
> difference. Try getting a fresh copy from TiddlyTools:
> http://www.TiddlyTools.com/#SetTiddlerHeight
>
> I will also investigate further and try it with TiddlersBarPlugin

I can confirm that the current version of SetTiddlerHeight *does* work
with the .viewer area of TiddlersBarPlugin

However, you have to ensure that the SetTiddlerHeight script is
actually invoked. The easiest way to do this is to add:
<span style='display:none' macro='tiddler SetTiddlerHeight'></span>
to your [[PageTemplate]].

Also, all of the TiddlyTools "Set...Height" scripts can accept an
optional "with:" param to specify the height, as an alternative to
using a cookie value (or a hard-coded systemConfig tiddler). Thus:

<span style='display:none' macro='tiddler SetTiddlerHeight with:
80%'></span>

Note that, for use with TiddlersBarPlugin, a height of 80% works
better than 100%, as it allow some leeway for the additional vertical
space taken up by the tiddlers bar (and tiddler title/toolbar) itself.

enjoy,
-e

wolfgang

unread,
Mar 23, 2008, 5:29:12 PM3/23/08
to TiddlyWiki
> I can confirm that the current version of SetTiddlerHeight *does* work
> with the .viewer area of TiddlersBarPlugin

That's strange, because for me it doesn't even work with a freshly
downloaded VisualTW.html -
and it doesn't make a difference if invoked manually or via the
PageTemplate!

> > > opening the popup of scrolled down tags at a far distance below the
> > > link.
>
> I took this to mean that the length of the popups was the issue,
> rather than the length of the TabTags.... and have created another
> Set...Height script to address that:
>
> http://www.TiddlyTools.com/#SetPopupsHeight

Thanks again, that's very useful too. (by the way, there is a small
typo in the hidden Name slice of it)

However, I didn't meant it that way - but if one scrolls down the
TabTags (be it with Fred's, Rhonda's or your script) and clicks on a
bottommost tag, the popup doesn't open as usual exactly where this tag
by scrolling down is now situated - but at the exact distance from the
tag by which it had been scrolled down!

W.

Eric Shulman

unread,
Mar 23, 2008, 6:44:12 PM3/23/08
to TiddlyWiki
> However, I didn't meant it that way - but if one scrolls down the
> TabTags (be it with Fred's, Rhonda's or your script) and clicks on a
> bottommost tag, the popup doesn't open as usual exactly where this tag
> by scrolling down is now situated - but at the exact distance from the
> tag by which it had been scrolled down!

That seems to be a bug in the core function, Popup.place(), which uses
findPosY() to locate the position of the tag text that you clicked
on. Unfortunately, it is apparently not taking into account the
relative offset when that text is contained in a scrolling area (that
has been scrolled)

I'll see what I can do...

-e
Message has been deleted

wolfgang

unread,
Apr 7, 2008, 2:27:00 PM4/7/08
to TiddlyWiki
Hi to everyone, (sorry for the erroneous post just before)

> > I took this to mean that the length of the popups was the issue,
> > rather than the length of the TabTags.... and have created another
> > Set...Height script to address that:
>
> >http://www.TiddlyTools.com/#SetPopupsHeight
>
> Thanks again, that's very useful too.

An other approach would be to use css to format long popup lists in
hidden tables.

Could anyone help me out with the css for such a popup format?

> That's strange, because for me it doesn't even work with a freshly
> downloaded VisualTW.html -
> and it doesn't make a difference if invoked manually or via the
> PageTemplate!

Made a new trial, and SetPopupsHeight did work with TiddlersBarPlugin
now. :-)

Regards,

W.
Reply all
Reply to author
Forward
0 new messages