Ken's Tech Tips

Related Posts

1. Reflection.js 1.6
2. Reflection.js 1.7
3. Reflection.js 1.9
4. Reflection.js version 1.5
5. Reflection.js 1.8

50 Responses to “Reflection.js 2.0”

1. # SafePiton 01 Oct 2008 at 3:43 am

   Just updated my site and it works great! Keep up the great work!

2. # Paulon 01 Oct 2008 at 10:12 am

   Just added the script to my blog to try it out.

3. # Rodrigoon 10 Oct 2008 at 10:41 am

   Just tested it, works perfect in most of the browsers.

   Just a correction: It does not work well on IE6 so, on the readme page, where it says that it’s supported from IE5.5 up it’s not very accurate.

   Other than that, thanks and great job

4. # Gildason 18 Oct 2008 at 2:36 pm

   Do you how how to make to get CSS Tooltip work with reflection.js? I tried many CSS Tooltip (info bubble) samples, but none of them work due to the way reflection.js wraps everything in a div tag.
   It seems Safari and Firefox do no react the same way. As soon as i remove the “reflect” attributes to me images, tooltip css works like a charm.

   Here is the code I use :

   a.tooltip {
   position:relative; /*this is the key*/
   z-index:24;
   }

   a.tooltip span {
   display:none;
   }

   a.tooltip:hover {
   border: 0;
   position: relative;
   z-index: 25;
   text-decoration:none;
   }

   a.tooltip:hover span {
   font-style: normal;
   display:block;
   position:absolute;
   bottom: 0px;
   left:60px;
   padding: 10px;
   background-color: rgba(0,0,0,0.9);
   width:200px;
   text-align:left;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   }

   You can see how strangely it behaves on this page :
   http://www.1dlabel.fr/boutik.html

   And how it works well on this one (since I removed the reflection tags) :
   http://www.1dlabel.fr/presse.html

   Thanks in advance for your help.

5. # Jameson 23 Oct 2008 at 6:52 am

   Is it possible to get rid of borders in the reflection when the image is wrapped with an a href tag? I’ve tried a number of things and none seem to make any difference.

   The image to be reflected is set to border: none, but the reflection of the image always shows a border in IE7, unless it is not a link. I’ve lost an hour trying to work around this, so any help is appreciated.

   Great little script this, works flawlessly in FF!

6. # Jameson 23 Oct 2008 at 6:59 am

   After diggin through the reflectomatic.css file, getting rid of borders on the reflection just requires one rule…

   img { border: none;}

   A blanket rule for all images did the trick. Can’t believe it was so simple (facepalm)!

