I'm trying to make a div class wider than it's original size on click of a link; so originally the 'generic-shadow' class is set to 33%, but once i click the 'read-more' i'd like it to be 100%? i'm not too good with jquery/js but hoping i'm close
$(".toggle").click(function() {
$("generic-shadow").toggleClass("generic-shadow");
$("generic-shadow").toggleClass("generic-shadow-clicked");
// hides matched elements if shown, shows if hidden
$(this).next().toggle();
$(this).next().next().slideToggle("slow");
});
.generic-shadow {
height: 100%;
transition: .8s ease-in-out;
width: 33%;
}
.generic-shadow-clicked {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="generic-shadow lazy-loading">
<div class="interactive-pane">
<div class="pane-overlay"></div>
<div class="pane-content">
<div class="pane-title">Integrated Solutions Knowledge & Insight</div>
<div class="pane-content-inner">
<img src="images/health-assessments-small.png" alt="Product Logo">
<h2>Health Assessments</h2>
</div>
</div>
</div>
<a class="toggle" href="javascript:void(0);">Read More...</a>
<div id="content" class="pane">
<div class="pane-info">Health Assessments serve to determine the current health and wellbeing of your workforce.</div>
</div>
<div id="contentHidden" style="display:none;" class="pane">
<div class="pane-info">
<p>Health Assessments serve to determine the current health and wellbeing of your workforce.</p>
<p>Through knowledge and education about an individual’s health, your workers are able to make informed decisions that function to provide a catalyst for positive workplace culture.</p>
<p><em>Encouraging health, wellbeing and positive workplace culture</em>
</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Determine the health of your workforce</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Foster positive lifestyle changes within the workplace</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Educate and empower healthier lifestyle choices</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Provide simple solutions for long-lasting results</p>
</div>
</div>
</li>
$(".generic-shadow").removeClass("generic-shadow");
$(".generic-shadow").addClass("generic-shadow-clicked");
Remove this line
$("generic-shadow").toggleClass("generic-shadow");
Remove above line and change $("generic-shadow") to $(".generic-shadow") as the class needs . prefix
$(".toggle").click(function() {
// $("generic-shadow").toggleClass("generic-shadow");
$(".generic-shadow").toggleClass("generic-shadow-clicked");
// hides matched elements if shown, shows if hidden
$(this).next().toggle();
$(this).next().next().slideToggle("slow");
});
DEMO
$(".toggle").click(function() {
// $("generic-shadow").toggleClass("generic-shadow");
$(".generic-shadow").toggleClass("generic-shadow-clicked");
// hides matched elements if shown, shows if hidden
$(this).next().toggle();
$(this).next().next().slideToggle("slow");
});
.generic-shadow {
height: 100%;
transition: .8s ease-in-out;
width: 33%;
}
.generic-shadow-clicked {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="generic-shadow lazy-loading">
<div class="interactive-pane">
<div class="pane-overlay"></div>
<div class="pane-content">
<div class="pane-title">Integrated Solutions Knowledge & Insight</div>
<div class="pane-content-inner">
<img src="images/health-assessments-small.png" alt="Product Logo">
<h2>Health Assessments</h2>
</div>
</div>
</div>
<a class="toggle" href="javascript:void(0);">Read More...</a>
<div id="content" class="pane">
<div class="pane-info">Health Assessments serve to determine the current health and wellbeing of your workforce.</div>
</div>
<div id="contentHidden" style="display:none;" class="pane">
<div class="pane-info">
<p>Health Assessments serve to determine the current health and wellbeing of your workforce.</p>
<p>Through knowledge and education about an individual’s health, your workers are able to make informed decisions that function to provide a catalyst for positive workplace culture.</p>
<p><em>Encouraging health, wellbeing and positive workplace culture</em>
</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Determine the health of your workforce</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Foster positive lifestyle changes within the workplace</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Educate and empower healthier lifestyle choices</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Provide simple solutions for long-lasting results</p>
</div>
</div>
</li>
Related
I have a sidebar menu with many entries and many sublevels, which looks like that :
<div class="container-fluid">
<div class="row">
<div class="col-md-2" id="sidebar" style="margin: 5px 0">
<div class="list-group panel">
Menu
<i class="fa fa-wrench"></i> Menu 1 <i class="fa fa-caret-down"></i>
<div class="collapse" id="tech" data-parent="#sidebar">
Sub 1 <i class="fa fa-caret-down"></i>
<div class="collapse" id="techsub1" data-parent="#techsub1">
<a class="list-group-item" href="techsub1sub1.html">techsub1sub1</a>
<a class="list-group-item" href="techsub1sub2.html">techsub1sub2</a>
</div>
Sub 2 <i class="fa fa-caret-down"></i>
<div class="collapse" id="techsub2" data-parent="#techsub2">
Sub 2 <i class="fa fa-caret-down"></i>
<div class="collapse" id="techsub2sub1" data-parent="#techsub2sub1">
<a class="list-group-item" href="techsub2sub1sub1.html">techsub2sub1sub1</a>
<a class="list-group-item" href="techsub2sub1sub2.html">techsub2sub1sub2</a>
</div>
</div>
</div>
<i class="fa fa-book"></i> Menu 2 <i class="fa fa-caret-down"></i>
<div class="collapse" id="anx" data-parent="#sidebar">
<a class="list-group-item" href="anx1.html">anx1</a>
<a class="list-group-item" href="anx2.html">anx2</a>
</div>
</div>
</div>
<main class="col-md-10" style="background-color: #fff; max-width: 1140px; padding-top: 30px; padding-bottom: 20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</main>
</div>
</div>
It works well but there are so many entries in the menu that I want to use a pager on each page [Previous - Current - Next]
My concern is that when I click on Previous or Next page, the sidebar is collapsed. Is there a way to expand the according page called, but keeping it collapsed on the home page ?
All you need to do is to add a .show CSS class to the collapsed (having .collapse CSS class) block, which you want to be expanded. See https://getbootstrap.com/docs/4.0/components/collapse/
It can be done in two basic ways - hard-coded for each page or added dynamically/programmatically based on some parameter (probably id of desired expanded collapse)
Passing a parameter from one to other page on redirecting is a separate question, but in case you wonder how to do it - try some URL parameters/hash or cookies/local storage
This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 5 years ago.
I have a section in my HTML that has a background image attached to it through the CSS. The background image goes across the entire screen and is outside the container div which the text resides in. However, every time I change the opacity of the background image so it's very light and subdued, the opacity also changes the text as well (because the background image is tied to the section id). How do I re-work this so that the background image is very faint and the text is strong in the fore-front?
<!--services section-->
<section id="services-head-section">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="py-5">
<div class="wow animated fadeInLeft">
<h1 class="display-4"><strong>SERVICES</strong></h1>
<p class="lead" style="font-style:italic;">
"We can't solve problems by using the same kind of thinking we used when we created them."
-Albert Einstein
</p>
</div>
</div>
</div>
</div>
<div class="row wow animated fadeInUp">
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cog fa-spin fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Engineering</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-pie-chart fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Product Development</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Computer Applications</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-university fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Training</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
</div>
</div>
</section>
CSS:
#services-head-section {
background: url(img/1855JPerkinsSteamGun2.jpg) no-repeat;
background-size: cover;
}
I made a jsfiddle to describe what I mean here.
https://jsfiddle.net/ww5tqomd/
You are going to have two root level elements in your body tag.
The first is going to be your background image,
The second is a container that is positioned absolute over the background image.
<div class="background-image">
</div>
<div class="content-with-text">
<h1>Hello world</h1>
</div>
html,body{
height: 100%;
width: 100%;
}
.background-image {
height: 100%;
width: 100%;
margin-bottom: -100%;
background: black;
opacity: .2;
}
.content-with-text {
position: absolute;
top: 0;
left; 0;
color: blue;
}
This way you are able to adjust the opacity of the background without it affecting your content, because technically your content is not a child of the background container, but a sibling.
Hope this helps
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(http://is4.mzstatic.com/image/thumb/Purple118/v4/a0/ee/6c/a0ee6c57-b4b2-14f3-ae42-f47ad1dd5aac/source/1200x630bb.jpg);
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-size:cover
}
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>
#services-head-section {
position: relative;
}
#services-head-section::after {
background: url('http://lorempixel.com/1800/780/sports/1/') 0 0 no-repeat transparent;
background-size: 100%;
bottom: 0;
content: "";
left: 0;
opacity: 0.6;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
<!--services section-->
<section id="services-head-section">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="py-5">
<div class="wow animated fadeInLeft">
<h1 class="display-4"><strong>SERVICES</strong></h1>
<p class="lead" style="font-style:italic;">
"We can't solve problems by using the same kind of thinking we used when we created them."
-Albert Einstein
</p>
</div>
</div>
</div>
</div>
<div class="row wow animated fadeInUp">
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cog fa-spin fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Engineering</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-pie-chart fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Product Development</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Computer Applications</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-university fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Training</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
</div>
</div>
</section>
I have a large header section for a website that is split into three sections; social links, logo, and then the navigation bar. I am trying to figure out how I can hide the top two elements and resize the navigation bar and have it fixed when the user scrolls past it.
The nav bar currently just holds a link that will open up a separate side menu that holds all of the actual page navigation.
https://jsfiddle.net/cxekxrxy/2/
<header>
<!-- social links -->
<div id="social" class="social-header">
<div class="container">
<div class="row">
<ul>
<li class="social-icon"><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-twitter-square" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-linkedin-square" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
<!-- logo -->
<div id="logo" class="logo-header">
<div class="container">
<div class="row">
<h1 class="logo-main">Main Header</h1>
<h2 class="logo-sub">Sub Header</h2>
</div>
</div>
</div>
<!-- Navigation -->
<div id="header" class="main-header">
<div class="container">
<div id="bars"><span class="glyphicon glyphicon-menu-hamburger text-right" id="nav-bars" style="font-size:25px; cursor:pointer" onclick="openNav()"></span></div>
</div>
<!-- nav links (hidden until <span> is pressed) -->
<div id="main-nav" class="side-nav">
×
<span class="glyphicon glyphicon-home"> Home</span>
<span class="glyphicon glyphicon-user"> About</span>
<span class="glyphicon glyphicon-picture"> Portfolio</span>
<span class="glyphicon glyphicon-envelope"> Contact</span>
</div>
</div>
</header>
You can see this neat example for your need:
https://css-tricks.com/scroll-fix-content/
And work with your code.
This is combination CSS and JS, and a simplest solution
.
I have a dynamic list of properties on a search results page, the problem I am having on each individual search result is that if it is a certain property type i.e. Land it does not need the bedrooms and bathrooms fields within that search result to show, but if it is a Villa, the fields would show.
I would need to show and hide fields on the page load in JS like my example above on each individual search result as if I do a general JS function for Land hiding the div classes for bedrooms and bathrooms, there could also be a Villa on the page needing those fields.
If anyone could help with some JS to help me solve this issue above, it would be much appreciated!
Heres some of the Html Results below, you will see there are multiple property types, so different fields should be show/hidden
<div class="property-listing">
<ul>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=615237" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=NEW LISTING&imageURL=487/Sales/615237/615237_7969.jpg" alt="Villa in Javea">
<span class="images-count">
<i class="fa fa-link"></i>
MidasS
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>115.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=615237" title="Villa in Javea">
Villa in Javea
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Alicante, SPAIN</span>
<p>A beautiful and rustic style 'home' offering spectacular views over the coast, the mountains and the Mediterranean Sea.</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>2</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=638700" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=REDUCED&imageURL=487/Sales/638700/638700_1145.jpg" alt="Apartment in Famagusta">
<span class="images-count">
<i class="fa fa-link"></i>
PRO1011
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>155.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=638700" title="Apartment in Famagusta">
Apartment in Famagusta
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Famagusta, CYPRUS</span>
<p>hnglkrehnblarjl;kbkhmtr;mnb;rstlmnstrn</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>0</strong>Bedrooms</span>
<span id="spbaths"><strong>0</strong>Bathrooms</span>
<span id="sppool"><strong>No</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=636364" class="property-featured-image"><div class="overlay" style="line-height:188px"><i class="fa fa-search"></i></div>
<img src="http://example.com/487/Sales/636364/636364_5562.jpg" alt="Country House in Not Specified">
<span class="images-count">
<i class="fa fa-link"></i>
cyc130
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>175.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=636364" title="Country House in Not Specified">
Country House in Not Specified
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Andalucia, SPAIN</span>
<p>;.lkijuhygtfrdeswaq</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>3</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<br> <br>
<div class="pagination">
<span class="disabled"><i class="fa fa-chevron-left"></i></span>
1
2
3
4
<i class="fa fa-chevron-right"></i>
</div>
</ul>
</div>
I'm just gonna go ahead and make up my own HTML structure to demonstrate the simple if/else statement you would make with jQuery.
function hideFields() {
$(".result").each( function() {
if ( $(this).hasClass("land") ) {
$(this).children(".bedroom").hide();
$(this).children(".bathroom").hide();
}
else if ( $(this).hasClass("villa") ) {
$(this).children(".land-area").hide();
}
});
}
hideFields();
span {
display:block;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="result villa"><b>Villa</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
<br>
<div class="result land"><b>Land</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
Your HTML seems confusing for multiple reasons, which you can easily fix to use this method:
1) sppools, spbaths, spbeds should indeed be classes rather than IDs. This is due to IDs being unique identifiers - they should hence not appear more than once on each page, whereas classes identify a "type" (class) of item, which may appear multiple times. Multiple instances of the same ID will mess with your CSS and JS.
2) There is no clear definition within each result of what type of result this is (or I can't seem to find it, at least?).
Words like "villa" or "house" indeed appear in the title-tag, but having to search within these is an inefficient way of performing the action.
Instead, make your code show the type of content as a class on each li-item or the initial div-item.
I'm using jQuery ScrollSpy to apply a .underlined class to some navigation links when the <div> in question selected by id is currently scrolled to. The code I have at the moment isn't working for the second two sections, and the first section which it is working for it only applies the .underlined class to #tenantsandowners_link for a little part of the #tenantsandowners div.
<script type='text/javascript'>
$(document).ready(function() {
$('#tenantsandowners').scrollspy({
min: $('#tenantsandowners').offset().top,
onEnter: function(element, position) {
$("#tenantsandowners_link").addClass('underlined');
},
onLeave: function(element, position) {
$("#tenantsandowners_link").removeClass('underlined');
}
});
$('#payment').scrollspy({
min: $('#payment').offset().top,
onEnter: function(element, position) {
$("#payment_link").addClass('underlined');
},
onLeave: function(element, position) {
$("#payment_link").removeClass('underlined');
}
});
$('#paymentpage').scrollspy({
min: $('#paymentpage').offset().top,
onEnter: function(element, position) {
$("#paymentpage_link").addClass('underlined');
},
onLeave: function(element, position) {
$("#paymentpage_link").removeClass('underlined');
}
});
});
</script>
Here is the related markup:
<div class="pull-right interlinks">
Tenants & Property Owners
Payment Options
Personalised Payment Page
</div>
<div id="tenantsandowners">
<div class="container">
<center><h2>Tenants and Property Owners</h2></center>
<br>
<div class="row">
<div class="col-sm-6">
<img style="margin-bottom:-30px;" src="/assets/img/businessman.jpg" width="100%" />
</div>
<div class="col-sm-6">
<br>
<ul class="lead fa-ul">
<li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Pay and receive your Rent and Maintenance charges</li>
<li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Instant or Schedule Payment</li>
<li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Multiple Payment options with different currencies</li>
<li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Pay from around the world</li>
<li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Have fastest settlements</li>
<li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> All in single account</li>
</ul>
GET STARTED NOW
</div>
</div>
<br><br>
</div>
</div>
<div id="payment">
<div class="container">
<center><h2>Payment Options</h2></center>
<br>
<div class="row" id="">
<div class="col-md-7">
<br>
<br>
<br>
<br>
<ul class="fa-ul lead pull-right">
<li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Domestic & International Payment Option</li>
<li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Highly Secured Environment</li>
<li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Multiple Payment Gateways</li>
</ul>
<br>
<span class="well lead hidden-xs hidden-sm pull-right" style="color:black;">
Credit Card / Debit Card / Net Banking / PayPal
</span>
<span class="well hidden-lg hidden-md pull-right" style="color:black;">
Credit Card / Debit Card / Net Banking / PayPal
</span>
</div>
<div class="col-md-5">
<div class="text-center">
<img class="paymentimage" src="assets/img/visa.png" /><br>
<img class="paymentimage" src="assets/img/mastercard.png" /><br>
<img class="paymentimage" src="assets/img/maestro.png" /><br>
<img class="paymentimage" src="assets/img/amex.png" /><br>
<img class="paymentimage" src="assets/img/paypal.png" />
</div>
</div>
</div>
</div>
</div>
<div id="paymentpage">
<div class="container">
<center><h2>Personalised Payment Page</h2></center>
<br>
<div class="row" id="">
<div class="col-sm-6">
<center>
<img src="/assets/img/iphone.png" />
</center>
</div>
<div class="col-sm-6">
<br>
<p class="lead">Create in 2 Minutes</p>
<p class="lead">Property Owners, Builders, Owners Associations<br>can create your own payment collection page to<br>receive the rent and maintenance charges.</p>
<br>
<p class="lead">Use your own Logo, Company Name and make<br> your personalised one stop instant payment page<br>with multiple payment gateways. Full Benefits</p>
<div style="position: absolute; text-align:center;">
CREATE YOURS NOW<br>
<b style="color: #388e3c;">(FREE - LIMITED PERIOD)</b>
</div>
</div>
</div>
</div>
</div>
How do I solve this?
I think your issue is due to using multiple scrollspy instances.
None of the examples on the authors website seem to use multiple instances and I've seen issues like this before.
I solved the problem by using only one instance of scrollspy and changing the script to be mostly dynamic.
Here is a fiddle - I included the jquery-scroll plugin directly on the page so your JavaScript code starts from line: 100 (I also left in some comments so you can play around with it):
http://jsfiddle.net/16m79c35/
(Fiddle with padding: http://jsfiddle.net/7q26hptu/)
(Fiddle with padding and a fixed header: http://jsfiddle.net/05akLpj6/)
I used this example on the authors website and edited it to suit your needs.
Let me know if this solves your problem :)
Note: This script can decoupled further from your content by replacing the static ID selectors on line: 106 $('#tenantsandowners, #payment, #paymentpage') with a class of say $('.scrollspy') and adding this class to the previously mentioned div elements alongside their IDs. I haven't tested it but it should work fine.