Hola señores... como pueden ver soy demasiado nuevo en este site aunque llevo visitandolo bastante tiempo y me llena de información pero....aunque me duela, voy a gastar los primeros post en pedir ayuda jaja, lo siento y espero que me puedan hechar un cable o una mano al cuello... y sobre todo, muchísimas gracias.

Les cuento, resulta que estoy realizando una web para darme publicidad y ganarme la vida en estos tiempos de crisis... supongo que muchos de vosotros me entendereis.. :P

el site lo tengo hospeado en miarroba como sitio de pruebas, y es el siguiente: [Enlace externo eliminado para invitados]

y bueno, antes de nada voy a dejarles todo claro para evitar perdidas de tiempo.

La web está programada en css, html, php y javascript.

El efecto de los menús lo consigo gracias a los módulos que me ofrece la librería de jquery, así como los botones de navegación situado a la izquierda que aquí es donde tengo mis problemas....

Resulta que conseguí mediante el módulo de jquery scrollable, crear esos "bonitos" botones de navegación, pero debido a mi baja experiencia en javascript, (y seguro que lo que pido es una tontería) no sé como aplicarle un efecto de "onmouseover" y "onmouseout" a esos botones usando esos modulos mencionados anteriormente.

Les muestro el código de la css, de la página y del script encargado de hacer la función de scrollbar:

css:

Código: Seleccionar todo

.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;
}

caja en la página donde aperecen los botones (con un amago de funcion onmouseover xD):

Código: Seleccionar todo

<DIV CLASS="butons">
<A CLASS="prev browse up disabled" onmouseover="function()"></A>
<A CLASS="next browse down disabled" onmouseover="function()"></A>
</DIV>
js que hace la función del scrollbar (obviamente cargando anteriormente jquery.js):

Código: Seleccionar todo

$(function() {		
		
	$(".scrollable").scrollable({ vertical: true, mousewheel: true, speed: 400});	
	
});
como pueden ver al pulsar los botones en la web todo funciona perfectamente, baja el contenido de la caja y sube según clickeas los botones (enlaces en este caso).


Ahora viene la duda:

1 - Me gustaría que al pasar el ratón por encima de esos botones, también siguiera haciendo ese efecto de subir y bajar el contenido de la caja sin necesidad de tener que pulsarlos y usar ese recurso como 2ª opción.

Seguro que es algo sencillito pero mi ignorancia y mi desconocimiento de js supongo ke me limita diariamente y no me deja pasar de ahí xD.

2 - Ya de paso si saben de algún hosting gratuito que vaya más fluido que miarroba me sería un grato placer ya que como también pueden comprobar la web tarda 300 años en cargar.


Espero que puedan ayudarme, disculpen por las molestias, y a su vez espero alguna respuesta que me pueda servir, nuevamente muchísimas gracias y Salu2
Daria todo lo que sé por la mitad de lo que ignoro
No entiendo mucho a lo que te refieres pero con Onmouseover consigues el efecto de con solo pasar el ratón sobre el boton y con OnClick consigues el efecto de al dar clic activar el scroll, no veo problemas en el código, quizá si ejecutas la función aparte te funcione, algo como

function scrollboton()
{
//..aquí el código para activar el scroll
}
y ahora sí lo llamas en la función <A CLASS="prev browse up disabled" onmouseover="scrollboton()"></A>
//mHmm..
linkgl escribió:No entiendo mucho a lo que te refieres pero con Onmouseover consigues el efecto de con solo pasar el ratón sobre el boton y con OnClick consigues el efecto de al dar clic activar el scroll, no veo problemas en el código, quizá si ejecutas la función aparte te funcione, algo como

function scrollboton()
{
//..aquí el código para activar el scroll
}
y ahora sí lo llamas en la función <A CLASS="prev browse up disabled" onmouseover="scrollboton()"></A>
El code que les puse funciona sin problemas, hago click en el boton y los contenidos de la caja bajan y suben sin problemas, lo que quiero conseguir es que también haga el mismo efecto al pasar el ratón por encima del botón, sin necesidad de pulsar éste.

he probado lo que me has dicho quedandome así:

Código: Seleccionar todo

$(function scrollboton() {		
		
	// iniciando scrollable con soporte mousewheel
	$(".scrollable").scrollable({ vertical: true, mousewheel: true, speed: 400});	
	
});

Código: Seleccionar todo

