Effect.BlindUp and Effect.BlindDown not rendering properly on IE7
Reported by Matthijs Langenberg | May 13th, 2008 @ 05:02 PM
The following code doesn't render correctly in IE7, I've tested this with
script.aculo.us 1.8.1.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/...">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fruits</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
</head>
<body>
<a onClick="Effect.toggle('fruits', 'Blind'); return false;">Toggle fruits</a>
<ul id='fruits'>
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
</body>
</html>
Comments and changes to this ticket
-
Matthijs Langenberg May 13th, 2008 @ 05:22 PM
See http://screencast.com/t/nb0dCjnURP for a video of the incorrect rendering.
-
bgcboyus May 15th, 2008 @ 04:30 PM
I have rewritten the BlindUp and Blind down effects to work properly I don't know if this is a proper fix but it works
Effect.BlindUp = function(element) {
element = $(element);
element.makeClipping();
IE7 = (navigator.appVersion.indexOf("MSIE 7.")==-1) ? false : true;
IE = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
return new Effect.Scale(element, 0,
Object.extend({ scaleContent: false,
scaleX: false,
restoreAfterFinish: (IE && !IE7) ? false : true,
afterFinishInternal: function(effect) {
effect.element.hide().undoClipping();
}
}, arguments[1] || { })
);
};
Effect.BlindDown = function(element) {
element = $(element);
var elementDimensions = element.getDimensions();
IE7 = (navigator.appVersion.indexOf("MSIE 7.")==-1) ? false : true;
IE = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
return new Effect.Scale(element, 100, Object.extend({
scaleContent: false,
scaleX: false,
scaleFrom: 0,
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
restoreAfterFinish: (IE && !IE7) ? false : true,
afterSetup: function(effect) {
effect.element.makeClipping().setStyle({height: '0px'}).show();
},
afterFinishInternal: function(effect) {
effect.element.undoClipping();
Effect.Appear(element, {delay: 1, duration: .1});
}
}, arguments[1] || { }));
};
-
Matthijs Langenberg May 15th, 2008 @ 09:52 PM
It doesn't work for me, the li bullet points dissapear, and the list still jumps horizontally.
-
vasily.stepanov July 16th, 2008 @ 04:06 PM
- → Tag changed from “” to “scriptaculous”
I think you should place you LI into DIV or place UL into DIV.
-
Mike Boone August 8th, 2008 @ 12:29 AM
- → Tag changed from “scriptaculous” to “effect.blinddown effect.blindup scriptaculous”
Snippet from bgcboyus' BlindUp and BlindDown
restoreAfterFinish: (IE && !IE7) ? false : true,You want to send false for IE7, correct? So in that case, you don't want the !IE7, you want IE7, like this:
restoreAfterFinish: (IE && IE7) ? false : true,Making that change fixes it for me, at least in my limited test case.
BTW, this bug looks like the same issue as an old TRAC ticket: http://dev.rubyonrails.org/ticke...
-
Mike Boone August 8th, 2008 @ 12:58 AM
I spoke too soon. For IE7 with this change, the initial BlindDown/Up works, but subsequent ones create strange overlapping with the content below the item.
Also, the line "Effect.Appear(element, {delay: 1, duration: .1});" from the code above doesn't appear to do anything on my app.
Please Login or create a free account to add a new comment.
You can update this ticket by sending an email to from your email client. (help)
Create your profile
Help contribute to this project by taking a few moments to create your personal profile. Create your profile »
script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
Source available from github
The Git repository resides at:
http://github.com/madrobby/scriptaculous
Check out the current development trunk with:
git clone git://github.com/madrobby/scriptaculous.git
As script.aculo.us 1.xx is feature-frozen, this development trunk is for bugfixes only.
New development should happen only for
script.aculo.us 2.
Creating a bug report
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, alter the unit tests and show through either changed or added tests how the expected behavior is not occuring.
Thomas Fuchs