bgiframe plugin slow down animation

Hello experts.
i'm using the jquery.bgiframe 2.1.2 plugin (http://github.com/brandonaaron/bgiframe/downloads)to fix the z-index problems in IE6.
I'm using this in a drop down menu to cover the select tags.
When i'm using this in one only ul tag it is working ok.adding the class to all my ul (7) the dropdown is getting very slow.
I missed to say that i'm using the MLDDM script for the menu(http://spicebrains.com/multi-level-drop-down-menu/#)
LVL 2
PanosAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kiran Paul VJComputer EngineerCommented:
Is the menu coming faster if you dont use the bgiframe plugin?

Can you post the code or attached the full files as a zip or give a link where I can view it.

kiranvj
Kiran Paul VJComputer EngineerCommented:
Also try wraping the ul's inside a div.
Kiran Paul VJComputer EngineerCommented:
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

PanosAuthor Commented:
Hi kiranvj.
The menu is going faster even if i use the iframe class for one ul instead of 7 (in my testpage).
I can post only the html page because the js file is not freeware.
The plugin you posted is very nice but unfortunately it has no fade-slide functions and is not working when js is disabled.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" media="all" href="mlddmenu.css" />
<script language="javascript" type="text/javascript"   src="../js/jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript"  src="../js/jquery.bgiframe.js"></script>
<script type="text/javascript" src="mlddmenu.js"></script>
<script type="text/javascript" charset="utf-8">
			$(function() {
				$('.iframe').bgiframe({opacity:false});
				
			});
		</script>

</head>
<body>
<!-- HTML Menu Code -->
     <div class="divmlddm">
      <ul class="mlddm" params="0,0,500,fade,200,h">
	   <li><a href="#">About Us</a>
		<ul class="iframe">
			<li><a href="#">Foundation Histroy</a></li>
			<li><a href="#">Top Management</a></li>
			<li><a href="#">Strategy Determination</a></li>
			<li><a href="#">Performers</a></li>
		</ul>
	  </li>
	  <li><a href="#">Products</a>
		<ul class="iframe">
			<li><a href="#">Camera Batteries</a></li>
			<li><a href="#">Clapboards</a></li>
			<li><a href="#" class="hsub">Audio</a>
				<ul class="iframe">
					<li><a href="#">Audio Adapters</a></li>
					<li><a href="#">Azden Shotgun Mics</a></li>
					<li><a href="#">Headphone Amplifier</a></li>
					<li><a href="#">Mic Boom Poles</a></li>
					<li><a href="#">Wireless Mics</a></li>
					<li><a href="#" class="hsub">XLR Audio Adapter</a>
						<ul class="iframe">
							<li><a href="#">XLR-BP</a></li>
							<li><a href="#">XLR-BP Pro, XLR-BP 3 Pro</a></li>
							<li><a href="#">XLR Mix</a></li>
						</ul>
					</li>
					<li><a href="#">Headphones</a></li>
					<li><a href="#">XLR Audio Cables</a></li>
				</ul>
			</li>
			<li><a href="#" class="hsub">HD Video Backgrounds</a>
				<ul class="iframe">
					<li><a href="#">HD Video Backgrounds</a></li>
					<li><a href="#">High Definition Video Backgrounds</a></li>
				</ul>
			</li>
			<li><a href="#" class="hsub">LCD Monitors</a>
				<ul class="iframe">
					<li><a href="#">Sony 5.6" LCD Monitor</a></li>
					<li><a href="#">Samsung 5.6" LCD Monitor Kit</a></li>
					<li><a href="#">Monitor Mount</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Support</a>
		<ul>
			<li><a href="#">E-Mail</a></li>
			<li><a href="#">Submit Form</a></li>
			<li><a href="#">Call Center Phones</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Sitemap</a></li>
</ul>
<div style="clear:both"></div>
</div>
<br /><br /><br /><br /><br /><br />
<select name="" style="width:600px"></select>
<!-- /HTML Menu Code -->
<script type="text/javascript">
mlddminit();
</script>
</body>
</html>

Open in new window

Kiran Paul VJComputer EngineerCommented:
Its slow because there are nested ul tags. Without the js file I cannot do much. But lets try.

Can you replace

  • with
    • Also remove all
    • class="iframe"  from other ul tags.
    • After these changes there will be only one class="iframe" in the entire html file.
PanosAuthor Commented:
replace ............ with ...........??
Kiran Paul VJComputer EngineerCommented:
hmmm EE ate my codes



Can you replace

<ul class="mlddm" params="0,0,500,fade,200,h">

with 

<ul class="mlddm iframe" params="0,0,500,fade,200,h">

Open in new window

PanosAuthor Commented:
The plugin is not working  adding the iframe class to the main ul
Kiran Paul VJComputer EngineerCommented:
Is it possible to host the files in a server and give a working link to check?
Kiran Paul VJComputer EngineerCommented:
can you try this code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" media="all" href="mlddmenu.css" />
<script language="javascript" type="text/javascript"   src="../js/jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript"  src="../js/jquery.bgiframe.js"></script>
<script type="text/javascript" src="mlddmenu.js"></script>
<script type="text/javascript" charset="utf-8">
                        $(function() {
                                $('.iframe').bgiframe({opacity:false});
                                
                        });
                </script>

