Hola estoy en la creacion de un nuevo proyecto, y estoy tratando de implementar un poco de javascript usando jquery para aprender un poco mas este lenguaje que tanto me interesa.
http*://spedevigner.com/Sitios/Julio%20Doldan%20Ltda/home*.html
bueno ahora les comento tengo problemas al usarlo en versiones de ie, ya que ni me abre el div contenedor del iframe, y tambien tube problemas con la version de opera ya que cuando paso del boton al div se me cierra aunque en el codigo haya puesto trabas para que suceda eso ademas que no me funciona el fadeIn ni el fadeOut del jquery.
tambien estoy usando una clase de js que crea un tipo de timers nose si ahi estara el error con el opera.
bueno espero que me puedan dar una mano ya que solo no puedo aunque seguire intentando.
Código PHP:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Portada Julio Doldan Ltda</title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.timers.js" type="text/javascript"></script>
<script src="Scripts/menuSec.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
menuSec();
});
$(window).resize(function(){
actMedidas();
});
</script>
<link rel="stylesheet" type="text/css" href="CSS/estructura.css" />
</head>
<body>
<div id="contenedor">
<div id="banner">
</div>
<div id="btnSec">
<ul id="navegacion">
<li><a href="hola.html" id="btnEdificios">Edificios</a></li>
<li><a href="hola.html" id="btnBarbacoas">Barbacoas</a></li>
<li><a href="hola.html" id="btnCasas">Casas</a></li>
</ul>
</div>
<div id="contenido">
</div>
<div id="pie">
</div>
</div>
</body>
</html>
Código PHP:
// JavaScript Document
var sec = Array('seccBtnEdi','seccBtnCha','seccBtnCas');
function menuSec(){
/*nos devuleve la posicion del objeto btnEdificios siempre es la distancia desde arriba y desde la izquierda*/
var left = $("#btnEdificios").position().left;
var top = $("#btnEdificios").position().top;
var btn = Array('btnEdificios','btnBarbacoas','btnCasas');
var cont = Array('<iframe scrolling="no" frameborder="0" src="edificios.html" width="812" height="200"></iframe>',
'<iframe scrolling="no" frameborder="0" src="barbacos.html" width="812" height="200"></iframe>',
'<iframe scrolling="no" frameborder="0" src="casas.html" width="812" height="200"></iframe>');
/*posicionamos los div con sus iframes correspondientes en la ventana del explorador*/
for(i = 0; i <= sec.length-1; i++){
$('body').after('<div id="' + sec[i] + '">' + cont[i] + '</div>');
$('#'+sec[i]).css( { 'background-color': '#FFF', 'color': '#FFF','height': 200 + 'px', 'width': 816 + 'px', 'position': 'absolute', 'display': 'none', 'z-index': '100', 'top': top+20 +'px', 'left': left-23 + 'px' } );
}
/*ahora cargamos los eventos de los 3 botones para que hagan el efecto de fadeIn y fadeOut*/
$('#'+btn[0]).mouseover(function(){
$('#'+sec[0]).fadeIn('slow');
$('#'+btn[0]).stopTime(0, notmouseout0);
});
$('#'+btn[1]).mouseover(function(){
$('#'+sec[1]).fadeIn('slow');
$('#'+btn[1]).stopTime(1, notmouseout1);
});
$('#'+btn[2]).mouseover(function(){
$('#'+sec[2]).fadeIn('slow');
$('#'+btn[2]).stopTime(2, notmouseout2);
});
/*-----------------------------------------------*/
$('#'+btn[0]).mouseout(function(){
$('#'+btn[0]).everyTime(300, 0, notmouseout0);
});
$('#'+sec[0]).mouseover(function(){
$('#'+btn[0]).stopTime(0, notmouseout0);
});
$('#'+sec[0]).mouseout(function(){
$('#'+sec[0]).fadeOut('slow');
});
/*-----------------------------------------------*/
$('#'+btn[1]).mouseout(function(){
$('#'+btn[1]).everyTime(300, 1, notmouseout1);
});
$('#'+sec[1]).mouseover(function(){
$('#'+btn[1]).stopTime(1, notmouseout1);
});
$('#'+sec[1]).mouseout(function(){
$('#'+sec[1]).fadeOut('slow');
});
/*-----------------------------------------------*/
$('#'+btn[2]).mouseout(function(){
$('#'+btn[2]).everyTime(300, 2, notmouseout2);
});
$('#'+sec[2]).mouseover(function(){
$('#'+btn[2]).stopTime(2, notmouseout2);
});
$('#'+sec[2]).mouseout(function(){
$('#'+sec[2]).fadeOut('slow');
});
}
function notmouseout0(){
$('#'+sec[0]).fadeOut('slow');
}
function notmouseout1(){
$('#'+sec[1]).fadeOut('slow');
}
function notmouseout2(){
$('#'+sec[2]).fadeOut('slow');
}
/*esta funcion nos hace el calculo para el resize del navegador por las dudas que lo modifiquen*/
function actMedidas(){
var left = $("#btnEdificios").position().left;
var top = $("#btnEdificios").position().top;
for(i = 0; i <= sec.length-1; i++){
$('#'+sec[i]).css({ 'top': top+22 +'px', 'left': left-23 + 'px' });
}
}