...

View Full Version : spry effect(s) onClick MM_effectAppearFade etc. work in firefox, safari NOT IE(6-8)



afrem
12-30-2009, 02:26 AM
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


<!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>

afrem
12-30-2009, 09:39 PM
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 ?

seco
12-30-2009, 09:48 PM
sometimes the quickest solution isnt the best solution. look into jquery, spry is nothing but problems.

afrem
12-31-2009, 12:43 AM
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 :o

Thanks for the suggestion though.

seco
12-31-2009, 02:39 AM
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.

afrem
12-31-2009, 03:22 AM
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 ?

seco
12-31-2009, 06:34 AM
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.



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum