Help with What If-style Citations

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

Moderators: phlip, Moderators General, Prelates

hppavilion1
Posts: 21
Joined: Wed Aug 27, 2014 1:00 am UTC

Help with What If-style Citations

Postby hppavilion1 » Sun Jan 25, 2015 11:28 pm UTC

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.

User avatar
Dopefish
Posts: 854
Joined: Sun Sep 20, 2009 5:46 am UTC
Location: The Well of Wishes

Re: Help with What If-style Citations

Postby Dopefish » Mon Jan 26, 2015 1:27 am UTC

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?

hppavilion1
Posts: 21
Joined: Wed Aug 27, 2014 1:00 am UTC

Re: Help with What If-style Citations

Postby hppavilion1 » Mon Jan 26, 2015 1:37 am UTC

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.
Last edited by hppavilion1 on Mon Jan 26, 2015 8:41 pm UTC, edited 1 time in total.

User avatar
Xanthir
My HERO!!!
Posts: 5215
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: Help with What If-style Citations

Postby Xanthir » Mon Jan 26, 2015 2:01 am UTC

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.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
azule
Saved
Posts: 2132
Joined: Mon Jul 26, 2010 9:45 pm UTC
Location: The land of the Golden Puppies and Rainbows

Re: Help with What If-style Citations

Postby azule » Mon Jan 26, 2015 9:49 am UTC

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.
Image

If you read this sig, post about one arbitrary thing you did today.

I celebrate up to six arbitrary things before breakfast.
Time does drag on and on and contain spoilers. Be aware of memes.

hppavilion1
Posts: 21
Joined: Wed Aug 27, 2014 1:00 am UTC

Re: Help with What If-style Citations

Postby hppavilion1 » Mon Jan 26, 2015 8:56 pm UTC

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.

User avatar
azule
Saved
Posts: 2132
Joined: Mon Jul 26, 2010 9:45 pm UTC
Location: The land of the Golden Puppies and Rainbows

Re: Help with What If-style Citations

Postby azule » Tue Jan 27, 2015 1:25 am UTC

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?
Image

If you read this sig, post about one arbitrary thing you did today.

I celebrate up to six arbitrary things before breakfast.
Time does drag on and on and contain spoilers. Be aware of memes.

hppavilion1
Posts: 21
Joined: Wed Aug 27, 2014 1:00 am UTC

Re: Help with What If-style Citations

Postby hppavilion1 » Tue Jan 27, 2015 1:37 am UTC

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.

User avatar
azule
Saved
Posts: 2132
Joined: Mon Jul 26, 2010 9:45 pm UTC
Location: The land of the Golden Puppies and Rainbows

Re: Help with What If-style Citations

Postby azule » Tue Jan 27, 2015 3:01 am UTC

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.
Image

If you read this sig, post about one arbitrary thing you did today.

I celebrate up to six arbitrary things before breakfast.
Time does drag on and on and contain spoilers. Be aware of memes.

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

Re: Help with What If-style Citations

Postby ucim » Tue Feb 03, 2015 2:53 am UTC

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
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.

hppavilion1
Posts: 21
Joined: Wed Aug 27, 2014 1:00 am UTC

Re: Help with What If-style Citations

Postby hppavilion1 » Wed May 27, 2015 11:33 pm UTC

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

DaveInsurgent
Posts: 207
Joined: Thu May 19, 2011 4:28 pm UTC
Location: Waterloo, Ontario

Re: Help with What If-style Citations

Postby DaveInsurgent » Thu May 28, 2015 12:34 am UTC

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)

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

Re: Help with What If-style Citations

Postby ucim » Wed Jun 03, 2015 4:16 am UTC

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
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.

DaveInsurgent
Posts: 207
Joined: Thu May 19, 2011 4:28 pm UTC
Location: Waterloo, Ontario

Re: Help with What If-style Citations

Postby DaveInsurgent » Wed Jun 03, 2015 2:40 pm UTC

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..

User avatar
Xanthir
My HERO!!!
Posts: 5215
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: Help with What If-style Citations

Postby Xanthir » Wed Jun 03, 2015 5:44 pm UTC

No, don't use a javascript: url either. Just preventDefault() from the click handler, and it'll prevent navigating to "#".
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

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

Re: Help with What If-style Citations

Postby ucim » Wed Jun 03, 2015 6:36 pm UTC

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
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.

DaveInsurgent
Posts: 207
Joined: Thu May 19, 2011 4:28 pm UTC
Location: Waterloo, Ontario

Re: Help with What If-style Citations

Postby DaveInsurgent » Thu Jun 04, 2015 2:31 am UTC

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.

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

Re: Help with What If-style Citations

Postby ucim » Thu Jun 04, 2015 5:21 am UTC

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
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.

User avatar
Xanthir
My HERO!!!
Posts: 5215
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: Help with What If-style Citations

Postby Xanthir » Fri Jun 05, 2015 5:20 am UTC

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.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

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

Re: Help with What If-style Citations

Postby ucim » Fri Jun 05, 2015 3:15 pm UTC

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
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.

User avatar
Xanthir
My HERO!!!
Posts: 5215
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: Help with What If-style Citations

Postby Xanthir » Fri Jun 05, 2015 3:50 pm UTC

(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

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

Re: Help with What If-style Citations

Postby ucim » Fri Jun 05, 2015 4:39 pm UTC

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
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.

User avatar
Xanthir
My HERO!!!
Posts: 5215
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: Help with What If-style Citations

Postby Xanthir » Fri Jun 05, 2015 5:41 pm UTC

This is supported to *way* back. Dunno if it's IE6 or 7 that added :checked support, but something like that.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
hotaru
Posts: 1021
Joined: Fri Apr 13, 2007 6:54 pm UTC

Re: Help with What If-style Citations

Postby hotaru » Fri Jun 05, 2015 7:03 pm UTC

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.

Code: Select all

factorial product enumFromTo 1
isPrime n 
factorial (1) `mod== 1


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 2 guests