Javascript "Animations"

[FugitivePuppeT]

I am having a problem with my animations in IE, i am developing a web 2.0 application and it works PERFECTLY on Firefox, opera, safari but not IE

This is a video detailing the issue, if anyone can shed some light on this subject i would be grateful.

http://www.youtube.com/watch?v=xGKq-7Q0PtE

i can probably provide some code, depending what it is, link:no.
The effects are both css and javascript, it is a simple :hover effect for the width change (margins) and a small function to change the class of one of the sections.
Edit/Delete Message

 

[BillyRayPreachersSon]

If you want us to debug your code, you are going to have to provide either the code or a link to the web page in question.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

One thing I will mention is that the :hover pseudo-class works only on anchor ("A") elements in IE 6. If you have it on any other element, it will not work.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[FugitivePuppeT]

Pardon my PHP

This is the associated CSS style

#hover{width:98%; margin-left:1%; margin-right:1%;}
#hover:hover{width:100%;margin-left:0%; margin-right:0%;}
.post-title-hl{height:40px;font-weight:bold;font-size:16px;padding-left:10px;}

This is the highlight function, simple class replacement.

function toggleHighlight(on,id){
	var post=document.getElementById('post-title-'+id);
	if (on){
		post.className="post-title-hl";
	}else{
		post.className="post-title";
	}
}

This is the html layout.

<div id="post#<?php echo $row['ID_Post']?>" class="post" onmouseover="toggleHighlight(true,<?php echo $row['ID_Post']?>);" onmouseout="toggleHighlight(false,<?php echo $row['ID_Post']?>);" >
  <table class="group-<?php echo $row['ID_Group']?>" width="100%" border="0" cellspacing="0" cellpadding="0" id="hover">
  <tr>
    <td width="6"><img src="<?php echo $g_image_path?>corners/Corners_01.png" align="left"/></td>
    <td></td>
    <td width="6"><img src="<?php echo $g_image_path?>corners/Corners_03.png" align="right"/></td>
  </tr>

  <tr>
    <td width="6"></td>
    <td>
      <table width="100%" border="0" cellspacing="0" cellpadding="0"  <?php  if ($is_user_own_post) echo " onmouseover='toggleEdit(" . $row['ID_Post'] . ");' onmouseout='toggleEdit(" . $row['ID_Post'] . ");' "?>  onclick="toggleSlide('<?php echo $row['ID_Post']?>')">
  <tr>
    <td width="50%" id="post-title-<?php echo $row['ID_Post']?>" class="post-title"><a target="_blank" href="<?php echo $g_root?>posts.php?ID_Post=<?php echo $row['ID_Post']?>"><?php echo  truncate_description($row['Title'],$f_max_title_length)?></a>
    <?php if ($is_user_own_post) {?>
        <span id="edit2.<?php echo $row['ID_Post']?>" style="display:none;" class="edit-button"><a target="_blank"  href="<?php echo $g_root?>editpost.php?ID_Post=<?php echo $row['ID_Post']?>">Edit</a></span>
        <?php  }?>
        </td>
    <td width="8%" align="center"><img id="slideIMG#<?php echo $row['ID_Post']?>" src="<?php echo $g_image_path?>slide/slideDown.png" alt="Expand and Collapse"/></td>
    <td width="20%" align="center"><a style="font-size:12px;" target="_blank" href="<?php echo $g_root?>users.php?id_user=<?php echo  $row['ID_User']?>"><?php echo $row['Username']?></a></td>

    <td width="20%" align="center"><span style="font-size:12px;"><?php echo format_date($row['Date_Created'])?></span> </td>
    <td width="2%"><a target="_blank" href="<?php echo $g_root?>feeds/rss.php?Group=<?php echo $row['ID_Group']?>"><img src="<?php echo $g_image_path?>icons/feed-icon-14x14.png" align="right" style="border:none;" alt="<?php echo $row['Group_Title']?> RSS Feed" /> </a></td>
  </tr>
</table>

    </td>
    <td width="6"></td>
  </tr>
  <tr>

    <td width="6"><img src="<?php echo $g_image_path?>corners/Corners_06.png" width="6" height="6" align="left" /></td>
    <td></td>
    <td width="6"><img src="<?php echo $g_image_path?>corners/Corners_07.png" width="6" height="6" align="right" /></td>
  </tr>
</table>
</div>

 

[BillyRayPreachersSon]

Read my previous post. You have the :hover pseudo-class on a TABLE element.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[FugitivePuppeT]

IE6 aside, i am running this on IE7 which DOES support it on more thank just links, but i dont think that is the issue here.

I will try replacing the :hover with a class change or something but i really dont see that helping the situation.

 

[FugitivePuppeT]

Okay, i just got rid of any :hover and replaced it with javascript className changes and it runs a TINY bit better, but it still has the problem if i move the cursor at any speed in IE it will skip.