Page 1 of 1

Help with What If-style Citations

Posted: Sun Jan 25, 2015 11:28 pm UTC
by hppavilion1
I'm making a website for a school project and would like to use What If-style citations to make it pretty. I found a thread on the fora about it, but the answers given don't work. It just prints: "[1]0.54 (•)>m-3" into the middle of the page. Anyone have any help on this? I'm probably being REALLY stupid right now.

EDIT: I have discovered that the way it works is it displays the number followed by whatever text I put in the area that SHOULD contain the text that pops up when you click it.

EDIT 2: I REALLY need help with this.

Re: Help with What If-style Citations

Posted: Mon Jan 26, 2015 1:27 am UTC
by Dopefish
I don't know html or web site things, but have you tried just viewing the page source on the what if pages and seeing if you can just copy the appropriate code?

Re: Help with What If-style Citations

Posted: Mon Jan 26, 2015 1:37 am UTC
by hppavilion1
Dopefish wrote:I don't know html or web site things, but have you tried just viewing the page source on the what if pages and seeing if you can just copy the appropriate code?

Yes. I have.

Re: Help with What If-style Citations

Posted: Mon Jan 26, 2015 2:01 am UTC
by Xanthir
Here's a basic example, using the <details> element.

It has a few problems. One, it only works in browsers that support <details>, like Chrome. Two, it has the ugly arrow, which can't currently be styled away (or maybe it can, but I'm too lazy to look it up). Three, the <details> element auto-closes <p> elements, so you can't use <p>. But it demonstrates the basic example.

To make it work more robustly, you'll need JS. Swap out the <details> element for a <span class='ref'>, and use spans for the summary/div children too. That'll stop the <p>-auto-closing.

Then just attach click event handlers to the ref elements. On click, toggle whether the "content" child is display:block or display:none. That's it. Everything else is the same as in my example.

Re: Help with What If-style Citations

Posted: Mon Jan 26, 2015 9:49 am UTC
by azule
JSFiddle[1] using official source code. Requires JQuery.

I tried fiddling around with a CSS only solution, but *shrug* not tonight.

[1]No guarantee that I know how to use JSFiddle. User beware.

Re: Help with What If-style Citations

Posted: Mon Jan 26, 2015 8:56 pm UTC
by hppavilion1
azule wrote:JSFiddle[1] using official source code. Requires JQuery.

I tried fiddling around with a CSS only solution, but *shrug* not tonight.

[1]No guarantee that I know how to use JSFiddle. User beware.

OK, it just refuses to work. I put the CSS in a stylesheet and used the right statements to use it. I copied the javascript and put it in the file (I tried in TWO different locations.)
I made sure it used jsquery.
I put the EXACT html into the file. And the citation, well, it just printed like this[1]I mean like this.

Re: Help with What If-style Citations

Posted: Tue Jan 27, 2015 1:25 am UTC
by azule
If that isn't working, is it possible Javascript is disabled in the browser you're using? Is this being done at school? There might be security restrictions.

What browser and version have you tried this code on?

Re: Help with What If-style Citations

Posted: Tue Jan 27, 2015 1:37 am UTC
by hppavilion1
azule wrote:If that isn't working, is it possible Javascript is disabled in the browser you're using? Is this being done at school? There might be security restrictions.

What browser and version have you tried this code on?

I was using firefox and it WAS at school, but I'm pretty sure they don't have javascript restrictions. Also, it worked on the site I was sent to, but not on the one I made with the code.

Re: Help with What If-style Citations

Posted: Tue Jan 27, 2015 3:01 am UTC
by azule
It might be that all the code needs to be local, including jquery. Otherwise there might be cross-site restrictions (i.e. to stop remote hacking).

You could test Javascript by just getting an alert box to pop up, then you'd know.

Re: Help with What If-style Citations

Posted: Tue Feb 03, 2015 2:53 am UTC
by ucim
Check here. Start at the beginning of the thread; the post (of mine) I linked to is my first CSS-only solution. It has a few issues, I did a few fixes and posted subsequently. It's not perfect, but it may help you.

The real problem is that a web page is not a set of commands, but rather, a set of suggestions to the browser. The browser can ignore them if it feels like it (such as if various elements are not supported, or the browser is made in Redmond).

I do not trust javascript. Period.
Spoiler:
Although some javascript is innocent, much javascript is an excuse to implement even more detailed user tracking than access logs provide, and to deliver content that is tailored for you (by others, for their benefit). Trouble is, you can't tell which is which. I use NoScript; it lets me block by source but not by effect. And I've found scads of web pages that invoke scripts from sites I've never heard of, and sites I don't want anything to do with (facebook, twitter, google_analytics, I'm looking right at you!) So, as a "best practices" I think we, as programmers, need to avoid training users to simply run scripts willy nilly. This means finding totally non-script solutions, implementing them, and promoting them.
These are CSS-only methods that work on browsers that support certain CSS elements, and I have tried to keep them to commonly supported elements. Use a fallback (ordinary anchor tag) for those browsers that don't support these elements. (ipad, I'm looking at you! Older browsers have an excuse, Apple does not.)