7. # Maryon 23 Oct 2008 at 10:38 pm

   I am stumped. I have successfully integrated reflection.js into my portfolio site, but for one important problem. I am using JQuery.

   I have two sections – web and graphics. For the web section, I am running a jquery cycle slideshow which shows divs containing the images and some text. Each div is a slide. The reflections show up without a problem on these – http://maryahayne.com/web.htm

   In the graphics section there are three slideshows possible. They are activated by clicking on a link (jQuery $(’.link’).click(function() {…}). The slideshows work fine, and the reflections work fine EXCEPT in Internet Explorer – testing in 6 and 7. It all seems to come down to the click(function{} somehow.

   The images are all loaded into the divs at when the page is loaded so I don’t see what the problem could be. I have spent two days on this, and now wonder if it could be a bug?

   If you can shed light, I would MUCH appreciate it.

   Cheers, Mary

8. # Maryon 23 Oct 2008 at 10:39 pm

   Forgot to add the URL with the problem. Please view in IE…

   http://maryahayne.com/graphics.htm

9. # Michaelon 25 Oct 2008 at 10:32 am

   Awesome wee script. Nice and easy to set up, sweet.
   Cheers
   Michael

10. # Berndon 28 Oct 2008 at 7:18 pm

    Your reflection script is awesome!

    However, I cannot seem to combine it with other classes (in WebKit). For example, I would expect the CSS code below to shrink my image to a width of 160 pixels before applying the reflection, but instead only the reflection is resize?!

    img.polaroid {
    width: 160px;
    }

    Do you have any ideas how to fix this?

    Thanks!

    -Bernd

11. # Moeon 29 Oct 2008 at 2:35 pm

    Great Job! Love this effect!

    It works very well. But in thid f**cking Internet Explorer 6 it isnt working.
    If you got an idea why please contact me.

    The page where the effect is used is the menu-link on the left called “Info”.

    thnx. Moe

12. # Nicolason 01 Nov 2008 at 8:18 pm

    Great job !

    Will be amazing with an apple-like image y-axis rotation option !
    We let you choosing the right or left effect….

    Thanks . Nicolas

13. # muhaiminon 02 Nov 2008 at 2:33 pm

    I want my image display with border around but not on the reflected image. How to do this? is it a way?

14. # Jennifer Lopezon 19 Nov 2008 at 11:29 pm

    Hi,

    I added the following line of code to support the anchor tag targets (line 70):

    d.target = p.parentElement.target;

    cheers

    J Lo

15. # smikon 27 Nov 2008 at 10:48 am

    Hi,

    I love this great script it gives a wow-factor to every website.

    Since I want to use this script in a CMS I want to make it as comfortable as possible for the CMS-Admins that don’t know much about HTML so they wouldn’t find the right place where to insert the class=”reflect” >>> So I wonder if the script could be easily changed so that the reflection works on the alt-Tag >>> alt=”reflect” cause the CMS offers an input-field when inserting the image, so the CMS-users could easily add the reflection to the desired pix.

    Hope someone can help me with that!

    Thanks in advance

    smik

16. # GraemeHon 29 Nov 2008 at 11:42 am

    Wondering whether it’s possible to use this fantastic effect in conjunction with other scripts …. I’m looking to try and incorporate it with a flip-book – dynamic page turning effect. Haven’t been able to get it to work yet ….

    Thanks,
    Graeme

17. # stenon 02 Dec 2008 at 6:19 pm

    Would it be possible to add a parameter ‘offset’ that would separate the image from the reflection vertically. This would give it the effect of the image floating slightly off of the reflective surface. I would try but I’m no JS master.

    Regards,
    Sten

18. # cricrion 09 Dec 2008 at 9:42 am

    The seme problem…
    There are a big problem with IE, I have several links to open in target=”_blank” but it opens the link in the same page!

19. # Dieteron 27 Dec 2008 at 11:29 am

    Great script, but it’s a pitty that it doesn’t work with images with style=”width:100%;”. In this case the reflection stretches over 100% of the containing element and the original image is set to it’s actual width in px.

20. # tekbreakon 16 Jan 2009 at 7:41 pm

    I like this script very much, thank you! I use it to get my Dock shines… http://www.tekbreak.com/start-lite

    IE7 is full of ∫hit

    I have to add one line to your script to disable reflection image border on IE7 (…
    NEW on line 85:
    //Start
    reflection.style.border = 0;
    //End

21. # Jooston 20 Jan 2009 at 7:50 pm

    Great stuff! I’m going to use your script in my family photo site.
    I just made a small enhancement, that gives me the possibility to add a little margin between the picture and the reflection. This way it looks like the picture is hovering a bit above the shiny surface. (I think that’s what Sten means).

    Simply added an option ‘margin’ like so:
    Line 35: doptions = { “height” : Reflection.defaultHeight, “opacity” : Reflection.defaultOpacity, “margin”: Reflection.defaultMargin }

    then add the margin to the div height:
    Line 63: var divHeight = Math.floor(p.height*(1+options['height'])) + options['margin'];

    and last but not least, add the margin to the reflection:
    Line 96 (inserted): reflection.style.marginTop = options['margin']+”px”;
    and:
    Line 113 (inserted): canvas.style.marginTop = options['margin']+”px”;

22. # Jooston 20 Jan 2009 at 7:52 pm

    Sorry, forgot the line that declares the defaultmargin:
    Line 30 (inserted): defaultMargin : 5,

23. # Peteron 21 Jan 2009 at 2:51 pm

    Awesome piece of JavaScript, really nice effect.

    Just hope I can find a use for it now! =8-D

24. # Dirkon 01 Feb 2009 at 8:45 pm

    Hi,

    thanks for this supernice script! I have a problem though I would like to have some help with, if possible. I use transparent png’s. Needless to say that Mozilla renders everything perfectly. I tried each and every png fix I could find on the internet to get the effect rendered in IE 6 and 7. Only one works “almost”, the others interfere with the scripting The fix I use, uses css in a conditional statement in the header, treating each png individually, like this:

    #img7 {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’,src=’http://www.king-louise.com/protoflow/imgs/menu7.png’);
    padding-top: 200px;
    }

    Please note the padding, which is exactly the same number of px as the height of the image. Without the padding, the original image lies on top of the processed png, so we don’t see any result. The problem is, that using your script, the image size is calculated double height because of the image being pushed down by the padding (I hope you get what I mean). The result is that the reflected bit is double height, and moreover, stretched which is not nice.

    I set up two examples (from the work in progress (very much in progress) to illustrate this:

    http://exp.king-louise.com/index.html : the png’s are the TV screen, the gold coins, and the jukebox. Note the stretched reflections.
    http://exp.king-louise.com/index2.html : the same site, but I changed the padding to half the image size, so you can see what I mean by one image on top of the other.

    Note also, that the reflection is made using the original image, not the corrected one. Mozilla renders OK, IE6 has this problem, IE7 has other sorts of problems with png’s but that’s another story. I’m talking about IE6 which is still statistically 50% of my site-visits.

    So I tried to find a fix, applying the AlphaImageLoader at the source somewhere in your script, instead of in the header and I think I stumbled upon a bug in your script, but I’m not sure, so I need your help.

    In line 78 of reflection.js, we have : p.style.cssText = ‘vertical-align: bottom’; That’s where I wanted to place my filter. I think it’s the right place do do that. We wouldn’t need padding, so no stretched reflection. (Hopefully!!)

    Problem: whatever css I change in that line, nothing happens and the style property remains fixed to (rendered): “VERTICAL-ALIGN: bottom” (yes, uppercase). It doesn’t matter, it always defaults to that. So obviously, I can’t even try out my fix.

    (You might want to use a DOM inspector of some sorts). So well….I’m so close but I really can’t figure out why the line 78 doesn’t have any effect at all.

    I would really really appreciate if you could take a look at this…..

    Thanks many!!
    Dirk
    PS I said “work in progress”! Use Mozilla to see what I want, use IE6 to see what I mean, discard IE7 for the moment…. IE7 renders really nasty when moving transparencies!
    PPS the coverflow is ProtoFlow.

25. # Dirkon 01 Feb 2009 at 9:05 pm

    Oh yeah, sorry for the long post. Of course I could make ALL my images in .png format, and just replace every ‘p.height’ by (p.height/2)’ to workaround it, but that would not not solve the fundamental problem…. and will aggravate the IE7 rendering problems. (which are tremendous: IE6 with a pngfix is WAY better than IE7!)

    Dirk

26. # tekbreakon 09 Feb 2009 at 1:27 pm

    Look at this finish

    http://www.tekbreak.com/startlite/

    Please do NOT use IE7

27. # Michel Poulainon 25 Feb 2009 at 2:32 pm

    Hi. Thanks for your great and simple to use Reflection script.

    Just a comment to report that with the release of Safari 4, previous version of Reflection don’t work anymore. Webmasters : don’t panic and update to 2.0 version.

    Due to the same use of WebKit core as in Chrome (which I can’t test as not released yet on Mac) and the obsolete context.fillRect() function in old 1.x Reflection script.

28. # Chitraon 08 Mar 2009 at 11:03 am

    Hi,

    I want to create reflection for a rotated image.. Is it possible with this reflection.js?

29. # chitraon 09 Mar 2009 at 10:44 am

    Hi,

    How to apply reflection for an rotated image?

    Thanks

30. # nleeon 10 Mar 2009 at 3:42 pm

    Hi, just to let know that if I put a “blank” link on the image using reflection.js, on IE 7 the page opens in the same window when it should open in a new one. Other than that, this is a very cool script, thank you !

31. # Maxicon 10 Apr 2009 at 10:29 am

    I corrected the error bug in IE.
    For example, with the height of reflection was incorrect.

    Proc
    Wind
    Comp
    Other

    The height of reflection has become such as height picture

    I corrected it.

    I add:

    var a = document.createElement(’div’);
    a.src = reflection.src;
    a.style.cssText=’ overflow: hidden’;
    a.style.height = reflectionHeight+’px’;

    d.appendChild(a);

    a.appendChild(reflection);

    } else {

    Best regards

32. # alex claramonteon 24 Apr 2009 at 11:48 am

    nice scripts, reflection. may be its a good idea, do the same to images in a background, it is possible? look at this code:

    i do a serverside resize to an image to fix in any case, but the idea its use reflection in the div that contain the image like a background, so class=”imgPost” become class=”imgPost reflect … reflect options ” but this doesn´t work

    well its only a idea, otherwise, nice work and sorry for my poor english!.

    bests!, from spain.

    Alex.

33. # MrCon 07 May 2009 at 10:52 am

    I’m really appreciate your work. It is the one I was looking for!!!

    I also corrected a bug in IE regarding incorrect reflection size and direction (values smaller than 50 rheight caused incorrect IE(7) behavior):
    @Line 84
    reflection.style.height = p.height+”px”;
    should be
    reflection.style.height = reflectionHeight+”px”;
    because else it doesn’t work due to defaulted values.

    Hope you don’t mind.

    Greetings from Hungary!
    MrC

34. # Seanon 27 May 2009 at 11:11 am

    hi,

    using the reflection 2.0 script which works great in firefox. but IE7 I have images rendered as anchors like so
    

    this basically makes the anchor look like and act like a submit button and the reflections update nicely on the events as well so when the button highlights so do it’s reflection

    the problem in IE is when I click on the button it will not go to the page which is of course an active application on the back end etc.

    not sure why it is broken but would like it not to be broken

35. # Seanon 27 May 2009 at 11:12 am

    I submitted my source to the blog but it didn’t take it so I am modifying it so the anchor tags are removed:
    achorTag href=”https://localhost/CIS?_s=MaCWPLaaTupwfMpq&_k=jBjFgTJn&2″ onmousedown=”document.CISToolbarForm.ordersBookButton.src=’/files/CisFileLibrary/orders.book_2′; Reflection.add(document.CISToolbarForm.ordersBookButton, { height: (3/5), opacity: (3/5) }); ” onmouseout=”document.CISToolbarForm.ordersBookButton.src=’/files/CisFileLibrary/orders.book_0′; Reflection.add(document.CISToolbarForm.ordersBookButton, { height: (3/5), opacity: (3/5) }); ” onmouseover=”document.CISToolbarForm.ordersBookButton.src=’/files/CisFileLibrary/orders.book_1′; Reflection.add(document.CISToolbarForm.ordersBookButton, { height: (3/5), opacity: (3/5) }); ” onclick=” submitForm(’CISToolbarForm’); return true;”>

36. # Willmanon 01 Jun 2009 at 4:38 pm

    Hi, wonderfull script, I was wondering if you could help me with something, I need to add reflection that comes in an ajax response, the first time the images are loaded the reflection is not shown, but they will apear after I reload the images again, this just happens in firefox an not in IE, any idea how to fix this?

    thanks in advance

37. # myke blackon 25 Jun 2009 at 10:47 am

    Hi, Could this code be used to create reflections on non image elements like text? The reason I ask is because I want to create a dynamically generated navigation menu with the text for the menu being reflected. I could do it with flash linking to a database to get the content, but I want the navigation to be search engine friendly, so that option is out.

    many thanks in advance,

    Myke.

38. # Granpyon 12 Jul 2009 at 7:39 pm

    I’ve recently used this script on my site and the effect works fine .. but there’s a serious problem with my Firefox V3.0.11 … It should be probably caused by canvas html tag. BTW I wasn’t able to figure it out. Here’s the page I’m working on right now :

    http://granphic.com/alieh/nature/index.php

    Here’s 2 screen shots of the page :
    1. IE 7 : http://i30.tinypic.com/vqks2v.jpg
    2. FF 3.0.11 : http://i31.tinypic.com/a4lhkz.jpg

    I’d be happy if anyone could show me a solution. You can contact me by this email : Granpy_cp@yahoo.com
    or just leave me a comment on my site .. Thanks

39. # mareq133on 16 Aug 2009 at 7:45 am

    Have anybody tried to apply reflection to div?
    i am trying to combine jquery slide show where image would slide from left to right, and i need to reflect what is in the div, because if i apply reflection to the image it creates another image which is shown in the slideshow. What i need is to reflect original div and display it below the original div.

    or maybe simply reflect image, but direct it to be displayed below the div where the image scrolls.

    simply adding the reflection on the image is not enough although would do exactly what i want. But the mages would have to be always prepared with reflection, and then images would have to be pixelated gifs or pngs (and then IE fcuks up the transparency)

40. # Alidad Modjtabaion 28 Aug 2009 at 7:18 pm

    hi, I’ve recently used this script on my site and the effect works fine but then there is problme with slide show.

    please take look of slide show that i have created from http://www.roadrash.no/hs-support/highslide-with-codaslider.html i added your reflection.js file there with class name which is class=”reflect ropacity10″ the problme is that when i put class=”reflect ropacity10″ for first image of 3 images. i’m showing the reflection works fine but rest of two images have moved to next line that not suppose to be move to next line. i know is cause problme from class=”reflect ropacity10″ but I was wondering if any one know how can i solve this show same line of slide show with reflection!

    please help thanks.

    AM

41. # Tobiason 02 Sep 2009 at 4:40 pm

    How do I do to center the image?

42. # Tobiason 02 Sep 2009 at 4:48 pm

    I changed:
    var d = document.createElement(’div’); to var d = document.createElement(’span’);
    and
    Added line 109: canvas.style.clear = ‘both’;

43. # Samon 18 Sep 2009 at 3:50 pm

    if i dont whant the reflection clickable but the image only is it possible ?

44. # Nakamuraon 01 Oct 2009 at 9:35 am

    Dear Manager
    I am Japanease man. I can not speak English and writing so well.

    I am using your Reflection JavaScript.

    Special Thanks!

    Now, I created album at Abiding Memory Web site.

    Best Regards.

45. # Lloydon 28 Oct 2009 at 10:55 am

    This is awesome, just upgraded to 2.0 and it works flawlessly… thanx alot guys, great work.

46. # swiftMessengeron 01 Nov 2009 at 10:45 pm

    I love this script. Thanks for all of the hard work.

    I do have one suggestion for a new feature, though. Could you make it possible to create reflections across the other borders (eg: reflect-right, reflect-left, and reflect-top). This could add some additional visual fireworks to some sites.

    Keep up the good work!

47. # Redaon 04 Nov 2009 at 2:44 pm

    Hello everybody,

    first of all, thank you for this amazing script

    I’d just like to know if it’s possible to always have the same reflection height no matter the height of the image…

    Thanks a lot
    Reda

48. # Benon 26 Jan 2010 at 11:34 am

    I love this script, it works perfectly with IE but I have a problem with image borders in Firefox.

    Please have a look at this in both browsers…

    http://www.pluraweb.com/test2.html

    Is there a way I can get the firefox version to look like it does in IE?

    Many thanks

    Ben.

49. # CSX321on 19 Feb 2010 at 9:58 pm

    I replaced occurrences of:
    p.width
    with:
    parseInt(p.style.width)
    and changed:
    p.style.cssText = ‘vertical-align: bottom’;
    to:
    p.style.cssText = ‘vertical-align: bottom;’ +
    p.style.cssText;

    This allows the image size to be scaled dynamically, then you can call Reflection.add() to reset the reflection size to match the new image size.

50. # Dan Martinon 09 Mar 2010 at 2:09 am

    I have created something similar I call JSReflection. It works with any DOM element, works in all browsers (at least all that I’ve tested, including IE 6). Reading your code, it’s interesting how similar our approach is, even though we came to it separately.

    Here’s my version:
    http://dmartin.org/weblog/announcing-jsreflection-pure-javascript-utility-visual-reflection-web-pages

Leave a Reply

Name (required)

Mail (hidden) (required)

Website