Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page spry effect(s) onClick MM_effectAppearFade etc. work in firefox, safari NOT IE(6-8)

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-30-2009, 01:26 AM   PM User | #1
afrem
New to the CF scene

 
Join Date: Dec 2009
Posts: 4
Thanks: 1
Thanked 0 Times in 0 Posts
afrem is an unknown quantity at this point
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>
afrem is offline   Reply With Quote
Old 12-30-2009, 08:39 PM   PM User | #2
afrem
New to the CF scene

 
Join Date: Dec 2009
Posts: 4
Thanks: 1
Thanked 0 Times in 0 Posts
afrem is an unknown quantity at this point
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 ?
afrem is offline   Reply With Quote
Old 12-30-2009, 08:48 PM   PM User | #3
seco
Regular Coder

 
seco's Avatar
 
Join Date: Nov 2008
Location: Oregon
Posts: 682
Thanks: 5
Thanked 79 Times in 77 Posts
seco has a little shameless behaviour in the past
sometimes the quickest solution isnt the best solution. look into jquery, spry is nothing but problems.
seco is offline   Reply With Quote
Old 12-30-2009, 11:43 PM   PM User | #4
afrem
New to the CF scene

 
Join Date: Dec 2009
Posts: 4
Thanks: 1
Thanked 0 Times in 0 Posts
afrem is an unknown quantity at this point
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.
afrem is offline   Reply With Quote
Old 12-31-2009, 01:39 AM   PM User | #5
seco
Regular Coder

 
seco's Avatar
 
Join Date: Nov 2008
Location: Oregon
Posts: 682
Thanks: 5
Thanked 79 Times in 77 Posts
seco has a little shameless behaviour in the past
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.
seco is offline   Reply With Quote
Users who have thanked seco for this post:
afrem (12-31-2009)
Old 12-31-2009, 02:22 AM   PM User | #6
afrem
New to the CF scene

 
Join Date: Dec 2009
Posts: 4
Thanks: 1
Thanked 0 Times in 0 Posts
afrem is an unknown quantity at this point
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 ?
afrem is offline   Reply With Quote
Old 12-31-2009, 05:34 AM   PM User | #7
seco
Regular Coder

 
seco's Avatar
 
Join Date: Nov 2008
Location: Oregon
Posts: 682
Thanks: 5
Thanked 79 Times in 77 Posts
seco has a little shameless behaviour in the past
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>
seco is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 01:33 PM.
Advertisement
Log in to turn off these ads.