Jose

Re: Help with What If-style Citations

Posted: Wed May 27, 2015 11:33 pm UTC
by hppavilion1
Sorry for the bump, but for any curious, I learned JS and figured out that I wasn't importing JQuery. I'm stupid. Problem solved

Re: Help with What If-style Citations

Posted: Thu May 28, 2015 12:34 am UTC
by DaveInsurgent
I think this: http://jsfiddle.net/qvquoxou/1/

Is also a lighter weight version of the non-JavaScript implementation (though anyone trying to avoid JavaScript is basically going to have to give up computering in the next few years) -- if you can accept the lack of toggle (so it handles focus lost, but not opening multiple citations at once which I personally consider a benefit)

Re: Help with What If-style Citations

Posted: Wed Jun 03, 2015 4:16 am UTC
by ucim
A problem with that method is that the citation is itself a link, with an empty anchor element.
< a href="#" >...

and this will cause the window to scroll to the top of the content in some browsers. (It's a problem with one of my methods too; I eventually settled on the other, and a fallback page (ordinary link) for i-things and older browsers.)

Jose

Re: Help with What If-style Citations

Posted: Wed Jun 03, 2015 2:40 pm UTC
by DaveInsurgent
I think you can just use "javascript:;" as the href then.

And you could always make the citation anchor point to an id that is given to either the citation element itself, or the near/surrounding content..

Re: Help with What If-style Citations

Posted: Wed Jun 03, 2015 5:44 pm UTC
by Xanthir
No, don't use a javascript: url either. Just preventDefault() from the click handler, and it'll prevent navigating to "#".

Re: Help with What If-style Citations

Posted: Wed Jun 03, 2015 6:36 pm UTC
by ucim
Xanthir wrote:Just preventDefault() from the click handler, and it'll prevent navigating to "#".
How do you do that? (No javascript, remember?) Will getting the user to put chewing gum on the screen help? :)

DaveInsurgent wrote:And you could always make the citation anchor point to an id that is given to either the citation element itself, or the near/surrounding content..
Now why didn't I think of that? Of course, it may still jump.

Jose

Re: Help with What If-style Citations

Posted: Thu Jun 04, 2015 2:31 am UTC
by DaveInsurgent
Xanthir is saying just put a onclick="event.preventDefault()" on the citation. I think that works and is the correct solution, I said javascript:; because I wasn't sure if "click" had any corner cases on any browsers with touch etc.

Re: Help with What If-style Citations

Posted: Thu Jun 04, 2015 5:21 am UTC
by ucim
DaveInsurgent wrote:Xanthir is saying just put a onclick="event.preventDefault()" on the citation.


No joy, at least if scripts are disabled (which is the point). Isn't event.preventDefault() a script thing? Either that or I'm doing it wrong. (I put it inside the anchor tag)

Jose

Re: Help with What If-style Citations

Posted: Fri Jun 05, 2015 5:20 am UTC
by Xanthir
Without scripting you have to use the checkbox tricks, in which case you're not using an <a> at all in the first place, you're using a <label>, and there's no hash issues.

Re: Help with What If-style Citations

Posted: Fri Jun 05, 2015 3:15 pm UTC
by ucim
Xanthir wrote:Without scripting you have to use the checkbox tricks, in which case you're not using an <a> at all in the first place, you're using a <label>, and there's no hash issues.

What are the checkbox tricks?

Jose

Re: Help with What If-style Citations

Posted: Fri Jun 05, 2015 3:50 pm UTC
by Xanthir

Re: Help with What If-style Citations

Posted: Fri Jun 05, 2015 4:39 pm UTC
by ucim
Thanks - that is pretty cool! Hopefully it degrades gracefully for unsupported browsers (I need to go back to prehistory) but looks nifty on modern ones.

Jose

Re: Help with What If-style Citations

Posted: Fri Jun 05, 2015 5:41 pm UTC
by Xanthir
This is supported to *way* back. Dunno if it's IE6 or 7 that added :checked support, but something like that.

Re: Help with What If-style Citations

Posted: Fri Jun 05, 2015 7:03 pm UTC
by hotaru
Xanthir wrote:This is supported to *way* back. Dunno if it's IE6 or 7 that added :checked support, but something like that.

according to http://caniuse.com/#feat=css-sel3, it's IE 9 that added it.