Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The Single Piece of JavaScript on HN

blog.watchandcode.com

Post reply on HN
Print view View original

71–80 of 195 posts

Re: The Single Piece of JavaScript on HN

#71

Post by mintplant »

BowBun wrote: post #8

Not much to say, really. Just some simple code. What I'm curious is if someone can reiimplement this without and javascript.

This was a tough puzzle to crack, but I've got it fully solved here:

https://jsfiddle.net/5c0ruh8s/10/

Works cross-browser, submits a POST request to record votes, and hides both vote buttons after submitting.

Each up/down arrow is an , part of a form that submits to a hidden iframe. When either goes :active, a CSS sibling selector sets the height of a floating div from 0px to 100% to cover up the vote arrows. There's no selector for "button that's been clicked once before", so I use a CSS transition that has a delay of 0s to expand the height and a delay of 99999999s (basically forever) to shrink the height back down again when the arrow button goes from active->inactive. While the arrow button is :active I use "pointer-events: none" to make sure the click goes through, but once the form is submitted and the button goes inactive the div becomes opaque to click events again, so the UI only allows a vote to go through once.

No JavaScript required!

Re: The Single Piece of JavaScript on HN

#72

Post by TazeTSchnitzel »

seanalltogether wrote: post #3

If we ever make it around to a second piece of javascript on here, can I request that it be a collapse comment function? I promise i won't ask for anything else.

I use this bookmarklet:

  javascript:(function()%7Bfunction%20getScript(url,success)%7Bvar%20script=document.createElement('script');script.src=url;var%20head=document.getElementsByTagName('head')%5B0%5D,done=false;script.onload=script.onreadystatechange=function()%7Bif(!done&&(!this.readyState%7C%7Cthis.readyState=='loaded'%7C%7Cthis.readyState=='complete'))%7Bdone=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script)%7D%7D;head.appendChild(script)%7DgetScript('//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',function()%7Bif(typeof%20jQuery!=='undefined')%7Bif(!$('body').hasClass('collapsible-comments'))%7B$('body').addClass('collapsible-comments');var%20span_html='%3Cspan%20style=%5C'cursor:pointer;margin-right:10px;%5C'%20class=%5C'expand-handle%5C'%3E%5B-%5D%3C/span%3E';if(window.location.href.indexOf('item?id=')!=-1)%7B$('center%20%3E%20table%20%3E%20tbody%20%3E%20tr:eq(2)%20%3E%20td%20%3E%20table:eq(1)%20span.comhead').prepend(span_html)%7Delse%20if(window.location.href.indexOf('threads?id=')!=-1)%7B$('center%20%3E%20table%20%3E%20tbody%20%3E%20tr%20%3E%20td%20%3E%20table%20span.comhead').prepend(span_html)%7D$('.expand-handle').live('click',function()%7Bcurrent_level_width=parseInt($(this).closest('tr').find('td:eq(0)%20%3E%20img').attr('width'),10);$(this).closest('table').closest('tr').nextAll().each(function(index,el)%7Bvar%20elWidth=parseInt($('tbody%20%3E%20tr%20%3E%20td%20%3E%20img',this).attr('width'),10);if(elWidth%3Ecurrent_level_width)%7Bif(elWidth%3C=inner_level_width)%7Binner_level_width=1000;$(this).hide()%7Dif(inner_level_width==1000&&$('.comment',this).css('display')=='none')%7Binner_level_width=elWidth%7D%7Delse%7Breturn%20false%7D%7D);inner_level_width=1000;$(this).text('%5B+%5D').addClass('expand-handle-collapsed').removeClass('expand-handle');$(this).closest('div').nextAll().hide();$(this).closest('div').parent().prev().hide();$(this).closest('div').css(%7B'margin-left':'18px','margin-bottom':'5px'%7D)%7D);$('.expand-handle-collapsed').live('click',function()%7Bcurrent_level_width=parseInt($(this).closest('tr').find('td%20%3E%20img').attr('width'),10);$(this).closest('table').closest('tr').nextAll().each(function(index,el)%7Bvar%20elWidth=parseInt($('tbody%20%3E%20tr%20%3E%20td%20%3E%20img',this).attr('width'),10);if(elWidth%3Ecurrent_level_width)%7Bif(elWidth%3C=inner_level_width)%7Binner_level_width=1000;$(this).show()%7Dif(inner_level_width==1000&&$('.comment',this).css('display')=='none')%7Binner_level_width=elWidth%7D%7Delse%7Breturn%20false%7D%7D);inner_level_width=1000;$(this).text('%5B-%5D').addClass('expand-handle').removeClass('expand-handle-collapsed');$(this).closest('div').nextAll().show();$(this).closest('div').parent().prev().show();$(this).closest('div').css(%7B'margin-left':'0','margin-bottom':'-10px'%7D)%7D)%7D%7D%7D);var%20current_level_width=0;var%20inner_level_width=1000%7D)();
I can't remember who wrote it, but it works.

Re: The Single Piece of JavaScript on HN

#73

Post by TazeTSchnitzel »

mintplant wrote: post #71
BowBun wrote: post #8

Not much to say, really. Just some simple code. What I'm curious is if someone can reiimplement this without and javascript.

This was a tough puzzle to crack, but I've got it fully solved here: https://jsfiddle.net/5c0ruh8s/10/ Works cross-browser, submits a POST request to record votes, and hides both vote buttons after submitting. Each up/down arrow is an , part of a form that submits to a hidden iframe. When either goes :active, a CSS sibling selector sets the height of a floating div from 0px to 100% to cover up the vote arrows. There'…

I feel like there must be a simpler way than that.

