---
source: https://jimeh.me/blog/2007/reflectionjs-modification-fixed-height-hehehe/
date: 2007-04-09
updatedDate: 2007-10-31
archive: zhuoqe.org
tags:
  - development
  - javascript
  - design
---

# reflection.js modification... fixed height... hehehe

Reflections are all the buzz right now, if you don't have reflections, you're
just not cool.

Reflections are all the buzz right now, if you don't have reflections, you're
just not cool, and if you do have reflections, you're just plain stupid for
making out like everyone else... hehe...

Eitherway i'm a huge reflections addict — yes i admit it, i'm an addict — and i
tend to use them a bit to much even sometimes, even in webdesign :D

This brings us to an awesome javascript which generates reflections for images
on the fly, many of you (two people who'll read this... lol) already know all
about [Cow](http://cow.neondragon.net/) (dead link)'s
[reflection.js](http://cow.neondragon.net/stuff/reflection/) (dead link) script.
The one thing i've wanted from it tho, is being able to set fixed height
reflections, rather than the reflections being X% the height of the image in
question.

Hence i spent this afternoon haxx0ring reflection.js to add a `rheightpx`
option, which with a little logic, you'll figure what it does ;)... while i was
at it, i also added a `rgap` option which puts a gap of X pixels between the
image and the reflection.

As for bugs, well, the `rheightpx` option works fine in all browsers except
Opera, which for reasons thats completely beyond my understanding, causes some
very weird effects... after 2 hours of testing and messing around, i can't find
any reason for why it does it, but maybe Cow will know, and hopefully he'll
implement my changes into his script \*hint\* :D

Also, the `rgap` option is a bit sketchy between browsers unfortunately :P

## Download

[Download: reflection-px-161.zip](data:application/zip;base64,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)

And if you're wondering about what you could possibly use a fixed height for,
check this...

![librarious bookcase view](https://jimeh.me/_astro/librarious-bookcase.DJL3qIAJ.jpg)

...which is the main reason i put effort into this modification today :D