Ken's Tech Tips

3376101 Responseshttp%3A%2F%2Fcow.neondragon.net%2Findex.php%2Freflectionjs-19Reflection.js+1.92008-03-21+12%3A35%3A05Kenhttp%3A%2F%2Fcow.neondragon.net%2Findex.php%2Freflectionjs-19 to “Reflection.js 1.9”

1. # Benjamin Elgaron 22 Mar 2008 at 8:36 am

   Hi,

   Good job it works really well… in Firefox. I have a layered transparent fireworks PNG, and I applied the reflect class to it and in internet explorer it has this black halo around it. Is there any way for me to fix this? Should I just flatten the PNG? I can’t really convert it to another format as it needs to be a high quality transparent file. I hope you can help.

   Ben

2. # Benjamin Elgaron 23 Mar 2008 at 2:16 am

   Hi,

   Just to update what I said earlier, I did flatten it but now it is no longer transparent, and just to clarify the blach halo was on the reflection.

   Thanks,
   Ben

3. # Julienon 23 Mar 2008 at 6:16 pm

   Thanks for Reflection 1.9!

   It will be the “reflection engine” for LDDb.com from now on (you might want to update the Readme showing up v1.7) and eventually add the line of code I proposed to avoid showing a HREF border around a clickable picture. Otherwise it looks good! Example:

   http://www.lddb.com/laserdisc/46/PILF-2830/Star-Wars:-The-Phantom-Menace-(1999)

   Thanks,
   Julien

4. # Nevenaon 23 Mar 2008 at 10:32 pm

   Hi there,

   I love your work, many thanks.

   I use reflections.js on my web-site, however, today when I implemented greybox http://orangoo.com/labs/GreyBox/, the reflections disappeared, any idea why?

   Your help will be greatly appreciated

   Thanks
   nevena

5. # Raithon 24 Mar 2008 at 12:07 pm

   Hi mate,

   Thanks for the great reflection script. I just used it within a project of my own but I had to hack it a bit as I needed the reflection to fill 100% of it’s container which gets dynamically resized.

   My code is rather dirty in places and there are some real rough edges that I’m not proud of. That said, it’s definitely on it’s way to being something cool.

   Please take a look at how nicely your reflections fit in with my javascript-powered iPod style scroll wheel and cover flow…
   http://www.classycode.co.uk/CoverFlow

   Cheers,
   Raith

6. # Cowon 24 Mar 2008 at 6:02 pm

   Raith:

   Your script is simply stunning! Despite what you claim about “rough edges”, I am extremely impressed at how small your script files are. I’ve blogged about this, hope you don’t mind!

   http://cow.neondragon.net/index.php/another-coverflow-script

   If you don’t mind me asking, how long did the script take to write?

   Cow

7. # Droogieon 25 Mar 2008 at 8:29 pm

   Why is it reflection.js will not work when I have an onLoad= in the body of my html document. as soon as I remove the snippet of code below, the javascript reflection appears again. Anyone know?

8. # Divon 03 Apr 2008 at 6:46 pm

   Hi,

   I’ve used reflection.js for a blogger implementation. The file that enables reflection on blogger.com is enableReflect.js.

   To have reflection on all your blogger posts, have these two lines before in your blogger template.

   <script src=’http:///reflection.js’ type=’text/javascript’/>
   <script src=’http:///enableReflect.js’ type=’text/javascript’/>

   That’s it

   Get your copy of enableReflect from here:
   http://divyaratna.googlepages.com/enableReflect.js

   Please avoid hotlinking to the js file…

   If u like it, please send me a note. You can see the script in action at http://www.Hyd-Masti.com

   Cheers,
   Div

9. # Cowon 03 Apr 2008 at 10:00 pm

   Nice script Div I noticed though that the enableReflect.js script that was posted above adds a Hyd-Masti.com alt tag to every image. I’m not sure if this is intentional or whether it was just left in.

10. # Mortenon 04 Apr 2008 at 11:03 pm

    Great job! Albeit IE5.5+ support isn’t entirely true. Filters are not supported with IE8, nor is any type of opacity or VML (yet at least).

