Comments on: Reflection.js 1.8

By: Adam

Adam — Thu, 25 Jun 2009 02:27:02 +0000

I really like the script but I was wonder if there was a way to make the reflection overlap divs below it? As in I am using it for part of a header and would like the reflected image to overlap the top part of the body div which is located right below the header div.

By: magj

magj — Sat, 17 May 2008 08:42:30 +0000

Hi!

is there any workaround to have reflection for more than a class?
i.e.: Class1: reflected, Class2=imagereflect

By: Cow

Cow — Fri, 21 Mar 2008 12:30:58 +0000

Thanks for the heads up alinear! I decided to go for the first option. I figured that for backwards compatibility I’d need to provide a getElementsByClassName function and that given it was being defined by the script, it might as well be used. It’s been renamed to document.myGetElementsByClassName. I had given thought to getting the script to work with the native getElementsByClassName function which may be much faster but it’d add another code path.

I’ve released version 1.9 with the fix!

And iSynth: I’m afraid that website has the album cover and reflection as an image! You could check out a script called reflex.js which is very similar to reflection.js but allows you to tilt images, etc.

By: iSynth

iSynth — Fri, 21 Mar 2008 11:09:16 +0000

hallo Cow! one more question: what parameter should be changed in the reflection.js to make the image look a bit turned from left to right?

well to illustrate my mean visit this page http://www.majorrecords.de/news

there are albums’ covers on the right-middle part of the page, under AKTUELLE-VEROFFENTLICHUNGEN section

see?

By: Julien

Julien — Fri, 21 Mar 2008 05:52:48 +0000

Cow,

Thanks for the tip on the cover (I found it in a earlier post too, I guess I was too lazy to look backwards, sorry about that). Instead of changing my img or canvas still as CSS level I simply added:

reflection.style.border = ’0px’;

A few lines after:

var reflection = document.createElement(‘img’);

And it seems to achieve the same thing!

Thanks,
Julien

By: alinear

alinear — Thu, 20 Mar 2008 22:12:28 +0000

Hey!

Thanks for the great script. Just thought I’d let you know of a bug that occurs with the new webkit (Safari 3.1) build:

Safari now supports a native ‘getElementsByClassName’. Your script checks to see if the document already has this method installed (rightfully so in the event someone uses your script with prototype or another framework, etc.), and if so it delegates to it vs. the internal means of creating the elements stack.

The problem is – the way safari’s ‘getElementsByClassName’ works is it appears to return a stack of the elements by class name, but when you modify the class name of those elements, the stack itself updates (they are no longer present). So in essence, when your add reflection method changes the class to ‘reflected’ – those elements are no longer popped from the ‘elementsByClassName’ stack and end up messing up its evident length.

The result is only every other element renders because the pointer/count is messed up…

Workaround options:

- force your script to use your own internal ‘getElementsByClassName’ since it does not make a reference to a stack that elements get removed from as their class names change

- do not change the class names to ‘reflected’

- in your auto-render method, loop backwards from the max element to 0 so that when element’s class names are being modified they are always the last element in the stack (lifo).

Hope this helps!

By: Cow

Cow — Wed, 19 Mar 2008 09:19:51 +0000

Richard: I’m not sure whats happening but you can check out some of the demo files I provided for examples of aligned images, etc.

Wolf: Good idea! Will do!

Julien: Try setting the border of canvas to 0 in CSS e.g. canvas { border: 0; } You could make it only apply to reflected images using the class .reflected

By: Julien

Julien — Tue, 18 Mar 2008 19:21:44 +0000

Hello!

Nice little piece of script to make display pictures a little more appealing. It work great for me (some reflections not working with FF3 though) but I have a problem with IE7: when “reflecting” a picture that happens to be a link as well, even though the original has , the reflection will generate the default blue border corresponding to a link.

Is there a way to detect the border size in the script and avoid generating it?

Example of what I mean: http://japanld.online.fr/_misc/reflect-border.png

Rgds,
Julien

By: wolf

wolf — Tue, 18 Mar 2008 11:44:57 +0000

The onload-trigger substitution does not work in Safari and IE7, if a XML/XSL-page containing ‘reflection images’ is interpreted by the browser. FF2 does it. Commenting out the onload-lines in your script-file and adding the class-call-function addReflections() directly into the XSL-script does work Maybe you give a hint in your description, how to do it manually, if there are load-problems.
It would be also nice, if you include a complete (BSD or MIT) licence-description-file in your download-zip … as usual behavior we like & need it.

By: Richard Holt

Richard Holt — Tue, 18 Mar 2008 00:04:08 +0000

This is a great script, just amazing. I’m using it in a photography portfolio site I’m building for a friend. I’m having trouble centering images with reflections though, they are centred for the instant before the reflection pops in as the page loads, but as soon as it does, the image pops over to the left. Can you think of any reason for this?

I’m using it here for example:
http://www.cliveframpton.com/index.php/gallery/landscapes/empire-state-building/

It’s all very unfinished, but eventually you will be able to browse through the images on pages like this.

Any ideas?

Once again, GREAT script…!