Im scraping a page using Kimono and Ive come across some data that is structured as below.
The issue is that all of the data is stored in an element called <div class="agents-stats-seperator"> some entries only have one of these elements, some have up to 4.
There is different data in each of them that im trying to scrape and the only structured differential between them is the Text, either :
Residential for sale:
Residential for rent:
Commercial for sale:
Commercial for rent:
Im Kimono you have the option to define what you want to select either by css path or regex.
At the moment im defining with the below :
div > div > div > div.agents-stats-seperator > div
/^()(.*?)()$/
Which is causing an issue as it picking up all the <div class="agents-stats-seperator"> elements, what ive been stuck on is how to set the regular expression to target jsut the elements that contain the text Residential for sale:
Ive tried using :
div > div > div > div.agents-stats-seperator > div [str="Residential to rent:"]
/^()(.*?)()$/
But to no avail, any ideas ?
For reference here is a snippet of the html
<div class="clearfix top agents-stats bg-muted">
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Residential for sale:
<strong>14</strong>
</div>
<div class="agents-stats-c">
Avg. asking price:
<strong class="price">£447,143</strong>
</div>
<div class="agents-stats-r">
Avg. sale listing age:
<span>18 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Residential to rent:
<strong>9</strong>
</div>
<div class="agents-stats-c">
Avg. asking rent:
<strong class="price">£1,660 pcm</strong>
</div>
<div class="agents-stats-r">
Avg. rental listing age:
<span>3 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Commercial for sale
<strong>1</strong>
</div>
<div class="agents-stats-c">
Avg. asking price:
<strong class="price">£700,000</strong>
</div>
<div class="agents-stats-r">
Avg. sale listing age:
<span>11 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Commercial to let
<strong>1</strong>
</div>
<div class="agents-stats-c">
Avg. asking rent:
<strong class="price">£22,516 pa</strong>
</div>
<div class="agents-stats-r">
Avg. rental listing age:
<span>56 weeks</span>
</div>
</div>
</div>
Try something like :
div:nth-child(1).agents-stats-seperator > div:nth-child(1).agents-stats-l > strong > a
Related
My HTML code:-
<div class='store_detail-level1'>
<span class='book_name'>How To Avoid Climate Disaster</span>
<br>
<span class='author_name'>Bill Gates</span>
</div>
I want like this
How To Avoid Climate Disaster
by Bill Gates
Key Points:-
content of class 'book_name' is dynamic, which means it's from the database
It must be responsive
Responsive means for mobile screen itr may be like:-
How To Avoid Climate
Disaster
by Bill Gates
var divwidth = document.getElementById('getthisid').clientWidth;
document.getElementById("setthisid").style.marginLeft = divwidth+'px';
.store_detail-level1{
display:inline-block;
}
<div id='getthisid' class='store_detail-level1'>
<div class='book_name_container'>
<span class='book_name'>How To Avoid Climate Disaster</span>
</div>
<div id='setthisid' class='author_name_container'>
<span class='author_name'>by Bill Gates</span>
</div>
</div>
Currently, if I have:
My header
=========
`My header`_
rst2html Docutils 0.14 produces:
<div class="document" id="my-header">
<h1 class="title">My header</h1>
<p><a class="reference internal" href="#my-header">My header</a></p>
Is it possible to obtain the following ouptut instead:
<h1 class="title" id="my-custom-header">My header</h1>
<p><a class="reference internal" href="#my-custom-header">My header</a></p>
So note how I want two changes:
the id to be inside the heading, not on a separate div
control over the actual id
The closest I could get was:
<div class="document" id="my-header">
<span id="my-custom-header"></span>
<h1 class="title">My header</h1>
<p><a class="reference external" href="my-custom-header">My header</a></p>
but this is still not ideal, as I now have multiple ids floating around, and not inside the h1.
Asciidoc for example has that covered with:
[[my-custom-header]]
== My header
<<my-custom-header>>
We have a series of slides. Each slide contains an image. We want to have a static iPad frame on each slide and have slide transitions make it appear as if the images are swiping within that frame only.
I'm using Swiper to mimic the touch slider effect.
I've created a codepen illustrating what we're after here.
The basic HTML looks like this:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://unsplash.it/200/302/?random" />
<p>Harry Potter is a series of fantasy literature written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School
of Witchcraft and Wizardry.</p>
</div>
<div class="swiper-slide">
<img src="https://unsplash.it/200/301/?random" />
<p>Jason Bourne is a fictional character and the protagonist of a series of novels by Robert Ludlum and subsequent film adaptations. He first appeared in the novel The Bourne Identity (1980), which was adapted for television in 1988.</p>
</div>
<div class="swiper-slide">
<img src="https://unsplash.it/200/304/?random" />
<p>Chiang Mai (/ˈtʃjɑːŋˈmaɪ/, from Thai: เชียงใหม่ [tɕʰiəŋ màj] ( listen), Lanna: ᨩ᩠ᨿᨦᩉ᩠ᨾᩲ᩵ [t͡ɕīaŋ.màj] ( listen)) sometimes written as "Chiengmai" or "Chiangmai", is the largest and most culturally significant city in Northern Thailand.</p>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Maybe there is a best way to do this within Swiper, and maybe it's just a clever CSS solution? I'm not sure.
Ideas? Suggestions? Solutions? :)
So I finally worked out a solution.
If instead of 1 slider, I use 2 and sync them. I can constrain the size of the 1 slider to be exact size I need for the iPad.
My forked codepen solution here.
<div class="ipad-slider">
<div class="swiper-container image-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://unsplash.it/300/400/?random" />
</div>
<div class="swiper-slide">
<img src="https://unsplash.it/300/420/?random" />
</div>
<div class="swiper-slide">
<img src="https://unsplash.it/300/410/?random" />
</div>
</div>
<img class="ipad-frame" src="https://dl.dropboxusercontent.com/u/14057353/ipad_isolated-cropped.png" />
</div>
<div class="swiper-container quote-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>Harry Potter is a series of fantasy literature written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School
of Witchcraft and Wizardry.</p>
</div>
<div class="swiper-slide">
<p>Jason Bourne is a fictional character and the protagonist of a series of novels by Robert Ludlum and subsequent film adaptations. He first appeared in the novel The Bourne Identity (1980), which was adapted for television in 1988.</p>
</div>
<div class="swiper-slide">
<p>Chiang Mai (/ˈtʃjɑːŋˈmaɪ/, from Thai: เชียงใหม่ [tɕʰiəŋ màj] ( listen), Lanna: ᨩ᩠ᨿᨦᩉ᩠ᨾᩲ᩵ [t͡ɕīaŋ.màj] ( listen)) sometimes written as "Chiengmai" or "Chiangmai", is the largest and most culturally significant city in Northern Thailand.</p>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<hr />
Making sure I sync the sliders with the following JS..
$(document).ready(function() {
var quoteSwiper = new Swiper('.quote-slider');
var imageSwiper = new Swiper('.image-slider', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
control: quoteSwiper
});
});
I am trying to get the value of Total redemption to be on the same line with the word "Total Redemption" like the way Total Accrued Points looks, I am using an image for my currency symbol and the code for this display is
<div class="item item-body " >
<div class="container">
<div class="right">
Total Accrued Points : {{reportData.accruedpoints}}<br/>
<p>Total Redemption:<img src='img/naira.gif' alt="Naira" height='20' width='20' align='bottom'> {{reportData.redeemableamt | currency : ""}}
</p>
</div>
<a <a href="#/app/transactionsBreakDown/{{reportData.submerchantId}}" class="button button-full button-assertive ink" >View {{reportData.submerchantId}} Details</a>
Always use Unicode for text and currency
₦ 12,000
http://www.fileformat.info/info/unicode/char/20a6/index.htm
add display: inline to the CSS of your your image tag to display it inline within the paragraph:
<img src='img/naira.gif' alt="Naira" height='20'
width='20' align='bottom' style="display:inline;">
Use span element
<span><span>₦</span> 15,000</span>
just do this and you are good to go
{{basketTotal | currency: '₦ '}}
I'm trying to implement schema.org's microData format in my xhtml template.
Since I'm using xhtml templates, I needed to add
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
instead of:
<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
otherwise my template wouldn't be parsed. I found the solution here
My markup looks like this:
<div itemscope="itemscope" itemtype="http://schema.org/Place">
<div itemprop="aggregateRating" itemscope="itemscope"
itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">#{company.meanRating}</span> stars -
based on <span itemprop="reviewCount">#{company.confirmedReviewCount}</span> reviews
</div>
<ui:repeat var="review" value="#{company.reverseConfirmedReviews}">
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
<span itemprop="name">Not a happy camper</span> -
by <span itemprop="author">#{review.reviewer.firstName}</span>,
<div itemprop="reviewRating" itemscope="itemscope" itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="description">#{review.text} </span>
</div>
</ui:repeat>
</div>
When testing this in http://www.google.com/webmasters/tools/richsnippets I'm not getting any stars back or aggregated review count
What am I doing wrong here?
Yes!!
The problem actually consisted of two errors, first somebody had named the div class to
"hReview-aggregate" which is appropriate when you implement Microformats not
Microdata
The second error was that I misunderstood the specification of schema.org.
This is how I end up doing:
<div class="box bigBox" itemscope="itemscope" itemtype="http://schema.org/LocalBusiness">
<span itemprop="name">#{viewCompany.name}</span>
<div class="subLeftColumn" style="margin-top:10px;" itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
<div class="num">
<span class="rating" id="companyRating" itemprop="ratingValue">#{rating}</span>
</div>
<div>Grade</div>
<div class="num">
<span class="count" id="companyCount" itemprop="reviewCount">
#{confirmedReviewCount}
</span>
</div>
</div>
</div>
Hope this helps!!!!!
hey checkout how holidayhq guys have done it for this url : www.holidayiq.com/destinations/Lonavala-Overview.html
you can check there snippet on this tool : http://www.google.com/webmasters/tools/richsnippets
and google out this keyword "lonavala attractions" and you will see the same snippet, they have used microdata to generate this reviews in snippet, they have used typeof="v:Review-aggregate" and much more tags, have a look at it, its nice implementation of the reviews in snippet kind of work.