Javascript generated link does not work

Asked

Viewed 41 times

0

I have tried several ways to create a way to remove the animated menu I created. Via function, link, getElementById, etc.

But any link generated by JS crashes. Code below. I’ve fixed errors by console.

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">

    @font-face {
     font-family: Roboto-Italic;
     src: url('Roboto-Italic.ttf');

}
        #header{
            /*position: absolute;*/

            background: #ccc;
            position: fixed;
            top: 10px;

        }

        html
{
  position:fixed;
  width:100%;
  height:100%;
  color: #afafaf; 

}



#menuAberto
            {
                position: fixed;
                top: 20px;
                left: 0px;
                background-color: #ccc;
            }

.clicavel{
    position: fixed;
    background-color: green;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    opacity: 0.0;
    background-color: green;
    bottom: 0px;
}

#clicavel1{

    left: 10px;
}

#clicavel2{

    left: 28%;
}

#clicavel3{

    right: 28%;
}

#clicavel4{
    right: 10px;
}

        .conteudo{
            width: 100%;
            align-content: center;
            align-self: center;
            left: 0px;

        }

        #sugestoes
                        {
                            position: relative;
                            width: 100%;
                            align-self: center;
                            background: #708090;
                            top: 200px;
                            overflow: scroll;
                        }
        #parceiros
                        {

                        position: absolute;
                        overflow: scroll;
                        width: 100%;
                        align-self: center;
                        background-color: yellow;
                        bottom: 70px;
                        height: 60px; 
                        z-index: 9990;
                        left: 0px;
                        }

        #footer
                    {
                        position: fixed;
                        bottom: 5px;
                        width: 100%;
                        align-self: center;
                        /*background-color: blue;*/
                        height: 60px;
                        left: 0px;
                    }

        #banner
                    {
                        background-color: #ccc;
                        position: absolute;
                        top: 90px;
                        height: 120px;
                        overflow: scroll;
                    }

        #menu
                    {
                        position: fixed;
                        left: 0px;
                        top: 30px;
                        align-self: center;
                        /*background: #ccc;*/

                    }

        #logo
                    {
                        position: fixed;
                        left: 50%;
                        top: 85px;
                        /*background: #ccc;*/
                        margin-top:-50px;
                        margin-left:-50px;
                    }

        #pesquisaEcestinha
                    {
                        position: fixed;
                        right: 0px;
                        top: 35px;
                        /*background: #ccc;*/
                    }


    #sairMenu
            {
                opacity: 0.3;
                background-color: #000000;
                position: absolute;
                top: 0px;
                right: 0px;
                height: 100%;
                width: 33%;
                z-index: 9999;

            }
</style>
    <script type="text/javascript">

    var menuPosicaoAtual = 0;
    var menuPosicaoFinal   = 200;
    var menuSairPosicaoInicial = 200;

        function menuJavaScript()
                                {


                                    var intervalo = setInterval("animacaoMenuAbre()", 10);
                                }

        function animacaoMenuAbre()
                        {
                                if (menuPosicaoAtual <= menuPosicaoFinal) {
                                    document.getElementById('menuEscondigo').innerHTML = '<div id="menuAberto" style="position: fixed; top: 10px; left: '+menuPosicaoAtual+'px;">Início</div>';

                                }
                             menuPosicaoAtual++;
                             menuPosicaoAtual++;
                             menuPosicaoAtual++;
                             menuPosicaoAtual++;


                             setInterval("abreMenuSair()", 1000);

                                }
        function abreMenuSair()
                            {
                                document.getElementById('sairMenuRecebe').innerHTML = '<a href="home2.html"><div id="sairMenu"></div></a>';

                                //clearInterval(intervalo); // Cancela o alerta agendado em setInterval

                            }

        function fechaMenu()
                            {

                                alert('funcionando');

                            }



    </script>

    <link rel="stylesheet" type="text/css" href="css/home.css">

