[tw] Re: Help With the Strex Macro

[Stephan Hradek]

Am Sonntag, 27. August 2017 17:48:21 UTC+2 schrieb Thomas Elmiger:
>
> Concerning hover effects and :before I am not sure about the accessibility 
> of such solutions. Touch devices and screen readers might have difficulties 
> with those. 
>
>
Change the macro to:

\define fn(name) <$link to="$name$"><$text text=
"$name$"/><$transclude tiddler="$name$" mode="block"/>

and change in the CSS the left:0px; to

left:2em;


and the footnotes are additionally normal clickable links.


 

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/3bf18b3b-2995-43c7-b612-2d8865387c2d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Help With the Strex Macro

[Thomas Elmiger]

K  schrieb am So. 27. Aug. 2017 um 17:56:

> So there's no other way to set the <> and class without a
> button?


Not one that I would know of.

>

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/CALXLrTieR_XOMDiqbX0bVXg5iMaZM%3DjBmJqzPjTkVBZ5UzKTLg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Help With the Strex Macro

[K]

So there's no other way to set the <> and class without a button?

Sunday, August 27, 2017 at 8:48:21 AM UTC-7, Thomas Elmiger wrote:
>
> Hi 
>
> As the author of the strex macro I have to admit that for K’s requirement 
> of showing the note on hover I think the best way is the last one: not to 
> use strex at all :) 
>
> strex stores the state (open/closed) in state tiddlers. We need a cklick 
> to create or change these. 
>
> Concerning hover effects and :before I am not sure about the accessibility 
> of such solutions. Touch devices and screen readers might have difficulties 
> with those. 
>
> Good luck! 
> Thomas 

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/d0f00fe3-383c-4e92-890f-465f4d8d21ba%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Help With the Strex Macro

[Thomas Elmiger]

Hi

As the author of the strex macro I have to admit that for K’s requirement of 
showing the note on hover I think the best way is the last one: not to use 
strex at all :)

strex stores the state (open/closed) in state tiddlers. We need a cklick to 
create or change these. 

Concerning hover effects and :before I am not sure about the accessibility of 
such solutions. Touch devices and screen readers might have difficulties with 
those. 

Good luck!
Thomas 

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/f02518c4-5d53-4597-9896-1a90f22b5529%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Help With the Strex Macro

[K]

Ok thanks.

On Sunday, August 27, 2017 at 3:41:51 AM UTC-7, Stephan Hradek wrote:
>
>
>
> Am Sonntag, 27. August 2017 08:52:21 UTC+2 schrieb K:
>>
>> I appreciate the help here, but I left out some information in my first 
>> post, the macro has already been adapted, and I'm not to proficient in 
>> scripting. If you still want to help, I've thrown together an empty 
>> tiddlywiki file containing what I have so far.
>>
>> I will also be editing the first post. What I've done is modify the 
>> button to look more like traditional annotations and make them change 
>> colors to ease the spotting in my main tiddlywiki file. It's jsut a hassle 
>> to click each one, so it'd be so much easier to hover and see hidden 
>> information.
>>
>
> As I still do not want to dive into your macro, I've created this as a 
> starting point.
>
> Note that I like to have footnotes in seperate tiddlers, in this example 
> called "fn1" and "fn2".
>
> Stylesheet:
>
> .sup {
> position: relative;
> }
> .sup > div {
> display:none;
> }
> .sup:hover > div {
> display:inline-block;
> position: absolute;
> zindex: 998;
> top:-1em;
> left:0px;
> background: yellow;
> opacity: 1;
> border: 4px solid green;
> min-width: 40em;
> }
>
>
>
> Code + example:
>
> \define fn(name) $name$<$transclude 
> tiddler="$name$" mode="block"/>
>
> Suspendisse sagittis dui ac orci semper, et cursus felis aliquam< >>. Duis velit est, pulvinar sodales mauris et, sollicitudin tempor nisl. 
> Quisque id mi vel est iaculis viverra. Donec viverra ac neque et pharetra. 
> Nullam posuere commodo erat. Duis eu lectus vel magna porta laoreet vitae 
> ut diam. In tempor felis vel arcu commodo placerat. Nulla purus velit, 
> pretium a ligula id, scelerisque eleifend mauris. Nulla<> facilisi
> . Sed vitae tortor ipsum. Nulla fermentum semper purus, eu facilisis nibh 
> tristique id. Nulla tincidunt cursus lacus et pellentesque. Aliquam 
> porttitor, nunc vel ornare efficitur, urna sapien aliquam erat, vitae 
> varius mauris dolor in ipsum. Vestibulum hendrerit leo metus, nec 
> ultrices neque maximus eget. 
>
>
>
>  
>

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/5f819e4e-f267-4efa-b1c3-b2bdecd6f94b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Help With the Strex Macro

[Stephan Hradek]

