Skip to Content

Stylegala Forums » Forums list » Javascript / DOM

moo.fx not working in IE

moo.fx not working in IE

post new topic Post new topic    Reply to topic Reply to topic

Author Message
Lost_User

  • Joined: 22 Jun 2006
  • Posts: 0
  • Status: Offline
Reply with quote Post Posted: Fri Feb 03, 2006 19:00
Hi all,

Disclaimer: I'm no JavaScript programmer.

I'm trying to use the moo.fx library to allow three divs on a page be toggled on and off, using the height toggle.

I thought I was doing really well, getting the exact effect I was looking for in Firefox. Then I opened IE and in all went pear shaped.

Here is the JS I have in my header:


<script type="text/javascript" src="scripts/prototype.lite.js"></script>
   <script type="text/javascript" src="scripts/moo.fx.js"></script>
   <script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
   <script type="text/javascript">
   window.onload = function() {
      myHeight = new fx.Height('container', {duration: 400});
      radio1 = new fx.Height('radio1', {duration: 400});
      radio2 = new fx.Height('radio2', {duration: 400});
      myHeight.hide();
      radio1.hide();
      radio2.hide();
   }
   </script>

And here is the html on the page:

<a href="#" onclick="myHeight.toggle();">toggle Height</a>
<div id="container" class="fx_Height">
   <p>foo</p>                           
</div>
<a href="#" onclick="radio1.toggle();">toggle Height</a>
<div id="radio1" class="fx_Height">
   <p>foo1</p>
</div>
<a href="#" onclick="radio2.toggle();">toggle Height</a>
<div id="radio2" class="fx_Height">
   <p>foo2</p>                        
</div>

In Firefox the page loads with the divs hidden and then each one will show / hide by clicking the corresponding link (what I'm after.)

In IE the page loads with the divs shown and if you click any link the corresponding div slides to hidden and then immediately shows itself again.

Update: actually in IE only the first link has any effect, the second and third link don't do anything at all.

Why would it work in Firefox but not in IE? Any thoughts?

Thanks in advance

View user's profile Send private message
 
Sponsor
 
Lost_User

  • Joined: 22 Jun 2006
  • Posts: 0
  • Status: Offline
Reply with quote Post Posted: Wed Feb 08, 2006 23:19
I have been fighting with the same issue for the past two days. It's only in IE (version 6 is what I'm testing on).

I'm going to keep trying and will post back if I can come up with a solution. Some suggestions of setting the height property to 0 in the css worked in FireFox but did not hide the element in IE. Setting it to 1 basically hid it but then threw off the toggle method.

View user's profile Send private message
 
Lost_User

  • Joined: 22 Jun 2006
  • Posts: 0
  • Status: Offline
Reply with quote Post Posted: Wed Feb 08, 2006 23:25
Hi Senza,

Glad to know it's not just me! I've now had a colleague of mine write their own JS for me. It's not as slick as the moo.fx effects, but it hides and shows the bits I need.

Good luck with your testing.

View user's profile Send private message
 
Lost_User

  • Joined: 22 Jun 2006
  • Posts: 0
  • Status: Offline
Reply with quote Post Posted: Thu Feb 09, 2006 00:01
In the header instead of

myHeight.hide();
radio1.hide();
radio2.hide();

Try this

myHeight.toggle('height');
radio1.toggle('height');
radio2.toggle('height');



The code in the onClick should be the same as above.

Disclaimer: I too am no JavaScript programmer.
Disclaimer2: I'm doing this from memory.
Disclaimer3: My memory isn't good.

View user's profile Send private message
 
Lost_User

  • Joined: 22 Jun 2006
  • Posts: 0
  • Status: Offline
Reply with quote Post Posted: Thu Feb 09, 2006 00:21
@dblake_md

Thanks for the suggestion. It turns out that the problem wasn't in the code. It's in the fact that I'm a moron. I didn't have a doctype.

@cheezepie

The problem was likely due to a missing doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


View user's profile Send private message
 

Page 1 of 1

post new topic Post new topic    Reply to topic Reply to topic

Display posts from previous:   

Powered by phpBB. © 2001, 2006 phpBB Group & Logo Design