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.
Related
After upgrading to Angular 5 I am facing this error:
ExpressionChangedAfterItHasBeenCheckedError: Expression has
changed after it was checked. Previous value: 'ngIf: undefined'.
Current value: 'ngIf: null'.
If I comment the below div structure the error is disappearing
<div *ngIf="sportsServ?.relatedsportssData" class="stars stars-default pinnedSection">
Any idea how to fix this?
<!-- language-all: lang-or-tag-here -->
<div class="playerpobUpBox playerWindow kPopupConfirmationBox" id="greaterAlertHeader">
<div class="row playerPopUpGridCollection playerPopUpContent lineHeightInputs">
<div class="playerContent"></div>
</div>
<div class="clearFloat"></div>
<div class="row playerPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id="greaterAlertOKHeader">OK</button>
</div>
<div class="clearFloat"></div>
<div class="clearFloat"></div>
</div>
<progress-circle></progress-circle>
<div class="leftSlider toggleShow">
<div class="fixedLeftSlider">
<div class="leftSliderBox">
<div class="stars-group" id="accordion">
<div class="stars stars-default recentsportss">
<div class="stars-heading active">
<h4 class="stars-title">
<a data-toggle="collapse" href="#recentsportss" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{recentsportss}}
</a>
<span>{{lastTenViewsportss}}</span>
</h4>
</div>
<div id="recentsportss" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body">
<ul *ngFor="let item of recentsportssList; let k=index;">
<li class="recentList" (click)="opensports($event,item.sportsNo,item.packageName,item.pinnedFlag,item.originatingNetwork);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsNo" *ngIf="k<20">
<span> {{item.packageName}}
<i id="pinToggle" class="recentsportssRightIcon" (click)="pinUnpin($event,item.sportsNo); $event.stopPropagation();"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="stars stars-default pinnedSection">
<div class="stars-heading">
<h4 class="stars-title">
<a data-toggle="collapse" href="#pinnedSection" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{pinnedsportss}} & {{titles}}
</a>
</h4>
</div>
<div id="pinnedSection" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body pad0Imp">
<label class="pinnedsportsSubTitle">sportss</label>
<ul *ngFor="let item of pinnedsportssList; let i=index;">
<li class="recentList" (click)="opensports($event,item.sportsNo,item.packageName,item.pinnedFlag,item.originatingNetwork);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsNo" *ngIf="i<20">
<span>{{item.packageName}}
<i id="pinToggle1" class="recentsportssRightIcon" (click)="pinUnpin1($event,item.sportsNo); $event.stopPropagation();"></i>
</span>
</li>
</ul>
<!--<ul>
<li>sports Number One<i class="recentsportssRightIcon"></i></li>
<li>sports Two<i class="recentsportssRightIcon"></i></li>
<li>sports Three<i class="recentsportssRightIcon"></i></li>
</ul>-->
<label class="pinnedsportsSubTitle borderTopTitle">Titles</label>
<ul *ngFor="let item of pinnedTitlesList;let k=index;">
<li class="recentList" (click)="navigateTitlePage($event,item.titleNo);$event.stopPropagation();" *ngIf="k<20">
<span>{{item.titleName}}
<i id="pinTitle1" class="recentsportssRightIcon" (click)="pinUnpintitle($event,item.titleNo);$event.stopPropagation();"></i>
</span>
</li>
<!--<li>Title Name Number One<i class="recentsportssRightIcon"></i></li>
<li>Title Name Number two<i class="recentsportssRightIcon"></i></li>
<li>Title Number 3<i class="recentsportssRightIcon"></i></li>-->
</ul>
</div>
</div>
</div>
<div *ngIf="sportsServ?.relatedsportssData" class="stars stars-default pinnedSection">
<div class="stars-heading">
<h4 class="stars-title">
<a data-toggle="collapse" href="#relatedsportss" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{sportsServ?.relatedsportssHeading}}
</a>
</h4>
</div>
<div id="relatedsportss" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body">
<ul>
<li *ngFor="let item of sportsServ?.relatedsportssData" (click)="selectedsports($event,item.sportsId,item.sportsName);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsId">{{item.sportsName}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="showHideLeftSliderBtn"></div>
</div>
</div>
<router-outlet></router-outlet>
<!--<div><sportsSearch style="display:none;" (sportsSearchEmitter)="sportsSearchEmitter($event)"></sportsSearch></div>-->
Probably you're getting this value asynchronously, you may try to:
Use changeDetection: ChangeDetectionStrategy.OnPush on your #Component (before selector), in your .ts file, don't forget to import changeDetection from "#angular/core";
Try to not get the value asynchronously, using setTimeout() function to get the value;
Inject cdr: ChangeDetectorRef on your module and import it from your "#angular/core", after that, on your implemented ngAfterViewChecked just put this.cdr.detectchanges.
To provide a better answer, you need to post your .ts code, and remove some lines to make the code cleaner. Hope it helps!
I'm scraping a website where it has the following HTML structure
<div id="list" class="book-list">
<div id="stream_1" class="stream collapsed">
<h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3>
<div class="volume last">
<h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922893" class="new">
<span>
<a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a>
</span>
<i>Yesterday 08:27 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
<div id="stream_5" class="stream">
<h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3>
<div class="volume last">
<h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922873" class="new">
<span>
<a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a>
</span>
<i>Yesterday 08:10 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
</div>
I want to use jQuery to get the links from the divs to get something like this
{
"vol.1 ch.1" : "link/1",
"ch.2" : "link/2"
}
As all the items i want has the class ch sts i wanted to get them with the selector, and trying to use each() but didn't work as it shows nodes...
Here's what how i'm trying:
$d('.ch').map(function(){
console.log('This: href',$(this).attr("href"));
}).get();
It is simpler than you thought. Since you've mentioned that you only want to parse links with ch sts classes, I changed the selector.
var map = {};
$(".ch.sts").each(function() {
map[$(this).text()] = $(this).attr("href");
});
console.log(map);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list" class="book-list">
<div id="stream_1" class="stream collapsed">
<h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3>
<div class="volume last">
<h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922893" class="new">
<span>
<a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a>
</span>
<i>Yesterday 08:27 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
<div id="stream_5" class="stream">
<h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3>
<div class="volume last">
<h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922873" class="new">
<span>
<a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a>
</span>
<i>Yesterday 08:10 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
</div>
Get all the Elements with class name.
Get the text value and "href" attribute.
x = document.getElementsByClassName("ch sts");
for(i =0; i<x.length; i++) {
console.log(x[i].text +" "+ x[i].getAttribute("href"));
}
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.
The loader is not enabled in my bxslider, how to enable it
bx slider version 1.4
JavaScript code
$(document).ready(function() {
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
pause: 5000,
speed: 2000,
autoStart:false,
preloadImages:'all',
});
});
In Html the list element contain inner elements
<div class="baner-slider">
<ul class="bxslider">
<li>
<span class="baner baner-1 ">
<span class="bg-shadow">
<span class="h1">g</span>
<span class="h4">We es</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-2 ">
<span class="bg-shadow">
<span class="h1">Nd</span>
<span class="h4">edefefe</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-3">
<span class="bg-shadow">
<span class="h1">ry</span>
<span class="h4">Ags .</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-4">
<span class="bg-shadow">
<span class="h1">A</span>
<span class="h4">A Academia.</span>
learn more
</span>
</span>
</li>
</ul>
<div class="arrow" id="arrw">
<img src="img/icons/arrw.png" alt="">
</div>
<div class="event-wrap hidden-xs hidden-sm">
<h4>Visit us at booth #507 at PAG 2017</h4>
</div>
The issue is solved when i added img tag inside li
Thanks to zer00ne for help
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.