Questions about JavaScript and HTML

Question

Questions about JavaScript and HTML

Navigation

#1 by (2 votes)

2

* HTML code *

<div id="apresentar">
    <img src="img2/fechar.png" class="fechar-foto">
    <div id="foto-grande" ><img src="" width="100%" height="100%"><p></p></div>
    </div>
<header>
    <div id="logo"><a href="index.html"><img src="img2/Logo.png" width="220" height="220"  class="logo zoom" alt="Página Inicial"></a></div>
    <div id="sociais">
        <a href="https://www.facebook.com/BlitzHaus" target="_blank"><img src="img/facebook.png" class="fade" alt="Facebook"></a>
        <a href="https://twitter.com/blitz_haus" target="_blank"><img src="img/twitter.png" class="fade" alt="Twitter"></a>
    </div>
</header>
<!--<nav class="fade-in um">-->
<nav>
    <ul id="menu-principal">
        <span class="ativo-desl"></span>
        <li><a href="index.html">HOME</a></li>
        <li><a href="programacao.html">PROGRAMAÇÃO</a></li>
        <li><a href="parceiros.html">PARCEIROS</a></li>
        <li><a href="galeria.html" class="ativo" id="selecionado">GALERIA</a></li>
        <li><a href="localizacao.html">LOCALIZAÇÃO</a></li>
        <li><a href="contato.html">CONTATO</a></li>
    </ul>
</nav>
<div class="clear"></div>
<div id="corpo">
    <section id="breadcrumb" class="fade-in um"><a href="index.html"><span>Home</span></a><span> > </span><span class="ativo">Galeria de Fotos</span></section>
    <div id="conteudo">
        <h1 id="titulo-principal" class="fade-in dois">GALERIA DE FOTOS</h1>
        <img src="img2/galeria/img01.jpg" class="img-galeria fade-in tres" alt="Foto1">
        <img src="img2/galeria/img02.jpg" class="img-galeria fade-in tres" alt="Foto2">
        <img src="img2/galeria/img03.jpg" class="img-galeria fade-in tres" alt="Foto3">
        <img src="img2/galeria/img04.jpg" class="img-galeria fade-in quatro" alt="Foto4">
        <img src="img2/galeria/img05.jpg" class="img-galeria fade-in quatro" alt="Foto5">
        <img src="img2/galeria/img06.jpg" class="img-galeria fade-in quatro" alt="Foto6">
        <img src="img2/galeria/img07.jpg" class="img-galeria fade-in cinco" alt="Foto7">
        <img src="img2/galeria/img08.jpg" class="img-galeria fade-in cinco" alt="Foto8">
        <img src="img2/galeria/img09.jpg" class="img-galeria fade-in cinco" alt="Foto9">
        <img src="img2/galeria/img10.jpg" class="img-galeria fade-in cinco" alt="Foto10">
        <img src="img2/galeria/img11.jpg" class="img-galeria fade-in cinco" alt="Foto11">
        <img src="img2/galeria/img12.jpg" class="img-galeria fade-in cinco" alt="Foto12">
        <img src="img2/galeria/img13.jpg" class="img-galeria fade-in cinco" alt="Foto13">
    </div>
</div>

JavaScript code

$(function(){
$("#conteudo img").click(function(){
    var image = $(this).attr('src');
    var legenda = $(this).attr('alt');
    $("#apresentar").fadeIn(300);
    $("#foto-grande").fadeIn(300);
    var vlr = $(this).position().top / 2;
    $('#apresentar').css('top',vlr)
    $('html, body').animate({ scrollTop: vlr}, 400);
    $('#foto-grande img').attr('src', image); 
    $('#foto-grande p').text(legenda);
    $('#foto-grande').hover(function(){ $('#foto-grande p').fadeIn(300)} , function (){$('#foto-grande p').fadeOut(300)});
    document.body.style.overflow='hidden';
    $('#apresentar').click(function(){ $('#apresentar').fadeOut(300); document.body.style.overflow='';});
  });
});

function fechar(){
$('#apresentar').fadeOut(300);
document.body.style.overflow='';
}

I'm trying to do the following when the person clicks on the Div show it closes the DIV, and when the person clicks on the photo-large div does nothing, style the facebook. But when I click on the photo-large div, it closes because it's within the div display.

Please help me: '(.

javascript html

asked by anonymous 14.05.2015 / 19:44

1 answer

CSS Menu disconfigured mobile Send string via bluetooth on Android

score 2 · Accepted Answer

The idea is to add a handler to the onclick event of the child div, but return false in this event. This will cause the event to stop processing, and thus the div parent will not be hidden.

I made a Fiddle to exemplify:

link

In it, it's obviously simplified, as I have not added any images or other elements within div . But the idea is this, just expand to the elements you do not want to propagate the event onclick .

To simplify this, you could even create a click-prevent class, for example, and add to div 's which should not allow propagation of the onclick event, thus creating a generic JS solution:

<div id="apresentar">
    <div class="click-prevent"></div>
</div>
<script>
    $(function () {
        $("#apresentar").click(function () {
            $(this).fadeOut(100);
        });
        $(".click-prevent").click(function () { return false; });
    });
</script>

Selection of DIV

I will answer the question asked in a comment by modifying the example above.

Imagine that you have multiple div 's with id="apresentar" , and that all behavior must be the same, hiding them only when the click is performed on them.

You could implement this behavior using CSS selectors, in particular the > selector, which references the immediate child element.

Imagine HTML:

<div id="apresentar">
    <div id="filha">
        <div id="neta">
        </div>
    </div>
</div>
<div id="apresentar">
    <div id="filha">
        <div id="neta">
        </div>
    </div>
</div>

Using the #apresentar div selector, we would select all div 's within div#apresentar . If we use #apresentar > div , we only select the div 's that are daughters (not "net", etc) of div#apresentar .

See this other Fiddle: link

Note that red CSS has been applied to all div , whether daughters or grandchildren. But the CSS that applies the white color was applied only to% with% daughter of div . This is because of the div#apresentar selector.

Note also that we use this selector with jQuery. Clicking on the% s with red%, > is triggered once because of the div event registered in red, and another because of alert event registered in white. Additionally, we have a third time the event is triggered because of jQuery's behavior of not replacing callbacks, but accumulating them and firing all logs in the same event.