I am trying to use Beautiful Soup to scrape illegal phone numbers from a website for multiple countries.
The html code has following structure:
<div class="Table">
<div class="Title"> </div>
<div class="Row">
<div class="Cell">
<div>United Kingdom<br>
<a href="447465832167-UnitedKingdom"><img src="flags/flag-uk.png" alt="SMS - United Kingdom" style="vertical-align: middle;"> +447465832167<br>
</a><strong> SMS received:23304<section style="border:none; height: auto; padding: 1px; width: auto; background: #33FF66;"></section></strong></div>
</div>
<div class="Cell">
<div>Germany<br>
<a href="4915902933699-Germany"><img src="flags/german_flag.gif" alt="SMS - Germany" style="vertical-align: middle;"> +4915902933699<br>
</a><strong> SMS received:21712<section style="border:none; height: auto; padding: 1px; width: auto; background: #33FF66;"></section></strong></div>
</div>
<div class="Cell">
<div>India<br>
<a href="919532351442-India"><img src="flags/flag-india.png" alt="SMS - India" style="vertical-align: middle;"> +919532351442<br>
</a><strong> SMS received:1593<section style="border:none; height: auto; padding: 1px; width: auto; background: #33FF66;"></section></strong></div>
</div>
....
</div>
You can see the different countries (United Kingdom, Germany,..). Each country has a phone number which I am trying to get.
This is what I did:
...
soup = bs.BeautifulSoup(source, parser)
mydivs = soup.findAll("div", {"class": "Cell"})
Result:
[<div class="Cell">
<div>United Kingdom<br/>
<a href="447465832167-UnitedKingdom"><img alt="SMS - United Kingdom" src="flags/flag-uk.png" style="vertical-align: middle;"/> +447465832167<br/>
</a><strong> SMS received:23324<section style="border:none; height: auto; padding: 1px; width: auto; background: #33FF66;"></section></strong></div>
</div>, <div class="Cell">
<div>Germany<br/>
<a href="4915902933699-Germany"><img alt="SMS - Germany" src="flags/german_flag.gif" style="vertical-align: middle;"/> +4915902933699<br/>
</a><strong> SMS received:21739<section style="border:none; height: auto; padding: 1px; width: auto; background: #33FF66;"></section></strong></div>
</div>, <div class="Cell">
<div>India<br/>
...
]
Question:
How can I retrieve the phone numbers from this?
You're almost there, try:
>>> [div.a.text.strip() for div in mydivs]
['+447465832167', '+4915902933699', '+919532351442']
Related
I am trying to float one image to the right of an existing div.
The div has a background color and has text and images on top of it.
When I try to float the image to the right of the div, the image appears where the div was, and all the text and images on the div are pushed down.
Not sure why I can't get the image to appear next to the div. Here's my HTML and CSS.
#left-column-background {
width: 40%;
height: 750px;
background-color: #C16C43;
margin-left: 10%;
margin-bottom: 10%;
margin-right: 10%;
float: left;
}
#right-column-image {
background-image: url('resized-images-logo/about-resized.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 40%;
height: 750px;
float: right;
}
#about-title {
color: #C16C43;
margin-top: 7%;
margin-bottom: 5%;
margin-left: 10%;
margin-right: 2%;
}
#mission-text {
margin-top: 5%;
margin-left: 12%;
margin-bottom: 5%;
width: 80%;
float: left;
}
#mission-button-large {
margin-top: 7%;
margin-left: 12%;
float: left;
}
#service-button-large {
margin-top: 12%;
margin-left: 12%;
}
#service-text {
margin-top: 5%;
margin-bottom: 5%;
margin-left: 12%;
width: 80%;
}
#values-button-large {
margin-top: 7%;
margin-left: 12%;
}
#values-button-text {
margin-top: 5%;
margin-bottom: 5%;
margin-left: 12%;
width: 80%;
}
#mission-button-medium {
display: none;
margin-top: 7%;
margin-left: 12%;
float: left;
}
#service-button-medium {
display: none;
margin-top: 12%;
margin-left: 12%;
}
#service-button-small {
margin-top: 12%;
margin-left: 12%;
display: none;
}
#values-button-medium {
margin-top: 7%;
margin-left: 12%;
display: none;
}
#mission-button-small {
margin-top: 7%;
margin-left: 12%;
float: left;
display: none;
}
#values-button-small {
margin-top: 7%;
margin-left: 12%;
display: none;
}
<div class="wrapper">
<header>
<div id="logo">
<img src="resized-images-logo/logo-use.svg" alt="moby-dick-title" />
</div>
<!--end logo and title-->
<div id="hamburger-nav-large">
<a href="#mobile-footer-nav"><img src="icons-use/hamburger-menu-
large.png" alt="hamburger menu" /></a>
</div>
<!--end of hamburger-nav-large-->
<div id="hamburger-nav-small">
<a href="#mobile-footer-nav"><img src="icons-use/hamburger-menu-
small.png" alt="hamburger menu" /></a>
</div>
<!--end of hamburger-nav-small-->
<div id="hamburger-nav-tiny">
<a href="#mobile-footer-nav"><img src="icons-use/hamburger-menu-
tiny.png" alt="hamburger menu" /></a>
</div>
<!--end hamburger-nav-tiny-->
<div id="nav">
<ul>
<li>Whaling</li>
<li>Planning</li>
<li>About</li>
<li>Contact</li>
<li>Book Trip</li>
</ul>
</div>
<!--end of nav-->
</header>
<!--end of header-->
<main>
<div id="about-title">
<h2>About Us</h2>
</div>
<!--end of about-
title-->
<div id="left-column-background">
<div id="right-column-image"></div>
<!--end right-column-image-->
<div id="mission-button-large"><img src="resized-images-
logo/mission-button-large.svg" />
</div>
<!--end mission-button-large-->
<div id="mission-button-medium"><img src="resized-images-
logo/mission-button-medium.svg" />
</div>
<!--end mission-button-medium-->
<div id="mission-button-small"><img src="resized-images-
logo/mission-button-small.svg" />
</div>
<!--end mission-button-small-->
<div id="mission-text">We were established with one goal in mind, to provide the best whale watching experience to our customers. We are comprised of a team of passionate marine biologists eager to share our experiences and knowledge. </div>
<!--end mission-text-->
<div id="service-button-large"><img src="resized-images-
logo/service-button-large.svg" /></div>
<!--end service-button-large-->
<div id="service-button-medium"><img src="resized-images-
logo/service-button-medium.svg" /></div>
<!--end service-button-medium-->
<div id="service-button-small"><img src="resized-images-
logo/service-button-small.svg" /></div>
<!--end service-button-small-->
<div id="service-text">
Our service mantra is to give you the knowledge to truly enjoy the whale watching experience. Through reading material, video, live talks and demonstrations, we provide plenty of time to ask questions and explain what you are seeing.
</div>
<!--end service-text-->
<div id="values-button-large">
<img src="resized-images-logo/values-button-large.svg" />
</div>
<!--end values-button-large-->
<div id="values-button-medium">
<img src="resized-images-logo/values-button-medium.svg" />
</div>
<!--end values-button-medium-->
<div id="values-button-small">
<img src="resized-images-logo/values-button-small.svg" />
</div>
<!--end values-button-small-->
<div id="values-button-text">
All the folks at Moby-Dick Whaling Adventures are active environmentalists. We have experience documenting many of the challenges our planet faces. We feel that the best way to save our planet is to show it off.
</div>
<!--end values-button-text-->
</div>
<!--end left-column-background-->
<div class="clearfix"></div>
<!--end clearfix-->
</main>
<!--end of main-->
<div id="mobile-footer-nav">
<ul>
<li>Whaling</li>
<li>Planning</li>
<li>About</li>
<li>Contact</li>
<li>Book Trip</li>
</ul>
</div>
<!--end of mobile-footer-nav-->
<footer>
<div id="left-column-footer">
<p>Moby-Dick Whaling Adventures</p>
<table>
<tr>
<td><img src="icons-use/phone.svg" alt="phone-icon" /></td>
<td>888-888-8888</td>
</tr>
<tr>
<td><img src="icons-use/67-email.svg" alt="email-icon" />
</td>
<td>info#mobydick.com</td>
</tr>
</table>
<p>123 Whaling Ave<br/> Whaleport, MA 02934</p>
</div>
<!--end left-column-->
<div id="center-column-footer">
<p>Comprehensive, professional tours. Custom tailored to create maximum excitement.
</p>
</div>
<!--end of center-column-->
<div id="right-column-footer">
<div id="social-icons">
<img src="icons-use/instagram-white.svg" alt="instagram-icon" />
<img src="icons-use/06-facebook.svg" alt="facebook-icon" />
<img src="icons-use/twitter.svg" alt="twitter-icon" />
</div>
<!--end social-icons-->
<div id="small-social-icons">
<img src="icons-use/instagram-white-small.svg" alt="instagram-
icon" />
<img src="icons-use/06-facebook-small.svg" alt="facebook-
icon" />
<img src="icons-use/twitter-small.svg" alt="twitter-icon" />
</div>
<!--end small-social-icons-->
<div id="copyright-text">
<p>© 2017 Moby-Dick Whaling Adventures</p>
</div>
<!--end of copyright-text-icons-->
</div>
<!--end right-column-->
<div class="clearfix"></div>
</footer>
<!--end of footer text-->
</div>
<!--end of wrapper-->
I have a grid of images like this:
<div class="city-container container" id="popupContainer">
<div class="row">
<div class="col col-33">
<img src="img/images/opera.jpg" ng-click="showTabDialogOpera($event)"/>
<div class="description" style="font-size: 8pt"><strong>Opera de Lyon</strong></div>
</div>
<div class="col col-33">
<img src="img/Image1.jpg" ng-click="showTabDialogBasilique($event)"/>
<div class="description" style="font-size: 8pt"><strong>Basilique de Fourvière</strong></div>
</div>
<div class="col col-33">
<img src="img/images/hoteldeville.jpg" ng-click="showTabDialogHotel($event)"/>
<div class="description" style="font-size: 8pt"><strong>Hotel de villde de Lyon</strong></div>
</div>
</div>
The problem is that the description does not show in the right position.
CSS:
.city-container .description {
position: absolute;
width: 90%;
text-align: center;
padding: 5px;
line-height: 1.5;
background-color: rgba(204, 204, 204, 0.6);
}
I'm not really sure what you're trying to achieve.
If you want the description to show up next to the image, try relpacing
position: absolute;
with
display: inline-block;
Update
I have updated the CSS. Sorry for the delay.
I scaled the image to fit the width of the column. Hope that meets your requirement.
.col-33 {
width: 32%;
display: inline-block;
}
.col-33 img {
width: 100%;
}
.col-33 .description {
width: 100%;
text-align: center;
padding: 5px 0px;
line-height: 1.5;
background-color: rgba(204, 204, 204, 0.6);
}
<div class="city-container container" id="popupContainer">
<div class="row">
<div class="col col-33">
<img src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogOpera($event)"/>
<div class="description" style="font-size: 8pt"><strong>Opera de Lyon</strong></div>
</div>
<div class="col col-33">
<img src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogBasilique($event)"/>
<div class="description" style="font-size: 8pt"><strong>Basilique de Fourvière</strong></div>
</div>
<div class="col col-33">
<img src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogHotel($event)"/>
<div class="description" style="font-size: 8pt"><strong>Hotel de villde de Lyon</strong></div>
</div>
</div>
I need to make divs look like table data, I have used display: table-cell and display: table properties but i didn't get expected layout. I need each row to have same height.
please check below code
.publishers {
margin: 45px 0;
margin-right: 60px;
}
.publishers .col-xs-6:nth-child(odd) .publisher {
margin-right: -10px;
}
.publishers .col-xs-6:nth-child(even) .publisher {
margin-left: -10px;
}
.publishers .publisher {
background-color: #f1efef;
margin-bottom: 10px;
}
.publishers .publisher .media {
padding: 10px;
}
.publishers .publisher .media .media-left img {
width: 128px;
height: 128px;
}
.publishers .publisher .media .media-body h3 {
font-size: 30px;
font-weight: 400;
}
/***** my try *****/
.publishers{
display:table;
}
.publishers .publisher{
display: table-cell;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<section class="publishers">
<div class="row">
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="http://www.cengage.com
">
<img style=" height: auto;" src="Publishers/7726f4a3-b23d-4af1-879d-57da2a567bd1.jpg" alt="...">
</a>
</div>
<div class="media-body">
<a href="http://www.cengage.com
"><h3>Cengage</h3></a>
<p class="description">A company that delivers highly..
</p>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="http://www.elsevier.com
">
<img style=" height: auto;" src="Publishers/b3723614-ea79-4b24-a9fb-ae0c1da9a3c4.png" alt="...">
</a>
</div>
<div class="media-body">
<a href="http://www.elsevier.com
"><h3>Elsevier </h3></a>
<p class="description">A world’s leading publisher of science and health information serves more than 30 million scientists, students and health and information professionals worldwide
</p>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="http://eu.wiley.com/WileyCDA/Section/index.html
">
<img style=" height: auto;" src="Publishers/ff9e4261-36a1-4cd3-bf9c-c169ff8661eb.png" alt="...">
</a>
</div>
<div class="media-body">
<a href="http://eu.wiley.com/WileyCDA/Section/index.html
"><h3>WILEY</h3></a>
<p class="description">Wiley is a global publisher of print and electronic products, textbooks, and other educational materials, for students both undergraduate and postgraduate, specializing in scientific, technical, and medical books and journals; professional and consumer books and subscription services. Wiley has approximately 22,700 active titles and 400 journals, and publishes 2000 new titles in a variety of print and electronic formats each year
</p>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="https://www.pearson.com/
">
<img style=" height: auto;" src="Publishers/d18fbae5-1587-4b06-a0e4-8b0b1ec4ab13.jpg" alt="...">
</a>
</div>
<div class="media-body">
<a href="https://www.pearson.com/
"><h3>Pearson</h3></a>
<p class="description">Global leader in educational publishing offers comprehensive range of educational programs, in all subjects, for every age and level of student, from preK-12 through higher education and on into professional life.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
.publishers .row {
display: flex;
}
If you don't need IE9 and below support you can use flex this by default uses align-items: stretch which makes all the children full height
If content is static then u can take height of longest div and assign to all.
If content is dynamic then:
$(document).ready(function() {
var maxHeight = -1;
$('.features').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.features').each(function() {
$(this).height(maxHeight);
});
});
You could loop through each of the .features, find the max then apply that height to all blocks of the same class.
$(document).ready(function() {
var blockHeights;
blockHeights = [];
$('.features').each(function() {
blockHeights.push($(this).height());
});
$('.features').height(Math.max.apply(Math, blockHeights));
});
If you load your content through ajax or some other method after document ready simply move this into a function and call that when ready.
Probably worth setting a height (or height:auto) on the block as a style incase java script is off or doesn't load correctly, just to ensure the content is always visible.
You were almost there. display:table works. The problem is that your bootstrap is adding float to your divs, which break the table. Add in your css float:none; and it will work. Jsfiddle for example : http://jsfiddle.net/42dy9aLm/
Hello All,
Above picture shows a series of images and corresponding link text. Requirment is that I need to get shrink off images and also text so that they should appear in same line in different screen resolutions...
I have used vw as font specification for font resize. But unable to get image resized using the below css...
.bannerimage {
max-width: 100%;
height: auto;
width: auto/9;/* ie8 */
overflow:hidden;
}
Design code for the ribbon is as follows:
<div style="padding-left: 50px; padding-top: 20px; height: 110px; width: 100%">
<div>
<div style="float: left">
<div style="float: left;">
<asp:ImageButton runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" style="min-height:30px;min-width:30px" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton9" runat="server" CssClass="footerlink" Text="Go To Administration Page" Style="text-align: start"></asp:LinkButton>
</div>
</div>
<div class="footerseprator">
</div>
</div>
<div style="float: left">
<div style="float: left; padding-left: 20px">
<asp:ImageButton ID="ImageButton8" runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton10" runat="server" CssClass="footerlink" Text="Go To Authorize US Partners" Style="text-align: start"></asp:LinkButton>
</div>
</div>
<div class="footerseprator">
</div>
</div>
<div style="float: left">
<div style="float: left; padding-left: 20px">
<asp:ImageButton ID="ImageButton9" runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton11" runat="server" CssClass="footerlink" Text="Go To Authorize Canada Partners" Style="text-align: start"></asp:LinkButton>
</div>
</div>
<div class="footerseprator">
</div>
</div>
<div style="float: left">
<div style="float: left; padding-left: 20px">
<asp:ImageButton ID="ImageButton10" runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton13" runat="server" CssClass="footerlink" Text="Go To Authorize Distributor Page" Style="text-align: start"></asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
tried a lot.. Could some one plz help me with css of the same for below ribbon
You will not be able to resize the text without a jquery library or css media queries. But you can resize the images by giving it some value for height or width like so:
.bannerimage {
max-width: 100%;
height: auto;
width: 10%;
overflow:hidden;
}
I have a created a table that use simple JS and an API to pull in info about our Android App. We would like to have this code on multiple pages
<div class="api">
<div style="margin: 0 auto; max-width: 700px;">
<div style="float: left;">
<table style="background-color: #e7e7e27; border-color: #e2e2e2;">
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/<!---package name--->" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/Google_Play_Store_96.png" style="width:90px; border:0" alt="<!---Verbage--->" title="<!---Verbage--->">
</a>
</td>
</table>
</div>
<div style="float: left;">
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/<!---package name--->' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
</div>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>
Not the prettiest code but it does the job that I we are wanting. I would like to turn this into a plugin with a shortcode to reference it. I know that this is probably bigger then I expect and I have a good understanding of HTML and wordpress but this is the first plugin I have created.
Thanks,
Grady
A plugin to do this is fairly trivial since you are just echoing static data.
class My_App_Data {
function __construct() {
add_shortcode('app_data',array($this,'app_data_shortcode'));
}
function app_data_shortcode() { ?>
<div class="api">
<div style="margin: 0 auto; max-width: 700px;">
<div style="float: left;">
<table style="background-color: #e7e7e27; border-color: #e2e2e2;">
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/<!---package name--->" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/Google_Play_Store_96.png" style="width:90px; border:0" alt="<!---Verbage--->" title="<!---Verbage--->">
</a>
</td>
</table>
</div>
<div style="float: left;">
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/<!---package name--->' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'></a>
</div>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div><?php
}
}
new My_App_data();
You can now use [app_data /] to display the markup.
You will need to construct a proper plugin header, and use a better name for the class :).
Reference
https://codex.wordpress.org/Writing_a_Plugin