I got a couple of elements that shows a div when clicked on it. The only problem is when you click them all, all divs are opened instead of just the one that was clicked.
My jquery:
<script>
$(document).ready(function() {
$('.servicemark').click(function() {
console.log($(this).attr('data-toggle'));
var type = $(this).attr('data-toggle');
$('.'+type).slideToggle("slide");
});
});
</script>
My html/php:
<section class="def-section home-services">
<div class="container">
<div class="row">
<?php
foreach($blocks as $block) {
$images = json_decode($block->images);
echo '
<!-- === SERVICE ITEM === -->
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 servicemark" data-toggle="'.$block->alias.'" style="cursor:pointer;">
<div class="service-mark-border-top"></div>
<div class="service-mark-border-right"></div>
<div class="service-mark-border-bottom"></div>
<div class="service-mark-border-left"></div>
<div class="service">
<div class="service-icon">
<img src="cms/'.$images->image_intro.'" />
</div>
<h3>'.$block->title.'</h3>
<div class="service-text">
<p>'.$block->introtext.'</p>
</div>
</div>
</div>
';
}
?>
<div class="row zee-container-vervoer" style="display:none;">
<div class="text">
<p>Zee container vervoer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
<div class="row gevoelige-lading" style="display:none;">
<div class="text">
<p>Speciale lading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
<div class="row temperatuur-gevoelige-lading" style="display:none;">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
<div class="row explosieve-lading" style="display:none;">
<div class="text">
<p>Gevaarlijke stoffen Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
</div>
</div>
</div>
</section>
Everything is now filtered by the alias of the correct element (class name is the same as the alias). How can I close all other elements except for the one that is currently opened?
Try this (based and thanks to Juan C. comment):
$('.' + type).slideToggle("slide").siblings(".row").hide();
Try this :
$(document).ready(function() {
$('.servicemark').click(function() {
console.log($(this).attr('data-toggle'));
$(".servicemark").slideUp();
$(this).slideDown();
})
})
Related
I have a project where i'm trying to set the classes as active from a dynamically created nav bar.
<main>
<header class="main__hero">
<h1>Landing Page </h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<section id="section1" data-nav="Section 1" class="your-active_class">
<div class="landing__container">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci
eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam
in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet
porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci
eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam
in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet
porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci
eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam
in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet
porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci
eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam
in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet
porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
Right now here is the code for my javascript that is creating the nav bar
const sections = document.querySelectorAll('section');
const ul = document.createElement('ul');
document.getElementById('navbar__list').appendChild(ul);
//loop through elements to grab the data-nav elements
for (let i = 0; i < sections.length; i++) {
const section = sections[i];
const li = document.createElement('li');
li.addEventListener('click', function clickHandler() {
location.hash = section.id;
// add class to section
// remove class from sibling sections
// add class to section links
// remove class from sibling section links
});
li.textContent = section.dataset.nav;
ul.appendChild(li);
And I have a tiny piece of jquery to set the li elements as active
$(document).on('click', 'ul li', function() {
$(this).addClass('active').siblings().removeClass('active')
How do I get the classes as active only when they are in the viewport?
I have an unknown number of section blocks.
I use the titles of these automaticaly generated sections to populate the "tabs" container who follow the scroll (using sticky position).
What I need, is when I pass by one of the title contained in the sections, the same title from the "tabs" bar get the class "selected"so I indicate where the user is.
But what I've tried so far is only working partialy.
Here's a working example:
let titles = [];
$.each($('section>h3'),function(){
titles.push($(this).offset().top);
});
$(document).on('mousewheel DOMMouseScroll',function(e){
let winscrollpos = $(window).scrollTop();
$.each(titles,function(i,v){
if(winscrollpos >= v && winscrollpos < v+100) {
$('.deco-tab-title').eq(i).add('.selected').toggleClass('selected');
}
});
});
.filler {
height:800px;
}
.selected {
color:red;
}
.tabs {
background-color:#eee;
position:sticky;
top:0;
}
p {
width:200px
}
.tabs h3 {
display:inline;
margin-left:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
<div class='filler'>
</div>
<div class='wrapper'>
<div class='tabs'><h3 class='deco-tab-title selected'>title1</h3><h3 class='deco-tab-title'></h3><h3 class='deco-tab-title'>title2</h3><h3 class='deco-tab-title'>title3</h3><h3 class='deco-tab-title'>title4</h3></div>
<div class='core'>
<section>
<h3 class='deco-tab-title'>title1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
</div>
</div>
</div>
as you can see, the first title lose the class if you scroll to the end. But nothing else. And when you go back, the second title get the class. And overall, it doesn't work so well.
You might want to use the scroll event, which also captures using the scroll bar.
Scrolling height depends on the user agent. You should compare
[offset of current tab] < winscrollpos < offset[next tab] instead of [offset of current tab] < winscrollpos < offset[current tab] + 100.
Here's a working demo:
let titles = [];
$.each($('section>h3'), function () {
titles.push($(this).offset().top);
});
$(document).on('scroll', function (e) {
// 50 for the tab title height
let winscrollpos = $(window).scrollTop() + 50;
let titleElements = $('.deco-tab-title');
$.each(titles, function (i, v) {
if (winscrollpos >= v && (i === titles.length - 1 || winscrollpos < titles[i + 1])) {
titleElements.eq(i).addClass('selected');
} else {
titleElements.eq(i).removeClass('selected');
}
});
});
.filler {
height:800px;
}
.selected {
color:red;
}
.tabs {
background-color:#eee;
position:sticky;
top:0;
}
p {
width:200px
}
.tabs h3 {
display:inline;
margin-left:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
<div class='filler'>
</div>
<div class='wrapper'>
<div class='tabs'><h3 class='deco-tab-title selected'>title1</h3><h3 class='deco-tab-title'>title2</h3><h3 class='deco-tab-title'>title3</h3><h3 class='deco-tab-title'>title4</h3></div>
<div class='core'>
<section>
<h3 class='deco-tab-title'>title1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
</div>
</div>
</div>
I have made the following fixes in your code:
add('.selected').toggleClass('selected'): chaining both functions this way cannot work. That's the reason why your titles were somehow blinking when selected. I've replaced this with the use of this version of toggleClass
I've added another list, nextTitlePos, in order to store, for each title, the position of the next one. For the last one, you can use any value greater than the end of your container (I've used Number.MAX_VALUE here to keep it simple, but if needed, you can use the end of the container as well.)
In the HTML code, there was also an extra <h3> tag, which was empty. This one was preventing title2 from being highlighted properly.
EDIT: I've replaced the event mousewheel with scroll as well (as mentioned by Shridhar Sharma in a comment below - thanks)
let titles = [];
$.each($('section>h3'),function(){
titles.push($(this).offset().top);
});
let nextTitlePos = [];
$.each(titles, function(i, v) {
if(i != 0) {
nextTitlePos.push(v);
}
});
nextTitlePos.push(Number.MAX_VALUE);
$(document).on('scroll DOMMouseScroll',function(e){
let winscrollpos = $(window).scrollTop();
$.each(titles,function(i,v){
let isSelected = winscrollpos >= v && winscrollpos < nextTitlePos[i];
$('div.tabs>h3.deco-tab-title').eq(i).toggleClass('selected', isSelected);
});
});
.filler {
height:800px;
}
.selected {
color:red;
}
.tabs {
background-color:#eee;
position:sticky;
top:0;
}
p {
width:200px
}
.tabs h3 {
display:inline;
margin-left:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
<div class='filler'>
</div>
<div class='wrapper'>
<div class='tabs'><h3 class='deco-tab-title selected'>title1</h3><!-- REMOVED <h3 class='deco-tab-title'></h3> --><h3 class='deco-tab-title'>title2</h3><h3 class='deco-tab-title'>title3</h3><h3 class='deco-tab-title'>title4</h3></div>
<div class='core'>
<section>
<h3 class='deco-tab-title'>title1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
</div>
</div>
</div>
From the screenshots, you can see the arrows are not auto adjust according to the content height when I press to next slide.
I want the dynamic height for arrow, to be displayed in the middle of the content.
I refer the code from Liquid Slider, you can check here or see my issue below. Hoping that some of you could provide me with some advice. Thanks!
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
margin-top: 40% !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
By overiding the arows css , setting the margin-top to 0 and top to 50% as follow :
[class$="-arrow"] {
....
top:50%;
margin-top:0 !important;
...
}
See below snippet :
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
top:50%;
margin-top:0 !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
Hope this is helpful to you. Here i removed margin from top and added position to slider arrows.
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
margin-top: 0;
position:relative;
top: 50%;
}
.liquid-slider-wrapper .liquid-nav-left-arrow, .liquid-slider-wrapper .liquid-nav-right-arrow {
margin-top: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
I am working on a design where I have used smooth-scrollbar for smooth scrolling.
I have implemented it twice on my page, first on the entire page and second on a div element.
It is working fine on the div element but not on the body.
I am unable to scroll as the browser continuously displays the default scrollbar.
Here is my code that I've done so far
<html>
<head>
<title>Jain University</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='../css/aos.css' rel='stylesheet' type='text/css'>
<link href='../css/smooth-scrollbar.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href="../css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="main-scrollbar" data-scrollbar>
<div class="container-fluid slide slide1" data-color="#EF6C00">
<div class="rows">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="../images/homepage1.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="container-fluid slide slide2" data-color="#009688">
<div class="rows">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" data-aos="fade-right">
<img src="../images/homepage1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2" data-aos="fade-left">
<div class="simplebar-content aboutus" data-scrollbar>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
</div>
</div>
</div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../js/smooth-scrollbar.js"></script>
<script src="../js/aos.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script> Scrollbar.initAll(); </script>
<script>
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
</script>
<script>
$(window).on("scroll touchmove", function() {
if ($(document).scrollTop() >= $(".slide1").position().top) {
$('body').css('background', $(".slide1").attr("data-color"));
$('.navbar').css({'background': $(".slide1").attr("data-color"),opacity:'0.9'});
};
if ($(document).scrollTop() > $(".slide2").position().top) {
$('body').css('background', $(".slide2").attr("data-color"));
$('.navbar').css({'background': $(".slide2").attr("data-color"),opacity:'0.9'});
};
});
</script>
</body>
</html>
You have to set a height to each item otherwise it will not work
[data-scrollbar]{
height: 500px;/*<<<<<required*/
}
yay JS
<script>
Scrollbar.initAll({
alwaysShowTracks: true,
overscrollEffect: "bounce"
});
</script>
I am using a simple jQuery function to show / change a divs content depending on which link is clicked..
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
jQuery(this).addClass('selected').siblings().removeClass('selected');
jQuery('.targetDiv').hide();
jQuery('#div' + jQuery(this).data('target')).show();
});
});
.col-md-4{width:200px;background:red;clear:both;margin-bottom:10px;}
.p_content{clear:both;margin-top:300px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis orci id nulla aliquet fermentum. Suspendisse ultrices nulla id magna cursus blandit.
</a>
</div>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="2">
Sed feugiat fringilla lacus, quis aliquam turpis cursus eu. In dignissim ultrices tellus in convallis. Sed euismod tellus vel lorem
</a>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="3">
suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris
</a>
</div>
<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="4">
ique sodales mi mi quis leo. Aliquam at eros vitae sem accumsan maximus. In non sapien faucibus, accumsan nisl eget, convallis
</a>
</div>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="5">
vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus.
</a>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="6">
fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis
</a>
</div>
<div class="container p_content">
<div id="div1" class="targetDiv">
posuere dapibus. In blandit, tortor quis laoreet lobortis, sem est auctor eros, ut vulputate augue felis nec massa. Pellentesque sagittis mi ac leo dignissim, sed semper augue hendrerit. Quisque scelerisque ante quis ullamcorper placerat. Cras in porta turpis. Proin turpis mi, posuere vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit am
</div>
<div id="div2" class="targetDiv">
idunt ante, eget pulvinar magna malesuada id. Morbi posuere libero sed ante tempor faucibus. Fusce non nulla nunc. Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et
</div>
<div id="div3" class="targetDiv">
erisque erat vel vehicula. In varius at massa id molestie. Donec nec nisi vel justo auctor laoreet. Ut commodo velit vitae magna faucibus elementum. Cras ultrices auctor risus, scelerisque aliquet nisi tincidunt id. Integer quis dapibus nibh. Praesent mauris eros, vestibulum at felis a, luctus laoreet tellus.
</div>
<div id="div4" class="targetDiv">
e vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit amet sodales urna
</div>
<div id="div5" class="targetDiv">
gnissim ultrices tellus in convallis. Sed euismod tellus vel lorem suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris. Aenean quis maximus ex. Maecenas congue tellus ac nunc sodales pellentesque.
</div>
<div id="div6" class="targetDiv">
Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis nisi id cursus. Nunc ac turpis sem. In pellentesque rhoncus suscipit.
</div>
</div>
http://jsfiddle.net/W4Km8/7939/
It all works correctly apart from two things:
When it first loads it displays all of the content until one of the options is clicked.
I would like to make it so that when one of the links is clicked the page jumps down to where the content it.
Could anybody point me in the right direction for achieving these two things?
You just need to hide those elements using display:none; in the css.
My solution is to add a hash to the URL and let the browser take care about the scrolling.
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
jQuery(this).addClass('selected').siblings().removeClass('selected');
jQuery('.targetDiv').hide();
var selector = '#div' + jQuery(this).data('target');
jQuery(selector).show();
location.hash = selector;
});
});
.col-md-4{width:200px;background:red;clear:both;margin-bottom:10px;}
.p_content{clear:both;margin-top:300px;}
/* add this */
.targetDiv {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis orci id nulla aliquet fermentum. Suspendisse ultrices nulla id magna cursus blandit.
</a>
</div>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="2">
Sed feugiat fringilla lacus, quis aliquam turpis cursus eu. In dignissim ultrices tellus in convallis. Sed euismod tellus vel lorem
</a>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="3">
suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris
</a>
</div>
<div class="col-md-4">
<div class="p_link">
<a class="showSingle" data-target="4">
ique sodales mi mi quis leo. Aliquam at eros vitae sem accumsan maximus. In non sapien faucibus, accumsan nisl eget, convallis
</a>
</div>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="5">
vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus.
</a>
</div>
<div class="col-md-4 p_link">
<a class="showSingle" data-target="6">
fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis
</a>
</div>
<div class="container p_content">
<div id="div1" class="targetDiv">
posuere dapibus. In blandit, tortor quis laoreet lobortis, sem est auctor eros, ut vulputate augue felis nec massa. Pellentesque sagittis mi ac leo dignissim, sed semper augue hendrerit. Quisque scelerisque ante quis ullamcorper placerat. Cras in porta turpis. Proin turpis mi, posuere vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit am
</div>
<div id="div2" class="targetDiv">
idunt ante, eget pulvinar magna malesuada id. Morbi posuere libero sed ante tempor faucibus. Fusce non nulla nunc. Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et
</div>
<div id="div3" class="targetDiv">
erisque erat vel vehicula. In varius at massa id molestie. Donec nec nisi vel justo auctor laoreet. Ut commodo velit vitae magna faucibus elementum. Cras ultrices auctor risus, scelerisque aliquet nisi tincidunt id. Integer quis dapibus nibh. Praesent mauris eros, vestibulum at felis a, luctus laoreet tellus.
</div>
<div id="div4" class="targetDiv">
e vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit amet sodales urna
</div>
<div id="div5" class="targetDiv">
gnissim ultrices tellus in convallis. Sed euismod tellus vel lorem suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris. Aenean quis maximus ex. Maecenas congue tellus ac nunc sodales pellentesque.
</div>
<div id="div6" class="targetDiv">
Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis nisi id cursus. Nunc ac turpis sem. In pellentesque rhoncus suscipit.
</div>
</div>
You can just hide all the elements by class name using jquery on page load, or you can just use css
display:none;