footnotes formatting: I'm an idiot and I need help!

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

rotflol
Posts: 1
Joined: Thu Jun 05, 2014 5:19 pm UTC

footnotes formatting: I'm an idiot and I need help!

Postby rotflol » Thu Jun 05, 2014 8:21 pm UTC

Hi there people that know how to do really cool stuff with webpages! I'm looking for someone that can explain in idiot[1] terms how the XKCD What if blog formats its footnotes and if it would be possible for me to do something similar on my wordpress website blog?

[1] when you click on the "[1]" it reveals hidden text. also I am an idiot so use small words.

thanks guys -rotflol

User avatar
mathmannix
Posts: 1410
Joined: Fri Jul 06, 2012 2:12 pm UTC
Location: Washington, DC

Re: footnotes formatting: I'm an idiot and I need help!

Postby mathmannix » Fri Jun 06, 2014 6:33 pm UTC

In general, if you see something on an html webpage that you want to copy, just look at the source code. (In Internet Explorer, this is View -> Source, or Ctrl+U.) Then search for the relevant words to find the part you need. Copy and paste, and then try tinkering with things to see what different parts do, to change fonts or whatever. Have fun! This technique works for writing code for other programming languages, too - I use it for programming in SAS and C++ all the time. Chances are whatever you want to do, somebody else has already done, so you can figure out by finding people's code with Google, and copying the techniques.

Anyway, the relevant code looks like this

<span class="ref"><span class="refnum">[1]</span><span class="refbody">0.54 (•)&gt;m<sup>-3</sup></span></span>


(Not all webpages let you read the code used to write them, but xkcd has straightforward code for the most part, the exceptions being the more sophisticated comics like "Time" and "Click and Drag" and "Lorenz" which come out once a year or so.)
Last edited by mathmannix on Fri Jun 06, 2014 6:42 pm UTC, edited 1 time in total.
I hear velociraptor tastes like chicken.

User avatar
Whizbang
The Best Reporter
Posts: 2238
Joined: Fri Apr 06, 2012 7:50 pm UTC
Location: New Hampshire, USA

Re: footnotes formatting: I'm an idiot and I need help!

Postby Whizbang » Fri Jun 06, 2014 6:40 pm UTC

Apart from what mathmannix said, here is the javascript code that makes those tags active:

Code: Select all

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
      jQuery.noConflict();
      jQuery(function() {
        jQuery(".refbody").hide();
        jQuery(".refnum").click(function(event) {
          jQuery(this.nextSibling).toggle();
          event.stopPropagation();
        });
        jQuery("body").click(function(event) {
          jQuery(".refbody").hide();
        });
      });
    </script>
Last edited by Whizbang on Fri Jun 06, 2014 6:41 pm UTC, edited 1 time in total.

User avatar
Angua
Don't call her Delphine.
Posts: 5760
Joined: Tue Sep 16, 2008 12:42 pm UTC
Location: UK/[St. Kitts and] Nevis Occasionally, I migrate to the US for a bit

Re: footnotes formatting: I'm an idiot and I need help!

Postby Angua » Fri Jun 06, 2014 6:41 pm UTC

Moving this to Coding, as will probably be more suited there.
Crabtree's bludgeon: “no set of mutually inconsistent observations can exist for which some human intellect cannot conceive a coherent explanation, however complicated”
GNU Terry Pratchett

EvanED
Posts: 4330
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Re: footnotes formatting: I'm an idiot and I need help!

Postby EvanED » Fri Jun 06, 2014 7:52 pm UTC

It is also probably possible to do something like that without Javascript, using pure CSS. Let me know if you want an example.

User avatar
ucim
Posts: 6361
Joined: Fri Sep 28, 2012 3:23 pm UTC
Location: The One True Thread

Re: footnotes formatting: I'm an idiot and I need help!

Postby ucim » Fri Jun 06, 2014 11:04 pm UTC

