Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer spry effect(s) onClick MM_effectAppearFade etc. work in firefox, safari NOT IE(6-8)

    As you can probably tell from my messy code , I am a musician first and programmer never ...

    My problem; I am trying to use javascript spry effects instead of doing things in flash and seem to have things worked out more or less except i am finding for some reason beyond my comprehension that everything works as it should in Firefox and Safari but not at all in Internet Explorer 6-8 ....

    wondering if someone could shed some light on the issue before I lose it and surrender back to flash.

    here is the site code and address to example page
    http://www.foolsblue.com/foolsblue2/menu.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    /*<![CDATA[*/
    html {
    overflow: auto;
    }
    <!--
    #apDiv1 {
    	position:absolute;
    	left:389px;
    	top:73px;
    	width:112px;
    	height:24px;
    	z-index:2;
    	visibility: hidden;
    }
    #apDiv2 {
    	position:absolute;
    	left:25px;
    	top:0px;
    	width:845px;
    	height:212px;
    	z-index:1;
    	background-image:url(/foolsblue2/test_background.jpg);
    }
    #apDiv3 {
    	position:absolute;
    	left:387px;
    	top:72px;
    	width:117px;
    	height:29px;
    	z-index:3;
    }
    #apDiv4 {
    	position:absolute;
    	left:740px;
    	top:130px;
    	width:43px;
    	height:45px;
    	z-index:4;
    }
    #apDiv5 {
    	position:absolute;
    	left:741px;
    	top:130px;
    	width:43px;
    	height:45px;
    	z-index:5;
    	visibility: hidden;
    }
    #apDiv6 {
    	position:absolute;
    	left:739px;
    	top:69px;
    	width:43px;
    	height:45px;
    	z-index:14;
    }
    #apDiv7 {
    	position:absolute;
    	left:80px;
    	top:112px;
    	width:18px;
    	height:17px;
    	z-index:7;
    }
    #apDiv8 {
    	position:absolute;
    	left:80px;
    	top:112px;
    	width:18px;
    	height:17px;
    	z-index:8;
    	visibility: hidden;
    }
    #apDiv9 {
    	position:absolute;
    	left:110px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:9;
    	visibility: hidden;
    }
    #apDiv10 {
    	position:absolute;
    	left:108px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:10;
    }
    #apDiv11 {
    	position:absolute;
    	left:108px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:11;
    }
    #apDiv12 {
    	position:absolute;
    	left:742px;
    	top:69px;
    	width:37px;
    	height:45px;
    	z-index:12;
    }
    #apDiv13 {
    	position:absolute;
    	left:742px;
    	top:64px;
    	width:37px;
    	height:45px;
    	z-index:13;
    	visibility: hidden;
    }
    .style1 {color: #000000}
    #apDiv14 {
    	position:absolute;
    	left:56px;
    	top:262px;
    	width:907px;
    	height:673px;
    	z-index:16;
    	background-color: #000000;
    	visibility: hidden;
    	overflow: scroll;
    }
    .style2 {color: #FFFFFF}
    #apDiv15 {
    	position:absolute;
    	left:0px;
    	top:210px;
    	width:1024px;
    	height:768px;
    	z-index:15;
    }
    #apDiv16 {
    	position:absolute;
    	left:216px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:17;
    }
    #apDiv17 {
    	position:absolute;
    	left:219px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:18;
    	visibility: hidden;
    }
    #apDiv18 {
    	position:absolute;
    	left:216px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:19;
    }
    #apDiv19 {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:100%;
    	height:120%;
    	z-index:0;
    	background-color: #000000;
    }
    #apDiv20 {
    	position:absolute;
    	left:56px;
    	top:262px;
    	width:907px;
    	height:673px;
    	z-index:20;
    	overflow: scroll;
    	background-color: #000000;
    	visibility: hidden;
    }
    #apDiv21 {
    	position:absolute;
    	left:249px;
    	top:144px;
    	width:68px;
    	height:24px;
    	z-index:21;
    }
    #apDiv22 {
    	position:absolute;
    	left:144px;
    	top:139px;
    	width:60px;
    	height:30px;
    	z-index:21;
    }
    #apDiv23 {
    	position:absolute;
    	left:251px;
    	top:139px;
    	width:60px;
    	height:30px;
    	z-index:22;
    }
    #apDiv24 {
    	position:absolute;
    	left:360px;
    	top:139px;
    	width:60px;
    	height:30px;
    	z-index:23;
    }
    #apDiv25 {
    	position:absolute;
    	left:323px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:24;
    }
    #apDiv26 {
    	position:absolute;
    	left:432px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:25;
    }
    #apDiv27 {
    	position:absolute;
    	left:471px;
    	top:139px;
    	width:60px;
    	height:30px;
    	z-index:26;
    }
    #apDiv28 {
    	position:absolute;
    	left:325px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:27;
    	visibility: hidden;
    }
    #apDiv29 {
    	position:absolute;
    	left:323px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:28;
    }
    #apDiv30 {
    	position:absolute;
    	left:435px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:29;
    	visibility: hidden;
    }
    #apDiv31 {
    	position:absolute;
    	left:432px;
    	top:137px;
    	width:34px;
    	height:32px;
    	z-index:30;
    }
    #apDiv32 {
    	position:absolute;
    	left:56px;
    	top:262px;
    	width:907px;
    	height:637px;
    	z-index:31;
    	visibility: hidden;
    	background-color: #000000;
    	overflow: scroll;
    }
    #apDiv33 {
    	position:absolute;
    	left:56px;
    	top:262px;
    	width:907px;
    	height:637px;
    	z-index:32;
    	visibility: hidden;
    	background-color: #000000;
    	overflow: scroll;
    }
    #apDiv34 {
    	position:absolute;
    	left:56px;
    	top:262px;
    	width:907px;
    	height:637px;
    	z-index:33;
    	overflow: scroll;
    	visibility: hidden;
    	background-color: #000000;
    }
    -->
    /*]]>*/
    </style>
    <script src="/foolsblue2/SpryEffects.js" type="text/javascript"></script>
    <script type="text/javascript">
    /*<![CDATA[*/
    <!--
    function MM_showHideLayers() { //v9.0
    var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3) 
      with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
        obj.visibility=v; }
    }
    function MM_effectAppearFade(targetElement, duration, from, to, toggle)
    {
    	Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    }
    function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter)
    {
    	Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, toggle: toggle, referHeight: referHeight, growCenter: growFromCenter});
    }
    function MM_effectBlind(targetElement, duration, from, to, toggle)
    {
    	Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    }
    function MM_changeProp(objId,x,theProp,theValue) { //v9.0
      obj = null; with (document){ if (getElementById)
      obj = getElementById(objId); }
      if (obj){
        if (theValue == true || theValue == false)
          eval("obj.style."+theProp+"="+theValue);
        else eval("obj.style."+theProp+"='"+theValue+"'");
      }
    }
    //-->
    /*]]>*/
    </script>
    </head>
    
    <body>
    <div class="style1" id="apDiv1"><img src="Foolsblue1.gif" width="112" height="23" /></div>
    <div class="style1" id="apDiv2"></div>
    <div class="style1" id="apDiv3" onclick="MM_showHideLayers('apDiv1','','show')" ondblclick="MM_showHideLayers('apDiv1','','hide')"></div>
    <div class="style1" id="apDiv4"><img src="red_light_off.png" width="43" height="45" /></div>
    <div class="style1" id="apDiv5"><img src="red_light_on.png" width="41" height="44" /></div>
    <div class="style1" id="apDiv6" onclick="MM_effectAppearFade('apDiv5', 1000, 0, 100, true);MM_effectAppearFade('apDiv13', 150, 0, 100, true);MM_effectAppearFade('apDiv12', 150, 100, 0, true);MM_effectGrowShrink('apDiv14', 1000, '0%', '100%', true, false, true);MM_effectAppearFade('apDiv14', 1000, 0, 87, true);MM_changeProp('apDiv20','','zIndex','20','DIV');MM_changeProp('apDiv14','','zIndex','99','DIV');MM_changeProp('apDiv32','','zIndex','31','DIV');MM_changeProp('apDiv34','','zIndex','33','DIV');MM_changeProp('apDiv33','','zIndex','32','DIV')"></div>
    <div class="style1" id="apDiv7"><img src="green_led_off.png" width="18" height="17" /></div>
    <div class="style1" id="apDiv8"><img src="green_led_on.png" width="18" height="17" /></div>
    <div class="style1" id="apDiv9"><img src="small_toggle_off.png" width="34" height="32" /></div>
    <div class="style1" id="apDiv10"><img src="small_toggle_on.png" width="34" height="32" /></div>
    <div class="style1" id="apDiv11" onclick="MM_effectAppearFade('apDiv9', 150, 100, 0, true);MM_effectAppearFade('apDiv10', 150, 0, 100, true);MM_effectAppearFade('apDiv8', 1000, 0, 100, true);MM_effectGrowShrink('apDiv32', 1000, '0%', '100%', true, false, true);MM_effectAppearFade('apDiv32', 1000, 0, 87, true);MM_changeProp('apDiv32','','zIndex','99','DIV');MM_changeProp('apDiv14','','zIndex','16','DIV');MM_changeProp('apDiv20','','zIndex','20','DIV');MM_changeProp('apDiv34','','zIndex','33','DIV');MM_changeProp('apDiv33','','zIndex','32','DIV')"></div>
    <div class="style1" id="apDiv12"><img src="large_toggle_off.png" width="37" height="45" /></div>
    <div class="style1" id="apDiv13"><img src="large_toggle_on.png" width="37" height="45" /></div>
    <div class="style1" id="apDiv14">
      <p>t<span class="style2">jgjhftrdikh kjhlk OTHER</span></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><span class="style2">yfjhfjhfjh</span></p>
      <p>j<span class="style2">jhgjgjhg</span></p>
      <p><span class="style2">jhghjgjgjhgjh</span></p>
      <p>&nbsp;</p>
    </div>
    <div id="apDiv15"><img src="guitarstack.gif" width="1024" height="768" /></div>
    <div id="apDiv16"><img src="small_toggle_on.png" width="34" height="32" /></div>
    <div id="apDiv17"><img src="small_toggle_off.png" width="34" height="32" /></div>
    <div id="apDiv18" onclick="MM_effectAppearFade('apDiv16', 150, 100, 0, true);MM_effectAppearFade('apDiv17', 150, 0, 100, true);MM_effectBlind('apDiv1', 1000, '0%', '100%', true);MM_effectAppearFade('apDiv20', 1000, 0, 87, true);MM_effectGrowShrink('apDiv20', 1000, '0%', '100%', true, false, true);MM_changeProp('apDiv20','','zIndex','99','DIV');MM_changeProp('apDiv14','','zIndex','16','DIV');MM_changeProp('apDiv32','','zIndex','31','DIV');MM_changeProp('apDiv34','','zIndex','33','DIV');MM_changeProp('apDiv33','','zIndex','32','DIV')"></div>
    <div id="apDiv19"></div>
    <div class="style2" id="apDiv20">
      <p>i7ytiutuyt MUSIC</p>
      <p><img src="pics/q1.jpg" width="500" height="375" /><img src="pics/Lu Gear.JPG" width="266" height="475" /></p>
      <p>iuytiutiuy</p>
      <p>iuyiuyiuy</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>jgjhgjhg</p>
      <p><img src="pics/RGear 1.jpg" width="300" height="225" /></p>
    </div>
    <div id="apDiv22"><img src="newsbutton.png" width="60" height="30" /></div>
    <div id="apDiv23"><img src="musicbutton.png" width="60" height="30" /></div>
    <div id="apDiv24"><img src="mediabutton.png" width="60" height="30" /></div>
    <div id="apDiv25"><img src="small_toggle_on.png" width="34" height="32" /></div>
    <div id="apDiv26"><img src="small_toggle_on.png" width="34" height="32" /></div>
    <div id="apDiv27"><img src="merchbutton.png" width="60" height="30" /></div>
    <div id="apDiv28"><img src="small_toggle_off.png" width="34" height="32" /></div>
    <div id="apDiv29" onclick="MM_effectAppearFade('apDiv25', 150, 100, 0, true);MM_effectAppearFade('apDiv28', 150, 0, 100, true);MM_effectAppearFade('apDiv33', 1000, 0, 87, true);MM_effectGrowShrink('apDiv33', 1000, '0%', '100%', true, false, true);MM_changeProp('apDiv33','','zIndex','99','DIV');MM_changeProp('apDiv34','','zIndex','33','DIV');MM_changeProp('apDiv18','','zIndex','19','DIV');MM_changeProp('apDiv14','','zIndex','16','DIV');MM_changeProp('apDiv20','','zIndex','20','DIV')"></div>
    <div id="apDiv30"><img src="small_toggle_off.png" width="34" height="32" /></div>
    <div id="apDiv31" onclick="MM_effectAppearFade('apDiv26', 150, 100, 0, true);MM_effectAppearFade('apDiv30', 150, 0, 100, true);MM_effectAppearFade('apDiv34', 1000, 0, 87, true);MM_effectGrowShrink('apDiv34', 1000, '0%', '100%', true, false, true);MM_changeProp('apDiv34','','zIndex','99','DIV');MM_changeProp('apDiv20','','zIndex','20','DIV');MM_changeProp('apDiv33','','zIndex','32','DIV');MM_changeProp('apDiv32','','zIndex','31','DIV');MM_changeProp('apDiv14','','zIndex','16','DIV')"></div>
    <div id="apDiv32">
      <p>t<span class="style2">NEWS uytuyrytr</span></p>
    </div>
    <div class="style2" id="apDiv33">
      <p>MEDIA iukhok</p>
      <p>&nbsp;</p>
    </div>
    <div class="style2" id="apDiv34">
      <p>MERCH uygljhkij</p>
      <p>&nbsp;</p>
    </div>
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    To be more specific when i click on the toggle buttons in IE nothing happens ...no animation or window popup as in firefox or safari....

    Is it working for anyone else in IE so I can rule out the code as being the problem ?

  • #3
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    sometimes the quickest solution isnt the best solution. look into jquery, spry is nothing but problems.

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by seco View Post
    sometimes the quickest solution isnt the best solution. look into jquery, spry is nothing but problems.
    I was worried someone was going to say something along these lines. I just cant fathom another week spent learning yet another set of code and it's frustrations

    Thanks for the suggestion though.

  • #5
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    Yes, but when you keep using things that dont work and are not compliant your never going to finish anything. You can do what you need with jQuery in just a couple lines of code.

  • Users who have thanked seco for this post:

    afrem (12-31-2009)

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks again seco.

    So I take it that this is the consensus among all the other people viewing this post......ie Spry = S***

    and I should scrap it ?

  • #7
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    yeah, jquery is just more rebust aswell. if you need any help with jquery just post it here, i usually answer those questions as best as i can.

    I use this page a lot.
    http://docs.jquery.com/Main_Page

    a simple example of toggling a div with slide effect.

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      
    
      //This is the bulk of it
    
      $("#clicker").click(function(){
    	$("#mydiv").slideToggle("slow");
      });
    
      //
      
    });
    </script>
    
    
    
    
    <a id="clicker">toggle div</a>
    <div id="mydiv" style="display:none; height:50px; width:100px; border:#000 solid 1px;"></div>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •