Boa tarde, Os painéis do Sobre nós carregam todos abertos. Como posso resolver e ficar com apenas um aberto.
Solucionado
Boa tarde, Os painéis do Sobre nós carregam todos abertos. Como posso resolver e ficar com apenas um aberto.
hoje, com a Alura e o Google Gemini
Oi, Bruno, tudo bem?
Testa esse trecho dentro da section do painel:
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#primeiro-paragrafo" data-parent="#paineis-sobre">
<h3 class="panel-title">Desde 1935</h3>
</div>
<div class="collapse in" id="primeiro-paragrafo">
<div class="panel-body">
Desde 1935 trazendo casas, mansões e prédios lindos para o mundo
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#segundo-paragrafo" data-parent="#paineis-sobre">
<h3 class="panel-title">Alegria em colaborar para um mundo mais bonito</h3>
</div>
<div id="segundo-paragrafo" class="collapse">
<div class="panel-body">
Trazendo alegria para a vida das pessoas que tem dinheiro para gastar.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#terceiro-paragrafo" data-parent="#paineis-sobre">
<h3 class="panel-title">Mais de 300 prêmios em design e em conforto.</h3>
</div>
<div id="terceiro-paragrafo" class="collapse">
<div class="panel-body">
Mais de 5 milhões de clientes satisfeitos em todo o mundo.
</div>
</div>
</div>
O primeiro vai ficar aberto e os demais fechados :}
Boa tarde, Laís. Funcionou. Muito obrigado! Percebi que o erro estava nas classes "collapse" e "collapse in". Você também pode me ajudar em um projeto que desenvolvi para praticar o que aprendi até agora? Não encontrei outro lugar para pedir ajuda fora o fórum das aulas. Obrigado novamente.
Oi, Bruno!!
Pode sim, manda aqui o projeto ou link do repositório e o que você queria que te ajudasse :}
Boa noite, Laís.
Muito obrigado. Estou com dificuldade na parte que envolve JS, para fazer com que a imagem e meu nome na capa desça quando o menu abre, assim como foi feito com o banner neste curso.
Outra dificuldade é com os painéis, que também utilizei na sessão "meus hobbies". Quando a página carrega está correto, o primeiro está aberto, e quando clico no segundo, o primeiro fecha. Mas quando volto a clicar no primeiro, o segundo não fecha. Tentei várias coisas que achei que influenciaria, mas não tive sucesso.
Boa tarde, Laís. Só pra lembrar se puder me ajudar no projeto acima. Obrigado.
Oi, Bruno!
Para que o seu código JS tenha efeito, precisamos do código do Jquery já que você utilizou ele para fazer o evento de clique para realocar os itens do menu.
No projeto desse curso, dentro da pasta js tem um arquivo chamado jquery.js. Adicioene ele no seu código, na pasta JS e chame ele dentro do index.html, dessa forma:
<script src="bootstrap/js/jquery.js"></script>Sobre o segundo ponto, segue o código em que os paineis respondem ao clique quando um aberto e outro precisa ser fechado:
<div class="panel-group col-sm-6 col-md-4 col-lg-3" id="paineis-hobbies">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#primeiro-paragrafo" data-parent="#paineis-hobbies">
<figure class="hobbies-capa">
<img src="img/ciclismo-capa.jpg" alt="Foto Bruno Ciclismo">
<figcaption class="caption">
<h3>Ciclismo</h3>
<p>Uma paixão movida por belas paisagens e a adrenalina de uma boa trilha.</p>
</figcaption>
</figure>
</div>
<div class="collapse in" id="primeiro-paragrafo">
<div class="panel-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<figure class="item active">
<img src="img/cataratas.jpg" class="fotos-ciclismo" alt="Foto ciclismo 1">
<figcaption class="carousel-caption">
<h3>Cataratas Day</h3>
<p>Foz do Iguaçu, Paraná - BR</p>
</figcaption>
</figure>
<figure class="item">
<img src="img/itaipu.jpg" class="fotos-ciclismo" alt="Foto ciclismo 2">
<figcaption class="carousel-caption">
<h3>Hidroelétrica Itaipu</h3>
<p>Foz do Iguaçu, Paraná - BR</p>
</figcaption>
</figure>
<figure class="item">
<img src="img/rotaDosHoteis.jpg" class="fotos-ciclismo" alt="Foto ciclismo 3">
<figcaption class="carousel-caption">
<h3>Rota dos hotéis</h3>
<p>Puerto Iguazú, Misiones - AR</p>
</figcaption>
</figure>
<figure class="item">
<img src="img/lagoDeLaRepublica.jpg" class="fotos-ciclismo" alt="Foto ciclismo 4">
<figcaption class="carousel-caption">
<h3>Lago de la República</h3>
<p>Ciudad del Este, Alto Paraná - PY</p>
</figcaption>
</figure>
<figure class="item">
<img src="img/lagoDeLaRepublica2.jpg" class="fotos-ciclismo" alt="Foto ciclismo 5">
<figcaption class="carousel-caption">
<h3>Lago de la República</h3>
<p>Ciudad del Este, Alto Paraná - PY</p>
</figcaption>
</figure>
<figure class="item">
<img src="img/voltaAoParque.jpg" class="fotos-ciclismo" alt="Foto ciclismo 6">
<figcaption class="carousel-caption">
<h3>Volta ao parque</h3>
<p>Foz do Iguaçu, Paraná - BR</p>
</figcaption>
</figure>
<figure class="item">
<img src="img/cicloturismoMarechal.jpg" class="fotos-ciclismo" alt="Foto ciclismo 7">
<figcaption class="carousel-caption">
<h3>7º circuito regional de cicloturismo</h3>
<p>Marechal Cândido Rondon, Paraná - BR</p>
</figcaption>
</figure>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
O código não coube completamente aqui, no post seguinte, continuo.
Continuação:
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#segundo-paragrafo" data-parent="#paineis-hobbies">
<figure class="hobbies-capa">
<img src="img/musica-capa.jpg" alt="Foto Bruno Musica">
<figcaption class="caption">
<h3>Música</h3>
<p>Música é constante renovação. Cada vez que alguém toca, traz ao mundo um novo som.</p>
</figcaption>
</figure>
</div>
<div id="segundo-paragrafo" class="collapse">
<div class="panel-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic3" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic3" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<figure class="item active">
<img src="img/pianoCwb.jpg" class="fotos-musica" alt="Foto musica 2">
<figcaption class="carousel-caption">
<h3>Shopping Crystal</h3>
<p>Curitiba, Paraná - BR</p>
</figcaption>
</figure>
<figure class="item">
<img src="img/hardRockCwb.jpg" class="fotos-musica" alt="Foto musica 1">
<figcaption class="carousel-caption">
<h3>Hard Rock Café</h3>
<p>Curitiba, Paraná - BR</p>
</figcaption>
</figure>
</div>
<a class="left carousel-control" href="#carousel-example-generic3" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic3" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>Modificando, irá funcionar corretamente :}
Espero ter te ajudado!
Bom dia, Laís.
Adicionei o arquivo "jquery.js" e chamei ele no "index.html", mas não funcionou. Na minha pasta da aula não tinha esse arquivo, tinha apenas o "navbar-animation-fix.js" e funciona normalmente.
No segundo ponto, dos painéis, eu havia testado essa forma também, deixando tudo dentro do mesmo "panel-group", mas assim, o "col-sm-6 col-md-4 col-lg-3" não funciona conforme vai aumentando a tela. Ele fica sempre abaixo, e não do lado. Testei colocando essa classe em outras linhas, mas não resolveu. Só tive um resultado colocando a classe na tag "section", mas aí quem subiu para a lateral foi o video.
Agradeço pelo retorno e toda ajuda.
Projeto atualizado: https://github.com/brunochan/meuperfil
Boa tarde,
Neste caso não é necessário usar "import" e "export"?
Obrigado.
Oi, Bruno, tudo bem?
Sobre a animação, para que seja lido o jquery, na importação dentro do html, na ordem de leitura, ele precisa vir primeiro:
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/animation-fix.js"></script>Com isso, a animação já funciona, mas o estilo fica quebrado. Eu refatorei para classe .foto-capa
$('#collapse-navbar').on('show.bs.collapse', function() {
$('.foto-capa').css('transform', 'translate(-50%, 10%');
});
$('#collapse-navbar').on('hide.bs.collapse', function() {
$('.foto-capa').css('transform', 'translate(-50%, -50%');
});E no css:
.capa{
position: absolute;
height: auto;
top: 50%;
left: 50%;
}
.foto-capa{
position: absolute;
transform: translate(-50%, -50%);
transition: 0.3s;
}
.foto-capa > img{
width: 20rem;
border-radius: 100%;
}
Nos painéis, eu adicionei estilo ao id = "paineis-hobbies" o display: flex que por padrão os elementos que entram em linha.
#paineis-hobbies {
display: flex;
}Daí, você refatora o css para que o painel fique no tamanho que prefira.
Nem sempre o bootstrap vai conseguir resolver o nosso problema, as vezes o css puro vai ser necessário.
Testa e me fala se deu certo!