Aunque mi otra duda no terminó de responderse: ([URL="http://www.forosdelweb.com/f13/ayuda-implementando-js-web-z3r0n3-818505/"]http://www.forosdelweb.com/f13/ayuda-implementando-js-web-z3r0n3-818505/[/URL])
He decidido pasar página y tenerlo todo más cuadrado para dejarlo para después, ya que poco a poco me voy haciendo con el lenguaje y lo voy entendiendo y bueno, ahora les cuento..:
Resulta que quise hacer un script en JS para que al pulsar en cada enlace del menú, cargase los contenidos en un <div> sin necesidad de volver a recargar toda la página... Creo que lo consigo ya que cuando arranca la web aparece una barra de progreso y luego mientras voy pulsando en los enlaces se van cargando y no vuelve a saltar la barra de progreso por lo que me indica que funciona... pero tengo los siguientes problemas:
1 - Al pinchar en cada enlace, el contenido aparece en el <div>, pero el <div> no se actualiza, es decir, por ejemplo carga el contenido del enlace 1, deslizo el scroll un poco hacia abajo ya que el contenido es un poco largo.... ahora pincho en el enlace 2 y el contenido se carga pero el scroll sigue en la misma posición inicial.
2 - Como también puse en el otro post, dispongo de 2 botones fuera de todos los contenidos con position:absoulte para subir y bajar el scroll del <div> (que también funcionan con la clase mousewhell), y como más abajo verán en el code, supuestamente los cargo cada vez que pincho... pero no funciona, los botones no aparecen... pero sí puedo usar mousewhell en el <div>
3 - También quiero que el contenido se deslize de una manera peculiar... es decir, que haga un efecto y no se cargue de golpe... por ejemplo un SlideToggle o algo por el estilo.... y una vez implemento eso (como también veran en el code) me es necesario pulsar 2 veces en cada enlace, una para mostrar el contenido y otra para ocultarlo...
En definitiva... nose como repararlo por más vueltas que le doy.... y aquí os dejo los codes:
CSS del menú, los botones que hacen la función de scroll, y la caja de scroll:
Código:
.butons {
position: absolute;
top: 360px;
left: 250px;
}
a.browse {
position: relative;
display: block;
width: 30px;
height: 30px;
margin: 40px 10px;
cursor: pointer;
}
a.up, a.down {
background: url(../images/vert_large.png) no-repeat;
margin: 10px 50px;
}
a.up:hover {
background-position: -30px 0px;
}
a.up:active {
background-position: -60px 0px;
}
a.down {
background-position: 0px -30px;
}
a.down:hover {
background-position: -30px -30px;
}
a.down:active {
background-position: -60px -30px;
}
a.disabled {
visibility: hidden;
}
.scrollable {
position: relative;
overflow: hidden;
height: 260px;
width: 640px;
}
.scrollable .items {
position: relative;
}
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
ul#menu {
height: 40px;
list-style: none;
background: url(../images/menu.png) no-repeat bottom;
padding-top: 2px;
}
ul#menu li {
float: left;
}
ul#menu li a {
background: url(../images/sprite.png) no-repeat scroll top left;
display: block;
height: 37px;
position: relative;
}
ul#menu li a.inicio {
width: 160px;
}
ul#menu li a.servicios {
width: 160px;
background-position: -160px 0px;
}
ul#menu li a.promociones {
width: 160px;
background-position: -320px 0px;
}
ul#menu li a.contacto{
width: 160px;
background-position: -480px 0px;
}
ul#menu li a span {
background:url(../images/sprite.png) no-repeat scroll bottom left;
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
}
ul#menu li a span:hover {
cursor: pointer;
}
ul#menu li a.inicio span {
background-position: 0px -37px;
}
ul#menu li a.servicios span {
background-position: -160px -37px;
}
ul#menu li a.promociones span {
background-position: -320px -37px;
}
ul#menu li a.contacto span {
background-position: -480px -37px;
}
Ahora el <div> de los botones y los enlaces del menú:
Código:
<DIV CLASS="butons">
<A CLASS="prev browse up disabled"></A>
<A CLASS="next browse down disabled"></A>
</DIV>
<UL ID="'.CmenuJS.'">
<LI><A HREF="inicio" CLASS="inicio"><SPAN></SPAN></A></LI>
<LI><A HREF="servicios" CLASS="servicios"><SPAN></SPAN></A></LI>
<LI><A HREF="promociones" CLASS="promociones"><SPAN></SPAN></A></LI>
<LI><A HREF="contacto" CLASS="contacto"><SPAN></SPAN></A></LI>
</UL>
También me gustaría que en vez de clickear los botones también funcionasen con la opción OnmouseOver.... supongo que abrá que hacer una función que al estár el botón en :hover realize su función de scroll... como también que al pulsar en cada enlace del menú aparezca en la barar de título algo en este estilo "http://pagina/inicio" pero bueno esto más despacio que creo que ya son muchas cosas de por medio... ;P
Y aquí os dejo el .js
Código:
$(document).ready(function(){
$(".items").load("pages/info.php",scrll());
$(".inicio").click(function(evento){
evento.preventDefault();
$(".items").load("pages/inicio.php").toggle("slow");
});
$(".servicios").click(function(evento){
evento.preventDefault();
$(".items").load("pages/servicios.php").toggle("slow");
});
$(".promociones").click(function(evento){
evento.preventDefault();
$(".items").load("pages/promociones.php").toggle("slow");
});
$(".contacto").click(function(evento){
evento.preventDefault();
$(".items").load("pages/contacto.php").toggle("slow");
});
function scrll()
{
$(".scrollable").scrollable({ vertical: true, mousewheel: true, speed: 400});
}
return false;
});
$(function() {
// set opacity to null on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to null
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
Obviamente todo esto dado de la mano de la librería actualizada de Jquery.
Y creo que ya he pedido demasiado pero poquito a poco sé que se podrán resolver las dudas 1 a 1 sin necesidad de hacerlo todo de golpe.
Y otra acotación si no es mucho molestar.... me gustaría simplificar el .JS para hacerlo más liviano, ya que veo un desparrame de código...
no entiendo mucho javascript pero supongo que será algo así:
Código:
supongo que será así... nose espero sus respuestas y que tengan un huequecito para mis dudas please...//defino unas variables var MenuBottons = ['inicio', 'servicios', 'promociones', 'contacto']; var MenuURL = ['pages/info.php','pages/servicios.php','pages/promociones.php','pages/contacto.php']; //creo un array o un for o each o lo que haga falta para que funcione sin necesidad de desparramar tanto codigo....
Muchisimas gracias al menos por leerlo y Salu2 compañeros.
