Forums

Locke

UPDATED: 12/10/09.

Hi Everyone, This is my first post. and I'm having problems implementing MENU FADER in WORDPRESS and IE and EasySLider with IE7.

Hope somebody can help me resolving this issue..

the webpage:

http://natural-benefits.com/es/

I use Menu fader this way:

in header.php > I have:


<nav>
            
            <div id=\"mainmenu-wrap\">
            	<div id=\"facial-button\" class=\"button\">
                <img src=\"<?php bloginfo('template_directory'); ?>/img/facial-button.gif\" alt=\"facial\" class=\"button\" />
				</div>
				<div id=\"corporal-button\" class=\"button\">
                <img src=\"<?php bloginfo('template_directory'); ?>/img/corporal-button.gif\" alt=\"corporal\" class=\"button\" />
				</div>
                <div id=\"aromaterapia-button\" class=\"button\">
                <img src=\"<?php bloginfo('template_directory'); ?>/img/aromaterapia-button.gif\" alt=\"aromaterapia\" class=\"button\" />
				</div>				
	   		         
            
            <div class=\"clear\"></div>
            
            
            <?php include (TEMPLATEPATH . '/includes/submenu.php'); ?>
            
            </div>
            
                     
</nav>

in submenu.php > I have :



<div id=\"submenu\">          
  
            <div id=\"facial\">
			<ul>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-auxiliar/\">L&iacute;nea Auxiliar</a></li>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-botanica/\">L&iacute;nea Botanica</a></li>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-purificante/\">L&iacute;nea Purificante</a></li>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-sensi-uva/\">L&iacute;nea Sensi-Uva</a></li>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-hydrafrutal/\">L&iacute;nea Hydrafrutal</a></li>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-platina/\">L&iacute;nea Platina</a></li>
            <li><a href=\"<?php bloginfo('url'); ?>/facial-2/linea-platina-plus/\">L&iacute;nea Platina Plus</a></li>
            <li style=\"border:none;\"><a href=\"<?php bloginfo('url'); ?>/productos/linea-skin-white/\">L&iacute;nea Skin White</a></li>               
	        </ul>
			</div>
            
            
			<div id=\"corporal\">
            <ul>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-auxiliar/\">L&iacute;nea Auxiliar</a></li>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-botanica/\">L&iacute;nea Botanica</a></li>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-purificante/\">L&iacute;nea Purificante</a></li>
            <li style=\"border:none;\"><a href=\"<?php bloginfo('url'); ?>/productos/linea-skin-white/\">L&iacute;nea Skin White</a></li>     
			</ul>
			</div>
            
            
            
            <div id=\"aromaterapia\">
            <ul>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-auxiliar/\">L&iacute;nea Auxiliar</a></li>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-botanica/\">L&iacute;nea Botanica</a></li>
            <li><a href=\"<?php bloginfo('url'); ?>/productos/linea-purificante/\">L&iacute;nea Purificante</a></li>
            <li style=\"border:none;\"><a href=\"<?php bloginfo('url'); ?>/productos/linea-skin-white/\">L&iacute;nea Skin White</a></li>     
			</ul>
			</div>
			
</div>

I use a global.js to initialize several the scripts > i have:



$(document).ready(function(){
						   
//Menu Fader


		
			$(\"#facial-button\").css({
				opacity: 0.3
			});
			$(\"#aromaterapia-button\").css({
				opacity: 0.3
			});
		
			$(\"#mainmenu-wrap div.button\").click(function(){
				
				$clicked = $(this);
				
				// if the button is not already \"transformed\" AND is not animated
				if ($clicked.css(\"opacity\") != \"1\" && $clicked.is(\":not(animated)\")) {
					
					$clicked.animate({
						opacity: 1,
						borderWidth: 5
					}, 600 );
					
					// each button div MUST have a \"xx-button\" and the target div must have an id \"xx\" 
					var idToLoad = $clicked.attr(\"id\").split('-');
					
					//we search trough the content for the visible div and we fade it out
					$(\"#submenu\").find(\"div:visible\").fadeOut(\"fast\", function(){
						//once the fade out is completed, we start to fade in the right div
						$(this).parent().find(\"#\"+idToLoad[0]).fadeIn();
					})
				}
				
				//we reset the other buttons to default style
				$clicked.siblings(\".button\").animate({
					opacity: 0.5,
					borderWidth: 1
				}, 600 );
				
			});




// Inner Fader Globals


	$('#image_rotate').innerfade({ 
		speed: 'slow', 
		timeout: 4000, 
		type: 'sequence', 
		containerheight: '220px'
	});


//Dossiers


	$(\"#slider\").easySlider({
		auto: false,
		continuous: false,
		nextText:'Conocimiento de L&iacute;nea',
		prevText:'Regresar'

	});
	
	
//Reductiva


	$(\"#slider-wide\").easySlider({
		auto: false,
		continuous: false,
		nextText:'M&aacute;s',
		prevText:'Regresar'

	});	
	
//Scroller

                $('#scroll').jScrollPane({showArrows:false,scrollbarWidth:10, scrollbarMargin:20});

//-->

        });

Also I use a Jquery from google the last version :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" charset="utf-8"></script>

And all this JS's are in the footer.php

I have several jquery plugs, like easySlider, JScrollPane, etc....

--

The problem with Menu fader is:

Of course, Firefox, Chrome, Safari, are working great no issues in this browsers... But the conflict come with IE....

When I try to click in the second or third menu, I don't get anything.... it stays in the first menu. I mean is no action.

And in Easy Slider , Take a look how it look in IE7!:

http://natural-benefits.com/es/productos/linea-hydrafrutal/

Hope I make myself clear.. 'cos my english SUXZ... hehee :D

Thanks in adcvance.

cybershot

a link to your site is needed

Locke

Well I have a little problem, I have my site locally , but , let me , uploaded , and I''ll be back with the site online.....

thanks

cybershot

why do you have the js in the footer and not in the header?

Locke

Well in my experience sites load faster with the js's at the bottom......

Locke

Somehow, the product of my client is top secret,... SO I could not open the web page until the launch day......

and I have to wait util the that day.....

I will try whatever is on my hands to make work Menu Fader in IE, if I can't then I will search for an other solution.

If somebody detects an error in my code above I will appreciate the warning.

thanks!

Locke

I just find a fast solution for this issue... but is nothing about jquery or else... is about CSS

so I just add

	

-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\"; // IE 8  
-filter: alpha(opacity=50); // IE 5-7

to my css

and the problem was solved..... without border-bottom, but it solve temporary the problem.

Locke

I Just Update the first post , with the adress where the weppage is and also added a new issue , hopingo somebody could help me.

Thanks very much!

Locke

SOmbody know why , in IE7 , thios section look ok:

http://natural-benefits.com/es/reductiva/linea-reductiva/

but this other section look odd:

http://natural-benefits.com/es/productos/chocolate/

Locke

Hey hi everyone , it's again me je :D

I would show how does menu fader show in IE (7-8) in the website:

http://natural-benefits.com/es/

treehouse : what would you like to learn today?

Forums

Menu Fader + EasySlider + WordPress + IE = Error