I'd like to scrape information from the following website: https://www.theglobaleconomy.com/download-data.php
As you will see, there are info boxes associated with each economic variable, such as the one in the picture, it pops up when you click on i:
https://i.stack.imgur.com/E3JRy.png
SelectorGadget and the inspection of the code says I should use "#definitionBoxText" as the CSS selector but that doesn't work when I run nodes <- read_html("https://www.theglobaleconomy.com/download-data.php") %>% html_nodes("#definitionBoxText") %>% html_text(), I get nothing in return, just blank. Could you please guide me as to how I can get those information? Any help is greatly appreciated!
It looks like the values for #definitionBoxText are generated when you click on the information icon by a PHP script. That means you won't be able to scrape that text unless you use something like RSelenium and simulate a click on each icon.
An alternative would be opening up the developer tools by pressing F12, going to the Sources tab and saving the file called download-data.php, which contains all the definitions you are looking for. You can then scrape that file separately. Attaching below what the scrapeable part looks like:
<div class="indicatorsName">
Economic growth: the rate of change of real GDP
</div>
<div class="infoIcon">
<div class="showDefinition"
style="margin: 4px 3px 0; padding: 1px 6px 0; border-radius: 10px; border: 1px solid #333; color: #333; float: right; font-weight: bold; font-size;10px">
i
</div>
</div>
<div class="clearer"></div>
<div class="definition">
<b>Economic growth: the rate of change of real GDP</b><br /><br />
Definition:
Annual percentage growth rate of GDP at market prices based on constant local currency. Aggregates are based on
constant 2010 U.S. dollars. GDP is the sum of gross value added by all resident producers in the economy plus any
product taxes and minus any subsidies not included in the value of the products. It is calculated without making
deductions for depreciation of fabricated assets or for depletion and degradation of natural resources.
</div>
</div>
Related
I have uploaded all the files to my web server (I use NameCheap, cPanel).
This is my webpage: www.gloriachen.me
In the landing page, my html and css are:
<!-- Landing Page -->
<div class="container-fluid">
<img src="assets/landing-page.JPG" class="img-fluid" alt="Responsive image" style="width:100%;">
<div class="top-left">
<p> <span>Hi, </span>I am Gloria Chen. I am currently a recent graduate from Australian National University (ANU)
with a master’s degree in computer science. As an enthusiastic fan of front-end development
at the moment, I am keen to look for a job on Web/App front-end development.
</p>
<p> This is my personal blog website. Initially I developed this site for practicing my
front-end skills, especially in programming. I used HTML, CSS, BootStrap 4, JavaScript
as the main languages for building my site, and would like to use Vue.js or Angular.js
for front-end framework building.
</p>
<p> It’s not easy for me to look for jobs right now at the moment, one reason is because
I just finished a surgery of a chest wall tumour removal on this September. For almost
about one and a half month, I was in the process of recovering from the treatment and
procedure. Luckily, my pathology report of the removed tumour is positive, which means
I can still be alive :). I thank God for his preserving. But now I really need to gradually
restore my mind, emotion, will and motivation, and really devote myself into working again.
</p>
<p> Things are not always easy, but I believe I will get a suitable one soon :) </p>
</div>
</div>
/* Text CSS */
.container {
position: relative;
text-align: center;
color: white;
}
.top-left{
width: 50%;
position: absolute;
top: 150px;
left: 70px;
line-height: 2;
}
The text is supposed to be on the top of the image. I tried on my local, and it was successful, like this:
After I upload all my files to the NameCheap cPanel. However, it doesn't work in Safari. If I open the site using Safari, the text won't be on the top of the image. The landing page would be like this:
Anyone knows what is the reason of it and how can I solve the problem here?
Thanks in advance!
It looks correct for me when clicking your click.
Try clearing your browser cache, or holding Shift while clicking the refresh button to perform a hard-refresh, which should force new css to load.
Check the path to your CSS file. your path to the CSS file might not be correct.
I am currently working on earning the Front End Development certificate on FreeCodeCamp, and I am trying to improve some of my older projects. I created a random quote generator that pulls a quote from an API.
When the quotes are populated, the length of the quote can vary, so from time to time the Jumbotron that contains the quote/author will resize to account for that. I don't like this, as it looks jumpy to me when it does happen. My goal, ultimately, is to make sure that the box stays the same size no matter what quote is populated, even before one has loaded.
Would it be possible to set a minimum size for it that is slightly larger than any of the quotes will be (maximum quote length is 136 characters)?
HTML:
<div class='container'>
<div id='jumbo' class='jumbotron' style='min-height: px'>
<h1>Quote Machine</h1>
<hr></hr>
<p id="quote"></p>
<p id="author"></p>
<button id='icon' class="btn btn-custom btn-block">I'll Have Another!</body>
</div>
CSS (that applies to this situation):
.jumbotron {
background-color: #1abc9c;
}
.container {
padding: 30px;
}
Link for reference
Thank you!
I've the below html code with divs as column creators and separators, here when i run this in my web browser, it is creating an overlapping of data or the columns are not getting properly aligned. here actually i want a 3 column layout where in there would be an image in the first and second column top part. you can find the document how it should look like here and the fiddle Here. and also i don't want to use table here, just divs should do it. please let me know where am i going wrong.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.columns
{
width: 508.326px;
height:709.268px;
}
div.left {
width:341px;
height:709.268px;
border-right:dotted;
float: left;
}
div.right {
width:167px;
height:709.268px;
float: right;
margin-left: 10px;
}
div.white
{
width:188px;
float:left;
height:436.86px;
}
div.grey
{
width:188px;
float:right;
height:436.86px;
}
div.red
{
width:217px;
}
</style>
</head>
<body>
<div class="columns">
<div class="left">
<div class="image">
<img src="../Magazines/Images/Images.jpg" height="380" width="380"/>
</div>
<div class="white" >The English historian Lord Acton
famously said the “issue which has
swept down the centuries and which
will have to be fought sooner or later is
the people versus the banks”.
This cannot ring truer than now, with
many banks, particularly the biggest
ones, in the public spotlight facing
a wide range of investigations and
litigations, following the 2007-2008
global financial crisis. And as Mr.
Longo puts it, that is all just part of
doing business at the moment if you
are a financial institution such as
Deutsche Bank.
“Since the GFC (global financial
crisis), the industry has gone through
tremendous change on a variety of
fronts,” he tells Hong Kong Lawyer
one grayish morning last month in
Thomson Reuters’ office in Central.
“So we have to deal with investigations
and litigations on the one hand, and
on the other hand adapt our model
to see how we can reorganise and
restructure the institution to comply
with the variety of regulatory changes
as well as develop existing and new
business opportunities to replace
income streams that are no longer
viable.” </div>
<div class="grey">And to make it even more challenging,
a grayish macro-economic backdrop
where the economy remains weak in
Europe while recovering slowly in the
US.
“There are also challenges driven by the
plethora of reforms coming out of the
G20 commitments and demographics
and urbanisation, a whole range of
things… It is an interesting time to be in
banking,” he says with a laugh. The 53
year old should know, given that he was
once a key member of the Australian
Securities and Investments Commission,
responsible for enforcement.
The way that Mr. Longo sees it, how
the universal banking model changes
following the crisis will dictate the
future of banking. For instance, a key
discussion has been whether retail
banking activity should be separated
from trading and investment banking
activity.
“It’s a Glass-Steagall-type discussion,”
he continues, referring to the US
Banking Act of 1933, which separated
commercial and investment banking
components. It was passed during the
Great Depression in the 1930s. Sections
of it were repealed in 1999 partly to</div>
</div>
<div class="right">
<div class="red" >allow for the merger of retail banks
and investment banks that engage in
underwriting and dealing in securities
as banking operations.
“Some people argue that if we want to
protect the public purse, we need to get
so called ‘ risky’ investment banking
activity away from deposit-taking
activity that is seen as a public good.
That doesn’t seem to be happening in
the US, while that is happening in the
UK, with continued questioning in the
rest of Europe, generally, about whether
to do that.”
Before and after the GFC
The main difference before and after the
crisis, says Mr. Longo, is growth.
“Everybody was growing, hiring, legal
departments were growing,” he recalls.
“Since the crisis, there have been
enormous changes in how we think
about (things like) headcount,
resources, cost efficiency , adapting to
a new environment… Managing in that
environment is different from managing
in an environment where there is lots of
growth, hiring, and all of that.”
For instance, while he used to spend
more time on banking transactions in
the early days after joining Deutsche
Bank in 2002, Mr. Longo now often
finds himself dealing with managing a
range of regulatory issues and strategy .
Lawyers thinking of going in-house in a
bank now can also expect to deal with
a huge increase in regulatory work “to
develop responses to, and implement,
the immense amount of new global
bank and financial institution reforms”,
he says. These include “responding to
Dodd-Frank (Act) and Volcker (Rules)
from the US, the European Market
Infrastructure Regulation (EMIR), Living
Wills and Resolution plans, and the OTC
(over-the-counter) derivative reforms
and central clearing initiatives”.</div>
</div>
</div>
</body>
</html>
Thanks
Check out this fiddle and let me know if this is what you want.
I have made the following changes:
In your CSS the width of the left section was smaller than the sum of what was set for the white and grey divs and this was making the grey div to wrap-around (which is fall below). This was making your text overlap. Remember that the sum of the widths of the inner divs must be less than that of the container div for them to be displayed properly.
For your case we can split them just by using display: inline-block; rule itself and hence I have avoided the float rule settings. If you want to stick with floats, you can check this version.
I have rounded off the height setting to the nearest whole number just for example. You can modify this as required.
div.columns {
width: 670px;
height:710px;
}
div.left {
width:440px;
height:710px;
border-right:dotted;
display: inline-block;
}
div.right {
width:210px;
height:710px;
display: inline-block;
margin-left: 10px;
}
div.white {
width:215px;
height:100%;
border-right:dotted;
display: inline-block;
vertical-align: top;
}
div.grey {
width:215px;
height:100%;
display: inline-block;
}
.image {
height: 390px;
width: 100%;
}
So I'm trying to replicate a page layout, it's an image that is the full height of a page with text to the right of it. The text width seems to adjust depending on the the image, I'm just not exactly sure how it's done. http://mcgarrybowen.com/en/People/Bill-Borrelle that's the page, any thoughts on how this was done?
this is what I tried but isn't quite working right, looks like this http://www.klossal.com/klossviolins/about.html :
<div style="width:100%;padding-top:40px;padding-bottom:40px;">
<div style="width:920px;position:relative;">
<div style="float:left;">
<img style="height:100%;" src="http://www.klossal.com/klossviolins/elements/horst.jpg" alt="">
</div>
<div style="float:left;">
<p style="color: #b9b8b4;
font-family: 'Source Sans Pro' , sans-serif;
font-size: 24px;
text-align: left;
position:relative;
width:auto;">About</p>
<p style="color: #b9b8b4;
font-family: 'Source Sans Pro' , sans-serif;
font-size: 14px;
text-align: left;
position:relative;
width:auto;">
Mittenwald-trained, Master Violin Maker, Horst Kloss, has worked with fine stringed instruments and bows for over three decades. The Kloss Shop specializes in the repair, restoration, appraisal and sale of historic instruments and bows. Mr. Kloss further offers acoustic adjustment tailored to the individual musician's requirements, the application of museum conservation standards to preserve instrument integrity and maintain value as well as baroque conversion. Mr. Kloss is experienced in providing musicians with custom instrument set up designed to prevent overuse syndrome while maintaining maximal adjustment of tonal color, clarity and projection.<br><br>
Since 1972, Horst Kloss has cared for collections of note along the East Coast of the United States, including the Boston Museum of Fine Art's collection of historic stringed instruments. He is one of under a hundred makers, nation-wide, whose extensive training and high caliber skills qualified him for full membership status in the American Federation of Violin and Bow Makers.<br><br>
Raised among musicians and makers, Horst Kloss was imbued with a love of music and a profound sense of stewardship in caretaking for stringed instruments. At the age of 14, he began an apprenticeship in his hometown of Mittenwald, a center for violin-making since the 1600's. He received his formal training at the Bavarian State School of Violin Making in Southern Germany where he earned his Journeyman's diploma in 1964 and his Master's degree in 1972 under the tutelage of Josef Kantuscher. He moved to the United States in 1964 following the exodus of finer instruments from Europe and gained exposure to many of them while working for Carl Becker at Lewis & Sons. Mr. Kloss instructs the courses offered in instrument repair and restoration at the University of New Hampshire's Violin Craftsmanship Institute. He established shops in Houston and Boston before settling in Needham, Massachusetts.<br><br>
Horst Kloss has attracted an international clientele, including many distinguished concert performers, who value his consistently high quality restoration and sound adjustments. His experienced eye and broad client base make him especially well-suited to bring buyers and sellers of fine stringed instruments together.</p>
</div>
<br class="clear">
</div>
The layout is built on Twitter Bootstrap, and implements its responsive feature.
Update: Here's a start. You should really use classes instead of all those inline styles. It makes modifying your layout immensely easier.
http://jsfiddle.net/xfPKx/2/
.wrapper {
width:100%;
}
.portrait {
height: 100%;
left: 0;
position: fixed;
width: 50%;
}
.text {
float: right;
margin: 5% 0;
max-width: 30%;
width: auto;
}
<div class="wrapper">
<div class="portrait">
<img src="http://www.klossal.com/klossviolins/elements/horst.jpg" alt=""
/>
</div>
<div class="text">
...
url: http://translate.google.com/
eg. source lang is english, translate lang is other. and enter the text 'i' in the above page's textarea. hover the translate word, and the word background will highlight, and the 'i' will highlight.
I want to know that blew the code how does the '.gt-hl-layer' cooperate with the '#source' work?
<div style="width: 100%;"><!--from google translator-->
<div class="gt-hl-layer" style="box-sizing: content-box; width: 641px; height: 65px; left: 0px; top: 0px; " dir="ltr"></div>
<textarea id="source" name="text" wrap="SOFT" tabindex="0" dir="ltr" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" style="overflow-y: hidden; overflow-x: auto; box-sizing: border-box; " class="goog-textarea"></textarea>
</div>
It's better to give some simple demo or code.
thanks very much!
I imagine it could work like this:
Run source through the "translation machine", it produces the translated text, and in the process does a lot of tagging (annotations) on the source -- the translation also comes with annotations.
The translation process determines which tokens in the source are linked to each other (e.g. phrasal verbs) and how the tokens are linked to the corresponding elements in the translation.
The translation text is an end product, it's generated from a dataset which had much richer annotations and tags -- using this richer set, you can have this annotated structure compiled into any other format (say, XML), or in the case of HTML, it probably takes the form of lots of spans, each with an ID.
On the surface, the HTML is re-fabricated for the source text too (now with the structure from the underlying annotations). It's like a tokenized text with lots of spans, each with an generated ID. Usually there's another layer that matches the text areas and carries the highlighting.
Then probably there's a middle part that map out which mouseover in the translation should light up which span(s) in the source.