I want to have a single type of dropdown in the whole website that behaves in a certain way:
it must open on click
it must stay open when i click inside the block that shows
it must close if i click outside of the opened block
it must close if i click again on the title * which opened the dropdown
if i click on a new dropdown, any existing opened dropdown must close
As you can see in my demo, i have all the features working except last one which works ok only partial.
If you click on dropdown 1 and than on dropdown 2, all is perfect. New one that opens will close the old one which was already opened.
Now, open again dropdown 1 (from header) and after this, click to open dropdown 3 or 4 (which are in footer area) and you will see that the dropdown from header will remain opened.
Any solution to fix this? So same type of dropdown, when opened, must close previous opened drodown regardless of it's position in the webpage. Thanks
$(".dropdown").click(function(event) {
event.stopPropagation();
$(this).parent().find(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
$(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
$(".dropdown-values").fadeOut(500);
$(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
$(this).siblings(".dropdown-values").fadeToggle(500);
$(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
#header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
height: 200px;
}
#footer {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.dropdown {
background: #313654 none repeat scroll 0 0;
cursor: pointer;
display: inline-block;
}
.dropdown-title {
color: #fff;
display: block;
}
a {
background-color: transparent;
outline: medium none;
}
.dropdown-values {
background: #0089d7 none repeat scroll 0 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
display: none;
margin-top: 0;
padding: 10px;
position: absolute;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
<div class="dropdown">
<a class="dropdown-title">dropdown 1</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 1 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 1 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 2</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 2 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 2 content</a>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<div class="dropdown">
<a class="dropdown-title">dropdown 3</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 3 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 3 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 4</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 4 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 4 content</a>
</div>
</div>
</div>
</div>
Slightly modified your code, you need just play with the selectors.
$(".dropdown").click(function(event) {
event.stopPropagation();
$(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
$(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
$(".dropdown-values").fadeOut(500);
$(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
$(this).siblings(".dropdown-values").fadeToggle(500);
$(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
#header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
height: 200px;
}
#footer {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.dropdown {
background: #313654 none repeat scroll 0 0;
cursor: pointer;
display: inline-block;
}
.dropdown-title {
color: #fff;
display: block;
}
a {
background-color: transparent;
outline: medium none;
}
.dropdown-values {
background: #0089d7 none repeat scroll 0 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
display: none;
margin-top: 0;
padding: 10px;
position: absolute;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
<div class="dropdown">
<a class="dropdown-title">dropdown 1</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 1 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 1 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 2</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 2 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 2 content</a>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<div class="dropdown">
<a class="dropdown-title">dropdown 3</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 3 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 3 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 4</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 4 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 4 content</a>
</div>
</div>
</div>
</div>
It seems to me the problem line is this:
$(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
You're only removing the activated class in the parent.
Just look for $('.dropdown') directly.
Related
Using Bootstrap 3 and cannot seem to get the collapse panel icon to only change on the collapse panel that is active / open....it is changing all the instances and not just the ONE active. Even if I use the class (this) and not #accordion it is still changing all the images.
codepen: https://codepen.io/mDDDD/pen/NWbdrGY
$('.panel-group').on('shown.bs.collapse', function (e) {
$(this).find('.collapse-icon').attr('src', '/img/minus-icon.svg');
});
$('.panel-group').on('hidden.bs.collapse', function (e) {
$(this).find('.collapse-icon').attr('src', '/img/plus-icon.svg');
});
THIS FIXED THE ISSUE:
$('.panel-collapse').on('shown.bs.collapse', function (e) {
$(this).prev().find('.collapse-icon').attr('src', '/img/minus-icon.svg');
});
$('.panel-collapse').on('hidden.bs.collapse', function (e) {
$(this).prev().find('.collapse-icon').attr('src', '/img/plus-icon.svg');
});
.panel-group .panel {
margin-bottom: 15px;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.panel-heading {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 98px;
padding: 31px 15px 31px 81px;
transition: 200ms all linear;
border-radius: 0;
}
.panel-heading--blue {
background-color: #20315b;
}
.panel-heading--blue:hover {
background-color: #071842;
}
.panel-heading h3 {
color: white;
}
.collapse-icon {
width: 100%;
max-width: 36px;
height: auto;
}
h3.panel-title {
font-size: 19px;
}
a.collapse-link {
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel-group font--dosis" id="accordion">
<!--panel one-->
<a class="collapse-link" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
<div class="panel">
<div class="panel-heading panel-heading--blue">
<h3 class="panel-title font-weight--bold text-uppercase">
Panel One
</h3>
<img class="collapse-icon collapse-icon--plus" src="/img/plus-icon.svg">
</div>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
body
</div>
</div>
<!-- panel two -->
<a class="collapse-link" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
<div class="panel">
<div class="panel-heading panel-heading--blue">
<h3 class="panel-title font-weight--bold text-uppercase">
Panel Two
</h3>
<img class="collapse-icon collapse-icon--plus" src="/img/plus-icon.svg">
</div>
</div>
</a>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
body
</div>
</div>
</div><!-- /.panel-group -->
I added an attribute called iscollapse to each image and it checks if the item is expanded or collapsed and change the icon accordingly.
$('.collapse-link').on('click', function (e) {
if($(this).find('.collapse-icon').attr('iscollapse') == 'true'){
$(this).find('.collapse-icon').attr('src', '/img/plus-icon.svg');
$(this).find('.collapse-icon').attr('iscollapse', 'false');
}
else{
$(this).find('.collapse-icon').attr('src', '/img/minus-icon.svg');
$(this).find('.collapse-icon').attr('iscollapse', 'true');
}
});
.panel-group .panel {
margin-bottom: 15px;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.panel-heading {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 98px;
padding: 31px 15px 31px 81px;
transition: 200ms all linear;
border-radius: 0;
}
.panel-heading--blue {
background-color: #20315b;
}
.panel-heading--blue:hover {
background-color: #071842;
}
.panel-heading h3 {
color: white;
}
.collapse-icon {
width: 100%;
max-width: 36px;
height: auto;
}
h3.panel-title {
font-size: 19px;
}
a.collapse-link {
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel-group font--dosis" id="accordion">
<!--panel one-->
<a class="collapse-link" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
<div class="panel">
<div class="panel-heading panel-heading--blue">
<h3 class="panel-title font-weight--bold text-uppercase">
Panel One
</h3>
<img class="collapse-icon collapse-icon--plus" src="/img/plus-icon.svg" iscollapse="false">
</div>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
body
</div>
</div>
<!-- panel two -->
<a class="collapse-link" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
<div class="panel">
<div class="panel-heading panel-heading--blue">
<h3 class="panel-title font-weight--bold text-uppercase">
Panel Two
</h3>
<img class="collapse-icon collapse-icon--plus" src="/img/plus-icon.svg" iscollapse="false">
</div>
</div>
</a>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
body
</div>
</div>
</div><!-- /.panel-group -->
I have hundreds of html-based journal articles that contain html snippets like the example below to reference images:
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe"><!-- named anchor --></a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png">
<div class="long-desc" />
<a target="xrefwindow" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" id="ID0ELD">https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png</a>
<div class="permissions">
<p class="copyright" />
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</a>
</div>
On document ready, using JavaScript and CSS3 how can I show the thumbnail image contained in the first 'a' tag, along with the contents of the 'long-desc' and 'permissions' divs beneath... and then when the thumbnail is clicked, open the image in the second (daughter) 'a' tag in a modal that fills the screen (and has a close button)?
Check this out. You can edit styles as you need for your purpose. It is just a sketch.
document.addEventListener('DOMContentLoaded', function() {
let thumbnail = document.querySelector('.thumbnail');
let close = document.querySelector('.modal-close');
let overlay = document.querySelector('.overlay');
thumbnail.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.add('visible')
});
close.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.remove('visible')
});
});
.thumbnail-image {
border: 3px solid #BBB;
border-radius: 4px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.overlay.visible{
display:block;
}
.modal-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.modal-image {
height: calc(100vh / 1.28);
width: 100vh;
margin: auto;
}
.modal-image>img {
max-width: 100%;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
border: 2px solid #444;
background: #bbb;
cursor: pointer;
}
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe">
<!-- named anchor -->
</a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="#" class="thumbnail">
<img class="thumbnail-image" src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png" alt="show full image" title="show full image" />
</a>
<div class="long-desc">
<div class="permissions">
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</div>
<div class="overlay">
<div class="modal-wrapper">
<div class="modal-image">
<img src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" alt="full image" title="full image" />
</div>
<div class="modal-close">X</div>
</div>
</div>
</div>
I want to show the div that is clicked based on the menu heading and other divs are hidden when the clicked div is shown . I have shown the home div only and rest default in the code .
I tried using
let el = $(this).attr('href');
$(el).toggle();
but its not working perfectly . I want to show the div that is clicked only , home div should be visible by default when no menu is clicked.
.content {
height: 20px;
}
.inactive {
display: none;
}
#home-content {
background-color: red
}
#portfolio-content {
background-color: blue;
}
#about-content {
background-color: yellow;
}
#resume-content {
background-color: green;
}
#contact-content {
background-color: white;
}
<ul class="sidebar-menu-container">
<li>
<a class="sidebar-menu-item" href="#home-content">Home</a>
</li>
<li>
<a class="sidebar-menu-item" href="#about-content">About Me</a>
</li>
<li>
<a class="sidebar-menu-item" href="#resume-content">Resume</a>
</li>
<li>
<a class="sidebar-menu-item" href="#portfolio-content">Portfolio</a>
</li>
<li>
<a class="sidebar-menu-item" href="#contact-content">Contact</a>
</li>
</ul>
<div class="container">
<div class="content" id="home-content">
</div>
<div class="content inactive" id="about-content">
</div>
<div class="content inactive" id="portfolio-content">
</div>
<div class="content inactive" id="resume-content">
</div>
<div class="content inactive" id="contact-content">
</div>
</div>
Try this
$( ".sidebar-menu-item" ).click(function() {
$(".content").hide();
let el = $(this).attr('href');
$(el).toggle();
});
#home-content {
height: 200px;
background-color: red
}
#portfolio-content {
height: 200px;
background-color: blue;
display: none;
}
#about-content {
height: 200px;
background-color: yellow;
display: none;
}
#resume-content {
height: 200px;
background-color: green;
display: none;
}
#contact-content {
height: 200px;
background-color: white;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="sidebar-menu-container">
<li>
<a class="sidebar-menu-item" href="#home-content">Home</a>
</li>
<li>
<a class="sidebar-menu-item" href="#about-content">About Me</a>
</li>
<li>
<a class="sidebar-menu-item" href="#resume-content">Resume</a>
</li>
<li>
<a class="sidebar-menu-item" href="#portfolio-content">Portfolio</a>
</li>
<li>
<a class="sidebar-menu-item" href="#contact-content">Contact</a>
</li>
</ul>
<div class="content" id="home-content">
home-content
</div>
<div class="content" id="about-content">
about-content
</div>
<div class="content" id="portfolio-content">
portoflio-content
</div>
<div class="content" id="resume-content">
resume-content
</div>
<div class="content" id="contact-content">
contact-content
</div>
Nevermind, this worked for me:
$('.sidebar-menu-item').click(function () {
let href = $(this).attr('href');
$(".content").addClass("inactive");
$(href).removeClass("inactive");
});
I've set up a animated masonry gallery with filters using this along with fancybox pop up.
What I'm trying to set up is a script that will remove the inline data-fancybox="gallery" which groups them together and allows users to scroll through the entire gallery.
When one of the filter links is clicked, it adds a "isotope-hidden" class to the images and hides them however it still belongs to the data-fancybox="gallery" so is still able to be accessed by when the pop up is enabled. I wanted to set up a script to remove this value if a specific class is found on the image.
Here is my attempted script.
How can i remove the data-fancybox="gallery" that's in the parent div of the image tag if "isotope-hidden" class is added to the image tag?
jq('.filterbutton').click(function () {
if (jq("isotope .item img").hasClass("isotope-hidden")) {
jq(".isotope .item .img").parent().attr("data-fancybox", "");
} else if (jq("sotope .itme .img").hasClass("isotope-item")) {
jq(".isotope .item .img").parent().attr("data-fancybox", "gallery");
}
});
#gallery-header-center-right{
display: inline-block;
width: 100%;
margin: 10px 0;
}
.gallery-header-center-right-links {
color: #333333;
float: left;
height: 35px;
padding-right: 20px;
padding-left: 20px;
margin-left: 20px;
font-size: 16px;
font-weight: 400;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
transition: background 0.5s;
}
.gallery-header-center-right-links:hover {
background-color: rgba(63,141,191,1);
color: rgba(255,255,255,1);
cursor: pointer;
}
.gallery-header-center-right-links-current {
color: #FFFFFF;
background-color: rgba(63,141,191,1);
}
.gallery-header-center-right-links-current:hover {
background-color: rgba(63,141,191,0.5);
}
.filterbutton{
margin: 5px;
float: left;
}
.item{
width: 320px;
float: left;
margin: 5px;
}
.item img{
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
<div id="gallery-header">
<div id="gallery-header-center">
<div id="gallery-header-center-right">
<div class="gallery-header-center-right-links filterbutton" id="filter-all">All</div>
<div class="gallery-header-center-right-links filterbutton" id="filter-kw17">KW17</div>
<div class="gallery-header-center-right-links filterbutton" id="filter-kw16">KW16</div>
</div>
</div>
</div>
<div id="gallery-content">
<div id="gallery-content-center">
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-jordan.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-jordan.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF2.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF2.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF3.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF3.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-remix-mag.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-remix-mag.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-sammy.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-sammy.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/BeautyEQLoveridge.png" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/BeautyEQLoveridge.png" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/kwwomensweekly.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/kwwomensweekly.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/kylie.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/kylie.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/myraboot.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/myraboot.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/next.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/next.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/nextj.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/nextj.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/snuggle.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/snuggle.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/sundaymag.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/sundaymag.jpg" class="all kw17"/>
</a>
</div>
</div>
</div>
I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here:
http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo">21GUNS</h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</li>
<li>
MENU 2
</li>
<li>
MENU 3
</li>
<li>
MENU 4
</li>
<li>
MENU 5
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- headrow -->
<div class="bannerrow">
<img src="http://placehold.it/1800x600" alt="" />
</div>
<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<header>
<h2>21SERVICES</h2>
<p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
</header>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
</div>
</div>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
CSS:
#blue: #293448;
#red: #C1392B;
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}
.headrow {
background: #blue;
}
.logo a {
color: #fff;
transition: 0.3s;
&:hover {
text-decoration: none;
color: #eee;
}
}
.topmenu {
text-align: right;
p {
margin-top: 10px;
a {
display: inline-block;
margin: 0 5px;
text-align: right;
}
}
ul {
margin-bottom: 0;
}
li {
display: inline-block;
margin-left: 30px;
a {
color: #eee;
display: block;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
a:hover {
text-decoration: none;
border-bottom: 3px solid #red;
}
.dropdown-menu {
text-align: left;
li {
margin: 0;
display: block;
}
a:hover {
background: #ccc;
}
a {
color: #blue;
border: 0;
transition: 0;
}
}
}
}
.bannerrow {
img { width: 100%; height: auto;}
}
.servicerow {
color: #fff;
padding-bottom: 100px;
background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
background-size: cover;
header {
margin-top: 60px;
margin-bottom: 20px;
h2 { margin-bottom: 10px; }
p { font-size: 13pt; }
}
}
.column2-box {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
i { font-size: 110px; float: left; }
h3 { margin-top: 0; }
}
JS:
$(function() {
$('.dropdown-toggle').dropdown();
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
var s = skrollr.init({forceHeight: false});
});
I am not sure which element makes the page too high.
skrollr.init({forceHeight: false});
https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.