Div showing content by clicking button

Asked

Viewed 531 times

1

with this doubt I have already researched several codes here but none worked, I have a button in the center of the screen and when clicking I want to show a specific test that is in a div, but what I write in the div is in the home page below and the button does nothing, then what I wanted, to click the start test button, and it call that div, then inside that div have another button to go to the next test and so on .

follows the code

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>TESTE DO FREIO</title>
    <link rel="stylesheet" href="css/estilos.css">


    <style type="text/css"></style>
</head>

<body>

<label id="counter">0</label>

<div id="teste"></div>

<a class="meubotao" div="#teste01">INICIAR TESTE</a>

<div id="teste01">1. Pressione e solte o pedal de freio do estacionamento varias vezes para checar se a pressão diminui</div>

<div class="footer">
&copy; 2017 PokaYoke Team | Elaborado por Felipe Deolindo
</div>

<script src="js/script.js"></script>
<script src="js/jquery.min.js"></script>


</body>
</html>

js

$(document).ready(function () {

    var sensorValor = '';
    var testEnabled = false;
    var roundedValue = 0;

    $.ajaxSetup({ cache: false });

    setInterval(function () {
        $.get("IOCounter.htm", function (result) {
            $('#counter').text(result.trim());
            sensorValor = $('#counter').text();
        });v
    }, 100);

});

$(function(){
        $(".meubotao").click(function(e){
            e.preventDefault();
            el = $(this).data('element');
            $(el).toggle();
        });
    });

css

body{
    background-color: #373435;
}

#teste{
    width: 1920px;
    height: 1080px;
    background-image: url('../images/background.jpg');
    background-repeat: no-repeat;
}

.meubotao {
    -moz-box-shadow: 0px 1px 0px 0px #000000;
    -webkit-box-shadow: 0px 1px 0px 0px #000000;
    box-shadow: 0px 1px 0px 0px #000000;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
    background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
    background-color:#ffec64;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    border:3px solid #000000;
    display:inline-block;
    cursor:pointer;
    color:#333333;
    font-family:Georgia;
    font-size:28px;
    font-weight:bold;
    padding:20px 50px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
    position:absolute;
        top: 500px;
        left: 700px;
}
.meubotao:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
    background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
    background-color:#ffab23;
}
.meubotao:active {
        position:absolute;
        top: 500px;
        left: 700px;
}

.footer {
    position:absolute;
        top: 1080px;
        left: 800px;
}

.teste01 {
  visibility: hidden;
}
javascript html div

  • Obs: has a v in the middle of your code that is definitely causing an error in the load of your JS, there at the end of setInterval, maybe only this will solve everything, see if you missed typing here or this error exists in your application

  • Another thing, you’re carrying a file .htm no get what doesn’t make much sense to me since a file .htm is not dynamic, so what would be the reason you do not include the direct test instructions on your page or on a [tag:JSON]?

  • so paul the file not dynamic , that counter refers to the test counter, only it works like this I do not know why it involves the PLC , he sends the information to this counter and then sends it to me, I took the v however gave nothing

1 answer

1


*Initial but not complete response.

From what I understand, you would like a step test where the button moves to the next step, so I created an example for you to use, based on and using your initial code. We know you will not portray 100% of your problem as I do not have access to the file IOCounter.htm but you can adapt the code so that the counter also works correctly and then I will edit this answer later to be able to cover more concretely your question.

I made available here in jsFiddle example for you to use.

  • Very good, thank you very much, I was going crazy already here kkkkkk

  • iocounter.htm only has the following line :="webdata". counter: it takes the information from the PLC webserver and plays in html for me

  • but the counter is only used to count the seconds taken during the test? if you can do javascript as well

  • more or less, it takes the pressure in the truck bar, I followed a tutorial from the site of Yemen to do, nor tried any other way, you have any in mind?

  • Paulo, in this same code that you sent me, if when I click the button, it calls another, in case a type next test, put another button, with another style, where I modify your code? i swapped the second if for the other id of the button I created but didn’t swivel

  • is that I used the same button, I only changed its text, but if you want to change the text change the style you can use the .addClass('sua_classe_css') on the button there along with where it changes the text, and there on .sua_classe_css in css you change what you need in style

  • Sorry guy I’m kind of layman, I’m turning more or less with what I can here I add the . addClass instead of the last option . html ?

  • and in css do not have to create a div for this class? or I can just do example . next that would be the other button and edit as I want?

  • see I added a red color to "next step" https://jsfiddle.net/1xupaac4/1/

  • thank you very much, saved this project, thanks very much

  • Let’s go continue this discussion in chat.

  • Paul will need your help again, in what you have done for me, how can I distinguish the tests, example the test one will appear when starting the test, but by clicking on next test, shows the 1 next to the "test 2", and so on, as I show and hide it? and another doubt rs, I made a rectangle to show the pressure inside it, but it appears on the page start, know how to hide it from a specific div?

Show 7 more comments

Browser other questions tagged javascript html div

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