Foros del Web » Programando para Internet » Javascript »

Problema con Anclas en Menu

Estas en el tema de Problema con Anclas en Menu en el foro de Javascript en Foros del Web. Hola a todos, a ver si hay alguna bendita alma que me ayude no doy con la solución a un problema, estoy haciendo mi web ...
  #1 (permalink)  
Antiguo 02/02/2012, 23:46
Avatar de demoche  
Fecha de Ingreso: junio-2006
Mensajes: 124
Antigüedad: 17 años, 10 meses
Puntos: 0
Problema con Anclas en Menu

Hola a todos, a ver si hay alguna bendita alma que me ayude
no doy con la solución a un problema, estoy haciendo mi web con navegación horizontal pero me tope con el siguiente problema que paso a describir.

Tengo el menu flotante fijo en la parte izquierda de la pantalla y debajo de él pasan las distintas secciones, debajo del menu queda por default una parte que se llama para identificar en este ejemplo NULLhidden y luego la 1º seccion (s) "Home" y sucesivamente las demás secciones, pues bien, todo bien solo que si por ejemplo voy hasta la última sección "Contacto" y cliqueo en el menu "Home" vuelve a esa sección pero queda debajo del menu, pues bien a mi me interesaria indicarle que vuelva a "X" distancia a la derecha del menu fijo, es decir donde aparece la sección "HOME" cuando se ingresa al sitio, me explico?

Esta es la url de prueba > TEST

Busque por el lado de los css y no doy, que deberia hacer?
Muchas Gracias
demoche
  #2 (permalink)  
Antiguo 03/02/2012, 07:05
 
Fecha de Ingreso: octubre-2010
Mensajes: 107
Antigüedad: 13 años, 6 meses
Puntos: 14
Respuesta: Problema con Anclas en Menu

Al script que hace el dezplazamiento a cada seccion de la pagina agregale un offset, para que dezplaze menos hacia la izquierda y quede visible el elemento.
  #3 (permalink)  
Antiguo 03/02/2012, 23:04
Avatar de demoche  
Fecha de Ingreso: junio-2006
Mensajes: 124
Antigüedad: 17 años, 10 meses
Puntos: 0
Respuesta: Problema con Anclas en Menu

Gracias por la orientación pero no entiendo como aplicar el offset y su relación con el css.

Acá dejo el codigo.

Código:
window.onload = function() {
	HtinyScrolling.init(); scrollTips.init();
}

function gotoit(target){
	HtinyScrolling.scrollToIt(target);
}

