conflict script in IE and Firefox

[sandra]

i used two scripts simultaneous in one table but i shows different in IE and in Firefox.
every thing in IE shows correctly but in Firefox shows with delay.
anyone can tell me what should i do to resolve this problem?

these are the links of scripts:
http://www.dynamicdrive.com/dynamicindex1/popupmenu.htm
http://www.javascriptkit.com/script/script2/imagerollover.shtml

[bernie1227]

Is there any chance you could post your code for the scripts and the table?

[jscheuer1]

Possibly the images are not preloading properly in Firefox. I've noticed that in Firefox if the window loses focus, preloads (used by the rollover script) are lost. I believe this is a result of Firefox attempting to conserve memory, it has been having problems with that (using too much system memory) lately. It's even possible that the preloads are being ignored or lost after they're loaded and before they're needed.

But it might be something else.

In order to see what the problem is I would need a link to the live page:

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[sandra]

Dear john
thanks for your great information

this the link, you can find it in product icons in the middle of the page.
http://www.avajang.com/index_test.htm

[ApacheTech]

I have no idea why, but I posted this in the wrong thread before.


Lately? Firefox has been leaking memory like a sieve since it's conception, lol.

To solve the possible preload problem, can you still do the CSS Image Preload hack?



body
{
background-image: url( 'path/to/image1.png' );
background-image: url( 'path/to/image2.png' );
background-image: url( 'path/to/image3.png' );
background-image: url( 'path/to/image4.png' );
background-image: url( 'path/to/image5.png' );
background-image: url( 'path/to/image6.png' );
background-image: none;
}

[jscheuer1]

ApacheTech, I'm not sure if that would work in cases where preloads are dropped. But after looking at the page, that doesn't appear to be what's happening anyway. And that hack would be potentially more likely to succeed if the images were assigned to a visibility hidden, position absolute div containing the images either as images or as background images for separate elements and not removed as that hack does.


sandra, I don't see any material difference between the two browsers. Or I misunderstood the original question.

Do you mean that the page takes longer to load in Firefox?

If so, I doubt there's anything you can do about that. Some pages load faster in one browser or another. Rarely do they load at the same speed in all browsers. Lately the fastest browser has generally been Google Chrome, with IE 9 right behind that. But that's just generally. On any given page, a different browser might be fastest.

Or, I might be missing something. If so, could you be more specific?

[sandra]

Dear John
thanks for your attention,
the product icon shows so coorectly in IE
(i mean whenever the mouse get on each of them it shows the rollover picture and also the sub menu but in firefox you should mouse over on the corner of each picture to show the rollover and for sub menu you should get upper than the corner so it cause that both of menu and rollover don't show at the same time correctly)

[jscheuer1]

I had noticed that, but wasn't going to mention it because in IE it does the same thing. IE 9 that is. But I figured you might be using IE 8 so I checked in IE 9 using its IE 8 mode. The same thing still happened. So I figured you were OK with that. This will happen in IE 9, Firefox, Chrome, Safari, etc.

But after reading your most recent post, I fired up my virtual machine where I have a real IE 8. There it worked like you say. Apparently only IE 8 is doing what you want.

To correct this problem, we need to get rid of the image maps and use a different rollover function. Also I notice that the page is using 2 versions of jQuery where only one is required.

So, step by step -

Change this as shown (highlighted and red):


<title>Avajang ICT Group Website - وب سایت گروه شركت*هاي آواژنگ </title>
<link rel="stylesheet" type="text/css" href="data/stylesheets/layout.css">
<link rel="stylesheet" type="text/css" href="data/stylesheets/define.css">
<link rel="stylesheet" type="text/css" href="data/stylesheets/formSkinning.css">
<script type="text/javascript" language="JavaScript1.2" src="data/SpryAssets/_pgtres/stm31.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="data/SpryAssets/fadeslideshow.js"></script>
<script type="text/javascript" src="data/SpryAssets/gradualfader.js">

Get rid of this (highlighted):


. . . imeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</script>
<link rel="stylesheet" type="text/css" href="data/stylesheets/popupmenu.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="data/SpryAssets/popupmenu.js">

/***********************************************
* Image Menu - Products Icons
***********************************************/

</script>
<script type="text/javascri . . .

Get rid of this (highlighted):


. . . uage="javascript" type="text/javascript">
persianstat(10039870, 0);
</script>
<!-- /PersianStat -->
<script type="text/javascript">
//Following function should be called at the end of the page:
imagerollover()
</script>
</p>

</body>

</html>

Change your data/SpryAssets/imagerollover.js file to this:


jQuery(function($){
var allimages = $('img[data-over]').mouseenter(function(){
this.src = this.getAttribute('data-over');
}).mouseleave(function(e){//alert(e.relatedTarget);
this.src = this.getAttribute('data-out');
}).each(function(){
var $this = $(this);
$(new Image()).attr('src', $this.attr('data-over'));
$('#' + $this.parent().attr('data-popupmenu')).hover(function(){
$this.trigger('mouseenter');
}, function(){
$this.trigger('mouseleave');
});
});
});

And replace each of the 16 these (leading spaces and tabs removed, so it will be viewable in the code block):


<map name="FPMap0">
<area href="#" shape="rect" coords="5, 2, 37, 30" data-popupmenu="popmenu1">
</map>
<img border="0" src="data/images/icon/product_mb_logo.gif" data-over="data/images/icon/product_mb_over_logo.gif" data-out="data/images/icon/product_mb_logo.gif" usemap="#FPMap0" />

with one of these:


<a href="#" data-popupmenu="popmenu1">
<img border="0" src="data/images/icon/product_mb_logo.gif" data-over="data/images/icon/product_mb_over_logo.gif" data-out="data/images/icon/product_mb_logo.gif" /></a>

Don't miss adding the trailing </a> tag after each image. make sure to preserve the unique data-popmenu attribute for each link as well as the src, data-over and data-out attributes for each image.

That's it, and it still works in IE 8. And should now work in all others as well (tested in the real IE 8, IE 9 Opera, Firefox, and Chrome). And it doesn't hurt the other rollovers that use the rollover code.

[sandra]

Dear John,
really thank you for your great suggestion and you great help.
it works now like that i want.
you resolve my problem.
again thanks alot for your help.:)