#7 new
Matthijs Langenberg

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
  • bgcboyus

    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

    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

    vasily.stepanov July 16th, 2008 @ 04:06 PM

    • Tag set to scriptaculous

    I think you should place you LI into DIV or place UL into DIV.

  • Mike Boone

    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

    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.

  • jeuxnewbanat

    jeuxnewbanat March 18th, 2016 @ 01:59 AM

    مرحبا بكم اولا اشكركم كتيرا على هدا العمل الجبار انتم في الطريقة الصحيح شباب واصلوا للترفيه فقط استمتعوا بأروع العاب تلبيس ومكياج للبنات فقط شكرا شكرا لكم

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

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.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
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, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

Pages