var HtinyScrolling = {
	speed : 50,      //set here the scroll speed: when this value increase, the speed decrease. 
	maxStep: 150,	 //set here the "uniform motion" step for long distances
	brakeK: 3,		 //set here the coefficient of slowing down
	hash:null,		
	currentBlock:null,
	requestedX:0,
	init: function() {
		var lnks = document.getElementsByTagName('a');   
		for(var i = 0, lnk; lnk = lnks[i]; i++) {   
			if ((lnk.href && lnk.href.indexOf('#') != -1) &&  ( (lnk.pathname == location.pathname) ||
			('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {  
			addEvent(lnk,'click',HtinyScrolling.initScroll,false);
			lnk.onclick=function(){return false;} // Safari
			}   
		}    
	},
	getTarget: function(target) {
		while(target.tagName.toLowerCase() != 'a')
			target = target.parentNode;
		return target;
	},
	getElementXpos: function(el){
		var x = 0;
		while(el.offsetParent){  
			x += el.offsetLeft;    
			el = el.offsetParent;
		}	return x;
	},		
	getScrollLeft: function(){
		if(document.all) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
		else return window.pageXOffset;   
	},	
	getWindowWidth: function(){
		if (window.innerWidth)	return window.innerWidth; 
		if(document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;
	},
	getDocumentWidth: function(){
		if (document.width) return document.width;
		if(document.body.offsetWidth) return document.body.offsetWidth;
	},
	initScroll: function(e){
		var targ;  
		if (!e) var e = window.event;
		if (e.target) targ = e.target;
		else if (e.srcElement) targ = e.srcElement;  
		targ = HtinyScrolling.getTarget(targ);  //a fix by Skid X
		HtinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length); 
		HtinyScrolling.currentBlock = document.getElementById(HtinyScrolling.hash);   
		if(!HtinyScrolling.currentBlock) return;
		HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock); 
		HtinyScrolling.scroll(targ); 
		return false;
	},
	scrollToIt: function(targ){ //thanks to Michael Ionita-Ganea
		target = document.getElementById(targ);
		HtinyScrolling.currentBlock = document.getElementById(targ);
		if(!HtinyScrolling.currentBlock) return;
		HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock);
		HtinyScrolling.scroll(target);
		return false;
		
	}, 
	scroll: function(targ) {
		var left  = HtinyScrolling.getScrollLeft();
		if(HtinyScrolling.requestedX > left) { //a fix by Michael Ionita-Ganea
			var endDistance = Math.round((HtinyScrolling.getDocumentWidth() - (left + HtinyScrolling.getWindowWidth())) / HtinyScrolling.brakeK);
			endDistance = Math.min(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK), endDistance);
			var offset = Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
		}else {
				var offset = - Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
		} 
		window.scrollTo(left + offset, 0);
		if(Math.abs(left-HtinyScrolling.requestedX) <= 1 || HtinyScrolling.getScrollLeft() == left) {
			HtinyScrolling.hash = null;
		} else 	setTimeout(HtinyScrolling.scroll,HtinyScrolling.speed);
	}
}

 
var scrollTips = {
	dx : null,
	init : function() {	
		if (window.addEventListener) {
		window.addEventListener("DOMMouseScroll", this.mouseScroll, false);
		} else document.attachEvent("onmousewheel", this.mouseScroll); 
		var left = document.getElementById('left');
		addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;});
		addEvent(left,'mouseout', function() { clearInterval(this.dx); return false;});
		var right = document.getElementById('right');
		addEvent(right,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(1)',100);return false;});
		addEvent(right,'mouseout', function() { clearInterval(this.dx); return false;});
	},
	mouseScroll : function(e) {
		if (!e) var e = window.event;
		  var scroll = e.detail ? e.detail * 20 : e.wheelDelta / -20;
		if (scroll>=0 ){  
		window.scrollBy(80,0);
		} else  window.scrollBy(-80,0) ; 
	},	
	arrowScroll: function(val) {
		if(val==1) {
			window.scrollBy(70,0);
		} else {
			window.scrollBy(-70,0)
		}
	}
}


function addEvent( obj, type, fn ) {
	if (obj.addEventListener)
		obj.addEventListener( type, fn, false );
	else if (obj.attachEvent) {
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
	}
}

function removeEvent( obj, type, fn ) {
	if (obj.removeEventListener)
		obj.removeEventListener( type, fn, false );
	else if (obj.detachEvent) {
		obj.detachEvent( "on"+type, obj[type+fn] );
		obj[type+fn] = null;
		obj["e"+type+fn] = null;
	}
}
Disculpen mi ignorancia pero llevo tiempo lidiando con esto y no puedo dar.
Gracias
  #4 (permalink)  
Antiguo 04/02/2012, 13:56
 
Fecha de Ingreso: octubre-2010
Mensajes: 107
Antigüedad: 13 años, 6 meses
Puntos: 14
Respuesta: Problema con Anclas en Menu

Hola, en la parte del codigo

Código Javascript:
Ver original
  1. .....
  2.  
  3. getElementXpos: function(el){
  4.         var x = 0;
  5.         while(el.offsetParent){  
  6.             x += el.offsetLeft;    
  7.             el = el.offsetParent;
  8.         }   return x;
  9.     },
  10.  
  11. ....


cambia "return x" por "return x - 500", le puedes ajustar el numero, en vez de 500, segun los resultados, mientras mas grande sea el numero mas hacia la derecha quedara el elemento.

Última edición por MARCASTELEON; 04/02/2012 a las 14:06
  #5 (permalink)  
Antiguo 04/02/2012, 17:13
Avatar de demoche  
Fecha de Ingreso: junio-2006
Mensajes: 124
Antigüedad: 17 años, 10 meses
Puntos: 0
Respuesta: Problema con Anclas en Menu

GRACIAS MARCASTELEON!!!!
NO tenes idea la alegria que me diste con tu ayuda poder resolver este problema que tanto me tenia frenado!
Muchas Gracias de Nuevo!!!!!

demoche
  #6 (permalink)  
Antiguo 04/02/2012, 17:15
 
Fecha de Ingreso: octubre-2010
Mensajes: 107
Antigüedad: 13 años, 6 meses
Puntos: 14
Respuesta: Problema con Anclas en Menu


Etiquetas: anclas, css
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:37.