Reflection.js 1.7
September 8th, 2007
Reflection.js is a cross platform script which allows you to add reflections to images on your web pages.
It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.
What’s New?
Just a small bug fix update to Reflection.js fixing an issue where hyperlinks around reflected images didn’t work in Internet Explorer.
The Reflection.js webpage has also been given a facelift and Reflectomatic now has five sample images to make it easier to try out Reflection.js for yourself.
Demo
See a demo of reflection.js 1.7 in action.
The reflection.js download includes some more examples of how reflection.js can be used including varying the height, opacity and responding to user actions.
Thank you!
I should once again say thanks to all the people who’ve used the script, left their feedback and helped iron out any issues. If you’ve used the script on one of your sites or galleries, please leave a comment! It’s great seeing how people put this script to use.
About the Author: Ken is a technology geek who spends too much time with mobile phones. Contact Me.
- Javascript , Reflection , Web 2.0
- Comments(116)
I have a layout that requires a div of images that remains centered filled with as many images as can fit. When you resize the div resizes but the images always stay in the center and as many rows as is required.
When I add class="reflect" to the images they all slam up to the left side of the div one per line. Using tables does not work wel for me since I don’t know how many will fit in a row.
I understand that you create a new div that has the image and the generated reflection. Can I create a css class for "reflect" and put something in it that allows me to treat the new divs the same as the old images? On is there some other trick that allows me to just jamb a bunch of the reflected images into a div and treat them like the raw unreflected images?
Great script. But I have a problem with IEs.
I use the script in a menu (with <li>), in FF everything looks fine but in IE (6.0 and 7.0) the shadows are displayed aside the images and not under the image?!
Do you have any hints?
In my case the following css fix the problem:
.reflected {
display: block;
}
reflect works great but i’m facing problem with users using ie6
since ie 6 are having problem rendering the png image, i try to put one of the iepngfix and the png image is solved but then there is no reflect after that?
so how do u solved it?
Hello and thanks for a great script. I combined it with a crossfadescript and it’s nice!
But…IE 7 isn’t fading out the images as nicely as Firefox, Camino or Safari. Do you have any ideas?
Check it out here: http://www.ansnes.no
Thanks!
Willy T. Koch
Oslo, Norway
Hello,
The reflection will only work in Opera, not in Safari, Explorer or Firefox. What the heck am I doing wrong?
http://www.crestfallensoul.com/test/tarja/
I just realized why the script won’t work in all browsers, I use a swap image command, and only Opera accepts it. I’ve tried to many ways to go around this, I’ve used div layers to try and come across the problem but I cannot make it work properly. The only time I got it working was when I used show and hide layers, but it looked really bad because when I moved the mouse, the image couldn’t decided which image to show.
Is there a way to include in the javascript that swap images can be used in the other browsers as well?
hi! i was trying to implement the reflection in an existing website. it works when i move the div into a separate htm. what are known reasons that it doesn’t work? what are the most common mistakes? thanks for your help!! ~lukas
Hi
great script thanks!
problem, it seems to make the image go to ist original size if I use a sizing in the html – it is ignored, but the reflection if I leave as is, the reflection is the right size as the image should be , if take out the sizing the reflection goes to the right size. Also I am testing this on html but would like to use in oscommerce(add in code) and joomla if poss..is there a mambot/module for joomla?
I encouter one problem with IE7 there is a border around the reflection.
Hello!
Can you do a scritp to run in Invision Power Board?
Thanks!
Hi, I tested in code in IE7. But when I set the DOCTYPE, such as
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The reflection has the full height of the original image, instead of the fading height (rheight). I tried to insert "d.style.cssText=’overflow-y:hidden’" in line 82 to fix it. Please let me know if there is any other better way.
Hi there!
I’m using the reflection.js in combination with lightbox2. The pictures shown in the lightbox are generated dynamically from a xml file and switch by getting a trigger from a media player. The reflection for the first image works fine, but after changing the image via dom-manipulation there is still the reflection from the old image.
How can I add the reflection to new loaded images during runtime? I know that the reflection function is only called once when loading the page, but is it possible to call it again without reloading the page?
Any help would be greatly appreciated.
Thanks and kind regards,
Sven
Hi,
Yes. Use Reflection.add(). More in readme.html.
Any help with my problem in Internet Explorer with the border which is around the reflection image ?
my website : http://www.3u4u.biz
Hi Ive created a mod for invision board that adds the reflection effect to avatars if you want to add a link to it on your site:
http://mods.invisionize.com/db/index.php/f/7818
Thanks Kim!
Hey there, thanks for the script. If it’s cool I’m going to port this into a Drupal module to work with a couple other image modules. Of course I will leave credit for you all over the place. I’ve already ported it to my own Drupal site but need to make it more "community" friendly for others to use. I will send a link your way once this module is up and running.
Great code, however it would be very nice to set a distance between actual image and reflected image.
Hello!
Nice work! Your script do not reflect the ping images placed on div in Internet Explorer… Safari Firefox and Opera renders reflection properly. Is any way to fix this?
border:0px;
}
Hi, love the reflection work!
It’s very effective over most browser, I’ll post a link to a large site I’m working on that will go live tomorrow.
I notice you’ve fixed the link problem around an image in IE6 which is great news. It might be easy fix (or I can create a script to do it) but it doesn’t currently respect a link if it has a different target set for (like _blank), it just opens it in the same window.
Is that an easy fix, or a lot of work?
Thanks for your time, it’s been very well spent!
Chris
Hi. Like your script. However, as most of the other contributors I have a problem using the script. I plan on using it with DotNetNuke Module that has an Image webcontrol. When setting the width of the Image control the html output is something like: <img …. style="width: 200px;…" which is ignored in your script. Is it possible to read the width settings from Image element style settings in your script ?
regards
Lars Kohsel
Hi!
Great script! I just used it for kind of webtutorial.
The problem I had and solved: I use a DIV with text-align:center where my image was placed.
With using reflection it was moved to the left in FF 2.0 (in IE it was fine).
My changes in reflection.js:
line 50:
var d = document.createElement('span');… instead of createElement(’div’);
line 109 added :
regards,
Axel
i tried to download it and i got a 403 error
When I try to download it, I get a 404 Forbidden! Whats gives?
Sorry, and thanks for letting me know. Fixed!
I can get the script to work in IE but not Firefox.
Putting that aside I tried to add the script to an Adobe Air application using FireFox as the default browser. When I attempt to run the site in Dreamweaver CS3 as an Air application I see the space for the reflection but not the reflection itself. The opacity is set to the default value and I’ve tried playing around with it to no avail thus far.
I fixed my IE border problem with the posting from above made by
"Florian" (Guest) wrote at September 25th 2007, 14:30:
Real Big Thanks!!
The reflections are messed up in Opera 9.50 alpha. The reflection dimensions are completely messed up, and the reflection gradient overlay abruptly stops halfway.
Great script. Will be using it on the next version of my site.
Regarding modifications, I needed to add additional vertical offset to get some space between the image and its reflection. Added the following:
- An additional ‘rvoffset’ to pass a pixel value
- ’defaultVOffset: 0,’ and ‘doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity, "voffset" : Reflection.defaultVOffset }’ to the class
- when setting margins:
if (options['voffset'] > 0) reflection.style.marginTop = options['voffset']+’px’;
- in context.drawImage:
context.drawImage(image, 0, -options['voffset'], reflectionWidth, image.height);
I’ve got a problem with the new version that wasn’t occuring in v1.6. In IE7 my margins are being doubled?
I’m using your script on some flickr and Amazon images the css for flickr is this:
#flickr a{
display:block;
float:left;
margin:0 20px 0 0;
}
#flickr img{
border-bottom:1px solid #000;
}
Yet in IE7 I’m getting 40px right margin. Any suggestions?
Additionally, the script appears to be adding padding-right:20px to the <a> tags
It would be cool if there is an option that could make space between image and reflection.
great script – thks for 1.7 – fixed my hyperlink problem – what was the problem, if you have time to tell.
cheers
Works really great in all browsers except Firefox 3 (3.0a9pre) ….
Thank you for creating this script. I needed to add to your hyperlink fix so I thought I would share the issue and my fix.
Issue: The fix created a <a> container instead of a <div> container for the image to reside in. This is because you can’t put a <div> inside a <a> contain in IE.
The problem: A <a> container is an inline object. So, my reflection would show up inline (next to) the image instead of underneath.
The fix: Add the following to line 87: reflection.style.display = ‘block’;
Hope that helps anyone else fight that problem.
the reflection works fine on all mentioned compatible browsers. unless you use images as a link to an iframe in IE.
i hope this will be fix soon…
I have pull out the reflection effect on my site for now. i’ll enable it back once the fix is made.
Hello,
This script is awesome, however I have one question about it. The way I’m using it, I’ve applied a border to the image that has the reflection, and since the reflection starts at the farthest left like the it expects the image to, the image and reflection are off by a pixel or two (the width of the border on the image).
Here is the link where I’m using it (the store is not live or does not work yet! hehe): http://store.localsounds.org/wi/madison/process.php?pname=ShowAlbumDetailsProcess-Start&CategoryID=16&AlbumID=7
Very valuable script! Thanks alot!
Hi,
I’m creating a web page, in which I’m using some javascripts, including also your "Reflection Script".
I have a problem with your script: everytime I use a script which contains the function "onload" (in the "body" tag of the page or in the script), the reflection script stops; if I erase the "onload" funtion, the reflection script restarts.
I also tried to look at the variables of the 2 scripts: there were some variables with the same name in both the scripts, but after changing their names, nothing happens.
Can you help me?
Another thing: I’m new to Javascripts, so please don’t answer with too much technical terms
Many thanks.
Bye
Stefano
Fixed problem with onload!
Simply there were 2 onload functions at the end of the 2 scripts.
I put them together in the body tag of the page removing them from the scripts, and it works perfectly!
Thanks anyway
Bye
Stefano
I already have two onload js before putting this one, and I put all together as you suggest. Now not a single one work. I think I did something wrong, help.
Hi Mak, as I said I’m new to Javascripts, so I can’t help you much. However, what can I suggest is to check if you correctly removed the last line of all the Javascripts with onload you used (I saw that they end with window.onload = function () {……}).
Then, in the html page you have to put this tag:
On my page they work perfectly.
How can I make reflection.js work with AJAX? It works with the initial website that is downloaded. But whenever I add new HTML content via AJAX, the newly added HTML does not get the reflection.
Unfortunately, what looks great on Firefox 2 (strict, validated XHTML 1.0 served as text/html) is not working in IE 7 (surprise, surprise). Using a reflection on mouseover inside of a link works beautifully in Firefox and Safari. On my IE 7, the onmouseout fails miserably (leaving the reflection which was supposed to be replaced by a dimmed version) and the link does not work on the image (but does on the reflection…wouldn’t users have fun?). No complaint, this is a very easy to use and pretty free product. Thanks. Since it is advertised as working in IE 5.5+, I share my feedback. I’d even use it permanently on my page if did work in this more complex situation. Khlo — I’m happy to send you a link for the example, if you have time to worry about this.
L P developer
Hi! I am using your script on my site
http://seedang.com
Some of our users are complaining that it does not look well with the rest of the site though. Perhaps I have to play with more settings, or try out other image effect javascripts.
I found this script and i’m excited! I would like to use it, but i can’t. I’m trying many hours but i cant see it.
I want to place it in my blog ( eye-of-thundera.blogspot.com ). i’ve read the readme and i think that i’m doing it correct.
I’ve upload the js in my google pages
(http://argy.evri.googlepages.com/reflection.js) and put this link in the ****
script type="text/javascript" src="********"> /script
The bold line i’ve placed it under head.
I place also the class in my image, but i cant see the reflection.
Please if anyone can give me a tip. Is there any other way to host the js ?
Thanks in advanced
Very nice script! I have three suggestions for you:
Very nice script!
habe es in meinem phpbb forum eingebaut, läuft super und sieht gut aus
reflection not working in ie6 when using thickbox, instead it places whitespace below the image. the whitespace equals the height of the image itself. is there any way to fix this.
http://site.ivt.com.au/projects/cid/2/parent/0/pid/2/t/projects
click on any thumbnail image to see.
One useful feature would be the ability to set a spacing between the image and the reflection.
Judah,
Thanks for your help! But I don’t know what exactly to do…! I mean how can I use this code? Just paste it into same .js file or should I replace it with something or…?
Thank you again.
Another queastion, how can I add a class that is generating from another JS file to this Dreamweaver code?
Thanks.
Marchelo,
this is just some js code to paste somewhere. Here is what I was assuming:
"myObj" is some js object – if you prefer plain-old js to object oriented js, you can do this instead as "function addReflection(imgId, rheight, w, h)"
the parameters are: imgId, the ID of the image element you want reflected, rheight – same as the rheight parameter you set on reflection.js, w – width of the img, h = height of the image
you would call addReflection with those parameters from your js to reflect some image
I don’t know anything about current versions of Dreamweaver – sorry.
I want to use the reflection for the background image of a table, but don’t know how to nest the code in the background tag for a table.
Can anyone enlighten me?
Hello,
I used this excellent script for a project; however, like others before me, i was having problems with IE/Win. In my case the image would be completely duplicated below the original.
Eventually i narrowed the issue down to my use of the "pngbehavior.htc" hack (as seen in http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html).
Removing it would fix the problem. Since in this situation i could replace transparent pngs by gifs, that’s what i did…
Maybe this will help others. (Also note there is another version of the pngbehavior hack that may or may not -haven’t tried it- work correctly with Reflection… This one is at http://scss.com.au/family/andrew/webdesign/pngbehavior/)
Best,
I am having a problem in Firefox 2.0.0.11. I am adding an img element to a div in javaScript. On a slow connection, if I use the class name to get it reflected (i.e. imgtxt += ‘<img class="reflect…..) reflection.js pukes around line 149. If I try to add the reflection via script, i.e. Reflection.add(img, options), reflection.js doesn’t puke, but still no reflection. In IE 7, adding via class also gets nto reflection, but adding via script works. On fast connections it works MOST OF the time in Firefox, and ALWAYS in IE 7.
any ideas?
thanks.
Hey guys,
How can I add this reflection style to the image element that generating from this code below? I mean, I assume that all I have to is add this line somewhere,
.reflect
Right?
===============================================
<!–
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i]; }}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//–>
<!–
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//–>
===============================================
Thanks a lot.
reflection after adding img via script problem solved, assuming you know the actual size of the image. This function will keep checking to see that the image is fully downloaded and complete, and then add the reflection. You can change the attemptLimit and interval as you see fit. Commented out is just a way to see how many tries it took and the size of the image at each try.
myObj.addReflection = function(imgId, rheight, w, h)
{
//get the image from the DOM and prepare options
var img = document.getElementById(imgId);
var options = new Object();
options.height = rheight;
//need to make a new image in case the h & w is set explicitly in
var img2 = new Image();
img2.src = img.src;
//limit how many times the reflection will be atempted
var attemptLimit = 200;
var attempts = 0;
//var msg = "";
var timer = setInterval(reflect, 125);
function reflect()
{
//msg += "img2.height = " + img2.height + "img2.width = " +img2.width + "\n";
attempts++;
if(img.complete && img2.height == h && img2.width == w)
{
Reflection.add(img, options);
clearInterval(timer);
//msg += "success in " + attempts + " attempts";
//alert(msg);
return;
}
//give it on last try and give up
if (attempts >= attemptLimit)
{
Reflection.add(img, options);
clearInterval(timer);
//msg += "last try after " + attempts + " attempts";
//alert(msg);
}
}
}
I have a problem on IE, I have several links to open on a different page (target _blank) but it opens the link in the same page. Any ideas on how to solve this problem? Thanks!
Hi there.
This script isvery good but I have a little problem with Opera. Evrything goes left. Can you help me to align evrything in the middle?
Thank you for your efforts.
Mik
Hello Cow! Thanks for your grate job!
There’s problems to get reflection with the last IE7 updates, reflection don’t work anymore in this browser (same issue with your demo and others scripts that uses alpha).
Have you an idea why don’t work?
best regards,
Gonzalo
Thank you very much for this incredible script. However there is a problem on firefox. I use input src to load it and on IE works fine. Dos not happen the same for firefox.
Any suggestion?
Thank you very much
Just how do i implement this on Blogger?
The script part is easy, but how do i manage to add the ‘class="reflect"’ to the img tag when it doesn’t yet exist? I’ve looked everywhere for an answer but I can’t find any. Just the same question posted by other people…
An answer would be nice =)
Is there any way to include a few pixels of space between the image and the reflection? This script is useless to me without it, and it shouldn’t be very difficult to code in.
If anyone wants a fix for allowing pixels in between the image and the reflection, here is is:
Add the following to the style sheet:
img { margin-bottom: 2px; }
Thats it! Very simple. 2px is what I use, but obviously you can change that whenever.
Love the script, but the support on here really sucks. Use Google guys.
Hey guys,
Looks like 2.0.0.10 broke all canvas image scripts!
Mozillazine Thread
Bugzilla
I think they are releasing 2.0.0.11 to fix this!
HELP !!!
I just updated firefox to 2.0.1.0 version and reflection does not work anymore !!!
I works fine in IE and worked before in firefox…
Check my website using Zenphoto and Simple+ at:
photos.imbecille.net
Hope you will be able to fix it…
Shame it seems that the latest Firefox updates breaks it on both the Mac and PC. Very odd… might be something to do with the DOM structure?
No errors are produced which is good – degrades nicely
Hello, This script is awesome, however I have one question about it. The way I’m using it, I’ve applied a border to the image that has the reflection, and since the reflection starts at the farthest left like the it expects the image to, the image and reflection are off by a pixel or two (the width of the border on the image)
Could you please reply at m DOT hujdur AT web DOT de? Thanks
Hi,
seems with the new firefox 2.0.0.10 the .js doens’t work any more ?
just updated today firefox and lost all effect ..
I upgraded to Mozilla Firefox 2.0.0.10 today – the reflection doesn’t work here…
Hey, FF 2.0.10 broke you’re code!? Just to let You know
The same for me:
I found this reflection just TODAY, works very well, but then I upgrade Firefox for 2.0.0.10 then, S***not working =(
blame 2.0.0.10….
Hi every body
I downloaded the reflection file v1.7 and I liked very much.
Beatiful effects..
However like someone just said, for big images in IE the reflection is not so good.
So.. I tried to work around and make my changes and here there are at line 88 of the script I added this:
var reflection = document.createElement(’img’);
reflection.src = p.src;
reflection.style.width = reflectionWidth+’px’;
//——–start here
// * as minhas alterações para funcionar melhor
reflection.id = "reflect2";
reflection.style.top = divHeight+’px’;
reflection.style.height = p.height+’px’;
// * ——————————
//——– end
reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+’px’;
For me it works
Enjoy the reflections with big images!!
See the site http://www.seacoastiberia.com with the new script
Hello!
I have a big problem. It seems that the reflection.js 1.7 doesnt work under Firefox 2.0.0.10.
Yesterday I worked with Firefox 2.0.0.9, and everything was ok. Than I updated the new version, and doesn’t work.
Please fix this.
Thank you very much for this amazing script!
fixed in
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2007-11-27-14-mozilla1.8/
Yep, I quote the Firefox problem, but it’s not a reflection script’s problem, it’s a firefox’s problem.
Also playing with Jscript options won’t fix it.
If you don’t want beta .11 just wait for the next update
I’m so glad it was a mozilla thing. I thought I’d edited something bad and broken my website!
It all works here too on this build.
ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2.0.0.11-candidates/rc1
By the way, love your work. The reflection script is A grade.
I quote the Firefox problem. I updated the new version, and doesn’t work. (Firefox 2.0.0.10.)
Is there anyone else who cannot see reflections in Firefox 2.0.0.10 on a 64 bit machine? (I know I’m in the minority w a 64bit machine
I’m using:
WinXP Pro x64 Edition (ver2003) SP2 (fully patched)
on:
AMD Athlon 64 X2 Dual Core Processor 4400+, 2.21GHz, 2GB RAM
NVIDIA GeForce 6600
Sorry, after I submitted the post I realized the link I followed to the forum was cached. After reading all of the ‘recent’ posts, I realize I’ll have to wait for the fix on Firefox’s latest fix.
Thank you very much
Hi – Great script!
but I have a little problem… can I show the reflection , without showing the image? The problem is: arround my image I have border-graphics like shadows, round corners etc. So the reflection should be shown out of this border-frames (tables)
Hi I noticed while using my website on an iPhone, the reflections fade to white instead of the background colour of my website, just letting you know.
Just a heads up, as this was broken in Firefox 2.0.0.10… it is now verified to be working in Firefox 2.0.0.11.
Huzzah!
firefox updated!!! now working again!!
Hello, reflection is a great script however I would like to know if it is possible to use within CSS files. I mean I have a div with a background image
#footer {
background-image: url(’images/footer.gif’);
}
and I would like to reflect the background. Is this possible ???
THANKS and Have a good 1!
Hi – as everyone is saying, thank you for the great script and I am as well have one annoying issue:
IN IE: When using show/hide divs, the first div (which loads visible) shows the reflections great. The next few hidden divs (which load with "display:none;" to make them invisible) do not show the reflection when made visible. All other browsers seems to be fine.
Any ideas?
It works fine for me, what error you have and which browser you are using?
Regards,
Meteko
Hello script is great but it still does not work with Opera. Links does not work on page with reflection. I am using zenphoto with 400px random reflected image (reflection js 1.7). When I am using smaller images work ok. What can I do ? Is there a posibility to disable script for Opera browser ?
I was wondering if this script could be rewritten for drop-shadow on images. Has anyone tried?
Great script, works well in FF!
Are there any updates for the hyperlink problem in IE7?
I have the latest version 1.7.
I really like the effect, and the open source ethos. I want to implement an itunes style interface (horizontal scrolling images with reflection) without using flash for a database project I’m working on. Would you consider supplying a solution for a fee?
Hi,
This looks really useful. I would like to make one important suggestion, however:
Please update your implementation of getElementsByClassName() because more and more browsers are supporting it natively now, which is a lot faster. In your code you can check if it exists first, before overriding it.
Thanks!
Anup
Hello there !!!
Keep the good work !
I have a little qurestion to you.
How can i set the reflection.js to preview some video files from youtube.com?
Can it be done ?
I want to put instead of pictures url the url from youtube videos ad be played when the video i select is in front position.
Thank you !
Aygun
Best regards.
Can someone please take a look at my test site and tell me why I can’t get reflect.js to work. I’ve implemented it per the instructions and my directory calls are correct.
I can’t figure this one out.
http://tangierclarke.com/TCSite4/accordion/indexer.html
it is fixed, thanks !
Hey – Great script.
Is there anyway to control the zindex of the relection?
I haven’t spend much time on it so far – but heres my problem:
I have an image with a text label directly below. The reflection bumps the label down below the reflection, whereas I would prefer it to lay on top of the reflection. Any Ideas?
Thanks
Aaron Hogan
Hi,
if i use this JS-Code in my Webside, the reflections does not work as expected. Any ideas?
<SCRIPT language=JavaScript1.2>
//Specify rate of display (1/freq)
var freq=1
var random_num=Math.floor(Math.random()*freq)
if (random_num==0)
window.onload=initbox
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"
var bouncelimit=32 //(must be divisible by
var direction="up"
function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie?
document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}
function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<5+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}
function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}
function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}
function truebody(){
return (document.compatMode &&
document.compatMode!="BackCompat")? document.documentElement : document.body
}
</SCRIPT>
Hi,
Centering the image, I add it to tag, it works.
style="margin-left: auto; margin-right: auto;"
Thanks!
Hi Khlo!
The only reason attraced me to leave a message for u is the great script you publised!
I really enjoyed it.
Sajjad
From Iran … the only where all the world have a wrong think about it…
I made some changes so the script will work with scaled images in IE.
Congrats on making this script.
Could you please explain how could we use this in a wordpress blog where everything is in PHP.
Where to declare the script file and all.
It would be a great help since there are many who are using WordPress Platform for blogging.
Thank You.
Hi,
I have written a simple test.html file with the following code
It works in firefox 2.0.0.3 but in IE 6 it shows nothing. Can any one help me plz !
Hi !
I have a problem with reflection, i hope you will be able to help me… Look at the code :
function load_content(onglet)
{
show_wait_message(’#container’);
$.get(’actions/actions.php’,{ action: “load_content”, onglet:onglet },function(data)
{
$(”#container”).html($.trim(data));
$(”#container”).find(’img.titre_droite’).reflect({height: 0.5, opacity: 0.4});
});
}
The html() function fills the container div with an image (the one I want to be reflected).
(tested with class=”reflect” too)
But on the first load of the webpage, reflection doesn’t appears…
I’ve tried to do alerts in the reflection.js code, and discovered that the alert is given BEFORE the image can be viewed on the page. So I don’t know what to do… Help me please !
Thanks ( and sorry for my bad english, i’m not english :] )
Hey Check This Out!
Just found A combination of JS, CSS, and HTML.
To create a Reflection of Text.
Must add multiple variables for Mutiple lines.
Paste Into Head:
var x;
x=”Enter Your Text Here.”;
Paste This Into Body:
document.write(x);
document.write(x);
Let me know if it works.
Thought someone might be interested. =)
Hey JayJay! Looks like Wordpress filtered out some of your code, maybe you’d like to post it at pastebin.com or something!
Oops It excluded Some of the code.
Just go to my site for Full code.
http://ronpaul.741.com/
Hi,
I read the message left by Tv3o on 07 Oct 2007
I haven’t understood how to put the code in the script for having an offset between the image and its reflection.
Is it also possible to use negative offsets?
I needed it to reflect texts with charachters going under a certain level (for example the letter “p” or “g”,…).
Thank you
Bye
Hi,
once again I solved the problem before someone answers me: to make the reflection near or far form the bottom of the image, in the style sheet, where there are the parameters for the images (img), it is sufficient to set a negative or positive border-bottom.
Bye
Hi everyone,
).
First of all the script is great (when it works
I have a problem on my webpage (http://www.1dlabel.fr/boutik.html)
The reflection should appear under the album image under the word “LES ACTUS”.
This image is placed in a DIV : here is the code :
The actus is declared as is :
#actus {
position:relative;
left:50px;
top:0px;
width:271px;
text-align:right;
}
I think that it doesn’t work because there is a DIV in a DIV, but I can’t find a solution.
Thanks in advance for your help.
I’m still getting a dark outline around alpha transparent PNGs in IE7. I’ve tried a few IE PNG fixes, but they don’t solve it (and are related more to IE6’s inability to display opacity).
It is truly beautiful under FF3 though and is fine with transparent GIFs, solid boxed PNGs etc. Anybody have a solution for this annoying little problemette?
IN IE: When using show/hide divs, the first div (which loads visible) shows the reflections great. The next few hidden divs (which load with “display:none;” to make them invisible) do not show the reflection when made visible. All other browsers seems to be fine.
Any update would be great help
How do you get reflection to work with thickbox? Can anyone please assist? thx.