I've got a sticky navigation on my website. When somebody clicks on one of the navigation items it scrolls down to the relevant part of the site but currently the sticky nav is overlapping the div so it looks like it hasn't scrolled to the top of the div.
The code for the scroll looks like this:
$(".nav-kontakt").click(function() {
$('html,body').animate({
scrollTop: $("#kontakt").offset().top - $("#nav").outerHeight(true)
},
'slow');
});
});
Nav:
<div class="nav-row">
<ul class="nav-item">
<li class="nav-leistungen">Leistungen</li>
<li class="nav-philosophie">Philosophie</li>
<li class="nav-kontakt" id="last">Kontakt</li>
</ul>
</div>
Scrolling to:
<div class="container" id="kontakt">
<div class="heading-line">
<span>Kontakt</span>
</div>
</div>
as you can see I've tried to scroll - the height of #nav, but this doesn't seem to work and it still overlaps the .nav-kontakt div.
Any suggestions of what I'm doing wrong or a different apporach?
I recommend that you create a demo to help you, but first try this
var fix = 0; // type integer
var nav = $(".nav-row").outerHeight(true);
$('html,body').animate({
scrollTop: $("#"+selector).offset().top - nav - fix
}, 'slow');
Remember that the scroll will not move more than the size of the page.
Look at this example (https://jsfiddle.net/idkc/zchzb2b8/6/)
$(document).ready(function() {
$("ul.nav-item li").click(function() {
var selector = $(this).attr("data-id");
var fix = 0;
var nav = $(".nav-row").outerHeight(true);
$('html,body').animate({
scrollTop: $("#" + selector).offset().top - nav - fix
}, 'slow');
});
});
body {
margin: 0;
padding: 0;
}
.container {
border: 1px solid red;
}
.nav-row {
position: fixed;
width: 100%;
background-color: #ffffff;
margin: 0;
}
.contents {
padding-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="nav-row">
<ul class="nav-item">
<li class="nav-leistungen" data-id="content1">Leistungen</li>
<li class="nav-philosophie" data-id="content2">Philosophie</li>
<li class="nav-kontakt" data-id="content3">Kontakt</li>
<li class="nav-xxxx" data-id="content4">pppppppppppppp</li>
</ul>
</div>
<div class="contents">
<div class="container" id="content1">
<div class="heading-line">
<span>content 1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
</div>
</div>
<div class="container" id="content2">
<div class="heading-line">
<span>content 2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
</div>
</div>
<div class="container" id="content3">
<div class="heading-line">
<span>content 3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
</div>
</div>
<div class="container" id="content4">
<div class="heading-line">
<span>content 4</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
Related
I have an accordion inside a div called card (I use Foundation 6). I tried to apply Masonry (https://masonry.desandro.com) and it didn't worked. The masonry doesn't understand when I open an accordion.
https://youtu.be/mXNbJ5bjg88
The code: https://codepen.io/yeltsinxyz/pen/porwbbN
<div class="grid-x grid-margin-x medium-up-2 small-up-1 large-up-3 locais-cards align-stretch">
<div class="cell">
<div class="card">
<img src="img/sobremesa1.jpg" alt="">
<div class="card-section">
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
Sorvete
<div class="accordion-content" data-tab-content>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi, voluptatum tempora doloremque sapiente iste deserunt ex excepturi totam quo natus expedita amet ducimus alias repellendus dolorem ut mollitia dolore nemo?</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
Restaurante
<div class="accordion-content" data-tab-content>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi, voluptatum tempora doloremque sapiente iste deserunt ex excepturi totam quo natus expedita amet ducimus alias repellendus dolorem ut mollitia dolore nemo?</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
Como Chegar
<div class="accordion-content" data-tab-content>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi, voluptatum tempora doloremque sapiente iste deserunt ex excepturi totam quo natus expedita amet ducimus alias repellendus dolorem ut mollitia dolore nemo?</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
JS
$(document).foundation();
$(window).on('load', function(){
$('.locais-cards').masonry({
itemSelector: '.locais-cards .cell'
});
});
You need to trigger the masonry when an accordion is opened or closed, so you need to react to the
down.zf.accordion
up.zf.accordion
events as described in https://get.foundation/sites/docs/accordion.html#js-events
So, for your specific example you need to use
$(document).on('down.zf.accordion up.zf.accordion',()=>{
$('.locais-cards').masonry();
});
Updated demo: https://codepen.io/gpetrioli/pen/dyzRXjL
Hi I create chat box using jquery. When I click the button many times, the scroll will return to the top. My goal is when I click the button, it will scroll to the next wrap class.
My HTML:
<div class="all">
<div class="wrap">
<p>
Hi, Please click data
</p>
<div class="data" data-content="0">data 1</div>
<div class="data" data-content="1">data 2</div>
JS
var data = [
{
"content": `
<p>first content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
`
},
{
"content":`
<p>second content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
`
}
];
//$('.data').click(function(){
$(document).on('click','.data', function(){
var datacontent = $(this).attr('data-content');
$(this).parent().parent().append(`
<div class="wrap">
<p>${data[datacontent].content}</p>
<div class="data" data-content="0">data 1</div>
<div class="data" data-content="1">data 2</div>
</div>
`);
$('.all').animate({
//sepertinya disini bugsnya
scrollTop: $(this).parent().next().prop('scrollHeight')
/* scrollTop: $('.wrap').prop('scrollHeight') */
},100)
});
Here is my full code: https://jsfiddle.net/dedi_wibisono17/jfh4y5ot/56/
Thank you
Maybe you can use something like this, thanks
var data = [{
"content": `
<p>first content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
`
},
{
"content": `
<p>second content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
`
}
];
$(document).on('click', '.data', function() {
var datacontent = $(this).attr('data-content');
$('.all').append(`
<div class="wrap">
<p>${data[datacontent].content}</p>
<div class="data" data-content="0">data 1</div>
<div class="data" data-content="1">data 2</div>
</div>
`).animate({
scrollTop: $(this).parent().next().prop('scrollHeight')
}, 100);
});
.data {
background:tomato;
color:white;
padding:8px;
display:inline;
cursor:pointer;
}
.all{
height: 200px;
border:1px solid;
overflow-y:auto;
padding:0 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
<div class="wrap">
<p>
Hi, Please click data
</p>
<div class="data" data-content="0">data 1</div>
<div class="data" data-content="1">data 2</div>
</div>
</div>
I have an array of objects which contain name and description.
Name is short and few charachters. But description may be vary in length.
I want to display this data inside Cards in my react project. I tried using react-bootstrap.
What I want to do is, I want to show cards with same height and length irrespective to the details inside it. And if space in one row is not enough for all the cards, then it should go to the next line.
I want this structure to be behaved like row-col in bootstrap.
How do I do this in react js? using react-bootstrap or any other component?
I use this:
1. Container - flex-direction: row
2. Item - max-height and width
3. Item inner - use padding or for example width: 90%. All limits and sizes define in this component. It will prevent different sizes of columns.
Here is an example
https://codepen.io/team/css-tricks/pen/EKEYob
- than define item inner with specific sizes
/ Define your component Item
and simply map through array with objects.
If you want to use react, import Bootstrap library and use their components
I used bulma during a little project I was toying with at one point and it helped me do exactly as you described.
https://bulma.io/documentation/components/card/
You can use flexbox for equal height boxes
.list {
display: flex;
flex-wrap: wrap;
}
.list-item {
display: flex;
padding: 0.5em;
width: 33.33%;
}
.list-content {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 1em;
width: 100%;
}
.list-content p {
flex: 1 0 auto;
}
<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur optio ipsa fuga vel repudiandae impedit illum delectus nihil error animi nobis quaerat quidem, amet, praesentium aspernatur inventore numquam! Totam, dolorem inventore reprehenderit, culpa obcaecati!</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo veniam tempore vero velit deleniti corporis recusandae placeat eum repellendus modi architecto, iste, numquam nulla, praesentium fuga soluta eos consequatur sequi expedita! Ea aspernatur explicabo optio ducimus officia blanditiis voluptas possimus veniam maxime!</p>
Link
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestiae esse dolore corporis velit fugiat ipsam tempore optio dicta. Magnam iusto facere, maxime! Praesentium quo laborum, deserunt adipisci. Ipsam officia delectus repudiandae, aperiam magnam blanditiis fuga similique.</p>
Link
</div>
</li>
</ul>
I am trying to recreate a 'text carousel' without any help. I've currently made this (stretch it out, it's not yet responsive). Here is what I'm trying to recreate scroll down to the testimonials section. I've checked their site but they've done this with the use of Bootstrap, I'm trying to recreate it without, only with html, css and probably javascript.
I've check on codepen for text carousels but they are mostly with only one text field and I want to have at least two.
Thanks for helping me out.
PS: The .fa-angle-left and .fa-angle-right are from FontAwesome but I've quickly replaced them with an image from google.
As I can see, you are trying to learn to do it yourself and that's awesome! Keep the good work!
There's multiple ways to achieve this behavior. I won't write the code for you, but here are some steps for you to try and learn:
First, add more .tekstbalonvolledig divs so you can test it.
Second the CSS part:
1 - Add a .wrapper div around .tekstbalonvolledig divs with 1000px width
2 - Add overflow: hidden to .overlaycontainer
Now the JS part:
1 - Create a function that animates a margin-left of -500px on the .wrapper
2 - Add a click event listener to you .fa-angle-left to run this function
Of course there's a lot more things to implement on your carousel, but I hope this will help you to begin :)
Below is the code for carousel..
Below is HTML code
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
</head>
<section id="carousel">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="quote"><i class="fa fa-quote-left fa-4x"></i></div>
<div class="carousel slide" id="fade-quote-carousel" data-ride="carousel" data-interval="3000">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#fade-quote-carousel" data-slide-to="0"></li>
<li data-target="#fade-quote-carousel" data-slide-to="1"></li>
<li data-target="#fade-quote-carousel" data-slide-to="2" class="active"></li>
<li data-target="#fade-quote-carousel" data-slide-to="3"></li>
<li data-target="#fade-quote-carousel" data-slide-to="4"></li>
<li data-target="#fade-quote-carousel" data-slide-to="5"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<div class="profile-circle" style="background-color: rgba(0,0,0,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="active item">
<div class="profile-circle" style="background-color: rgba(145,169,216,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Below is the css
section {
padding-top: 100px;
padding-bottom: 100px;
}
.quote {
color: rgba(0,0,0,.1);
text-align: center;
margin-bottom: 30px;
}
#fade-quote-carousel.carousel {
padding-bottom: 60px;
}
#fade-quote-carousel.carousel .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-inner .active {
opacity: 1;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-indicators {
bottom: 10px;
}
#fade-quote-carousel.carousel .carousel-indicators > li {
background-color: #e84a64;
border: none;
}
#fade-quote-carousel blockquote {
text-align: center;
border: none;
}
#fade-quote-carousel .profile-circle {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 100px;
}
Below is the fiddle link
https://bootsnipp.com/snippets/featured/testimonial-carousel
Dont forget to include bootstrap and jquery library files
Question on drop down panels. I have a jsfiddle here http://jsfiddle.net/jmccommas/nJmNy/1/ and the issue I have is I only want the ability to have one panel open at a time. So when a user clicks on a different tab button then the panel that is open will close while the new panel is opened. Any help would be appreciated.
Here is the JS:
$(function () {
$('#dropDown a').each(function () {
$('.panels').hide();
var $this = $(this);
var panels = $this.attr('href');
$this.click(function () {
$('.arrow').hide().fadeIn('slow');
$('#dropDown a.active').removeClass('active');
if ($('.panels').is(':visible')) {
$('.panels').slideUp('slow');
} else {
$('.arrow').hide().fadeIn('slow');
$(panels).slideDown('slow');
$this.addClass('active').blur();
}; // end else
}); // end click
}); // end each
$('.close-button a, .arrow a').click(function (evt) { // This is the close button
var panels = $('.panels');
$(panels).slideUp(600);
evt.preventDefault();
}); // end close button
}); // end ready
HTML:
<div id="demoPanels">
<ul id="dropDown">
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
</ul>
<div class="panelContainer">
<div id="panel1" class="panels">
<div class="arrow" align="center"><img src="arrow.jpg" alt=""></div>
<h2>panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
<div class="close-button">
<span>X</span>
</div>
</div>
<div id="panel2" class="panels">
<div class="arrow" align="center"><img src="arrow.jpg" alt=""> </div>
<h2>panel 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
<div class="close-button">
<span>X</span>
</div>
</div>
<div id="panel3" class="panels">
<div class="arrow" align="center"><img src="arrow.jpg" alt=""> </div>
<h2>panel 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
<div class="close-button">
<span>X</span>
</div>
</div>
<div id="panel4" class="panels">
<div class="arrow" align="center"><img src="arrow.jpg" alt=""> </div>
<h2>panel 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
<div class="close-button">
<span>X</span>
</div>
</div>
</div>
</div>
Try targeting the siblings of the clicked element (demo):
$this.click(function() {
$(panels).slideToggle(600)
.siblings().slideUp(600);
}); // end click