xkcd does it using scripts (which come from google, IIRC); but I wanted a way to do it without scripts, and requiring the lowest level of hardware/software I could get away with. My solution uses a few properties of anchors and CSS; they are not universally supported *koff* Redmond *koff* but are widespread enough.

The best reference I found for doing this is
http://www.cssportal.com/css3-preview/s ... e-css3.php

1: I use an anchor tag (a "link"). Anchor tags can link to other pages (ordinary hyperlinks) or to a place on the same page ("anchors"). If you make the target just "#", it links to the same page. (The target "#foobar" would scroll you to a place on the page labeled foobar in the HTML).

2: Anchor tags support a few useful CSS properties, such as the ability to show pop-up text (the "title" attribute). Images do that too. The property I use is "focus". If a link has focus (is clicked), you can assign different CSS attributes than if it doesn't. I also use the "title" attribute; it can give hints when you hover over the link.

3: Among the properties you can assign are "display: none" and "display: inline", which serve as "hide" and "show".

4: Essentially, I use two anchors one after another, one hidden and one showing. Then depending on which one has the focus, the other gets hidden and the first shows.

5: The nested spans are necessary; they allow the use of descendant selectors such as + and ~ to make the switch happen.

  • The "instructions" span just formats the target text(a set of irrelevant instructions on my website which I omitted for clarity) You can think of it as part of the data.
  • The "data" class is the class whose display properties are actually altered. It controls the "window" in which the target text will appear.
  • The "peekaboo" class holds the class whose display properties are actually altered.
  • "peek" and "hide" are the classes for the data and the undata (what is "seen" when the data is not)

6: In the CSS, notice the line:
.hide:focus + .peek {display: inline;}
The + means "followed by". It's a sibling selector. The whole line means:
Something with the class "peek", that immediately follows something with class "hide" that has the focus (was clicked on), should have the properties {display: inline;} (in otherwords, shown).

Here's the code:

Code: Select all

/* first the HTML
*/

<div class="switch">
   <a href="#" class="peek" title="Click here to show symbol key">here</a>
   <a href="#" class="hide" title="click anywhere to hide info">here</a>
   <span class="peekaboo">
      <span class="data">
         <span class="instructions">
            The target text goes here.  In my case it was an HTML table
         </span>
      </span>
   </span>
</div>            
               

/* Next, the CSS
*/
/* peek/hide anchor tag */
/* http://www.cssportal.com/css3-preview/showing-and-hiding-content-with-pure-css3.php */
div.switch {display: inline; font-weight: normal;}
div.switch a {color: blue;}
.peek {margin-right: .2em; width: 2em; display: inline; }
.hide {margin-right: .2em; width: 2em; display: none;}
.peekaboo {display: none; position: absolute;}
.peekaboo span.data {z-index: 10; width: 10em; position: relative; top: 1.5em; border: 1px solid red;}
.peekaboo span.data {font-weight: bold; font-size: 80%; color:green; background-color: white;}
.peek:focus { display: none; }
.hide:focus { display: none; }
.hide:focus + .peek {display: inline;}
.peek:focus + .hide {display: inline;}
.peek:focus ~ .peekaboo { display:inline;}

/* instructions - this formats the target data (in my case a table). 
   It itself has nothing to do with the effect; you should use whatever
   formatting you like for your own target data
*/
span.instructions table.calendar {border: 1px solid red; background-color: white; border-collapse: collapse; margin-left: 0;}
span.instructions table.calendar th {border: none;}
span.instructions table.calendar td {border: none; border-top: 1px solid blue; border-collapse: collapse;}



Play with it, and check it under different browsers. Hope it helps.

btw, another excellent site for CSS selectors is
http://css.maxdesign.com.au/selectutorial/
They have other excellent CSS tutorials too.

Jose
Order of the Sillies, Honoris Causam - bestowed by charlie_grumbles on NP 859 * OTTscar winner: Wordsmith - bestowed by yappobiscuts and the OTT on NP 1832 * Ecclesiastical Calendar of the Order of the Holy Contradiction * Please help addams if you can. She needs all of us.

EvanED
Posts: 4330
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Re: footnotes formatting: I'm an idiot and I need help!

