joshbuddy / spoiler-alert Goto Github PK

When I first hovered over the sample spoilered image and saw it get less blurry, I wondered “why is the unspoilered image blurry?” Then I tried clicked on the image, and that got me the actual image. It didn’t occur to me to click on the image at first, because the mouse pointer was a normal arrow. A pointing hand cursor would have fixed that. Text also has this problem – it currently has an I-beam, leading one to expect that you can select the text, but that clicking won’t do anything special.

This CSS changes the cursor appropriately on hover, given the call $('spoiler, .spoiler').spoilerAlert():

spoiler, .spoiler {
    cursor: pointer;
}

Apply that CSS property to the selected elements is probably the easiest way to implement this. That would mean calling jQuery’s css function like $element.css('cursor', 'pointer').

I’m not quite sure where in your JavaScript code it would go. My best guess is right after this line – you would write $spoiler.css('cursor', 'pointer').

When hovering over a Spoiler Alert, the max blur changes to the partial blur. When clicking the blur is removed. When clicking again, the blur is restored. It is then set to the max blur, which is a bit unlogical, because when I clicked, I was hovering over the blurred item, so I would expect it to be set to the partial blur.

a blur of 0px still looks a little odd in chrome -- slightly boldface and blurry. if i remove the "filter" style from the element, it looks normal again.

a guess: chrome is rendering pixels when it does the blur, even at 0px, only without a filter, does it render in normal retina text.

fix would be to remove the "filter" css-es when the transition is complete.

http://i.imgur.com/u7J4OIX.png

I wish there was fallback to css with hover selector or something like that.

Add time option that when you click on the text/image, the text/image will be only visible for a provided time in seconds and it will be blurred after the time expires. Its good for sensitive information. The time should be in seconds or miliseconds

Add option to not blur the text/image after you click on it. Its hard to copy the text as when you want to select it, it will be blurred.

After seeing the browser support, I thought maybe I could use this to get blur effects on images, which this plugin does quite well. I'm just wondering if its possible to remove hover and click events altogether for some initialization?

This is the screenie of what the sample site looks like in Chrome for Android immediately after loading: http://imgur.com/9iC14bh

Clicking does nothing.

In the Hacker News discussion someone mentions support for browsers with Javascript disabled seeing the teaser text and I think it's a legitimate concern. I posted a proof of concept in the thread, and will post it here for discussion. This is a purely CSS only solution for users with Javascript disabled.

What do you think of this proof of concept?

this is teaser text
.teasertext { background: #000; color: #000; }
.teasertext:focus { background: inherit; color: inherit; outline: none; }

I think perhaps it could reveal the text a little bit when you hover over it by perhaps bumping up the color of the text to 444 and background to 333 or something. Or RGBa values could be used instead or perhaps for text the text-shadow (although not widely supported) could also be considered.

I just checked the demo and it seems to me like the blur in the text is so heavy, the text is barely visible. It requires quite a bit of focus to tell if there is supposed to be a blurred text in there, or not. Imho, I think the "un-hovered" blur value should be at about 6px and go down to 2-3px when in hover state.

Hi,
Great plugin!
I'm wondering if it's possible to reveal the original text/image on hover instead of clicking to see the original text. This can be great.
Is this possible ?