Hide a div containing photo and show another div in the same place

Navigation
0

I'm using jquery / php to access the user's camera and take a picture for a user account. And on the page change user data I need to load the photo show the photo recorded in the database in a "photodb" div and when you click on the take photo button the new image will appear in another div "photo" hiding the div from the photo recorded on the bank. As the code below I can load the page with the photo of the BD but when I click on take picture I deactivate and I do not know how to make appear the div photo that is hidden by default. 

    <?php
  <div class='contentarea'>
  <div class='camera'>
    <video id='video'>WEBCAM não encontrada!</video>
    <button id='startbutton' class='btn-toggle' data-element='#photodb'>Tirar foto</button> 
  </div>
  <canvas id='canvas'>  </canvas>
  <div id='photobd'>
    <img src='gera.php?id=$id' border='1'>
  </div>
  <div id='photo' class='output' style="display: none">
    <img src='' border='1'>
  </div>
 </div> 
?>

I can not use the onclick event because in the jquery function already captures the click and tried to use the event has screwed up what is working. I used a function found here in the forum show / hide div and I can hide the div photodb but I do not know how to make the div appear. 

   <script>
   $(function(){
    $(".btn-toggle").click(function(e){
        e.preventDefault();
        el = $(this).data('element');
        $(el).toggle();
    });
  });
 </script>

after this how do I change the display: none of the div photo to appear?

    
asked by anonymous 31.08.2017 / 20:55

2 answers

0

To hide a div, just use the .hide() method and, to display the div that is hidden, use the .show() method, as shown below: 

$(function(){
    $(".btn-toggle").click(function(e){
        e.preventDefault();
        el = $(this).data('element');
        $(el).toggle();
        //Oculta a div com id photobd
        $('#photobd').hide();
        //Exibe a div com id photo
        $('#photo').show();
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass='contentarea'><divclass='camera'><videoid='video'>WEBCAMnãoencontrada!</video><buttonid='startbutton'class='btn-toggle'data-element='#photodb'>Tirarfoto</button></div><canvasid='canvas'></canvas><divid='photobd'><imgsrc='http://www.iconsdb.com/icons/preview/gray/screenshot-xxl.png'border='1'></div><divid='photo'class='output'style="display: none">
    <img src='https://lh3.googleusercontent.com/3qybHqE4ff9MOts7v5l4S09W3HtOymwDic4LYzNVU-PhDIFvYAbju8qfRKB7AoxeWA=w170' border='1'>
  </div>
 </div>
    
31.08.2017 / 21:03
0

There is no problem inserting more than one click event into the same element. 

$("#startbutton").on("click", function(){
    $("#photobd").hide();
    $("#photo").show();
});

Simple like this.

Another thing: your code does not work because you are referencing "photodb" in the data-element, but the id of the div is "photobd". This is the problem in using attributes and access code. Always make the minimum.

    
31.08.2017 / 22:48
How to copy a piece of text into a textarea "no such file or directory" error - Eclipse