Re: The Single Piece of JavaScript on HN

#74

Post by krapp »

mchahn wrote: post #66
krapp wrote: post #53

Earlier quoted context omitted.

The downvotes are how you know.

Now I see you are downvoted. I thought your comment was humourous which is always alright to me. In My Humble Opinion downvotes are given out a little too easily here (OK, I'm ready for more downvotes). I hope when I get the downvote ability I will use it wisely, not that many aren't wise.

Downvotes aren't worth worrying about on Hacker News, nor are upvotes. They do tend to even out in time so that only the really objectionable comments get downvoted a lot (and eventually flagged) but because pg more or less decided that there didn't need to be a standard for either, I treat them as worthless.

Re: The Single Piece of JavaScript on HN

#75

Post by TazeTSchnitzel »

dfabulich wrote: post #30
Normal_gaussian wrote: post #18

Earlier quoted context omitted.

Well there appear to be two things stopping this: - Hiding two elements on the page (one can be hidden with the CSS :visited selector) - Remaining with your position on the page whilst also sending a message to the server and without opening new windows. So the only way to do the task is to send a full request to the server which would return you to the page with the buttons correctly disabled. Extra load on the serv…

You could render the vote buttons in iframes, so just the iframe would reload. But you'd have to load N iframes for N vote buttons on page load. Not worth the performance hit.

> But you'd have to load N iframes for N vote buttons on page load.

Not with the iframe srcdoc= attribute! That allows you to make an iframe that initially loads HTML you've specified inline.

Re: The Single Piece of JavaScript on HN

#76

Post by mintplant »

TazeTSchnitzel wrote: post #73
mintplant wrote: post #71

Earlier quoted context omitted.

This was a tough puzzle to crack, but I've got it fully solved here: https://jsfiddle.net/5c0ruh8s/10/ Works cross-browser, submits a POST request to record votes, and hides both vote buttons after submitting. Each up/down arrow is an , part of a form that submits to a hidden iframe. When either goes :active, a CSS sibling selector sets the height of a floating div from 0px to 100% to cover up the vote arrows. There'…

I feel like there must be a simpler way than that.

That's what I thought too, at first. Some of the iterations I went through before reaching this point:

- Links for the up/down arrows with target=, that set "visibility: hidden" on :visited. But oh, only color-changing CSS properties are allowed for :visited selectors.

- Links for the up/down arrows with unicode ▲ and ▼ that set their color to the page background color on :visited, using a sibling selector to hide the other arrow as well once either has been clicked. But oh, sibling selectors are forbidden in conjunction with :visited selectors. Same for selecting nested elements inside a :visited link - only the simplest uses of :visited are allowed. One could wrap both arrows in the same tag, but then there'd be no differentiating between an up/down vote.

- An invisible radio button next to each up/down arrow, with both wrapped inside a so that clicking the arrow causes the radio button to become :checked. Use a sibling selector to hide the arrows when either radio button becomes checked. But oh, if you click a link inside a it's not counted as marking the radio button as selected.

- An invisible radio button hidden under each vote up/down image. Each radio button is wrapped in an tag that causes a hidden iframe to navigate to the voting link. The vote up/down buttons are "pointer-events: none", so trying to click on one really marks the radio button underneath as selected and triggers a link click. This works fine in Firefox, but in Chrome, marking a radio button as selected doesn't trigger a link click.

Re: The Single Piece of JavaScript on HN

#77

Post by mchahn »

krapp wrote: post #74
mchahn wrote: post #66

Earlier quoted context omitted.

Now I see you are downvoted. I thought your comment was humourous which is always alright to me. In My Humble Opinion downvotes are given out a little too easily here (OK, I'm ready for more downvotes). I hope when I get the downvote ability I will use it wisely, not that many aren't wise.

Downvotes aren't worth worrying about on Hacker News, nor are upvotes. They do tend to even out in time so that only the really objectionable comments get downvoted a lot (and eventually flagged) but because pg more or less decided that there didn't need to be a standard for either, I treat them as worthless.

I take it personally which I know I shouldn't. I think others are the same. You can tell when people say "Why was I downvoted?!".

Everyone wants peer approval. Also you get the same feeling you get when you are being denigrated by someone who doesn't have the backbone to come out and say who they are. I say you get the feeling, not that it is true.

Re: The Single Piece of JavaScript on HN

#79

Post by lifthrasiir »

raldi wrote: post #42
mwcampbell wrote: post #38

The HTTP request for voting should be a POST request, not a GET request, since it changes state. So both the JS hack involving an image and the non-JS fallback are broken. The JS function should use XHR, and I guess the non-JS fallback should be a form with an image button, not a link.

"However, this is not completely true. It means: it won't change the resource representation. It is still possible, that safe methods do change things on a server or resource, but this should not reflect in a different representation." http://restcookbook.com/HTTP%20Methods/idempotency/

It is possible to do so but may not be desirable anyway. It is completely possible to wire a fork bomb to the safe methods; you probably don't want to enable the bomb via crawler however.

Re: The Single Piece of JavaScript on HN

#80

Post by mchahn »

mchahn wrote: post #66
krapp wrote: post #53

Earlier quoted context omitted.

The downvotes are how you know.

Now I see you are downvoted. I thought your comment was humourous which is always alright to me. In My Humble Opinion downvotes are given out a little too easily here (OK, I'm ready for more downvotes). I hope when I get the downvote ability I will use it wisely, not that many aren't wise.

It is kind of fascinating that my votes are going up and down rapidly. Apparently it is a battle of up-voters vs. down-voters. I must have hit a touchy subject.

P.S. I apologize for all the posts. I'll tone it down now.

Post reply on HN