Link to home
Start Free TrialLog in
Avatar of Panos
PanosFlag for Germany

asked on

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/#)
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
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
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
Also try wraping the ul's inside a div.
Avatar of Panos
Panos
Flag of Germany image

ASKER

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

Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
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.
Avatar of Panos
Panos
Flag of Germany image

ASKER

replace ............ with ...........??
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
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

Avatar of Panos
Panos
Flag of Germany image

ASKER

The plugin is not working  adding the iframe class to the main ul
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
Is it possible to host the files in a server and give a working link to check?
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
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

Avatar of Panos
Panos
Flag of Germany image

ASKER

I can upload the files in rapidshare and post the link.After you download the files i will delete them
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
Downloaded. Checking.
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
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

Avatar of Panos
Panos
Flag of Germany image

ASKER

slide effect is worse.I have checked this allready
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
No effect seems to work perfectly

<ul class="mlddm">

Open in new window

Avatar of Panos
Panos
Flag of Germany image

ASKER

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.
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
The issue is because of the conflict(rendering) of iframes and animation effects.
Avatar of Panos
Panos
Flag of Germany image

ASKER

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)
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
In IE8 its better.

This should check if its IE6 or not
Avatar of Panos
Panos
Flag of Germany image

ASKER

???
ASKER CERTIFIED SOLUTION
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Panos
Panos
Flag of Germany image

ASKER

If js disabled?
<noscript><ul class="mlddm"></noscript>
??
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
Yes.

Note that if js disable jquery and bgiframe wont work!
Avatar of Panos
Panos
Flag of Germany image

ASKER

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);
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
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
Avatar of Panos
Panos
Flag of Germany image

ASKER

OK kiranvj
Avatar of Panos
Panos
Flag of Germany image

ASKER

Thank you for your help
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image
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/