</head>
<body>
<div id="todaPagina">

<div id="navegacao"></div>
<font face="Roboto-Italic">
<div id="header">
    <div id="menu">
    <img src="img/botaomenu.png" width="60" height="60" onclick="menuJavaScript()">
    </div><div id="logo" align="center"><a href="home2.html"><img src="img/logoHome50.png"></a></div><div id="pesquisaEcestinha" align="right"><img src="img/cestinhaBotao.png" width="50" height="50"><img src="img/pesquisaBotao.png" width="50" height="40"></div>
</div>

<content >

    <div id="banner" align="center" class="conteudo" >

        <img src="img/poster.png"></center>
    </div>
<div id="sugestoes">
    <center><canvas id="myCanvas" width="180" height="200" style="border:1px solid #000000;">Conteudo</canvas></center>

</div>

</content>

<id id="parceiros">
    <center><canvas id="myCanvasFooter" width="300" height="100" style="border:1px solid #87CEEB;"></canvas></center>
</id>

</div> <!-- fim da id navegacao -->

<div id="footer">
    <center>
    <img src="layout-manual/footer-botoes.png" width="100%" height="60">
<a href="javascript:fechaMenu()">
<canvas id="clicavel1" width="70" height="70" style="border:1px solid #87CEEB" class="clicavel"></canvas> <!-- Primeiro botao -->
</a>
<canvas id="clicavel2" width="70" height="70" style="border:1px solid #87CEEB" class="clicavel"></canvas> <!-- Segundo botao -->
<canvas id="clicavel3" width="70" height="70" style="border:1px solid #87CEEB" class="clicavel"></canvas> <!-- Terceiro botao -->
<canvas id="clicavel4" width="70" height="70" style="border:1px solid #87CEEB" class="clicavel"></canvas> <!-- Quarto botao -->
<!-- canvas para melhor visualizacao em modelo
    <canvas id="myCanvasFooter" width="200" height="90" style="border:1px solid #000000;">
    </canvas>
    --></center>
</div>

<div id="menuEscondigo"></div>

</div>

<div id="flutuante" style="position: fixed; top: 10px; left: 30px;">FLUTUANTE</div>

<a href="home2.html"><div id="sairMenuRecebe" ></div></a>


</body>
</html>
javascript-events

1 answer

1


animation is usually better with the requestAnimationFrame method():

var menuPosicaoAtual = 0;
var menuPosicaoFinal   = 200;
var menuSairPosicaoInicial = 200;
var menuIsOpen = false;

function menuJavaScript() {
    if (!menuIsOpen) {
        window.requestAnimationFrame(animaAbrir);
    }
    else {
        window.requestAnimationFrame(animaFechar);
    }
}

function animaAbrir() {
    var menu = document.getElementById('menuEscondigo');

    if (!document.getElementById('menuAberto')) {
        menu.innerHTML = '<div id="menuAberto" style="position: fixed; top: 10px; left: '+menuPosicaoAtual+'px;">Início</div>';
    }

    var menuAberto = document.getElementById('menuAberto');

    menuPosicaoAtual += 4;

    menuAberto.style.left = menuPosicaoAtual + 'px';

    if (menuPosicaoAtual < menuPosicaoFinal) {
        window.requestAnimationFrame(animaAbrir);
    }
    else {
        menuIsOpen = true;
        document.getElementById('sairMenuRecebe').innerHTML = '<a href="home2.html"><div id="sairMenu"></div></a>';
    }
}

function animaFechar() {
    var menuAberto = document.getElementById('menuAberto');

    menuPosicaoAtual -= 4;
    menuAberto.style.left = menuPosicaoAtual + 'px';

    if (menuPosicaoAtual > menuAberto.clientWidth * -1) {
        window.requestAnimationFrame(animaFechar);
    }
    else {
        menuIsOpen = false;
    }
}

Browser other questions tagged javascript-events

You are not signed in. Login or sign up in order to post.