Menu Fader + EasySlider + WordPress + IE = Error

[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:

Code:

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

I use Menu fader this way:

in header.php > I have:

Code:

in submenu.php > I have :

Code:

• /productos/linea-auxiliar/”>Línea Auxiliar
• /productos/linea-botanica/”>Línea Botanica
• /productos/linea-purificante/”>Línea Purificante
• /productos/linea-sensi-uva/”>Línea Sensi-Uva
• /productos/linea-hydrafrutal/”>Línea Hydrafrutal
• /productos/linea-platina/”>Línea Platina
• /facial-2/linea-platina-plus/”>Línea Platina Plus
• /productos/linea-skin-white/”>Línea Skin White

• /productos/linea-auxiliar/”>Línea Auxiliar
• /productos/linea-botanica/”>Línea Botanica
• /productos/linea-purificante/”>Línea Purificante
• /productos/linea-skin-white/”>Línea Skin White

• /productos/linea-auxiliar/”>Línea Auxiliar
• /productos/linea-botanica/”>Línea Botanica
• /productos/linea-purificante/”>Línea Purificante
• /productos/linea-skin-white/”>Línea Skin White

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

Code:

$(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ínea’,
prevText:’Regresar’

});

//Reductiva

$(“#slider-wide”).easySlider({
auto: false,
continuous: false,
nextText:’Más’,
prevText:’Regresar’

});

//Scroller

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

//–>

});

Also I use a Jquery from google the last version :

Quote:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot; 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!:

Code:

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

Code:

-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:

Code:

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

but this other section look odd:

Code:

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:

Code:

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

[Author]

Posts