<A CLASS="prev browse up disabled" onmouseover="scrollboton()"></A>
<A CLASS="next browse down disabled" onmouseover="scrollboton()"></A>
y bueno todo se queda igual y sigue sin hacer el efecto onmouseover...

en cuanto al código para activar el scroll que me dices linkgl... cómo sería?? como lo he hecho io u otro?? sk ia les dije ke no tengo demasiados conocimientos javascript...más bien nulos jeje.

Gracias y Salu2 nuevamente
Daria todo lo que sé por la mitad de lo que ignoro
¿Alguna otra idea o algo más específico please? Gracias
Daria todo lo que sé por la mitad de lo que ignoro
Disculpa no había mirado que respondiste... Pues no veo donde esté el error debería funcionar con onmouseover ya que eso activa la función al pasar el mouse encima... Tendría que probar todo el código...
//mHmm..
nose si algo tiene que ver... pero si te sirve de ayuda te cuento lo siguiente:

resulta que todos los contenidos de la web están metidos en cajas... pues los botones están fuera de la caja padre, la función de subir y bajar el contenido más inferior que es el hijo, (donde aparecen los contenidos de cada página al pulsar sobre los enlaces del menú) pero si incrusto los botones dentro de esa caja hija, o bien desaparecen por problemas de espacio... o bien sigue subiendo y bajando el contenido pero sin ningun efecto onmouseover...

nose ké tendrá que ver.... de todas formas he intentado añadirle a la web un style de los contenidos que hace que cada vez que pulso sobre los enlaces del menú. Los contenidos se expandan y se cierren... lo que conlleva a más problemas:

1 - los botones hacen la función de subir y bajar el contenido sin problema.
2 - cuando clickeo en otro enlace de menú para que me muestre otra página en el contenido con el que estoy trabajando, éste contenido se expande y se vuelve a abrir pero los botones dejan de funcionar.


Aquí les dejo el code del efecto de los contenidos:

Código: Seleccionar todo

$(document).ready(function() {
						   
	var hash = window.location.hash.substr(1);
	var href = $('ul#menu li a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html .items';
			$('.items').load(toLoad)
		}											
	});

	$('ul#menu li a').click(function(){
								  
		var toLoad = $(this).attr('href')+' .items';
		$('.items').hide('slow',loaditems);
		$('#container');
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		function loaditems() {
			$('.items').load(toLoad,'',showNewitems())
		}
		function showNewitems() {
			$('.items').show('slow');
		}
		
		return false;
		
	});

});
es un código original retocado ya que creo que sobraban lineas y cosas que no iba a utilizar....

Lo que estaría bien sería que dentro de ese script, añadiera la función de los botones para que suban y bajen los contenidos (así supongo que se solucionaría el problema "2"), y también el efecto de onmouseover y onmouseout para los botones.... así, en un mismo script, todas las funciones que necesito.


Muchisimas gracias por el tiempo que estás perdiendo en mi linkgl, y estoy atento a cualquier proposición... como ya le dije... de javascript sé muy muy muy poquito... por lo que los sentidos se hacen más agudos en cada respuesta.