Postby EvanED » Fri Jun 06, 2014 11:30 pm UTC

ucim wrote:xkcd does it using scripts (which come from google, IIRC); but I wanted a way to do it without scripts, and requiring the lowest level of hardware/software I could get away with. My solution uses a few properties of anchors and CSS; they are not universally supported *koff* Redmond *koff* but are widespread enough.

The best reference I found for doing this is
http://www.cssportal.com/css3-preview/s ... e-css3.php
Interesting that you single out MS in your "*koff* Redmond *koff*" even though the version at your link works in IE but not in Chrome. Bit of misplaced anger at all?

BTW, I realized an interesting difference between the behavior of both the What If "footnotes" and the mechanism ucim linked: it recollapses when the thing that controls hiding/showing loses focus. What I've done is a click toggle, using a very similar mechasim as ucim's but with a hidden checkbox to record the show/hide state.

User avatar
chridd
Has a vermicelli title
Posts: 818
Joined: Tue Aug 19, 2008 10:07 am UTC
Location: ...Earth, I guess?
Contact:

Re: footnotes formatting: I'm an idiot and I need help!

Postby chridd » Sat Jun 07, 2014 8:12 am UTC

ucim wrote:

Code: Select all

.peek:focus { display: none; }
.hide:focus { display: none; }