11. # Gregon 10 Apr 2008 at 3:35 pm

    Hi,

    it doesn’t work well for me in Safari 3.1 (5525.13).

    I try this :

    Reflection with CSS

    Reflection with Javascript

    //

    I have a reflection with the first image, but not the second one. This is the code viewed with the Web Inspector :

    Greg

12. # Cowon 10 Apr 2008 at 3:50 pm

    Hi Greg! Check you’re using Reflection.js version *1.9* as that problem should be solved.

    For more info:
    http://cow.neondragon.net/index.php/documentgetelementsbyclassname-compatibility

13. # Divon 12 Apr 2008 at 3:24 am

    Hi Cow,

    U’re rite…I was using alt to print debug messages while developing the script…I’ve removed it now.

    I’ve made a post about this script on my personal blog here:

    http://variantday.blogspot.com/2008/04/reflectionjs-blogger-implementation.html

    I’ll post updates to the script there…that way it will be more manageable. Do you think it would be easily accessible to many people if you mention this in your list of implementations?

    Cheers,
    Div

14. # Cowon 12 Apr 2008 at 9:18 am

    Hi Div,

    Looks really cool! And yeah I’ve added it to the list of implementations so all the Blogger users should be able to find your script! Your script is certainly a fantastic addition to our collection!

    Cheers,
    Cow

15. # Bradyon 17 Apr 2008 at 7:29 pm

    I’ve made several failed attempts at this on my own (and failed), so now I’m asking anyone who may know…
    I would like to add a gap between the image and the reflection… giving it the appearance of floating. Can anyone point me in the right direction on this?

16. # vpon 25 Apr 2008 at 5:07 am

    hi,
    its simply superb.
    …….really………….cool

17. # Legoon 25 Apr 2008 at 5:34 am

    Is it just me, or if you apply the reflection on a centered image, it always makes it align to the left?

    Other than that, great work!

18. # seomackon 27 Apr 2008 at 4:15 am

    The reflection tool keeps breaking my inline UL to a new line any ideas?

19. # Ericon 29 Apr 2008 at 1:40 am

    Does anyone know how to make the images centered with Reflection on????

    Please Help!!! =D

20. # Legoon 29 Apr 2008 at 10:39 pm

    actually i found a workaround to center the image. i use css and i do margin=auto

21. # Legoon 29 Apr 2008 at 10:43 pm

    you can see an example of the centered image thing at http://www.lelandrobotics.com

22. # bertoon 30 Apr 2008 at 10:36 am

    hi!
    nice jb!
    i use reflection.js from a while, but now i found some problems adding the Fancy Zoom js in my pages.
    there might be some variable or something that crash…
    so the fanczoom works and the reflection does not anymore..

    i’m trying to find out the problem, but njothing yet.

    does anyone know anything about that?!

    thank you

23. # Ammyon 06 May 2008 at 9:24 am

    Looks wonderful, thank you
    Would it be able to be used on large text?

24. # Willyon 06 May 2008 at 2:48 pm

    Hi,

    It’s a very simple solution for adding reflection. But I have a problem in IE6,7. Look here: http://3v-art.ru/picture/1/

    Reflection move right from picture. In Mozilla & Opera it’s work correctly.

25. # Willyon 06 May 2008 at 6:24 pm

    I fixed it, just added in CSS: img { border: 0; }

26. # Chris de Jongon 14 May 2008 at 9:37 am

    Hi,
    Just to let you know we’re using it as a component in our CMS. We show a example of a reflection on a normal image + a dynamically created text-image. It’s looking great and hereby want to thank you for this great job!!
    If you like it you can place us to on your examples page?! The url= http://www.cms-website-beheer.nl/cms/componenten/foto-met-spiegeling.aspx
    greetings,
    Chris

