[Resolvido] dockMenu com JavaScript e JQuery

[WebMasterJr 0]

Boa Tarde... depois de uma longa semana procurando algo bom para colocar de menu no meu site, achei algo bem lega, interessante e dificil.

 

Passei a semana toda procurando arrumar os probleminhas e até mesmo procurando outras formas de se fazer a mesma coisa.

 

O que eu havia achado não funciona também (para variar), então resolvi postar aqui o código que eu peguei com as alterações JS que fiz.

 

 

Abaixo está o JS que peguei que esta funcionando certinho:

 

        var dock = function (dock, sMin, sMax) {
        /* ---- private vars ---- */
        var xm = xmb = ov = 0;
        var M = true;
        var icons = document.getElementById(dock).getElementsByTagName('img');
        var N = icons.length;
        var s = sMin;
        var ovk = 0;
        var addEvent = function (o, e, f) {
	        if (window.addEventListener) o.addEventListener(e, f, false);
	        else if (window.attachEvent) r = o.attachEvent('on' + e, f);
        }
        var pxLeft = function(o) {
	        for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
	        return x;
        }
        for(var i=0;i<N;i++) {
	        var o = icons[i];
	        o.style.width = sMin+"px";
	        o.style.height = sMin+"px";
	        o.className = "dockicon";
        }
        var run = function() {
	        for(var i=0;i<N;i++) {
		        var o = icons[i];
		        var W = parseInt(o.style.width);
		        if(ov && ov.className=="dockicon") {
			        if(ov!=ovk){
				        ovk=ov;
				        document.getElementById("legend").innerHTML = ov.lang;
			        }
			        if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
			        s = Math.min(sMax,s+.5);
		        } else {
			        s = Math.max(s-.5,sMin);
			        W = Math.max(W-N,sMin);
		        }
		        o.style.width = W+"px";
		        o.style.height = W+"px";
	        }
	        if(s >= sMax) M = false;
        }
        addEvent(document, 'mousemove', function (e) {
	        if(window.event) e=window.event;
	        xm = (e.x || e.clientX);
	        if(xm!=xmb){
		        M = true;
		        xmb = xm;
	        }
	        ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
        });
        setInterval(run, 16);
       };

       window.onload = function() {
        dock("dock", 48, 80);
    }

 

E o menu em si no HTML:

 

<div id="dock">
            <a href="#"><img src="@Url.Content("~/img/menu/calendario.png")" lang="Agenda" ></a>
            <a href="#"><img src="@Url.Content("~/img/menu/consulta.png")" lang="Consulta"></a>
            <a href="#"><img src="@Url.Content("~/img/menu/produto.png")" lang="Produto"></a>
            <a href="#"><img src="@Url.Content("~/img/menu/paciente.png")" lang="Paciente"></a>
</div>
<div id="legend"></div>

 

 

Sim está funcionando tudo e voc~e me pergunta: "Então se esta funcionando o que você esta fazendo aqui?"

 

E eu lhe respondo que estou aqui pelo motivo de que quando eu clicar em cima do link do menu gostaria que na legenda ficasse fixo o local que estou. Exemplo: Clico em Consulta e na legenda fica aparecendo "Consulta". O que não esta acontecendo.

 

Abaixo esta o codigo em JS utilizando JQuery que tentei fazer:

 

$(document).ready(function () {
   $("div#dock a").each(function () {
       var urlLink = location.pathname;
       var navAtual = $(this);
       urlLink = urlLink.split('/');
       urlLink = "/" + urlLink[1] + "/" + urlLink[2];
       if ($(this).attr('href') == urlLink) {
           $(document).ready(function () {
               $("div#dock a").click(function () {
                   $(urlLink).show("div#legend")
               });
           });
       }
   });
});

 

Estou chamando tudo certinho no HTML... Apenas que não fica na legenda o local onde estou.

 

Desde ja agradeço.

[William Bruno 1501]

existem varias divs com id="legend" ?

 

o seu código jQuery está errado.

não faz sentido você colocar um click dentro de um each, e nem colocar um document.ready dentro de outro..

 

você precisa escrever na #legend ? ou depois de carregar o conteudo(esta carregando com refresh ne?!), você tem q dar show ?

tá confuso teu jQuery.

 

 

 

como é o href verdadeiro dos links ?

[WebMasterJr 0]

Existe apenas essa div "legend" em todo o projeto.

 

Ja tentei dar .show mais nada aconteceu, e sim precisar ser na #legend, pois é ali mesmo que ficará para o usuario ver onde ele está no sistema.

 

Dentro do if estava testando, mais tem alguma coisa que eu possa fazer???

 

o href esta assim:

 

<a href="@Url.Content("~/Usuario")">

 

Também dentro do if só tinha esta linha de comando:

 

$(urlLink).show("#legend");

 

ai tentei colocar o que esta no momento.

[William Bruno 1501]

Ok, e oq essa função faz? @Url.Content("~/Usuario")

[WebMasterJr 0]

Esta chamando o Controller, no caso eu estou usando VS2010 linguagem C# e MVC3... e é uma forma mais facil de fazer o link com as outras paginas,ou no MVC com os outros controllers.

 

O link esta funcionando perfeitamente...

 

Apenas não aparece no #legend... =/

[William Bruno 1501]

ok, mas eu preciso entender como está funcionando.

 

aperte Ctrl+U (exibir > codigo fonte), e me diga como aparece o HTML gerado.

[WebMasterJr 0]

ta aparecendo assim:

 

 

<a href="/esculapius/Consulta/Agenda">

[William Bruno 1501]

Ok, então seu código deve ser algo como:

 

$(document).ready(function () {
   $("div#legend").html( location.pathname );
});

[WebMasterJr 0]

Rapaz.. deu certo... mas ta aparecendo assim:

 

 

/esculapius/Cliente

 

E to tentando fazer desaparecer o /Esculapius/ e exibir apenas o Cliente.

 

 

Mais você me ajudou 100% com isso.

[William Bruno 1501]

$(document).ready(function () {
   var pieces = location.pathname.split('/');

   $("div#legend").html( pieces[2] );
});

 

 

:lol:

[WebMasterJr 0]

Resolvido...

 

Muitíssimo obrigado!

 

Vocês sempre 100%