Gracias y Salu2
Daria todo lo que sé por la mitad de lo que ignoro
Mmm esque te complicaste mucho, estuve mirando tu página web y algúnos códigos podrían hacer interferencia con otros, como que hiciste muchos copy y paste y modificaste algunos códigos pero todo esta revuelto, las funciones $(function... son para que se ejecuten sin tener que llamar una función y tu pegaste dos de esas una puede afectar a la otra, y los botones no surten efecto porque estan mal ubicados estan como "detras" del scroll entonces no funcionan porque nunca podras pasar el mouse sobre ellos, ubicalos en otro lado bien para que el js pueda surtirles efecto, porque coloque una funcion que no existía para mirar la consola de errores y no marca nada quiere decir que no se esta ejecutando la acción en el botón

Lo primero que tienes que hacer es ordenar toda tu página, luego tu código por que así me es muy difícil ver cual es el problema
//mHmm..
jeje yo lo veo ordenado excepto los scripts que si, como tu dices son copy&paste excepto alguna pequeña modificación que hice (un poco a ciegas).

Te refieres a ordenar las cajas?, hacerlas más grandes y meter en la misma caja de contenido los botones??

De ser así voy a intentar xke una vez lo intenté y el menú salía descuadrado o no funcionaba bien...

Entonces lo que decía antes también repercutía... bno hecharé un vistazo y les cuento. De cualquier modo... ¿qué mas le encontraste, como podría ordenarlo?

Muchisimas gracias y nuevamente Salu2
Daria todo lo que sé por la mitad de lo que ignoro
Metiendo el código del scroll en una funcion aparte quedandote algo asi:

Código: Seleccionar todo

function scrll()
{
  $(".scrollable").scrollable({ vertical: true, mousewheel: true, speed: 400
}
Y colocando la función en los botones y el div del scroll:

Código: Seleccionar todo

<A CLASS="prev browse up disabled" onmouseover="scrll();"></A>
<A CLASS="next browse down disabled" onmouseover="scrll();"></A>

Código: Seleccionar todo

<DIV CLASS="scrollable" onmouseover="scrll();">
y colocar los botones afuera de la caja del scroll ya sea debajo o por arriba, lo acabo de probar y así me funciona quiza tu problema es que están mal posicionados los botones
//mHmm..
jeje creo que algo hemos conseguido aunque no el efecto deseado... resulta que los botones no aparecen directamente.. xD

tengo que ir con el ratón aposta a ellos para que derepente aparezcan y hagan la misma función que antes, la de subir y bajar, pero no la de subir y bajar mientras tengo el ratón encima de el...

Gracias nuevamente y Salu2
Daria todo lo que sé por la mitad de lo que ignoro
Vale linkgl. De primeras darte las gracias por la ayuda y la perdida de tiempo que estás empleando conmigo... y creo que me voy a remontar a una de tus respuestas anteriores... Ordenar el Código.

Veamos, creo que voy a dejar un poco más de lado el tema de los botones, al parecer según pruebas que estoy haciendo no solamente los problemas radican en la posición de los botones, sino en el script que uso para hacer el efecto de los contenidos según pincho en el menú, que se expanden y que se cierran.

Si te has dado cuenta, cada vez que se pulsa en un enlace del menú, siempre aparece por delante un "#" y los contenidos no cargas. Lo que aquí empieza la duda principal... como bien dijo albert einstein: "si buscas resultados diferentes no hagas siempre lo mismo", y eso me está llevando a erradicar el problema desde la base y empezar a remodelar el code en busca de fayos....

En primer lugar si ya viste el source de la web, hay un <div> que se llama container, donde aquí se meten todos los contenidos.

Pues vale, si esa caja la amplio, el menú totalmente se me descuadra, pero también me dá flujo para hacer que los botones queden dentro de ese container y no con position:absolute que creo que es lo que en realidad hace perder sus cualidades.

Entonces.... dado el problema de la <div class="container"> con los elementos del menú, supongo que ahí resolveré varios problemas como el de los botones y el de los contenidos.


Por lo tanto creo que voy a empezar por ahí. Por esa caja maliciosa... ;P, y luego tranquilamente el problema de los contenidos y del efecto onmouseover.


Aquí te muestro la css de la caja y del menú que es lo que descuadra todo.

Código: Seleccionar todo

#container {
	width: 640px;
	margin: auto;
}

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;
}
- Sprite.png es el menú en sí, es decir, los botones.
- menu.png es una barra de 2px que se muestra debajo del menú.

Si a esa caja #container la amplio a 800px (x ejemplo), sprite.png se me queda totalmente desplazado a la izquierda, mientras que menu.png sigue permaneciendo en el centro.

He probado alterando los position, float, bottom left etc... pero ningun me dá resultados correctos...


Aquí dejo el Script que se encarga de darle movimiento al menú... probablemente algo salga de ahí.

Código: Seleccionar todo

	$(function() {
		// set opacity to null on page load
		$("ul# span").css("opacity","0");
		// on mouse over
		$("ul# 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');
		});
	});

Una vez deje todo cuadrado. Ya tendré el espacio de sobra como para meter los botones donde quiera y así matar 2 pájaros de un tiro.

Posteriormente me meteré con el contenido, que aparentemente, es el último problema de los 3 que tengo que me falta por soluccionar.

Y ahora me pregunto... ¿quién me mandaría meterle js y ajax a la web...? jejej


Muchisimas gracias nuevamente a tí en especial linkgl y a todos los que decidan hecharme un cable o al menos leer el post.

Salu2
Daria todo lo que sé por la mitad de lo que ignoro
Gracias por vuestra ayuda (ironía a excepción de linkgl)

Ya está todo soluccionado.
Daria todo lo que sé por la mitad de lo que ignoro
Responder

Volver a “JS”