</head>
<body>
<!-- HTML Menu Code -->
     <div class="divmlddm">
      <ul class="mlddm" params="0,0,500,fade,200,h">
           <li><a href="#">About Us</a>
                <ul class="iframe">
                        <li><a href="#">Foundation Histroy</a></li>
                        <li><a href="#">Top Management</a></li>
                        <li><a href="#">Strategy Determination</a></li>
                        <li><a href="#">Performers</a></li>
                </ul>
          </li>
          <li><a href="#">Products</a>
                <ul class="iframe">
                        <li><a href="#">Camera Batteries</a></li>
                        <li><a href="#">Clapboards</a></li>
                        <li><a href="#" class="hsub">Audio</a>
                                <ul>
                                        <li><a href="#">Audio Adapters</a></li>
                                        <li><a href="#">Azden Shotgun Mics</a></li>
                                        <li><a href="#">Headphone Amplifier</a></li>
                                        <li><a href="#">Mic Boom Poles</a></li>
                                        <li><a href="#">Wireless Mics</a></li>
                                        <li><a href="#" class="hsub">XLR Audio Adapter</a>
                                                <ul>
                                                        <li><a href="#">XLR-BP</a></li>
                                                        <li><a href="#">XLR-BP Pro, XLR-BP 3 Pro</a></li>
                                                        <li><a href="#">XLR Mix</a></li>
                                                </ul>
                                        </li>
                                        <li><a href="#">Headphones</a></li>
                                        <li><a href="#">XLR Audio Cables</a></li>
                                </ul>
                        </li>
                        <li><a href="#" class="hsub">HD Video Backgrounds</a>
                                <ul>
                                        <li><a href="#">HD Video Backgrounds</a></li>
                                        <li><a href="#">High Definition Video Backgrounds</a></li>
                                </ul>
                        </li>
                        <li><a href="#" class="hsub">LCD Monitors</a>
                                <ul>
                                        <li><a href="#">Sony 5.6" LCD Monitor</a></li>
                                        <li><a href="#">Samsung 5.6" LCD Monitor Kit</a></li>
                                        <li><a href="#">Monitor Mount</a></li>
                                </ul>
                        </li>
                </ul>
        </li>
        <li><a href="#">Support</a>
                <ul>
                        <li><a href="#">E-Mail</a></li>
                        <li><a href="#">Submit Form</a></li>
                        <li><a href="#">Call Center Phones</a></li>
                </ul>
        </li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Sitemap</a></li>
</ul>
<div style="clear:both"></div>
</div>
<br /><br /><br /><br /><br /><br />
<select name="" style="width:600px"></select>
<!-- /HTML Menu Code -->
<script type="text/javascript">
mlddminit();
</script>
</body>
</html>

Open in new window

PanosAuthor Commented:
I can upload the files in rapidshare and post the link.After you download the files i will delete them
Kiran Paul VJComputer EngineerCommented:
Downloaded. Checking.
Kiran Paul VJComputer EngineerCommented:
Can you try slide effect instead of fade. It seems there is some prob with iframes and the drop down script


try 

<ul class="mlddm" params="1,-1,500,slide,200,h">

instead of 

<ul class="mlddm" params="0,0,500,fade,200,h">

Open in new window

PanosAuthor Commented:
slide effect is worse.I have checked this allready
Kiran Paul VJComputer EngineerCommented:
No effect seems to work perfectly

<ul class="mlddm">

Open in new window

PanosAuthor Commented:
By the way i have checked this with the apycom plugin (http://www.apycom.com/)and the result is the same.
When the plugin has no script inside that refers to the bgiframe plugin or a function itself to solve the problem i get this problem when i have a big number >5  of ul tags that need the iframe class.
Kiran Paul VJComputer EngineerCommented:
The issue is because of the conflict(rendering) of iframes and animation effects.
PanosAuthor Commented:
You are right.
The script (with the effect enabled) is working fine in all other browsers.(i don't know in IE7-8.)
So i could enable-disable this after browser checking,but i don't know how to do this.(if IE6 disable)
Kiran Paul VJComputer EngineerCommented:
In IE8 its better.

This should check if its IE6 or not
PanosAuthor Commented:
???
Kiran Paul VJComputer EngineerCommented:
Since you are already using jquery. This will work fine.


replace

<ul class="mlddm" params="0,0,500,fade,200,h">


with this

<script type="text/javascript">
if($.browser.msie && $.browser.version.substr(0,1)==6)
	document.write('<ul class="mlddm">');
else
	document.write('<ul class="mlddm" params="0,0,500,fade,200,h">');	
</script>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PanosAuthor Commented:
If js disabled?
<noscript><ul class="mlddm"></noscript>
??
Kiran Paul VJComputer EngineerCommented:
Yes.

Note that if js disable jquery and bgiframe wont work!
PanosAuthor Commented:
A little correction please.
I have in my original page below the main menu a dock menu.
To solve the problems with the dropdown menus and the dockmenus i have a script that is not working now:
(function($){
$(function(){
var getPointerBackup;
var disableGetPointer = function() {
return {x:-1000, y:-1000};
}
$('#mlddm').parent().mouseenter(function(){
getPointerBackup = jQuery.iUtil.getPointer;
jQuery.iUtil.getPointer = disableGetPointer;
}).mouseleave(function(){
jQuery.iUtil.getPointer = getPointerBackup;
});
});
})(jQuery);
Kiran Paul VJComputer EngineerCommented:
Hi panosms,

I am sorry. I am not familiar with this script. If you post it as a new question in jquery section more experts will see it and will get a better result.

Kiranvj
PanosAuthor Commented:
OK kiranvj
PanosAuthor Commented:
Thank you for your help
Kiran Paul VJComputer EngineerCommented:
Hi panosms,

Thanks for the points and grade.

But I am not fully satisfied since you didnt get what you want. But some things has technology limitation just like our case. Most software manufactures are stopping support for IE6. In my opinion IE6 is the worst browser ever created, but still has market share.

Check these
http://news.bbc.co.uk/2/hi/8488751.stm
http://humor.beecy.net/geeks/web-design/web-design.gif
http://justamemo.com/wp/wp-content/uploads/2009/06/momentile-ie6-denial-by-john-martz.png
http://www.iesucks.info/
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.