Am Sonntag, 27. August 2017 08:52:21 UTC+2 schrieb K:
>
> I appreciate the help here, but I left out some information in my first 
> post, the macro has already been adapted, and I'm not to proficient in 
> scripting. If you still want to help, I've thrown together an empty 
> tiddlywiki file containing what I have so far.
>
> I will also be editing the first post. What I've done is modify the button 
> to look more like traditional annotations and make them change colors to 
> ease the spotting in my main tiddlywiki file. It's jsut a hassle to click 
> each one, so it'd be so much easier to hover and see hidden information.
>

As I still do not want to dive into your macro, I've created this as a 
starting point.

Note that I like to have footnotes in seperate tiddlers, in this example 
called "fn1" and "fn2".

Stylesheet:

.sup {
position: relative;
}
.sup > div {
display:none;
}
.sup:hover > div {
display:inline-block;
position: absolute;
zindex: 998;
top:-1em;
left:0px;
background: yellow;
opacity: 1;
border: 4px solid green;
min-width: 40em;
}



Code + example:

\define fn(name) $name$<$transclude 
tiddler="$name$" mode="block"/>

Suspendisse sagittis dui ac orci semper, et cursus felis aliquam<>. 
Duis velit est, pulvinar sodales mauris et, sollicitudin tempor nisl. 
Quisque id mi vel est iaculis viverra. Donec viverra ac neque et pharetra. 
Nullam posuere commodo erat. Duis eu lectus vel magna porta laoreet vitae 
ut diam. In tempor felis vel arcu commodo placerat. Nulla purus velit, 
pretium a ligula id, scelerisque eleifend mauris. Nulla<> facilisi. 
Sed vitae tortor ipsum. Nulla fermentum semper purus, eu facilisis nibh 
tristique id. Nulla tincidunt cursus lacus et pellentesque. Aliquam 
porttitor, nunc vel ornare efficitur, urna sapien aliquam erat, vitae 
varius mauris dolor in ipsum. Vestibulum hendrerit leo metus, nec ultrices 
neque maximus eget. 



 

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/2c8e311b-ae82-43cf-813c-0895684842e0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Help With the Strex Macro

[Stephan Hradek]

Am Sonntag, 27. August 2017 08:52:21 UTC+2 schrieb K:
>
> I appreciate the help here, but I left out some information in my first 
> post, the macro has already been adapted, and I'm not to proficient in 
> scripting. If you still want to help, I've thrown together an empty 
> tiddlywiki file containing what I have so far.
>
> I will also be editing the first post. What I've done is modify the button 
> to look more like traditional annotations and make them change colors to 
> ease the spotting in my main tiddlywiki file. It's jsut a hassle to click 
> each one, so it'd be so much easier to hover and see hidden information.
>

There's something wrong with that adjusted macro. Put more than one 
"footnote" into one tiddler and you cannot properly read them. Open one and 
all open.

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/718986c3-8c6e-44a9-98cd-8465c0c4e4af%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Help With the Strex Macro

[codacodercodacoder]

That's a pretty nifty use of the ::before pseudo element.  Love it.

On Saturday, August 26, 2017 at 4:32:50 PM UTC-5, Stephan Hradek wrote:
>
> As there was a small typo in the CSS and I wanted to experiment with a 
> macro, please see below a macro-version.
>
> CSS:
> span.strex:before {
> content:"\00a0...\00a0";
> background-color: lightgray;
> border: 1px solid black;
> }
> span.strex > span {
> display: none;
> }
>
> span.strex:hover:before {
> content:"";
> border: none;
> }
> span.strex:hover span {
> display:inline;
> }
>
> Macro + usage
>
> \define strex(text) $text$
>
> The ''TextStretch'' macro is a great tool < of hypertext">> to keep the message short. Your readers can discover more 
> details easily.
>
>
>
>
>

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/44cb26a8-25f9-4569-8377-1ced3bb3a627%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Help With the Strex Macro

[Stephan Hradek]

As there was a small typo in the CSS and I wanted to experiment with a 
macro, please see below a macro-version.

CSS:
span.strex:before {
content:"\00a0[...]\00a0";
background-color: lightgray;
}
span.strex > span {
display: none;
}

span.strex:hover:before {
content:"";
margin-right: 0em;
}
span.strex:hover span {
display:inline;
}

Macro + usage

\define strex(text) $text$

The ''TextStretch'' macro is a great tool <> to keep the message short. Your readers can discover more 
details easily.




-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/0dded4d8-b743-464d-b88b-02bda1cb4121%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: Help With the Strex Macro

[Stephan Hradek]

I don't know the macro and I don't want to dive into it, but here is a 
starting point for you using pure CSS:

CSS Tiddler:
span.strex:before {
content:"... ";
}
span:strex > span {
display: none;
}

span.strex:hover:before {
content:"";
}
span.strex:hover > span {
display:inline;
}

Strex is then used like this (without a macro, macro creation left as an 
excercise for the user)
The ''TextStretch'' css is a great tool for you as 
an author of hypertext to keep the message short. Your 
readers can discover more details easily.




-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/283bffe6-5725-49ec-aed9-e0d298b2bafa%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.