If I'm understanding this correctly, that won't work in a standards-conforming browser: when the link is hidden, it becomes unfocusable, and thus loses focus, restoring the page to how it was originally. It's also not clear to me if browsers are required to focus a link when it's clicked (the example doesn't work on Safari on my iPhone, and I suspect that's why, though it's an old version).
Edit: and also, what happens if you try to add a link to that (assuming hidden-by-default)? wouldn't the link hide as soon as you clicked it? might still work though, but it wouldn't be accessible—couldn't tab to it without it disappearing.

In any case, several years ago I came up with my own CSS-only solution to this, which used :target instead, something like this:

Code: Select all

<style>
.hidden {display:none;}
.hidden:target {display:inline;}
</style>

<p>Some text: <a href="#fn1">*</a> <span class=hidden id=fn1>this will display if you click the *</span>
It's simpler, but it has some disadvantages: it scrolls the screen when you click the link, and neither clicking the link again nor clicking elsewhere will hide the footnote.

(Of course, you could also just put the footnotes at the end of the document, and then link to them, like Wikipedia does; that would work in all browsers, and also work when the page is printed, and is also the simplest. Or put them in title text, though some browsers e.g. the iPhone browser can't display that.)
~ chri d. d. /tʃɹɪ.di.di/ (Phonotactics, schmphonotactics) · she(?)(?(?)(?))(?(?(?))(?))(?) · Forum game scores
mittfh wrote:I wish this post was very quotable...
flicky1991 wrote:In both cases the quote is "I'm being quoted too much!"

EvanED
Posts: 4330
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Re: footnotes formatting: I'm an idiot and I need help!

Postby EvanED » Sat Jun 07, 2014 4:15 pm UTC

chridd wrote:If I'm understanding this correctly, that won't work in a standards-conforming browser: when the link is hidden, it becomes unfocusable, and thus loses focus, restoring the page to how it was originally.
The link isn't hidden. The link controls other things being hidden, which it does by a sibling selector.

User avatar
chridd
Has a vermicelli title
Posts: 818
Joined: Tue Aug 19, 2008 10:07 am UTC
Location: ...Earth, I guess?
Contact:

Re: footnotes formatting: I'm an idiot and I need help!

Postby chridd » Sat Jun 07, 2014 4:42 pm UTC

EvanED wrote:
chridd wrote:If I'm understanding this correctly, that won't work in a standards-conforming browser: when the link is hidden, it becomes unfocusable, and thus loses focus, restoring the page to how it was originally.
The link isn't hidden. The link controls other things being hidden, which it does by a sibling selector.
The link is hidden (in addition to the other things being shown/hidden) in the version ucim posted (in the part that I quoted), in order to switch the link between "show" and "hide", although the effect could be accomplished without the link being hidden (if you don't care about changing the link to "hide").
~ chri d. d. /tʃɹɪ.di.di/ (Phonotactics, schmphonotactics) · she(?)(?(?)(?))(?(?(?))(?))(?) · Forum game scores
mittfh wrote:I wish this post was very quotable...
flicky1991 wrote:In both cases the quote is "I'm being quoted too much!"

User avatar
ucim
Posts: 6361
Joined: Fri Sep 28, 2012 3:23 pm UTC
Location: The One True Thread

Re: footnotes formatting: I'm an idiot and I need help!

Postby ucim » Sun Jun 08, 2014 12:12 am UTC

EvanED wrote:Interesting that you single out MS in your "*koff* Redmond *koff*" even though the version at your link works in IE but not in Chrome.
Yeah - Google is pulling a Microsoft. Their new motto: Don't get caught being evil. :)

And yes, the new IE seems to have a good reputation, but that's after twenty years of Microsoft's destruction of standards via size. Chrome is pulling the same thing now.

chridd wrote:If I'm understanding this correctly, that won't work in a standards-conforming browser: when the link is hidden, it becomes unfocusable, and thus loses focus, restoring the page to how it was originally.
It works in Firefox and Seamonkey. I'm not sure I completely understand the standards, but "becoming unfocusable" doesn't imply (to me) "losing the focus it had". In any case, the idea is that when "hide" is clicked, "peek" gets the focus displayed, and when "peek" is clicked, "hide" gets the focus displayed. It can't do it by itself though; that's why I had to have the layers of spans.

Here it states: "Just being off-screen does not mean the element is not being rendered. The presence of the hidden attribute normally means the element is not being rendered, though this might be overridden by the style sheets."

edit: I suppose another alternative is to change the z-index to put something you want hidden "below" everything. Worth trying.

Jose
Last edited by ucim on Sun Jun 08, 2014 3:46 am UTC, edited 1 time in total.
Order of the Sillies, Honoris Causam - bestowed by charlie_grumbles on NP 859 * OTTscar winner: Wordsmith - bestowed by yappobiscuts and the OTT on NP 1832 * Ecclesiastical Calendar of the Order of the Holy Contradiction * Please help addams if you can. She needs all of us.

speising
Posts: 2252
Joined: Mon Sep 03, 2012 4:54 pm UTC
Location: wien

Re: footnotes formatting: I'm an idiot and I need help!

Postby speising » Sun Jun 08, 2014 12:24 am UTC

it also doesn't work in ios safari.

User avatar
chridd
Has a vermicelli title
Posts: 818
Joined: Tue Aug 19, 2008 10:07 am UTC
Location: ...Earth, I guess?
Contact:

Re: footnotes formatting: I'm an idiot and I need help!

Postby chridd » Sun Jun 08, 2014 4:27 am UTC

ucim wrote:
EvanED wrote:Interesting that you single out MS in your "*koff* Redmond *koff*" even though the version at your link works in IE but not in Chrome.
Yeah - Google is pulling a Microsoft. Their new motto: Don't get caught being evil. :)
By the way, at least on my computer (Mac OS X 10.5), Safari (5.0.6) behaves identically to Chrome (21.0.1180.90), and Chrome is based on Apple's WebKit, so Google is not to blame here (and is also not the only browser where this doesn't work).

In any case, at least on my computer, the reason it doesn't work on Safari and Chrome is because those browsers don't focus links when you click on them. For instance, in this:

Code: Select all

<!doctype html>
<style>:focus {background:red;}</style>
<p><a href="#">link</a> <input>
the link doesn't get a red background when I click it in Safari or Chrome, but the input field does (and, furthermore, clicking on the link and then pressing Tab tabs to the link—further showing that it really doesn't have focus—and once I do that, it turns red). On the other hand, if I take the example from that site and replace the link with an input field, it works as it does in Firefox. Furthermore, in the original example, I can get the list to hide by tabbing to the link.

By the way, this is consistent with the rest of Mac OS X: other things that you interact with by clicking them once, like buttons and check boxes, also don't get focus when you click on them (and I believe they can't get focus at all unless you specifically enable it in System Preferences). And why would they? Once you've clicked a link or a button, you're usually done interacting with it, so there's no point in giving it keyboard focus. (Windows, however, does give all of those things focus when you click on them, or at least it did back when I used it.)