27. # Michaelon 26 May 2008 at 4:45 pm

    Very cool; just what I need !

    Trying to get it to work with javascript in-line image replacement where I mouseover a title and the target image gets replaced; the image replaces but the reflection is still from the first image. The ‘Reflect’ class is not getting applied to the new image. Any ideas on how to overcome this annoyance ?

    Thanks

    -snip-

    function roll_over(img_name, img_src) { document[img_name].src = img_src; }

    then

    onmouseover=”roll_over(‘main’,'image2.jpg’);”

    and

    – unsnip –

28. # Davison 28 May 2008 at 5:11 pm

    Hello,

    Can I know v1.9 can work with jquery style? im using v1.6 before.

    as the syntax now is …if want add a reflection to an image ( xxx is id of the image )

    Reflection.add(document.getElementById(“xxx”), { height: 0.4, opacity : 0.5});

    if v1.6 , it can be

    $(‘#xxx’).reflect( … )

    Thanks/Davis.

29. # Kreisquadraturon 15 Jun 2008 at 2:42 pm

    For me it seems like all classes are gonna be removed from an image after the reflection script runs over. But as “/* Copy original image’s classes & styles to div */” says, I guess it shouldn’t? I loose my padding borders which I don’t wanna add by “style”.

30. # saraon 16 Jun 2008 at 9:58 am

    i am using reflection.js 1.9
    i found a bug (only in ie6)

    /* Fix hyperlinks */
    if(p.parentElement.tagName == ‘A’) {
    var d = document.createElement(‘a’);
    d.href = p.parentElement.href;
    }

    example: when p.parentElement.href like this(php)
    
    and $o is other language, than
    this link will become wrong.

31. # Alistair Warwickon 16 Jun 2008 at 4:00 pm

    In April, Droogie wrote “Why is it reflection.js will not work when I have an onLoad= in the body of my html document. as soon as I remove the snippet of code below, the javascript reflection appears again. Anyone know?”

    I see that it works OK in Opera, but not in Firefox3, IE7 or Safari3 (all on WinXP).

    I’d like to use this script as it’s really cool, but can’t if it’s incompatible with “onload” functions.

    Alistair

32. # Jonnyon 26 Jun 2008 at 8:06 am

    I recently tried to use this on a private installation of “Ampache” – a web-based music library/playback app. The only thing is, the app uses ajax to refresh some parts of the page periodically. The images refreshed in these areas seem to be ignored by the reflection code, and when I tried to call the code directly as part of the refresh process, only some of the images got reflections, while some didn’t. Do you have any idea why the latter occurs?

33. # Cowon 26 Jun 2008 at 10:27 am

    Hi Jonny,

    Are you using the onload=”Reflection.add(this)” event? I’d recommend putting an onload onto the actual image: perhaps it’s not working because the event is being called before the image actually loads.

34. # Antonon 26 Jun 2008 at 12:58 pm

    The script would be great, if it didn’t mess around the layout.

    If you have a “float: left” (no matter how small) it will never render the image (no matter how small) beside the floating element. It will always render it below

    Too sad. If you have pages with no layout it works perfect…

35. # Adam Loftson 27 Jun 2008 at 3:16 pm

    Hi!

    Great script. Although it makes no practical difference I prefer to use prototype events rather than hijack the onload handler.

    e.g.

    Event.observe(window, ‘load’, function() {
    addReflections();
    }

36. # Gildason 03 Jul 2008 at 9:48 pm

    I managed to get the reflection work on the image placed under “LES ACTUS” picture on http://www.1dlabel.com/boutik.html but there is on problem remaining.
    As the elements are nested within a DIV tag that is set to a right alignment for the text, my CD Cover and its reflection should appear aligned on the right alas, they are aligned on the left border of my DIV.
    What’s happening ?
    Thanks again for your help

37. # smartphreakon 05 Jul 2008 at 3:53 pm

    Hi,

    is it possible to add an opaque border and have that reflected along with the image.

    also to have rounded images edges?

    other than those tweaks this is a wicked script…
    regards,
    phreak

38. # Thomason 18 Jul 2008 at 11:03 pm

    Many thanks for this awesome script. It works perfectly together with phpld webdirectory. Demo: http://www.grafikboards.de
    I put a link back to your site in the footer. I’d love to see this script to show thumbnails in different angles, just like Apple’s coverflow thingy.
    regards

39. # winkieflashon 21 Jul 2008 at 1:32 pm

    It says that the Firefox 3/Safari ‘image skips reflection’-issue is fixed with version 1.9.

    I use 1.9 and the issue still presents itself.

    Any ideas on this?

    Great script tho!

40. # webbyon 21 Jul 2008 at 2:28 pm

    I’m trying to use this reflective javascript to reflect an image in a div and then place other divs on top of it. This is so the background will be a reflection of the image above but it will have some buttons and other content on top of it.

    This works fine in Firefox and IE7, but in IE6, the reflection is treated as a div and the other divs refuse to float on top of it, they simply get moved down the page.

    Any ideas to get around this??

    Thanks and great job with the .js its great

41. # Huromanon 23 Jul 2008 at 5:26 pm

    Excellent source… well, for all people who had have the problem to center tha image, only need to insert the “style” in:

42. # Gersomon 24 Jul 2008 at 8:45 pm

    Really nice script but 2 things;

    - Why so much files? I saw script on internet with only a reflection.js file

    - I really miss an ofset function.. (that you can create a whitespace between the image and the reflection). Can you build that?

    Really nice script, respect !

43. # Cowon 24 Jul 2008 at 8:51 pm

    Dear Gersom,

    I was asked the same question about offsets just a few days ago so I’ll post my answer for reference!

    You can add a offset using the following CSS:

    img.reflected { padding-bottom: 5px; }

    Or make it apply to only certain reflections by using something like:

    .roffset img.reflected { padding-bottom: 5px; }

    then giving your image a class of roffset

44. # Gersomon 24 Jul 2008 at 9:21 pm

    Thanks

45. # Bryanon 30 Jul 2008 at 9:43 pm

    Hi All,

    Excellent script. Hard to believe it’s only 4kb!

    I’ve created a UL element with a bunch of images in the list. I want these images to have a reflection and when the mouse moves over them, have that reflection’s opacity increase. It works perfectly in Safari and FireFox.

    In IE7, however, everything goes nuts. When the page first loads, the reflections are produced correctly and everything looks great. But when you mouseover an image, suddenly the reflection jumps to 100% height and 100% opacity. All the other images in the list are rearranged and the page is jumbled. But, then move the mouse again and the images go back to the correct arrangement and the reflection goes to 50% opacity, 50% height, like it should. From then on, the reflection flickers between 100%height/100%opacity and 50%height/50%opacity whenever you move the mouse. The images stay put, however. Very bizarre behavior.

    Here’s the relevant HTML code:

    And here’s the corresponding CSS:

    /* ————- Photos Page Styles ———————–*/

    .thumbnailContainer {
    margin:20px 0px 0px 350px;
    height:auto;
    width:650px;
    }

    .thumbnailContainer ul {
    list-style-type:none;
    display:inline-block;
    }

    .thumbnailContainer ul li {
    float:left;
    padding:20px 20px 20px 20px;
    }

    /*————– Photos Page Styles ——————–*/

    Any ideas?

46. # Davidon 05 Aug 2008 at 8:28 am

    Hi,

    I’m trying to integrate reflections into the lightbox2 plugin for wordpress. Can’t seem to get it working.

    How should i go about it?

    Thanks

47. # Gersomon 15 Aug 2008 at 6:46 pm

    cow..

    1.
    In all browsers (except IE) the smaller the height of the picture (in proportion to the width), the more padding is displayed at the bottom of the picture..

    check this:
    http://www.gersom.nl/rest/reflection.jpg

    2.
    you can’t use the body onload=”" tag to preload onmouseover-link-images for example because the reflectionscript won’t work anymore. So; body onload=”" doesn’t work with your script

48. # peeton 22 Aug 2008 at 2:14 am

    Hi,
    i’m a newbie but i have download and setup reflection like you said. it works very good but only two mistakes …

    the reflection goes a bit in the left and the reflection is not just under the image (margin)

    how can i repair that ? ( tell me it simply )

    excuse my english i’m french

    thanks a lot.

49. # caseyon 24 Aug 2008 at 12:58 am

    Hi. I have been using photoshop until now to make reflections under my images. I would like to replace that with your reflection.js but i like to leave 1px of space under my image before the reflection starts. How would i go about pushing the reflection from reflection.js down a pixel?

50. # Gersomon 27 Aug 2008 at 12:56 pm

    @casey;

    add this to your stylesheet:
    img.reflected { padding-bottom: 1px; }

    @cow; Do you read my comment ^^ ?

51. # Cowon 27 Aug 2008 at 1:13 pm

    Hi Gersom,

    Sorry I don’t understand what you mean by your first point. Regarding the second, I would recommend using Reflection.add(). the “reflect” class is a simple and lightweight way for somebody to implement the script without JS in 95% of circumstances.

52. # kjtookeon 30 Aug 2008 at 4:42 pm

    Thanks for the great script…

    One query though: is there a way of making the reflection not add extra space to layout?

    What I want is for any content following the reflection to appear on top of it. (not be pushed down the page).

    This would also help maintain appearance continuity with any browsers that cannot display a reflection.

    I think this would need to be done in the script itself (rather than in a seperate CSS file) as the height of the reflection varies depending on the original image.

53. # Keikoniumon 01 Sep 2008 at 7:56 am

    Hi,

    Thank you for this script cow, it is very lovely.

    I am having a bit of a problem with it tho. For some reason, I can’t seem to get the reflections to appear with content loaded using ajax. Is this a limitation or a bug?

    Any help would be appreciated. Thank you .

54. # Kris J Tookeon 02 Sep 2008 at 9:15 pm

    v1.9 is broken in Google Chrome (or quite possible, Google Chrome is broken… It is after all a beta…)

    I have filed a bug-fix request with Google, but thought you may want to know about it.

55. # chadwon 03 Sep 2008 at 4:48 am

    Hey I just am trying out google chrome today, and I was sad to see that the reflection script doesn’t work! Any ideas?

56. # caseyon 03 Sep 2008 at 12:28 pm

    @Gersom,

    Thanks for the tip. Padding never crossed my mind… I assumed it would be much more complicated

57. # Francoon 03 Sep 2008 at 2:44 pm

    Yes, I’ve seen myself that the script doesn’t work in Chrome: I’m not proficient enough in JS of this quality, but I’m, sure somebody may give an interesting advice to repair this trouble.
    You can see the first page of my site:
    http://www.cantodellasfinge.net
    All bottom images should be reflected by reflection.js, and normally they are. Not, if you see it via Google Chrome (Beta version, of course).

58. # kjtookeon 03 Sep 2008 at 8:28 pm

    I’ve tried the CSS3 alternative (webkit specific, so should work with Google Chrome) on my index page (it checks for Google Chrome and loads this CSS instead of reflection.js using the same class of ‘reflect’), but no joy… (At least the solid reflections are hidden in Chrome now). Would of course prefer to use just reflection.js for all browsers as this keeps coding to a minimum.

    The PHP code I use to detect Google Chrome is:

    if(preg_match(‘/webkit\//i’,$agent) && preg_match(‘/chrome\//i’,$agent)){

    followed by link to css code and an else { with link to reflection.js

    URL for my development site (not live site, which suffers from the same problem): http://mkiv.kjtooke.dyndns.org/

59. # Julienon 06 Sep 2008 at 2:32 pm

    Hi!

    Just downloaded Google Chrome and reflection.js, although generating the reflection, does not apply transparency creating some weird “plain” effects.

    Will try to look into it when I can (maybe a switch/case based on the browser signature confused with Gecko and Webkit references).

    Will you take a look too?

    Rgds,
    Julien

60. # Cowon 06 Sep 2008 at 4:46 pm

    Hi guys,

    Thanks for reporting the issues about Reflection.js in Google Chrome. I’ve written more about the issue at:
    http://cow.neondragon.net/index.php/reflectionjs-in-google-chrome

    Cheers!

61. # Jon 07 Sep 2008 at 7:03 am

    Hi~ It’s just great!

    There are some information that how to work with PHPBB, LyteBox …but how can I work this with ‘Highslide Js’ ?
    I think it is not work with Highslide Js.

62. # Jameson 08 Sep 2008 at 2:09 pm

    Excellent snippet. love it. Update: I downloaded google chrome and it reflects the image, but doesn’t do the transparency and fade out of it. Any ideas mate?

    Thanks.

63. # Jameson 08 Sep 2008 at 2:09 pm

    just seen it’s already mentioned. doh!
    thanks anyway.

64. # Mr. Con 08 Sep 2008 at 4:41 pm

    Is this script completely free? Could i use it on a comercial website?

    thanks,
    Love the Script.

65. # Kris J Tookeon 10 Sep 2008 at 8:07 pm

    Is there any way of NOT applying (to the reflection) the href link I apply to an image (ie: )?

    Also, the reflection currently BLOCKS any elements that follow and that should be sitting on top of the reflection (can be seen on my images pages… the image description (on images that have one) and the tags (again, for those images that have tags) should be selectable, but the reflection always sits on top of them (even if I set z-index for these elements to a high value)… Any ideas/solutions to this?

66. # Joeon 12 Sep 2008 at 4:05 pm

    Hi,

    This script doesn’t work in IE for me: http://www.circuitz4u.com/previous_designs.xhtml

    Any idea why?

    -Joe

67. # Joeon 12 Sep 2008 at 5:44 pm

    DW about my last comment, I’ve fixed it now, it was because I had the reflection inside a div and IE didn’t like it.

68. # Sabreon 13 Sep 2008 at 3:48 am

    Im havin an issue, with gifs reflecting a blue colour.
    All other formats reflect a proper reflection, but gifs do not.
    Does anybody know how to rectify this?

69. # keikoniumon 13 Sep 2008 at 6:09 am

    Is there any way to make this work within a div?

70. # WSASon 14 Sep 2008 at 5:36 am

    Yo Willy! (Alf..LOL)

    Thanks for that mate!

    I wasted about 3hrs on this problem for IE.

71. # Filipon 14 Sep 2008 at 8:03 pm

    The reflection-script does not work in IE 8 (beta). I hope its an IE8 problem and not the script. It does work in IE 6 & 7.
    Greetz

72. # Steveon 18 Sep 2008 at 12:51 pm

    WoW! Amazing script.

    One question: The sample images on your page, are side-by-side via a table. Is there a way to make left-aligned images (ex.) with reflections? I tried editing the CSS attributes in the .js file, but that didnt work. When I have several images side-by-side, they all get ligned up vertically when the reflection gets applied (as if there was a after the image.

    Thanx

73. # Steveon 18 Sep 2008 at 12:53 pm

    oups. that last comment got cut off, seeing as it was a valid HTML code. I meant to say “as if there were a “br” after the image”.

74. # Levenezon 20 Sep 2008 at 3:31 pm

    I have a image in a A tag using reflection.js. The problem is with IE 7 (maybe other IE versions). The image has a border=0 and when it is selected (click twice), the reflection gets a border. Is there a way to force the border of the reflection image to 0 ?

    An example : .

75. # Levenezon 25 Sep 2008 at 7:44 pm

    I have added “reflection.border = p.border” near line 86 of reflection.js, and now an image using a border to 0 can be in an anchor object (it’s reflection will also have a borner of 0) in Internet Explorer 7.

76. # Levenezon 25 Sep 2008 at 8:06 pm

    I have changed the test in the script which checks for WebKit for Safari. As Google Chrome is using the same WebKit token, I have replace the 4 lines “if …WebKit… else …” with the content of the else statement. And now reflection.js is working on Chrome 0.2, Safari 3, Internet Explorer 7, Firefox 3…

77. # Cowon 25 Sep 2008 at 8:11 pm

    Dear Levenez,

    Thank you for your comments! Would you be able to tell me what the issue in Chrome was and how you fixed it?

    Cheers
    Cow

78. # Levenezon 25 Sep 2008 at 8:23 pm

    The problem with Chrome was that the reflected image was a simple mirror and was not blurred.

    I gave the correction : remove the “if WebKit” test and keep the else statement.

79. # Cowon 30 Sep 2008 at 9:20 pm

    Thanks!!!

    Great news… Version 2.0 has been released and adds support for Google Chrome.
    http://cow.neondragon.net/index.php/reflectionjs-20

80. # Paulon 04 Oct 2008 at 11:59 pm

    Was wondering if you might add a ‘margin’ parameter to specific space between the original image and the reflection. I’ve modded your code but it would be nicer if you could include this in an official release

81. # Matton 25 Oct 2008 at 1:24 am

    We are trying to apply this feature to our website, http://www.roboticsconnection.com. I downloaded the file before and placed it into our site and it was working fine but now I can not get it to show up. We are an online store and we use XML as well as HTML. I have added the file to the folder and placed the script in the head of the HTML file. I also added the class to the images but when I refresh nothing shows.

    Can you please help me to know what is going on?

82. # Gurvon 12 Nov 2008 at 5:28 pm

    Hi,

    its simply superb.
    …….really………….cool

    to remove img border from the shaded image – I added a line

    reflection.style.border = ’0′; after line# 84

    It worked like charm..

    Thanks
    Gurv

83. # Thuan V. Nguyenon 16 Dec 2008 at 3:25 pm

    Thank you for this. Works flawlessly with Firefox and IE8.

84. # Derrickon 20 Dec 2008 at 5:47 am

    This is nice! Is it possible to reflect text?

85. # OneNerdon 22 Dec 2008 at 4:54 pm

    Noticing in IE, when images are in a hidden div, the reflection does not appear to work (although same works in Firefox). Is this a known issue and/or is there a workaround (I presume I can run a function that looks for all images inside the div when it is displayed and apply the reflection).

    Thanks -

86. # sTarBuZzon 02 Jan 2009 at 4:18 pm

    hm for me it didn’t work…
    i included the script in my subheader.php and
    i changed the link so that the image has a black background and added class=”reflect” but the only thing i see is the black background instead of the reflection.
    I use PHPFusion 6 and Firefox 3.
    In Internet Explorer it’s the same…

    could someone please help me with this problem?

87. # a.lingenon 03 Jan 2009 at 11:06 am

    Hi, i would like to know why there’s in a blank space between the image and its reflection under IE6 and 7.

    My website is: http://topvideosdereggaeton.com/

    Could someone help me to fix this bug?

    Thanks for the superb plugin!

    -

    A. Lingen

88. # Chris de Jongon 06 Feb 2009 at 10:49 am

    Hi, the refelction works perfect EXCEPT the reflection is placed after page is loaded and therefor you can see that text under the reflection is going down for about 20px……Is there a way to reserve the space which is needed by the reflection and therefor the text under it won’t go down on the users screen. Somewhere for example a overflow: hidden………..?? I’ve tried a couple of things but can’t find the solution……I know it possible because a couple of months ago a collegue (doesn’t work here anymore) my fixed it somewhere (and I have no clue where it was…) fix that problem for me. Any suggestions??
    Wanna see what I mean? click

89. # Leland Scotton 09 Feb 2009 at 4:19 am

    Hi,
    I noticed that the 2006 version of your great script was no longer working on my site, so I upgraded to the 2.0 release. Unfortunately, it’s not working, either.

    Do you know whether there’s any problem running reflection.js with the latest versions of Prototype and/or Scriptaculous? I’m using the latest of those, but frankly reflection doesn’t seem to be working on earlier releases of those libraries either.

    Thanks,
    Leland

90. # Bennsenon 10 Mar 2009 at 3:18 pm

    hi dear!

    at firs: great work!!!!

    but now i have a problem…!

    i use the script for my onlinestore.
    with firefox it works fine, but when i use the microsoft internet explorer…

    http://erosstore24.de.dd21626.kasserver.com/strapscorsage-white-angel-p-147.html

    please can anyone help me?

    sorry for my englisch

91. # Dennison 01 May 2009 at 8:05 am

    Anyone having issues with Reflection when used with Lightbox in IE8 (only)?

92. # Krison 12 Aug 2009 at 7:47 pm

    Hi There,

    i managed to put a distance between the original image and the reflection. unfortunately this does NOT work on IE/Avant/Opera – only on FF/Safari & Chrome.

    canvas.style.height = reflectionHeight+’px’;
    canvas.style.width = reflectionWidth+’px’;
    canvas.height = reflectionHeight;
    canvas.width = reflectionWidth;

    I just added the following line below the code-block to gain the distance between image and reflection:

    canvas.style.paddingTop = ’5px’;

    Can anybody help me to get this running on every browser please?

    Thanks and bye AND KEEP UP THIS GREAT WORK!
    Kris

93. # Krison 12 Aug 2009 at 8:32 pm

    Continue: Problem with distance

    Hello,
    I solved my problem by myself as far as the distance now also runs under IE and Avant. I just did this:

    Below this line ….

    reflection.style.marginBottom = “-”+(p.height-reflectionHeight)+’px’;

    … I added this one …

    reflection.style.paddingBottom = ’5px’;

    So finally I’m in the need of a fix for Opera – any clue?

    thanks and bye
    Kris from Hamburg

94. # Krison 12 Aug 2009 at 8:40 pm

    Upps… well, good my comments need a moderation by now, because i now recognized i had the wrong file in my opera-browser. So everything works now perfect.
    Just delete my posts or just the last line from my previous post (“… So finally I’m in the need of a fix for Opera – any clue? …”) if you think, the distance-issue might be interesting to s.o. else.

    Sorry and thanks for your patience
    Kris

95. # Alidad Modjtabaion 28 Aug 2009 at 6:26 pm

    hi, I’m having trouble with reflection and i need someone can help me how to solve that.

    I have create slide show that comes from http://www.roadrash.no/hs-support/highslide-with-codaslider.html and put the class name which is “class=”reflect rheight33″ on my first images out of three images, when i run it i’m showing the reflection is working great, but then rest of images is not showing relfection but is showing second line of slider.

    some how this reflection.js file it might cause the problme with rest of images by put next line.

    any idea how can i solve that!

    AM

96. # gladiatoron 04 Dec 2009 at 11:21 am

    hello dear author. i like your script very much.
    unfortunately i can’t use it for my needs. you see, i also need to reflect an image, but in more simple way.

    for example, we have one example.jpg file.

    i just wish to have an ability to insert in my html page the one and only file example.jpg.
    but one time in its original view.
    and the second one – i wand to insert the same file example.jpg, but i need it to be mirrored by vertical, like from right to left flip.
    i know i can just mirror the image in photoshop, and than simply insert in html two files: example.jpg and example_mirrored.jpg, but the main idea for the script is to use the same file two times, and make the mirror flip by the script.js. that would definitely reduce the size of downloadable graphics in my symmetrical html project.

    thanks for your attention.
    is it possible? can you write such a script, friend?

97. # Barton 04 Feb 2010 at 9:01 pm

    Hi there,

    First of all, I just looove your script.
    It really works nice, but I have 1 problem.
    I use the script for my gallery and I need to set a width to the image like this :

    The reflection follows the widht of the original image, but not the height.
    It has been stretched to the image his original height.
    Is there any way to solve this?

    Regards, Bart

98. # Fredeon 18 Aug 2010 at 9:48 am

    I am stating to use this fine script, but I am looking for the line in the code where I can add a "room" between the image and the refelction.
    Could someone give this information please?
    Regards
    Frede

99. # marloweon 22 Sep 2010 at 9:26 pm

    HI let me start with: Amazing but i have a question. I have a my images stored in my css file how can i add reflect to them ?
    background-image:url(images/page..png)

    thanx

    regards,
    Marlowe

100. # Kenderon 08 Mar 2011 at 10:56 am

     Hey, just a quick note…

     Is there a way to modify this to work with plain text? I am looking to mirror the h1 elements of my pages (page title) and i really dont want to create an image for each one to flip as they are dynamically generated from the database when certain selections are made (i would need to make close to 1000 images to do this.. but using it with text would be great

101. # Richardon 04 Apr 2011 at 4:27 pm

     Interesting Floridian College in the right hand picture

Leave a Reply