sliders output is different font?

[joel]

Greetings all. I have been looking through the archives and can't
seem to find anything about this, so I got myself a google account
just so I could ask you all...

Within my text, I want to add a slider that pushes down the other text
with a transclusion.
<<slider click AboutTiddlyWiki 'Click here to learn more about
Tiddlywiki' '(Click again to close)'>>

That does the job just fine. However, the transcluded tiddler
(AboutTiddlyWiki) is displayed in a strange font. Links within the
transcluded text are especially difficult to read.

NestedSlidersPlugin preserves the font if a ^width^ is used;
+++^75%^[Click here to learn more about Tiddlywiki.|(Click again to
close)]> <<tiddler [[AboutTiddlyWiki]]>> ===
but this causes the transcluded tiddler to "float" above and hide the
main body of text... I want it to push down!

I suspect I should be adding something to the StyleSheet, but all I
have managed to find are tweaks for the sidebar fonts.

I'd appreciate any hints.
Joel
(BTW, I am running this on IE8, if that changes anything.)

[Måns]

Hi Joel

> NestedSlidersPlugin preserves the font if a ^width^ is used;
> +++^75%^[Click here to learn more about Tiddlywiki.|(Click again to
> close)]> <<tiddler [[AboutTiddlyWiki]]>> ===
> but this causes the transcluded tiddler to "float" above and hide the
> main body of text... I want it to push down!

Try:
@@position:relative;+++^75%^[Click here to learn more about

Tiddlywiki.|(Click again to close)]> <<tiddler [[AboutTiddlyWiki]]>>

===@@

Cheers Måns Mårtensson

[joel]

Mans, thanks for your speedy reply... unfortunately it didn't work.
Your suggested code produced a floating tiddler that was 75% of the
width of the [Click here to learn more about Tiddlywiki] string!

[HansBKK]

So don't use width - I believe NestedSlider's exclamation points let you specify which heading level style the label will take, if you use "!!!!!" I think it's just bolded, same size and color as regular text. Use Firebug and StyleSheet to customize from there.

Hope this helps.

[joel]

No, Hans, The exclamation marks in NestedSlider only change the appearance of the "link" to the tiddler.  I want to change the content of the tiddler that is being transcluded... or more to the point, I want to know why the font for the transcluded tiddler does change, because I dont want it to!

[HansBKK]

Ah, sorry I didn't read your OP closely enough to get that.

If you use Firebug to see what classes the text is getting assigned, you should be able to override that formatting in StyleSheet, or even search in your .html for the offending code.

[joel]

Thanks for your reply, Hans. Unfortunately I'm not familiar with
Firebug and I haven't changed any of the default fonts, so I assume
that all users are subjected to this weird phenomenon. Perhaps it is
as simple as adding a few lines to the styleSheet. Can anyone suggest
a solution? Original post below.
------------------

Within my text, I want to add a slider that pushes down the other text
with a transclusion.
<<slider click AboutTiddlyWiki 'Click here to learn more about
Tiddlywiki' '(Click again to close)'>>

That does the job just fine. However, the transcluded tiddler
(AboutTiddlyWiki) is displayed in a strange font. Links within the
transcluded text are especially difficult to read.

NestedSlidersPlugin preserves the font if a ^width^ is used;

+++^75%^[Click here to learn more about Tiddlywiki.|(Click again to

close)]> <<tiddler [[AboutTiddlyWiki]]>> ===
but this causes the transcluded tiddler to "float" above and hide the
main body of text... I want it to push down!

[Scott Simmons]

The text inside the slider is wrapped in a style called ".sliderPanel."  If the slider is in the main menu area on the left, you can modify "#mainMenu .sliderPanel" to change the displays, and if it's in the right-hand sidebar area, you can change it with "#sideBarOptions .sliderPanel" or "#sideBarTabs .sliderPanel."

 

I'm not sure this will work, but if your slider is in a tiddler in the main (middle) area of TiddlyWiki, you could try adding this to the StyleSheet tiddler:

 

.viewer .sliderPanel { font:inherit; font-family:inherit; font-size:inherit; font-weight:inherit; font-style:inherit; }

[joel]

No luck, Scott.

[Yakov]