So it looks like that website's trick depends on some arbitrary choice that Apple and Microsoft made a long time ago, where browser makers just copied whatever convention was used on the system they were comfortable and/or main system they were targeting. (If the browsers had followed the standard where it says to follow platform conventions, that trick would probably work on Windows but not on Mac OS. Or iOS, because why would you even give keyboard focus to a link when there isn't a keyboard?)

I'm not sure I completely understand the standards, but "becoming unfocusable" doesn't imply (to me) "losing the focus it had".
The Standard wrote:When an element that is focused stops being a focusable element, [...], the user agent should synchronously run the unfocusing steps [which includes the element losing focus] for the affected element only.

Here it states: "Just being off-screen does not mean the element is not being rendered. The presence of the hidden attribute normally means the element is not being rendered, though this might be overridden by the style sheets."
I'd need to read more to see for sure if items with display: none are considered not rendered, but it suggests that the hidden attribute be implemented using display: none, so I'd assume that these links are not rendered and thus unfocusable by the standard. (I assume "being off-screen" is referring to scrolling.) All of the browsers I've tried (though they are old versions) make both links using display: none and those using visibility: hidden unfocusable.

In any case, none of the browsers I've tried actually seem to make the link lose focus.


That said, if you really want to make footnotes, and make sure they work on all browsers and are completely standards-compliant... just put them at the bottom of the page! K.I.S.S.
~ chri d. d. /tʃɹɪ.di.di/ (Phonotactics, schmphonotactics) · she(?)(?(?)(?))(?(?(?))(?))(?) · Forum game scores
mittfh wrote:I wish this post was very quotable...
flicky1991 wrote:In both cases the quote is "I'm being quoted too much!"

User avatar
ucim
Posts: 6361
Joined: Fri Sep 28, 2012 3:23 pm UTC
Location: The One True Thread

Re: footnotes formatting: I'm an idiot and I need help!

Postby ucim » Mon Jun 09, 2014 2:19 pm UTC

Interesting discussion. Yes, perhaps Microsoft no longer deserves the exclusivity of the opinion I have of it, though it did do a lot of damage when it was in a position to do so. Many browsers do not fully implement standards. This is to be expected, I suppose, in part because originally browsers were more free to display content as they thought fit given the HTML, and in part because programming can be challenging. It does seem that there are a lot of hacks however in order to get CSS to do something reasonable that the standards did not directly provide for.

I will try changing "display: none" to "z-index: -1;" or related statements. That should keep the element "rendered but invisible" and thus capable of receiving focus. No doubt that will cause something else unexpected. :)

speising wrote:it also doesn't work in ios safari.
The technique I posted, or the link I posted?

chridd wrote:That said, if you really want to make footnotes, and make sure they work on all browsers and are completely standards-compliant... just put them at the bottom of the page! K.I.S.S.
That would work for the OP, but I wasn't making footnotes, I was making a popup help thingie. (In actual use, I also put an ordinary anchor tag to the same content at the bottom of the page, for those for whom the trick doesn't work.)

edit - I found another way:

Check out this website. It misses iOS, and on IE<10 the transition doesn't work (so you can't click on links inside the popup) but is otherwise a nice alternative. In any case though, you should probably provide a vanilla link to a separate page for unsupported browsers.

Jose
Order of the Sillies, Honoris Causam - bestowed by charlie_grumbles on NP 859 * OTTscar winner: Wordsmith - bestowed by yappobiscuts and the OTT on NP 1832 * Ecclesiastical Calendar of the Order of the Holy Contradiction * Please help addams if you can. She needs all of us.


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 8 guests