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.
Related
I have some HTML with 2 tags having the same name and in my JavaScript I have a var, so that in future if the tel number changes, it only has to be changed in one place (in the JavaScript) and will be applied to all tags with the matched named.
I can't seem to remember how to do this as I can't use 'ID' as the 'Footer' is displayed when the hidden Div is displayed. One is a <p> and the other is a <span> which the page contains a few of these.
It needs to be JavaScript not jQuery.
Code
<div class="row m-0 d-flex align-items-center p-5">
<div class="col-12 col-lg-6 pr-lg-0">
<h1>Oops, something went wrong</h1>
<span id="otherErrorTxt" style="display: none">
<p>This error has occurred whilst processing your request.</p>
<p>If the error continues, please contact us on:</p>
<p name="telNo" class="text-muted"></p> <!-- TEL NO. TO GO HERE -->
</span>
<span id="fourOfourTxt">
<p>The page you are looking for is not available. This may be because of one of the following reasons:</p>
<ul class="mb-3">
<li>The page may have been moved or removed</li>
<li>The page may have had its name changed</li>
<li>You may have typed the URL incorrectly</li>
</ul>
</span>
<a class="btn btn-primary col-12 col-lg-2 mt-3" href="/">Go back</a>
</div>
</div>
<div class="row footer">
<div class="col-lg-4">
© 2020 Packnet Limited - All rights reserved
</div>
<div class="col text-right">
<i class="fas fa-phone fa-lg fa-rotate-90 mr-2"></i>
<span name="telNo"></span> <!-- TEL NO. TO ALSO GO HERE -->
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
var telNo = '01234 567 8900 (8.30am till 5.30pm - Mon to Fri excluding bank holidays)';
if (document.getElementById('returnedError').innerHTML.indexOf('404') != -1) {
document.getElementById('fourOfourTxt').style.display = 'block';
document.getElementById('otherErrorTxt').style.display = 'none';
} else {
document.getElementById('fourOfourTxt').style.display = 'none';
document.getElementById('otherErrorTxt').style.display = 'block'
}
document.getElementsByName('telNo').innerHTML = telNo; // Not working
});
</script>
You need to loop over the results of the getElementsByName() function since it returns a collection. See example below. As mentioned in the comments, you shouldn't use name on span elements. It's better to use a class selector instead. The same logic applies for the getElementsByClassName() or querySelectorAll() functions since these return collections as well.
var telNo = '01234 567 8900 (8.30am till 5.30pm - Mon to Fri excluding bank holidays)';
document.getElementsByName('telNo').forEach((el) => {
el.innerHTML = telNo;
});
<div class="row m-0 d-flex align-items-center p-5">
<div class="col-12 col-lg-6 pr-lg-0">
<h1>Oops, something went wrong</h1>
<span id="otherErrorTxt" style="display: block">
<p>This error has occurred whilst processing your request.</p>
<p>If the error continues, please contact us on:</p>
<p name="telNo" class="text-muted"></p> <!-- TEL NO. TO GO HERE -->
</span>
<span id="fourOfourTxt">
<p>The page you are looking for is not available. This may be because of one of the following reasons:</p>
<ul class="mb-3">
<li>The page may have been moved or removed</li>
<li>The page may have had its name changed</li>
<li>You may have typed the URL incorrectly</li>
</ul>
</span>
<a class="btn btn-primary col-12 col-lg-2 mt-3" href="/">Go back</a>
</div>
</div>
<div class="row footer">
<div class="col-lg-4">
© 2020 Packnet Limited - All rights reserved
</div>
<div class="col text-right">
<i class="fas fa-phone fa-lg fa-rotate-90 mr-2"></i>
<span name="telNo"></span>
<!-- TEL NO. TO ALSO GO HERE -->
</div>
</div>
this is my first question here, I'm really desperate and I hope you can help me.
I'm trying to build a post/comment/reply system like Facebook by using vuejs, I'm using v-for to loop all posts/comments/replies after I use Axios to fetch data in my database (using laravel API), the problem here that I have input with v-model attached to a form inside my v-for loops when I type in my of my input it appears in all other inputs that has been looped here is an image for better understanding -> duplicate input,
<div class="panel panel-white post panel-shadow" v-for="(post) in posts" >
<div class="post-heading">
<div class="pull-left image">
<img src="https://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>{{post.user.name}} </b>
made a post.
</div>
<h6 class="text-muted time">(number) minute ago</h6>
</div>
</div>
<div class="post-description">
<p>{{post.content}}</p>
<div class="stats">
<a href="#" class="btn btn-default stat-item">
<i class="fa fa-thumbs-up icon"></i>2
</a>
<a href="#" class="btn btn-default stat-item">
<i class="fa fa-share icon"></i>12
</a>
</div>
</div>
<div class="post-footer">
<form>
<div class="input-group">
<input type="text" name="comment" class="form-control" v-model.lazy="comments.comment" :class="{ 'is-invalid': comments.errors.has('comment') }" required="required" autocomplete="off">
<has-error :form="comments" field="comment"></has-error>
<span class="input-group-addon">
<button type="submit" class="fa fa-send form-control" #click.prevent="addComment(post.id)" >Send</button>
</span>
</div>
</form>
<ul class="comments-list" v-for="(comment) in post.comments?post.comments:''">
<li class="comment" >
<a class="pull-left" href="#">
<img class="avatar" src="https://bootdey.com/img/Content/user_1.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{comment.user?comment.user.name:"-"}}</h4>
<h5 class="time">(number) minutes ago</h5>
</div>
<p>{{comment.comment}}</p>
<form>
<div class="input-group">
<input type="text" name="reply" class="form-control" v-model="replies.reply" :class="{ 'is-invalid': replies.errors.has('reply') }" required="required" autocomplete="off">
<has-error :form="replies" field="reply"></has-error>
<span class="input-group-addon">
<button type="submit" class="fa fa-send form-control" #click.prevent="addReply(comment.id)" >Send</button>
</span>
</div>
</form>
</div>
<ul class="comments-list" v-for="reply in comment.reply?comment.reply:''">
<li class="comment">
<a class="pull-left" href="#">
<img class="avatar" src="https://bootdey.com/img/Content/user_3.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{reply.user.name}}</h4>
<h5 class="time">(number) minutes ago</h5>
</div>
<p>{{reply.reply}}</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
the easy way is put every post, comment and reply in separate components remember that's components for, to have separate states(or data) that you can easily manipulate it this way you write not only hard too extends but also its unreadable.
but the only way too bind a state in loop the way i said you can try with computed
v-model="replies[index].reply"
to:
v-model="replyComputed(index)"
Your problem is that replies.reply is the same for every looped comment. You should bind the reply to the specific comment you currently are iterating over e.g. v-model="comment.reply".
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 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>
Not sure why I'm getting this error and can't figure it out? The cycle works, I'm just getting this error in the console and would like to fix it. That's why I'm here now :)
I'm creating 3 different cycles on the same page with the same selector and using the pager for unique controls. This is what I have currently:
// Cycle Process individual samples - generate unique navs
$('.prospect-carousel').each(function(i) {
$(this).cycle({
fx: 'scrollHorz',
speed: 500,
pager: '.nav-pl' + i,
pagerAnchorBuilder: function(idx, slide) {
return '.nav-pl'+i+' li:eq(' + idx + ') a';
}
}).cycle('pause');
});
HTML:
<h6 class="carbon_heading">Top Prospects</h6>
<ul id="tab-nav" class="nav nav-tabs">
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
<div id="tab-wrap">
<div id="c2012" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl0">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2012 Player Rankings</p>
</div>
<div id="c2013" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl1">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2013 Player Rankings</p>
</div>
<div id="c2014" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl2">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2014 Player Rankings</p>
</div>
</div>
enter code here
I had Mike (developer of cycle) look at it and he said my third div was causing the issue b/c it was empty. He's going to fix this on the next release.