This can be done via CSS. If you inspect a TW document with FireBug or
Opera DragonFly, you'll see the class which the content of slider has.
As I can see, it's sliderPanel. Now try the corresponding CSS:

.sliderPanel { font-family: ...; font-size: ...; ... }

(first check whether this works, just try smth like font-size: 5em; )

Then you want to get the same font that you have outside the slider.
So the following should be proper:

.sliderPanel { font: inherit; }

[joel]

Thank you to everyone who has helped. I have played with
the .sliderPanel values and this certainly does change the fonts in
the sliders. However, I have been unable to sort out the problem...
instead, the I have discovered something else... it doesn't happen
when animations are turned off! Something in the "pushing" animation
sequence is playing with the fonts! Any ideas?

[Yakov]

> However, I have been unable to sort out the problem...
> instead, the I have discovered something else... it doesn't happen
> when animations are turned off!  Something in the "pushing" animation
> sequence is playing with the fonts!  Any ideas?

Could you specify what "unable to sort out the problem" means? What
did you try, what happened, what did you expect to happen?

[joel]

When EnableAnimations is on and I try to open a slider, the text is
difficult to read, no matter what font it is in. (It looks like text
in a .jpeg or .gif which has then been reduced in size.) This doesn't
occur when animations are off, and it doesn't occur when the slider's
default setting is "open." Eric's nestedSliderPlugin inherits the
same problems, however it does NOT do it to floating tiddlers.

[Scott Simmons]

I think that has something to do with the browser's on-the-fly sizing of fonts.  I've noticed the same thing in IE8, for example, though it doesn't happen in IE9 or Firefox.

 

If you're seeing the same thing I am, then you should be able to "clean up" the text by refreshing the TiddlyWiki.  (For me, it's slider panels in the Main Menu, SideBarTabs, and SideBarOptions where I see the effect on IE8 on my older XP computers.  Since the sliders' state is set by cookie, refreshing loads them in the opened state from the get-go, with smooth fonts.  If your sliders are inside a tiddler in the main DisplayArea, try getting the permalink from the TW toolbar -- or just adding #MyTiddlerName the URL -- and then load your TW with the sliders already open.)

 

If this is indeed the effect you're seeing, you may be able to get around it by switching browsers (at least for your TiddlyWiking), since some handle it better than others.  Beyond that, I've never found a solution to the uglified display — but maybe someone will come along and drop some knowledge on us both!  :)

[joel]

Thank you Scott. Yes, refreshing does fix the problem, but I can't
guarantee that other users will be so forgiving. I notice that Eric's
nestedSliderPlugin has some code specifically for IE... something
about "clipping problems?" Interesting also that IE8 is singled out
as being a bit problematic with fonts, by, for example
http://www.w3schools.com/cssref/pr_font_font-variant.asp
which says that:
The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".
Unfortunately, I need this to work on IE systems. Should I perhaps be
playing with the !DOCTYPE?

--------------------------------------------------------------------------------

[Scott Simmons]

refreshing does fix the problem, but I can't guarantee that other users will be so forgiving

 

I can appreciate that.  Unfortunately, I don't enough about the root cause to recommend a reliable fix that works on IE8.  :(

 

Unfortunately, I need this to work on IE systems. Should I perhaps be
playing with the !DOCTYPE?

 

TiddlyWiki seems to have a reliable and accurate Doctype declaration already, and I doubt that changing it would affect the display of JS-hidden fonts when they're displayed.  Plus, you run the risk of cascading problems that could affect TiddlyWiki and your installed plugins if the Doctype doesn't match the contents of the file (the TiddlyWiki).  I'd have to say there's more potential for peril than success down that road.

 

I don't think inheritance is the problem, either.  From what you've described, it sounds like the right font is being displayed in the slider but it's not properly smoothed for readability when it's first displayed.  The refresh redraws the characters, so there might be a way to force refreshing of certain elements on the page using JS, but if so, it's not readily apparently to me.

 

Silly question, but:  Is an upgrade to IE9 feasible, or are you in an XP-only environment (or bound to IE8 by other considerations)?

[joel]

Thanks for your considered response, Scott. Hopefully someone can
suggest a way to force a refresh upon opening.

You asked about IE9... I can upgrade the computer I'm using, but I'm
intending to make this TW availabe to multiple users, many of whom are
TW novices using government supplied computers. :(