Publicado em 12 de mar.

transpor simples código javascript para JQUERY

pessoal.

simples, como poderia transpor este código de JS para JQUERY?

function openNav() {
document.getElementById("navbar_myside").style.width = "100px";
document.getElementById("wrapper").style.marginLeft = "100px";
//document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
document.getElementById("navbar_myside").style.width = "0";
document.getElementById("wrapper").style.marginLeft = "0";
//document.body.style.backgroundColor = "white";
}

	mais incluindo este abaixo:

	1) se clicado, muda o atributo de OPENNAV para CLOSENAV?

	2) e ao contrário, de CLOSENAV para OPENNAV, usando IF ELSE para os dois.

	Tentei assim, mas não foi...

	 

clicked = true;
 $("btn_open").click(function() {
 if(clicked){
 $(this).attr("onclick","closeNav()");
 clicked = false;
 } else {
 $(this).attr("onclick","openNav()");
 clicked = true;
 }
 });

 function openNav() {
 document.getElementById("navbar_myside").style.width = "100px";
 document.getElementById("wrapper").style.marginLeft = "100px";
 //document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
 }

 function closeNav() {
 document.getElementById("navbar_myside").style.width = "0";
 document.getElementById("wrapper").style.marginLeft = "0";
 //document.body.style.backgroundColor = "white";
 }

	obrigado.

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Klawztro· 12 de mar.

//Troque o texto com aspas pelo nome da função apenas.

 $("btn_open").click(function() {
 if(clicked){
 $(this).attr("onclick",closeNav);
 clicked = false;
 } else {
 $(this).attr("onclick",openNav);
 clicked = true;
 }
 });

William Bruno· 12 de mar.

Não faz sentido nenhum você alterar o atributo onclick.

O que você pretende com esse código?

marcelocardoso· 12 de mar.

segue bruno...

1) abrir navbar a esquerda:

<div class="navbar-header">
 <button id="btn_toggle" type="button" class="navbar-toggle collapsed fa fa-bars" data-toggle="collapse"></button>
 <!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">-->
 <a class="navbar-brand" href="#">
 <img src="../site/img/logotipo_branco.png" class="img-responsive">
 </a>
</div>

	2) javascript

	 

function openNav() {
 document.getElementById("navbar_myside").style.width = "100px";
 document.getElementById("wrapper").style.marginLeft = "100px";
}

function closeNav() {
 document.getElementById("navbar_myside").style.width = "0";
 document.getElementById("wrapper").style.marginLeft = "0";
}

	3) seria transpor este iten 2, em JQUERY.

	     a) 1 - teria que ao abrir o OPENNAV, já mudar o botão lá do item 1, para CLOSENAV.

	     b) assim, no mesmo botão BARS, ele abre e fecha...

	não sei se entendeu...

	obrigado.

marcelocardoso· 14 de mar.

RESUMINDO TUDO:

1) Tenho este button, na NAVBAR:

<button type="button" class="navbar-toggle collapsed fa fa-bars" onclick="openNav()"></button>

	Ele chama a função OPENNAV

	2) ele chama esta função, que gostaria de transpor para JQ, pois está em JAVASCRIPT

	 

 function openNav() {
 document.getElementById("navbar_myside").style.width = "100px";
 }

 function closeNav() {
 document.getElementById("navbar_myside").style.width = "0";
 }

	3) Após pegar a função e adaptar para JQUERY, gostaria dentro da função JQUERY, lá no item 1, mudar o ONCLICK OPENNAV para CLOSENAV, sem mudar o BOTAO, apenas o onclick, assim aproveito o mesmo botão para FECHAR e ABRIR a NAVBAR_MYSIDE da função.

	Entenderam agora....

	Se puderem ajudar, agradeço...

	Olhei bastante códigos exemplos na internet, tentei adaptar, mas nada....

	Obrigado.

marcelocardoso· 18 de mar.

Pessoal, após muitas tentativas...

Desde já agradeço as visualizações, mas consegui sozinho, estudando e estudando meu caso.

consegui resolver assim, segue para conhecimento de outros.

<script type="text/javascript">
 //CODE - navbar e sidebar collapse
 $(function() {
 $('#nav-open').on('click', function() {
 $('#navbar_myside').css('width','100px');
 $('#nav-open').hide();
 $('#nav-close').show();
 });
 });

 $(function() {
 $('#nav-close').on('click', function() {
 $('#navbar_myside').css('width','0px');
 $('#nav-close').hide();
 $('#nav-open').show();
 });
 });
</script>

	Obrigado.... até...

marcelocardoso· 18 de mar.

postei o código acima, funciona, mas ainda tem erro...

quando fica no dispositivo mobile, depois se expand o navegador, ainda continua a barra...

o ideal após sair dos 480pixels, deveria sumir...

EXEMPLOS, agradeceria para implementar aqui...

Obrigado.