Apple-like Retina Effect With jQuery | Hacker News Reader

Apple-like Retina Effect With jQuery

tutorialzine.com

39 pointsTutorialzine19 comments

So.. a MAGNIFYING GLASS effect‽

The constant use of this "retina" term is dubious when referring to the actual iPhone screen, never mind this.

p.s. Nice job.

The term “jeweler’s loupe” is what I’d use myself for this demo...

Apple’s use of the term “retina” only serves to remind me of Wired magazine’s original attempt at a website way back when. (They called their Life magazine-like section “retina.”) It’s a common, almost everyday word that nevertheless sounds pretentious or sci-fi—ish.

Wow, welcome to CSS demos of 6 years ago. http://persistent.info/files/20040508.magnifier/

This is the power of CSS3: doing the same things we've always done.

Your example uses javascript, while the retina demo does not.

> This is the power of CSS3: doing the same things we've always done.

True, but CSS3 enables us to do the same things without javascript.

> Your example uses javascript, while the retina demo does not.

Except that it is made with JQuery, so it _is_ using JS.

Correct. Not my day. Should read the whole article, including the topic, before posting anything.

Also, no one cares if something uses css rather than js. The endless "X done only using Y" is cool from a hacker perspective, pushing boundaries is where the awesome hacks come. But users will just go 'meh'.

Precisely. Where do we have CSS without JavaScript? And for people who disable JavaScript in their browsers, they get the broken websites they deserve.

I think I win the "Earliest Pre-existing Example" award on this one: 1998.

Fire up a copy of IE (or Netscape 4) and check it out:

http://web.archive.org/web/20010314213015/www.jasonkester.co...

you lose points for not having forward compatibility. think of the future!

Indeed. Forward compatability for IE is groovy and all, but how does a fella go about predicting document.getElementById back in the days of document.all and document.layers?

It's pretty neat that they used the border-radius to make the actual div perfectly round. I love it when a feature is used for something completely different than what was intended (make rounded-corners).

Wow, you need Flash to access the demo/download links?

Is this to prevent someone from scraping their tutorials?

One issue with this that I'd like to point out is that the background is apparently still a .png, so this isn't something you can implement on an HTML <div> out of the box (unless I'm misreading the source).

Was not having it magnify centered around my mouse position, at the edges of the rectangle, a design decision, or a limitation of the tools?

Very nice. Except the ugly Windows-like font rendering without subpixel anti-aliasing in the "webpage" image.

These days, Linux should be the go-to reference for bad font rendering. I'm sure it can be made to look decent, but it often doesn't.

demo would be better if it were a horizontal bar shape instead of a circle.

Quite easy to fix actually as they use CSS3 border-radius to make the loupe a circle. Just change that bit and you have a rectangle!

Reply on news.ycombinator.com