I have written a class with methods to extract and process text from html. The html file contains three articles. Each in a 'text' tag. The 'getArticles' method extracts all the text elements and creates an object. Then, the 'getTexts' method is supposed to take the text from the object and render it to html. BUT it just keeps skipping the text from the article in the middle, starting with 'Set in Australia...'. I have tried to remove another article from the html and then the missing article appeared, but it just wont include all three articles together. Help?
DOM = {
output1: document.querySelector('.output1')
};
class TextAnalyzer {
getArticles = (out) => {
this.articles = document.getElementsByTagName("text");
}
getText = (key) => {
return this.articles[key];
}
getTexts = (out) => {
const keys = Object.keys(this.articles);
console.log(keys);
keys.forEach(key => {
console.log(this.articles[key])
out.appendChild(this.articles[key])
})
}
showArticles = () => console.log(this.articles);
}
const analysis = new TextAnalyzer();
analysis.getArticles();
analysis.showArticles();
analysis.getTexts(DOM.output1);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<doc>
<docno> LA010189-0001 </docno>
<docid> 1 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 1; Book Review Desk
</p>
</section>
<length>
<p>
1206 words
</p>
</length>
<headline>
<p>
NEW FALLOUT FROM CHERNOBYL;
</p>
<p>
THE SOCIAL IMPACT OF THE CHERNOBYL DISASTER BY DAVID R. MARPLES (ST. MARTIN'S
PRESS: $35, CLOTH; $14.95, PAPER; 316 PP., ILLUSTRATED; 0-312-02432-0)
</p>
</headline>
<byline>
<p>
By James E. Oberg , Oberg, a space engineer in Houston, is the author of
Uncovering Soviet Disasters: Exploring the Limits of Glasnost (Random House).
</p>
</byline>
<text>
<p>
The onset of the new Gorbachev policy of glasnost, commonly mistranslated as
openness but closer in connotation to candor or publicizing, has complicated
the task of Soviet secret-keepers and has allowed substantial new Western
insights into Soviet society. David R. Marples' new book, his second on the
Chernobyl accident of April 26, 1986, is a shining example of the best type of
non-Soviet analysis into topics that only recently were absolutely taboo in
Moscow official circles.
</p>
<p>
The author, a British-educated historian and economist, is a research associate
with the Canadian Institute of Ukrainian Studies at the University of Alberta,
and the academic style of the book is undisguised. However, its intended
audience is the general public, and anyone interested in nuclear power, or
Soviet economy and society, or human drama, or just plain sleuthing state
secrets, will find hitherto unpublished revelations and explanations of the
event and its continuing aftermath.
</p>
<p>
The effects of Chernobyl reverberated throughout so many facets of Soviet
society that a continuous coherent narrative is probably impossible. Marples
discusses half a dozen major themes arranged in a fairly arbitrary order (as
indicated by the frequent and helpful cross references throughout the text) and
succeeds in mapping out his main themes. The personal interests of each reader
determine which of the sections may be deemed too detailed and which too
sketchy, but considering the need for such a comprehensive overview, the levels
are generally appropriate.
</p>
<p>
The book is, on the one hand, not a light read, and an executive summary might
have been possible in a quarter the length. But, on the other, so many of the
judgments depend on a subtle interpretation of a multitude of sources that the
author is obligated to present the raw data for the reader's inspection. The
modular nature of the book also allows a reader to skip, browse, and revisit
earlier sections, aided by a convenient internal organization and a thorough
index.
</p>
<p>
First in the world's attention, and in the text, is a discussion of the human
victims of the accident. The official tally is 31 (only about 20 names have
ever been released), but Marples suspects there were other short-term radiation
victims. A large number of unnecessary late-term abortions were also performed
on local women, and by rights those unborn babies count as casualties.
Widespread "radiophobia" led to restricted diets which created malnourishment
and subsequent disease in thousands of people. The tens of thousands of people
taking part in cleanup operations were never included in official totals of
those exposed. Since the book went to press, Soviet military sources have
referred to at least one death in the actual reactor entombment program.
</p>
<p>
But the greatest toll is likely to occur with the delayed deaths. Here, Marples
encounters for the first time the soon familiar theme of official Soviet
myth-making around the event: Reality is twisted to serve state policy
objectives, which include calming an alarmed public with assurances that all is
well when it isn't.
</p>
<p>
And thus is born what he properly labels the "myth of Chernobyl," the official
line that the disaster provided a test that Soviet society passed with honor.
"In the Soviet view," he writes, "it was first and foremost a victory, a story
with an ending, and an ending that was triumphant."
</p>
<p>
Thus, when sober Western medical estimates placed the future "excess cancer
deaths" at several tens of thousands, both in the Soviet Union and in Europe (a
few tenths of a percent elevation of the natural cancer rate), the Soviets
reacted furiously. The estimates are branded "nonsense" and the estimators are
dismissed as "panic mongers" promulgating "anti-Soviet venom."
</p>
<p>
Subsequently the author addresses themes of environmental impact, economic and
political repercussions, public images, and the recovery operations. Along the
way, Marples provides a damning list of examples in which Soviet officials
attempted to retreat behind old-style cover-ups and outright lies. False
information was issued on radiation levels, on subsequent accidents at the
site, on contamination levels of the Kiev water supply, on severe discipline
against non-volunteer cleanup personnel, on reactor entombment schedules and on
operator training levels.
</p>
<p>
A severe 1986-1987 countrywide electrical power shortage was officially denied
although it was real enough to compel the restart of three Chernobyl reactors
in explicit violation of Soviet safety regulations. Design deficiencies of the
Chernobyl-style reactors were downplayed and human errors were declared to be
the primary culprit.
</p>
<p>
Ultimately, observes the author, "It is ironic that in an era of openness,
Chernobyl may have been both the pioneer of glasnost under Gorbachev and then
subsequently its first casualty." He ultimately concludes, "Aspects of the
disaster . . . have rarely been dealt with thoroughly or even honestly by
Soviet sources." Hence the need for this book, a need which is admirably
fulfilled despite the many remaining mysteries and uncertainties.
</p>
<p>
The July, 1987, trial of reactor personnel marked a full circle of disclosure.
Journalists were allowed into the pre-scripted first and last days, but the
weeklong deliberative sessions were held in secret and no word of their
substance has ever been released.
</p>
<p>
The propaganda purpose of the trial and surrounding official publicity, he
maintains, had one goal: "To divert culpability from the party hierarchy, in
Kiev and especially in Moscow." This is precisely the theme I have also
encountered in my own investigations of aerospace accidents of the past. Where
individual human failings led to catastrophe, a sanitized story may eventually
be released, but where Kremlin policy led to disaster (such as the Nedelin
catastrophe of 1960 or the Soyuz-1 disaster in 1967), the entire event remains
absolutely off limits to glasnost.
</p>
<p>
The closing blow-by-blow description of the nuclear power debate presages a
dramatic event which occurred too recently for inclusion in this first edition.
Viktor Legasov, tagged by the author as one of the country's two leading
pro-nuclear advocates, actually was sinking into private despair over the poor
implementation of safety standards. In the end, he made his final and most
eloquent testimony to this despair on the second anniversary of the accident,
by committing suicide. For several weeks the Soviets tried to sit on the
circumstances of his "tragic death," even issuing official non-explanations
which asserted that the death was not due to medical effects of radiation.
Finally, crusading journalist Vladimir Gubarev, with access to Legasov's
notebooks, broke the story in Pravda. Readers of this book will come to know
these and other characters so well that the suicide fits right into the "big
picture" of the catastrophe's social impacts.
</p>
<p>
For an author to so accurately describe a social milieu that subsequent
unpredictable events only enhance his insights is testimony to the highest
quality of scholarship. Readers of Marples' book will rarely be surprised as
the Chernobyl catastrophe's consequences continue to unfold in the future.
</p>
</text>
<graphic>
<p>
Photo, Chernobyl Then and Now :Photographs of the damaged reactor taken before
the construction of its concrete "sarcophagus" are, for obvious reasons, aerial
photographs. Left, an artist's reconstruction of the reactor as it would have
looked from the ground before the sarcophagus was in place. The point of view
is the same as that of an official Soviet photograph, right, taken as the
entombment neared completion.
</p>
</graphic>
<type>
<p>
Book Review; Main Story
</p>
</type>
</doc>
<doc>
<docno> LA010189-0013 </docno>
<docid> 31 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 10; Book Review Desk
</p>
</section>
<length>
<p>
146 words
</p>
</length>
<headline>
<p>
CURRENT PAPERBACKS: WAITING FOR CHILDHOOD BY SUMNER LOCKE ELLIOTT (PERENNIAL
LIBRARY/ HARPER & ROW: $7.95)
</p>
</headline>
<byline>
<p>
By ELENA BRUNET
</p>
</byline>
<text>
<p>
Set in Australia at the turn of the 20th Century, "Waiting for Childhood" is
the story of seven children left to cope for themselves after their parents
die. Their father, The Rev. William Lord, expires at the breakfast table one
morning. After the family leaves for a ramshackle house owned by a wealthy
cousin, the mother loses her mind and then her life in an accident.
</p>
<p>
The eldest daughter, Lily, takes charge of the entire household, as Jess
becomes a favorite of her rich cousin Jackie and watches her rival for Jackie's
affections fall fatally from a mountaintop.
</p>
<p>
These characters, "all talented, all deeply human, (are) all so beautifully
realized that by the end of the novel we identify with them to the point of
heartbreak," Carolyn See wrote in these pages. " 'Waiting for Childhood'
manages to be at once terribly melancholy and extraordinarily exhilarating."
</p>
</text>
<type>
<p>
Column; Book Review
</p>
</type>
</doc>
<doc>
<docno> LA010189-0032 </docno>
<docid> 74 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Business; Part 4; Page 3; Column 1; Financial Desk
</p>
</section>
<length>
<p>
1299 words
</p>
</length>
<headline>
<p>
VIEWPOINTS;
</p>
<p>
'89 WISH LIST: PROTECTION, TAXES AND PEACE;
</p>
<p>
SOCIAL BENEFITS, DEFICIT REDUCTION ARE TOP PRIORITIES FOR THE NEW YEAR
</p>
</headline>
<text>
<p>
What changes would you like to see in business practices and the workplace this
year? How can business leaders and economic policy-makers improve the economy
and the world in general in 1989? The Times ran these questions by people in
various walks of life, and here are some of their answers:
</p>
<p>
</p>
<p>
Muriel Siebert, head of the Muriel Siebert & Co. discount brokerage in New
York, and first female member of the New York Stock Exchange:
</p>
<p>
"I would like to see certain business practices regulated. I think that the
leveraged buyouts show the greed of people at their worst. . . . The LBOs are
bypassing the purpose of the capital-raising system. I think that to the extent
that people were stockholders in these companies . . . they should be allowed
to continue to have some kind of share in the profits (after the leveraged
buyouts) because these moves were done while they were stockholders.
</p>
<p>
"Must greed be the creed? I would like to see that also rolled over to our
defense contractors. I am pro defense. I believe in a strong country because
people mistake gentility for weakness. If (contractors) cheat on defense
contracts, I don't see why they don't go to jail. . . . I just feel that if you
are a major defense contractor, you owe a fiduciary responsibility to this
country because defense expenditures are putting a pretty big toll on the
country."
</p>
<p>
Andrew Brimmer, former member of the Federal Reserve Board and head of a
Washington economics consulting firm:
</p>
<p>
"My leading wish is that the nation deal with the federal budget deficit. I
would like to see a substantial reduction in 1989 and extending over the next
three years. I would strongly recommend that we raise taxes. There should be
some moderation in the level of government expenditures, but the real problem
is the lag in revenue.
</p>
<p>
"I also would like to see more done for education by business. The kind of
education I'm talking about is at the elementary and secondary level.
Businesses are already contributing to colleges. Businesses should do likewise
for elementary and secondary schools. Business people can play a role as
counselors and teachers. A firm might make available an engineer or
mathematician to go into schools and teach. Business should do more to offer
on-the-job training for unskilled, or limited-skills, people, perhaps through a
(lower) learning wage. We would give business tax credits to do this."
</p>
<p>
William R. Robertson, executive secretary of the Los Angeles County Federation
of Labor, AFL-CIO:
</p>
<p>
"I would like to see a change in philosophy by the incoming President relating
to labor relations and providing for fairness in our (labor) organizing efforts
and contract negotiations. . . .
</p>
<p>
"I would also like to see some protection for workers losing their jobs because
of mergers. It is a national disgrace. In too many mergers, the workers are the
ones that suffer and the country as well. Something should be done to correct
it. . . .
</p>
<p>
"And, finally, this Administration should face reality in resolving the
astronomical deficit."
</p>
<p>
Steven D. Lydenberg, an associate with the "socially responsible" investment
firm of Franklin Research & Development:
</p>
<p>
"There is an increasing interest around the country in social investing. People
want to know not just the financial implications of making a commitment in a
company, but also the social implication. That information is not very easy to
come by.
</p>
<p>
"So, if at the end of '89 corporations were disclosing in a uniform way their
yield figures, their charitable contribution figures, the numbers of women and
minorities in top management and board directors, their attitude on a number of
comparable social issues, I would be very happy."
</p>
<p>
Frank Borman, chairman of Patlex Corp. of Chatsworth, former astronaut and
former chairman of Eastern Airlines:
</p>
<p>
"We should begin to move toward taxing consumption -- a value-added tax. This
is quite controversial as Al Ullman (Oregon Democrat and former chairman of the
House Ways and Means Committee, who was defeated in 1988 after advocating a
value-added tax) will tell you. But this taxing system is needed. It would
certainly help our exports. Almost all of Europe is under the value-added
taxing system. Also, it may encourage saving instead of consumption. One of the
ways you discourage consumption is to tax it."
</p>
<p>
Michael Harrington, co-chair of Democratic Socialists of America and author of
"The Other America" and "The New American Poverty":
</p>
<p>
"I hope Secretary of State Baker will build on the basic insights of former
Treasury Secretary Baker (James Baker, former treasury secretary, was nominated
by President-elect Bush to be Secretary of State) that a settlement of Third
World debt is in the self-interest of America, opening up markets for business
and labor. But then the new Baker will have to go far beyond the old, since
Latin America now owes more than it did in 1982 when the crisis officially
began, and several countries, including Argentina and Brazil, may see democracy
subverted if current trends persist.
</p>
<p>
"At home, the nation must recognize that we can't waste young people, and
particularly minorities and women, on illiteracy, unemployment and unproductive
low-wage work. We must invest mightily in education, training and job
generation."
</p>
<p>
Alan Bromberg, a securities law expert and professor at Southern Methodist
University:
</p>
<p>
"There are several things I would like most to see changed in the economy and
business practices. One, more concentration by business and government, both
here and abroad, on . . . the facilitation of international trade and
investment. This would require wider horizons for business people . . . and
more effort by government to reduce and ultimately eliminate all kinds of
restrictions on the movement of products.
</p>
<p>
"Two, I would like to see a national consensus developed, preferably in the
form of federal legislation, on corporate takeovers and buyouts that would
recognize the efficiencies and benefits they bring as well as the dislocations
and hardships they can cause. This would involve tax policies and labor polices
and limitations on the ability of states to Balkanize corporate law by
different anti-takeover statutes everywhere. (There also should be) some kind
of limitation on management self-entrenchment and self-enrichment.
</p>
<p>
"I think we could use a lot of clarification of the securities laws. I think
the courts have done a good job of saying what insider trading is. The kind of
issues that are most difficult are what really is parking (of stock)? How much
cooperation or similar action by different individuals or different groups of
individuals makes it collaboration? These issues haven't been well resolved. .
. .
</p>
<p>
Peter Bahouth, executive director of Greenpeace in Washington:
</p>
<p>
"People now view threats to human security less in terms of political threats
and more in environmental and economic terms. So for my wish list, I would ask
first that we deal with the issue of the greenhouse effect. We better develop
some alternative views in mass transportation and cut subsidies to reflect the
true cost of fossil fuels in terms of pollution, along with the actual economic
cost of development. Then, we could put more money into research and
development of wind and solar energy.
</p>
<p>
"(Also on my wish list is) peace on earth. If we want peace on earth, we have
to start looking seriously at the fact that we are making more and more
weapons, and in a process which endangers the health of American people. . . .
Production plants have been proven to have released into the air and water
radioactivity and toxic chemicals."
</p>
<p>
"Also, it would be nice if we could learn that the rain forest affects all of
us. We need to preserve it. And we would like the tuna industry to stop killing
dolphins."
</p>
</text>
<graphic>
<p>
Drawing, JILL BANASHEK / for The Times
</p>
</graphic>
</doc>
</section>
<section>
<h2>Raw Text</h2>
<div class="output1">
</div>
</section>
<script src="app.js"></script>
</body>
</html>
It happens because the order of this.articles is changing every time you use appendChild because this.articles is not an array but an HTML Collection.
DOM = {
output1: document.querySelector('.output1')
};
class TextAnalyzer {
getArticles = (out) => {
this.articles = document.getElementsByTagName("text");
}
getText = (key) => {
return this.articles[key];
}
getTexts = (out) => {
for (let i = 0; i < 5; i++) {
console.log(this.articles)
out.appendChild(this.articles[i])
}
}
showArticles = () => console.log(this.articles);
}
const analysis = new TextAnalyzer();
analysis.getArticles();
analysis.getTexts(DOM.output1);
body {
background: white
}
<text>article 0</text>
<text>article 1</text>
<text>article 2</text>
<text>article 3</text>
<text>article 4</text>
<h2>Raw Text</h2>
<div class="output1">
</div>
You can solve this by create an array from html collection (i.e. change this line):
getArticles = (out) => {
this.articles = [...document.getElementsByTagName("text")];
}
DOM = {
output1: document.querySelector('.output1')
};
class TextAnalyzer {
getArticles = (out) => {
this.articles = [...document.getElementsByTagName("text")];
}
getText = (key) => {
return this.articles[key];
}
getTexts = (out) => {
const keys = Object.keys(this.articles);
console.log(keys);
keys.forEach(key => {
console.log(this.articles[key])
out.appendChild(this.articles[key])
})
}
showArticles = () => console.log(this.articles);
}
const analysis = new TextAnalyzer();
analysis.getArticles();
analysis.showArticles();
analysis.getTexts(DOM.output1);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<doc>
<docno> LA010189-0001 </docno>
<docid> 1 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 1; Book Review Desk
</p>
</section>
<length>
<p>
1206 words
</p>
</length>
<headline>
<p>
NEW FALLOUT FROM CHERNOBYL;
</p>
<p>
THE SOCIAL IMPACT OF THE CHERNOBYL DISASTER BY DAVID R. MARPLES (ST. MARTIN'S
PRESS: $35, CLOTH; $14.95, PAPER; 316 PP., ILLUSTRATED; 0-312-02432-0)
</p>
</headline>
<byline>
<p>
By James E. Oberg , Oberg, a space engineer in Houston, is the author of
Uncovering Soviet Disasters: Exploring the Limits of Glasnost (Random House).
</p>
</byline>
<text>
<p>
The onset of the new Gorbachev policy of glasnost, commonly mistranslated as
openness but closer in connotation to candor or publicizing, has complicated
the task of Soviet secret-keepers and has allowed substantial new Western
insights into Soviet society. David R. Marples' new book, his second on the
Chernobyl accident of April 26, 1986, is a shining example of the best type of
non-Soviet analysis into topics that only recently were absolutely taboo in
Moscow official circles.
</p>
<p>
The author, a British-educated historian and economist, is a research associate
with the Canadian Institute of Ukrainian Studies at the University of Alberta,
and the academic style of the book is undisguised. However, its intended
audience is the general public, and anyone interested in nuclear power, or
Soviet economy and society, or human drama, or just plain sleuthing state
secrets, will find hitherto unpublished revelations and explanations of the
event and its continuing aftermath.
</p>
<p>
The effects of Chernobyl reverberated throughout so many facets of Soviet
society that a continuous coherent narrative is probably impossible. Marples
discusses half a dozen major themes arranged in a fairly arbitrary order (as
indicated by the frequent and helpful cross references throughout the text) and
succeeds in mapping out his main themes. The personal interests of each reader
determine which of the sections may be deemed too detailed and which too
sketchy, but considering the need for such a comprehensive overview, the levels
are generally appropriate.
</p>
<p>
The book is, on the one hand, not a light read, and an executive summary might
have been possible in a quarter the length. But, on the other, so many of the
judgments depend on a subtle interpretation of a multitude of sources that the
author is obligated to present the raw data for the reader's inspection. The
modular nature of the book also allows a reader to skip, browse, and revisit
earlier sections, aided by a convenient internal organization and a thorough
index.
</p>
<p>
First in the world's attention, and in the text, is a discussion of the human
victims of the accident. The official tally is 31 (only about 20 names have
ever been released), but Marples suspects there were other short-term radiation
victims. A large number of unnecessary late-term abortions were also performed
on local women, and by rights those unborn babies count as casualties.
Widespread "radiophobia" led to restricted diets which created malnourishment
and subsequent disease in thousands of people. The tens of thousands of people
taking part in cleanup operations were never included in official totals of
those exposed. Since the book went to press, Soviet military sources have
referred to at least one death in the actual reactor entombment program.
</p>
<p>
But the greatest toll is likely to occur with the delayed deaths. Here, Marples
encounters for the first time the soon familiar theme of official Soviet
myth-making around the event: Reality is twisted to serve state policy
objectives, which include calming an alarmed public with assurances that all is
well when it isn't.
</p>
<p>
And thus is born what he properly labels the "myth of Chernobyl," the official
line that the disaster provided a test that Soviet society passed with honor.
"In the Soviet view," he writes, "it was first and foremost a victory, a story
with an ending, and an ending that was triumphant."
</p>
<p>
Thus, when sober Western medical estimates placed the future "excess cancer
deaths" at several tens of thousands, both in the Soviet Union and in Europe (a
few tenths of a percent elevation of the natural cancer rate), the Soviets
reacted furiously. The estimates are branded "nonsense" and the estimators are
dismissed as "panic mongers" promulgating "anti-Soviet venom."
</p>
<p>
Subsequently the author addresses themes of environmental impact, economic and
political repercussions, public images, and the recovery operations. Along the
way, Marples provides a damning list of examples in which Soviet officials
attempted to retreat behind old-style cover-ups and outright lies. False
information was issued on radiation levels, on subsequent accidents at the
site, on contamination levels of the Kiev water supply, on severe discipline
against non-volunteer cleanup personnel, on reactor entombment schedules and on
operator training levels.
</p>
<p>
A severe 1986-1987 countrywide electrical power shortage was officially denied
although it was real enough to compel the restart of three Chernobyl reactors
in explicit violation of Soviet safety regulations. Design deficiencies of the
Chernobyl-style reactors were downplayed and human errors were declared to be
the primary culprit.
</p>
<p>
Ultimately, observes the author, "It is ironic that in an era of openness,
Chernobyl may have been both the pioneer of glasnost under Gorbachev and then
subsequently its first casualty." He ultimately concludes, "Aspects of the
disaster . . . have rarely been dealt with thoroughly or even honestly by
Soviet sources." Hence the need for this book, a need which is admirably
fulfilled despite the many remaining mysteries and uncertainties.
</p>
<p>
The July, 1987, trial of reactor personnel marked a full circle of disclosure.
Journalists were allowed into the pre-scripted first and last days, but the
weeklong deliberative sessions were held in secret and no word of their
substance has ever been released.
</p>
<p>
The propaganda purpose of the trial and surrounding official publicity, he
maintains, had one goal: "To divert culpability from the party hierarchy, in
Kiev and especially in Moscow." This is precisely the theme I have also
encountered in my own investigations of aerospace accidents of the past. Where
individual human failings led to catastrophe, a sanitized story may eventually
be released, but where Kremlin policy led to disaster (such as the Nedelin
catastrophe of 1960 or the Soyuz-1 disaster in 1967), the entire event remains
absolutely off limits to glasnost.
</p>
<p>
The closing blow-by-blow description of the nuclear power debate presages a
dramatic event which occurred too recently for inclusion in this first edition.
Viktor Legasov, tagged by the author as one of the country's two leading
pro-nuclear advocates, actually was sinking into private despair over the poor
implementation of safety standards. In the end, he made his final and most
eloquent testimony to this despair on the second anniversary of the accident,
by committing suicide. For several weeks the Soviets tried to sit on the
circumstances of his "tragic death," even issuing official non-explanations
which asserted that the death was not due to medical effects of radiation.
Finally, crusading journalist Vladimir Gubarev, with access to Legasov's
notebooks, broke the story in Pravda. Readers of this book will come to know
these and other characters so well that the suicide fits right into the "big
picture" of the catastrophe's social impacts.
</p>
<p>
For an author to so accurately describe a social milieu that subsequent
unpredictable events only enhance his insights is testimony to the highest
quality of scholarship. Readers of Marples' book will rarely be surprised as
the Chernobyl catastrophe's consequences continue to unfold in the future.
</p>
</text>
<graphic>
<p>
Photo, Chernobyl Then and Now :Photographs of the damaged reactor taken before
the construction of its concrete "sarcophagus" are, for obvious reasons, aerial
photographs. Left, an artist's reconstruction of the reactor as it would have
looked from the ground before the sarcophagus was in place. The point of view
is the same as that of an official Soviet photograph, right, taken as the
entombment neared completion.
</p>
</graphic>
<type>
<p>
Book Review; Main Story
</p>
</type>
</doc>
<doc>
<docno> LA010189-0013 </docno>
<docid> 31 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 10; Book Review Desk
</p>
</section>
<length>
<p>
146 words
</p>
</length>
<headline>
<p>
CURRENT PAPERBACKS: WAITING FOR CHILDHOOD BY SUMNER LOCKE ELLIOTT (PERENNIAL
LIBRARY/ HARPER & ROW: $7.95)
</p>
</headline>
<byline>
<p>
By ELENA BRUNET
</p>
</byline>
<text>
<p>
Set in Australia at the turn of the 20th Century, "Waiting for Childhood" is
the story of seven children left to cope for themselves after their parents
die. Their father, The Rev. William Lord, expires at the breakfast table one
morning. After the family leaves for a ramshackle house owned by a wealthy
cousin, the mother loses her mind and then her life in an accident.
</p>
<p>
The eldest daughter, Lily, takes charge of the entire household, as Jess
becomes a favorite of her rich cousin Jackie and watches her rival for Jackie's
affections fall fatally from a mountaintop.
</p>
<p>
These characters, "all talented, all deeply human, (are) all so beautifully
realized that by the end of the novel we identify with them to the point of
heartbreak," Carolyn See wrote in these pages. " 'Waiting for Childhood'
manages to be at once terribly melancholy and extraordinarily exhilarating."
</p>
</text>
<type>
<p>
Column; Book Review
</p>
</type>
</doc>
<doc>
<docno> LA010189-0032 </docno>
<docid> 74 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Business; Part 4; Page 3; Column 1; Financial Desk
</p>
</section>
<length>
<p>
1299 words
</p>
</length>
<headline>
<p>
VIEWPOINTS;
</p>
<p>
'89 WISH LIST: PROTECTION, TAXES AND PEACE;
</p>
<p>
SOCIAL BENEFITS, DEFICIT REDUCTION ARE TOP PRIORITIES FOR THE NEW YEAR
</p>
</headline>
<text>
<p>
What changes would you like to see in business practices and the workplace this
year? How can business leaders and economic policy-makers improve the economy
and the world in general in 1989? The Times ran these questions by people in
various walks of life, and here are some of their answers:
</p>
<p>
</p>
<p>
Muriel Siebert, head of the Muriel Siebert & Co. discount brokerage in New
York, and first female member of the New York Stock Exchange:
</p>
<p>
"I would like to see certain business practices regulated. I think that the
leveraged buyouts show the greed of people at their worst. . . . The LBOs are
bypassing the purpose of the capital-raising system. I think that to the extent
that people were stockholders in these companies . . . they should be allowed
to continue to have some kind of share in the profits (after the leveraged
buyouts) because these moves were done while they were stockholders.
</p>
<p>
"Must greed be the creed? I would like to see that also rolled over to our
defense contractors. I am pro defense. I believe in a strong country because
people mistake gentility for weakness. If (contractors) cheat on defense
contracts, I don't see why they don't go to jail. . . . I just feel that if you
are a major defense contractor, you owe a fiduciary responsibility to this
country because defense expenditures are putting a pretty big toll on the
country."
</p>
<p>
Andrew Brimmer, former member of the Federal Reserve Board and head of a
Washington economics consulting firm:
</p>
<p>
"My leading wish is that the nation deal with the federal budget deficit. I
would like to see a substantial reduction in 1989 and extending over the next
three years. I would strongly recommend that we raise taxes. There should be
some moderation in the level of government expenditures, but the real problem
is the lag in revenue.
</p>
<p>
"I also would like to see more done for education by business. The kind of
education I'm talking about is at the elementary and secondary level.
Businesses are already contributing to colleges. Businesses should do likewise
for elementary and secondary schools. Business people can play a role as
counselors and teachers. A firm might make available an engineer or
mathematician to go into schools and teach. Business should do more to offer
on-the-job training for unskilled, or limited-skills, people, perhaps through a
(lower) learning wage. We would give business tax credits to do this."
</p>
<p>
William R. Robertson, executive secretary of the Los Angeles County Federation
of Labor, AFL-CIO:
</p>
<p>
"I would like to see a change in philosophy by the incoming President relating
to labor relations and providing for fairness in our (labor) organizing efforts
and contract negotiations. . . .
</p>
<p>
"I would also like to see some protection for workers losing their jobs because
of mergers. It is a national disgrace. In too many mergers, the workers are the
ones that suffer and the country as well. Something should be done to correct
it. . . .
</p>
<p>
"And, finally, this Administration should face reality in resolving the
astronomical deficit."
</p>
<p>
Steven D. Lydenberg, an associate with the "socially responsible" investment
firm of Franklin Research & Development:
</p>
<p>
"There is an increasing interest around the country in social investing. People
want to know not just the financial implications of making a commitment in a
company, but also the social implication. That information is not very easy to
come by.
</p>
<p>
"So, if at the end of '89 corporations were disclosing in a uniform way their
yield figures, their charitable contribution figures, the numbers of women and
minorities in top management and board directors, their attitude on a number of
comparable social issues, I would be very happy."
</p>
<p>
Frank Borman, chairman of Patlex Corp. of Chatsworth, former astronaut and
former chairman of Eastern Airlines:
</p>
<p>
"We should begin to move toward taxing consumption -- a value-added tax. This
is quite controversial as Al Ullman (Oregon Democrat and former chairman of the
House Ways and Means Committee, who was defeated in 1988 after advocating a
value-added tax) will tell you. But this taxing system is needed. It would
certainly help our exports. Almost all of Europe is under the value-added
taxing system. Also, it may encourage saving instead of consumption. One of the
ways you discourage consumption is to tax it."
</p>
<p>
Michael Harrington, co-chair of Democratic Socialists of America and author of
"The Other America" and "The New American Poverty":
</p>
<p>
"I hope Secretary of State Baker will build on the basic insights of former
Treasury Secretary Baker (James Baker, former treasury secretary, was nominated
by President-elect Bush to be Secretary of State) that a settlement of Third
World debt is in the self-interest of America, opening up markets for business
and labor. But then the new Baker will have to go far beyond the old, since
Latin America now owes more than it did in 1982 when the crisis officially
began, and several countries, including Argentina and Brazil, may see democracy
subverted if current trends persist.
</p>
<p>
"At home, the nation must recognize that we can't waste young people, and
particularly minorities and women, on illiteracy, unemployment and unproductive
low-wage work. We must invest mightily in education, training and job
generation."
</p>
<p>
Alan Bromberg, a securities law expert and professor at Southern Methodist
University:
</p>
<p>
"There are several things I would like most to see changed in the economy and
business practices. One, more concentration by business and government, both
here and abroad, on . . . the facilitation of international trade and
investment. This would require wider horizons for business people . . . and
more effort by government to reduce and ultimately eliminate all kinds of
restrictions on the movement of products.
</p>
<p>
"Two, I would like to see a national consensus developed, preferably in the
form of federal legislation, on corporate takeovers and buyouts that would
recognize the efficiencies and benefits they bring as well as the dislocations
and hardships they can cause. This would involve tax policies and labor polices
and limitations on the ability of states to Balkanize corporate law by
different anti-takeover statutes everywhere. (There also should be) some kind
of limitation on management self-entrenchment and self-enrichment.
</p>
<p>
"I think we could use a lot of clarification of the securities laws. I think
the courts have done a good job of saying what insider trading is. The kind of
issues that are most difficult are what really is parking (of stock)? How much
cooperation or similar action by different individuals or different groups of
individuals makes it collaboration? These issues haven't been well resolved. .
. .
</p>
<p>
Peter Bahouth, executive director of Greenpeace in Washington:
</p>
<p>
"People now view threats to human security less in terms of political threats
and more in environmental and economic terms. So for my wish list, I would ask
first that we deal with the issue of the greenhouse effect. We better develop
some alternative views in mass transportation and cut subsidies to reflect the
true cost of fossil fuels in terms of pollution, along with the actual economic
cost of development. Then, we could put more money into research and
development of wind and solar energy.
</p>
<p>
"(Also on my wish list is) peace on earth. If we want peace on earth, we have
to start looking seriously at the fact that we are making more and more
weapons, and in a process which endangers the health of American people. . . .
Production plants have been proven to have released into the air and water
radioactivity and toxic chemicals."
</p>
<p>
"Also, it would be nice if we could learn that the rain forest affects all of
us. We need to preserve it. And we would like the tuna industry to stop killing
dolphins."
</p>
</text>
<graphic>
<p>
Drawing, JILL BANASHEK / for The Times
</p>
</graphic>
</doc>
</section>
<section>
<h2>Raw Text</h2>
<div class="output1">
</div>
</section>
<script src="app.js"></script>
</body>
</html>
Related
I've been working on a site for school, and for some reason when I attempt to change the link for the source the console outputs
Uncaught TypeError: Cannot set property 'href' of null
at pierre (pierre.html:49)
at HTMLButtonElement.onclick (pierre.html:60)
I attempted to fix this by changing the ids but it also didn't work, even copying and pasting the 'link1' line over the 'link2' line does not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="pierre, omidyar, bourne">
<title id="title">Pierre Omidyar</title>
</head>
<script>
var x = 0;
function pierre() {
if (x == 0) {
x = 1
document.getElementById('title').innerHTML='Pierre\xa0Bourne';
document.getElementById('heading').innerHTML='Pierre\xa0Bourne';
document.getElementById('tag').play();
document.getElementById('image1').src='https://cdn3.pitchfork.com/longform/699/Pierre1.jpg';
document.getElementById('cite1').innerHTML = "Sheldon Pearce, Pitchfork.com, 2019";
document.getElementById('para1').innerHTML = "Jordan Timothy Jenks, known professionally as Pi\'erre Bourne, is a Belizean-American record producer, rapper, songwriter, and audio engineer. He is known for producing the singles \"Magnolia\" by Playboi Carti, and \"Gummo\" by 6ix9ine, with the two peaking at number 29 and 12 on the US Billboard Hot 100 respectively.";
document.getElementById('link1').href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('image2').src='https://cdn3.pitchfork.com/longform/699/Pierre4.jpg';
document.getElementById('para2').innerHTML = "Songs Pierre Bourne has produced";
document.getElementById('l1o1').innerHTML = "Magnolia";
document.getElementById('l1o2').innerHTML = "wokeuplikethis*";
document.getElementById('l1o3').innerHTML = "Pissy Pamper";
document.getElementById('l1o4').innerHTML = "Pain 1993";
document.getElementById('link2').href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('para3').innerHTML = "He was born in Fort Riley, Kansas but grew up in Columbia, South Carolina to a military family from Queens, New York. Growing up, he would spend his summers with his grandmother in Queens, which lead to his interest in East Coast hip hop artists such as Dipset and G-Unit. He is related to Mobile Malachi, a Belizean Kriol Reggae artist and musician. He is also a cousin of Papoose, who is of Liberian descent."
document.getElementById('para4').innerHTML = "Jenks began producing for Young Nudy and Trippie Redd in 2016. He met Playboi Carti in February 2017, collaborating on the track \"Woke Up Like This\" and producing most tracks on his debut project. Their song \"Magnolia\" peaked at 29 on the US Billboard Hot 100. This kickstarted Jenks' producing career, producing songs for 21 Savage, Trippie Redd, Rich the Kid, Lil Yachty, Famous Dex, Nav, Young Thug and Lil Uzi Vert. Jenks has also released a series of mixtapes called The Life of Pi'erre and has his own imprint, SossHouse, at Interscope Records. He produced Travis Scott's single \"Watch\" which features Kanye West and Lil Uzi Vert. He also produced Playboi Carti's album Die Lit. He also helped produce for Kanye West's albums Ye and Jesus Is King.";
document.getElementById("link3").href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('para5').innerHTML = "Pierre Bourne has been hooked on the anime show Bleach since a two-week beat-making excursion to Tokyo earlier in the month. “'Bleach' is kind of accurate to how it looks over there [in Japan]. It reminds me of the neighborhoods I was walking through. So, that’s why I’ve been watching that a lot. Like, a lot a lot.”";
document.getElementById("link4").href = "https://www.highsnobiety.com/p/pierre-bourne-interview";
}
else {
x = 0
document.getElementById('title').innerHTML='Pierre\xa0Omidyar';
document.getElementById('heading').innerHTML='Pierre\xa0Omidyar';
document.getElementById('tag').pause();
document.getElementById('image1').src='https://upload.wikimedia.org/wikipedia/commons/0/0b/Pierre_Omidyar_%2850911249%29.jpg';
document.getElementById('cite1').innerHTML = "JD Lasica, Flickr.com, 2005";
document.getElementById('para1').innerHTML="Pierre Morad Omidyar is an American billionaire entrepreneur, software engineer and philanthropist. He is the founder of eBay where he served as chairman from 1998 to 2015. He became a billionaire at the age of 31 with eBay's 1998 initial public offering (IPO).Omidyar and his wife Pamela are philanthropists who founded Omidyar Network in 2004 in order to expand their efforts beyond non-profits to include for-profits and public policy.";
document.getElementById('link1').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar"
document.getElementById('image2').src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Pomidyarji.jpg/800px-Pomidyarji.jpg';
document.getElementById('para2').innerHTML = "Companies Pierre Omidyar has Founded";
document.getElementById('l1o1').innerHTML = "eBay";
document.getElementById('l1o2').innerHTML = "First Look Media";
document.getElementById('l1o3').innerHTML = "Honolulu Civil Beat";
document.getElementById('l1o4').innerHTML = "Omidyar Network";
document.getElementById('para3').innerHTML = "Omidyar was born in Paris, the son of Iranian parents who migrated to France for higher education. He was given the name of Parviz. His father, Cyrus Omidyar, is a surgeon who worked as a urologist at Johns Hopkins University in Baltimore and now practices in Aliso Viejo, California. Due to his father's work, the family moved to the US when Omidyar was a child. His mother, who did her doctorate in linguistics at the Sorbonne, is an academic.";
document.getElementById('link2').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
document.getElementById('para4').innerHTML = "In 1991, he co-founded Ink Development, a pen-based computing startup that later was rebranded as an e-commerce company and was renamed eShop Inc. Microsoft acquired eShop on June 11, 1996, for less than $50 million and Omidyar earned $1 million from the deal. In 1995, at the age of 28, Omidyar began to write the original computer code for an online venue to enable the listing of a direct person-to-person auction for collectible items. He created a simple prototype on his personal web page, and on Labor Day, Monday, September 4, 1995, he launched an online service called Auction Web, which would eventually become the auction site eBay. In 2013, prompted by the Edward Snowden leaks, Omidyar announced the creation of First Look Media, a journalism venture launched on February 10, 2014, with The Intercept and including such journalists as Glenn Greenwald, Laura Poitras, Jeremy Scahill, Dan Froomkin, John Temple, and Jay Rosen.";
document.getElementById('link3').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
document.getElementById('para5').innerHTML = "Omidyar has been part of the executive producer team for the films \"Merchants of Doubt\" (2014) and \"Spotlight\" (2015)"
document.getElementById('link4').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
}
}
</script>
<body>
<audio id="tag"><source src="https://codehs.com/uploads/9af74ff56cf4b8ed3809fba276efa59e" type="audio/mpeg"></audio>
<h1 id="heading">Pierre Omidyar</h1>
<button onclick="pierre()" type="button"><em>Swap!</em></button><br>
<img height=50% width=50% id="image1" src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Pierre_Omidyar_%2850911249%29.jpg"/><br>
<cite id="cite1">JD Lasica, Flickr.com, 2005</cite><br>
<span id="para1">Pierre Morad Omidyar is an American billionaire entrepreneur, software engineer and philanthropist. He is the founder of eBay where he served as chairman from 1998 to 2015. He became a billionaire at the age of 31 with eBay's 1998 initial public offering (IPO).Omidyar and his wife Pamela are philanthropists who founded Omidyar Network in 2004 in order to expand their efforts beyond non-profits to include for-profits and public policy.</span><br>
<a id="link1" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a><br>
<hr>
<h1>What has Pierre done?</h1>
<img height=50% width=50% id="image2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Pomidyarji.jpg/800px-Pomidyarji.jpg"/><br>
<span id="para2">Companies Pierre Omidyar has Founded</span>
<ul>
<li id="l1o1">eBay</li>
<li id="l1o2">First Look Media</li>
<li id="l1o3">Honolulu Civil Beat</li>
<li id="l1o4">Omidyar Network</li>
</ul>
<hr>
<h1>Family Info</h1>
<p id="para3">Omidyar was born in Paris, the son of Iranian parents who migrated to France for higher education. He was given the name of Parviz. His father, Cyrus Omidyar, is a surgeon who worked as a urologist at Johns Hopkins University in Baltimore and now practices in Aliso Viejo, California. Due to his father's work, the family moved to the US when Omidyar was a child. His mother, who did her doctorate in linguistics at the Sorbonne, is an academic.</span><br>
<a id="link2" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a><br>
<hr>
<h1>Professional Info</h1>
<p id="para4">In 1991, he co-founded Ink Development, a pen-based computing startup that later was rebranded as an e-commerce company and was renamed eShop Inc. Microsoft acquired eShop on June 11, 1996, for less than $50 million and Omidyar earned $1 million from the deal. In 1995, at the age of 28, Omidyar began to write the original computer code for an online venue to enable the listing of a direct person-to-person auction for collectible items. He created a simple prototype on his personal web page, and on Labor Day, Monday, September 4, 1995, he launched an online service called Auction Web, which would eventually become the auction site eBay. In 2013, prompted by the Edward Snowden leaks, Omidyar announced the creation of First Look Media, a journalism venture launched on February 10, 2014, with The Intercept and including such journalists as Glenn Greenwald, Laura Poitras, Jeremy Scahill, Dan Froomkin, John Temple, and Jay Rosen.</span><br>
<a id="link3" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a>
<hr>
<h1>Hobby Info</h1>
<p id="para5">Omidyar has been part of the executive producer team for the films "Merchants of Doubt" (2014) and "Spotlight" (2015)</span><br>
<a id="link4" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a>
<hr>
</body>
</html>
It looks like the problem was mismatching the start and end span/p tags for the para information.
HTML with mismatched opening and closing tags causes the javascript DOM parser to miss elements despite them actually being on the page.
This is my first post and I don't know what I am doing yet, so please bear with me.
I am trying to use vanilla JS to highlight a clicked anchor and remove the previously highlighted anchor.
I am not sure why it is not working but I am new at this.
My CodePen
below is just the JS. .nav-link is the link class. active is the class that should manipulate it after the click.
window.onload = afterClick;
function afterClick(){
//set an on off array to toggle.
let linkClass = document.querySelectorAll(".nav-link");
linkClass.forEach(link => link.addEventListener("click", function(){
if (link.classList.contains("active")) {
link.classList.remove("active");
link.classList.add("active");
}}));
}
Thank you!
Instead of onload you can listen to hashchange event instead to achieve this like:
window.addEventListener("hashchange", () => {
let hash = window.location.hash;
if (hash) {
let linkClass = document.querySelectorAll(".nav-link");
linkClass.forEach(x => x.classList.remove("active"))
document.querySelector('a[href="' + hash + '"]').classList.add("active");
}
});
So, whenever the url hash will change, it will remove the active class from all the links using:
linkClass.forEach(x => x.classList.remove("active"))
and then it will search for the link having that hash and add the active class to that link only using:
document.querySelector('a[href="' + hash + '"]').classList.add("active");
Working Demo:
window.addEventListener("hashchange", () => {
let hash = window.location.hash;
if (hash) {
let linkClass = document.querySelectorAll(".nav-link");
linkClass.forEach(x => x.classList.remove("active"))
document.querySelector('a[href="' + hash + '"]').classList.add("active");
}
});
#main-doc{font-family:Montserrat,sans-serif}#navbar{float:left;position:fixed;font-family:Montserrat,sans-serif;font-weight:700;min-width:230px;max-width:231px;height:100vh;background:url(https://image.freepik.com/free-vector/elegant-white-texture-background_23-2148431731.jpg);margin-top:-10px;margin-left:-10px;margin-right:40px;margin-bottom:25px;border:1px solid #000}#navbar header{padding:14px;font-size:1.8em;text-align:center;border:1px solid #000}#navbar a{display:block;color:#000;text-decoration:none;padding:15px;font-size:1.1em;text-align:center;border:1px solid #000;border-top:0}.main-section header{margin-left:30px;font-family:Notable,sans-serif;font-size:1.4rem}.main-section ul li{list-style-type:none;font-size:1.3em;padding-bottom:6px}.main-section{margin-left:230px;margin-right:50px;padding-top:20px}#main-doc{padding-bottom:60px}code{font-size:1rem;font-family:Montserrat,sans-serif}.active{color:orange!important;background-color:#00f!important}#media only screen and (max-width:425px){#navbar{max-width:425px;min-width:200px;position:relative;width:100vw;height:auto}.nav-link{margin-top:0;width:100vw}.main-section{margin-left:5px;margin-right:10px;padding-top:20px}.main-section ul{padding-left:5px}.navbar a{padding:0}}
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Notable&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#700&display=swap');
</style>
<!-- font-family: 'Montserrat', sans-serif;
font-family: 'Notable', sans-serif; -->
<nav id="navbar">
<header style="color: #FFDF01 ;background: url(https://img.freepik.com/free-photo/blue-with-vignette-marble-texture-background-with-copy-space_23-2148327728.jpg?size=626&ext=jpg)">Common Sharks</header>
<a class="nav-link" href="#About_Sharks" id="aboutSharks">About Sharks</a>
<a class="nav-link" href="#The_Great_White">The Great White</a>
<a class="nav-link" href="#Oceanic_White_Tip">Oceanic White Tip</a>
<a class="nav-link" href="#Bull_Shark">Bull Shark</a>
<a class="nav-link" href="#Tiger_Shark">Tiger Shark</a>
</nav>
<main id="main-doc">
<section class='main-section' id="About_Sharks">
<header>About Sharks</header>
</br>
<ul><span style="font-size: 2.1em; margin-left: 5px;">B</span>efore we can talk about the most deadly sharks in the world, there are a few interesting facts that will help you understand sharks as a species better.</br>
</br>
<li>Sharks do not have bones</li>
<p>Sharks use their gills to filter oxygen from the water. They are a special type of fish known <i>Elasmobranch</i>, which translates into: </br>fish made of cartilaginous tissues—the clear gristly stuff that your ears and nose tip are made of. This
category also includes rays, sawfish, and skates. Their cartilaginous skeletons are much lighter than true bone and their large livers are full of low-density oils, both helping them to be buoyant. </p>
<p>Even though sharks don't have bones, they still can fossilize. As most sharks age, they deposit calcium salts in their skeletal cartilage to strengthen it. The dried jaws of a shark appear and feel heavy and solid; much like bone. These same minerals
allow most shark skeletal systems to fossilize quite nicely. The teeth have enamel so they show up in the fossil record too.</p>
</br>
<li>Most sharks have good eyesight</li>
<p>Most sharks can see well in dark lighted areas, have fantastic night vision, and can see colors. The back of sharks’ eyeballs have a reflective layer of tissue called a tapetum. This helps sharks see extremely well with little light.</p>
<br><br>
<li>Sharks have special electroreceptor organs</li>
<p>Sharks have small black spots near the nose, eyes, and mouth. These spots are the <i>ampullae of Lorenzini</i> – special electroreceptor organs that allow the shark to sense electromagnetic fields and temperature shifts in the ocean.</p>
<br>
<li>Shark skin feels similar to sandpaper</li>
<p>Shark skin feels exactly like sandpaper because it is made up of tiny teeth-like structures called placoid scales, also known as dermal denticles. These scales point towards the tail and help reduce friction from surrounding water when the shark
swims.
</p>
<br>
<li>Sharks can go into a trance</li>
<p>When you flip a shark upside down they go into a trance like state called tonic immobility. This is the reason why you often see sawfish flipped over when our scientists are working on them in the water.</p>
</br>
<li>Sharks have been around a very long time</li>
<p>Based on fossil scales found in Australia and the United States, scientists hypothesize sharks first appeared in the ocean around 455 million years ago.</p>
<br>
<li>Scientists age sharks by counting the rings on their vertebrae</li>
<p><code>Vertebrae contain concentric pairs of opaque and translucent bands. Band pairs are counted like rings on a tree and then scientists assign an age to the shark based on the count. Thus, if the vertebrae has 10 band pairs, it is assumed to be 10 years old. Recent studies, however, have shown that this assumption is not always correct. Researchers must therefore study each species and size class to determine how often the band pairs are deposited because the deposition rate may change over time. Determining the actual rate that the bands are deposited is called <i>validation</i>.</code></p>
<br>
<li>Blue sharks are really blue</li>
<p><code>The blue shark displays a brilliant blue color on the upper portion of its body and is normally snowy white beneath. The mako and porbeagle sharks also exhibit a blue coloration, but it is not nearly as brilliant as that of a blue shark. In life, most sharks are brown, olive, or grayish.</code></p>
<br>
<li>Each whale shark’s spot pattern is unique as a fingerprint</li>
<p>Whale sharks are the biggest fish in the ocean. They can grow to 12.2 meters and weigh as much as 40 tons by some estimates! Basking sharks are the world's second largest fish, growing as long as 32 feet and weighing more than five tons.</p>
<br>
<li>Some species of sharks have a spiracle that allows them to pull water into their respiratory system while at rest</li>
<p>Most sharks have to keep swimming to pump water over their gills A shark's spiracle is located just behind the eyes which supplies oxygen directly to the shark's eyes and brain. Bottom dwelling sharks, like angel sharks and nurse sharks, use this
extra respiratory organ to breathe while at rest on the seafloor. It is also used for respiration when the shark's mouth is used for eating.</p>
<br>
<li>Not all sharks have the same teeth</li>
<p>
Mako sharks have very pointed teeth, while white sharks have triangular, serrated teeth. Each leave a unique, tell-tale mark on their prey. A sandbar shark will have around 35,000 teeth over the course of its lifetime! </p>
<br>
<li>Different shark species reproduce in different ways</li>
<p>
Sharks exhibit a great diversity in their reproductive modes. There are oviparous (egg-laying) species and <i>viviparous</i> (live-bearing) species. Oviparous species lay eggs that develop and hatch outside the mother's body with no parental care
after the eggs are laid.</p>
</section>
<section class='main-section' id="The_Great_White">
<header>The Great White</header>
<ul>
The legendary great white shark is far more fearsome in our imaginations than in reality. As scientific research on these elusive predators increases, their image as mindless killing machines is beginning to fade.
</br>
</br>
<li>Shark Attacks</li>
Of the <i><b>100-plus</b></i> annual shark attacks worldwide, fully one-third to one-half are attributable to great whites. However, most of these are not fatal, and new research finds that great whites, who are naturally curious, are "sample biting"
then releasing their victims rather than preying on humans. It's not a terribly comforting distinction, but it does indicate that humans are not actually on the great white's menu.
</br>
</br>
<li>Characteristics</li>
Great whites are the largest predatory fish on Earth. They grow to an average of 15 feet in length, though specimens exceeding 20 feet and weighing up to 5,000 pounds have been recorded. They have slate-gray upper bodies to blend in with the rocky coastal
sea floor, but get their name from their universally white underbellies. They are streamlined, torpedo-shaped swimmers with powerful tails that can propel them through the water at speeds of up to 15 miles per hour. They can even leave the water
completely, breaching like whales when attacking prey from underneath.
</br>
</br>
<li>Hunting Adaptations</li>
Highly adapted predators, their mouths are lined with up to 300 serrated, triangular teeth arranged in several rows, and they have an exceptional sense of smell to detect prey. They even have organs that can sense the tiny electromagnetic fields generated
by animals. Their main prey items include sea lions, seals, small toothed whales, and even sea turtles, and carrion.
</br>
</br>
<li>Population</li>
</code>Found in cool, coastal waters throughout the world, there is no reliable data on the great white's population. However, scientists agree that their number are decreasing precipitously due to overfishing and accidental catching in gill nets, among
other factors, and they are considered a vulnerable species.</code>
</ul>
</section>
<section class='main-section' id="Oceanic_White_Tip">
<header>Oceanic White Tip</header>
<ul>
</br>
<li>Characteristics</li>
This is an active, almost fearless shark also associated with human attacks. MarineBio considers this shark the most potentially dangerous after great whites, tiger, and bull sharks, especially for open-ocean divers. This species is likely responsible
for open-ocean attacks following air or sea disasters.
</br>
</br>
<li>Behavior</li>
Oceanic whitetips can be very aggressive and unpredictable in the presence of potential prey. Sold commercially fresh, frozen, smoked, and dried-salted for human consumption; hides for leather, fins for shark fin soup, liver oil for vitamins, and processed
into fishmeal.
</br>
This species is a widespread and common large pelagic shark of warm oceanic waters. It presumably has a low reproductive capacity, but is extremely abundant and wide-ranging and is subject to fishery pressure as a common bycatch species with tuna and
other pelagic species. This bycatch is reportedly either inadequately reported or unrecorded. The fins are highly prized in trade although the carcass is often discarded. Fishery pressure is likely to persist, if not increase in future, and the
impact of this fishing pressure is presently unknown.
</br>
</br>
<li>Population</li>
<code>The oceanic whitetip shark, <i>Carcharhinus longimanus</i>, is listed as Critically Endangered.</code>
</ul>
</section>
<section class='main-section' id="Bull_Shark">
<header>Bull Shark</header>
<ul>
Bull sharks are aggressive, common, and usually live near high-population areas like tropical shorelines. They are not bothered by brackish and freshwater, and even venture far inland via rivers and tributaries.
</br>
</br>
<li>Human Encounters</li>
Because of these characteristics, many experts consider bull sharks to be the most dangerous sharks in the world. Historically, they are joined by their more famous cousins, great whites and tiger sharks, as the three species most likely to attack humans.
</br>
</br>
<li>Characteristics</li>
Bull sharks get their name from their short, blunt snout, as well as their pugnacious disposition and a tendency to head-butt their prey before attacking. They are medium-size sharks, with thick, stout bodies and long pectoral fins. They are gray on top
and white below, and the fins have dark tips, particularly on young bull sharks.
</br>
</br>
<li>Hunting</li>
They are found cruising the shallow, warm waters of all the world’s oceans. Fast, agile predators, they will eat almost anything they see, including fish, dolphins, and even other sharks. Humans are not, per se, on their menus. However, they frequent
the turbid waters of estuaries and bays, and often attack people inadvertently or out of curiosity.
</br>
</br>
<li>Threats to Survival</li>
<code>Bull sharks are fished widely for their meat, hides, and oils, and their numbers are likely shrinking. One study has found that their average lengths have declined significantly over the past few decades.</code>
</ul>
</section>
<section class='main-section' id="Tiger_Shark">
<header>Tiger Shark</header>
<ul>
Tiger sharks are named for the dark, vertical stripes found mainly on juveniles. As these sharks mature, the lines begin to fade and almost disappear.
</br>
</br>
<li>Shark Attacks</li>
These large, blunt-nosed predators have a duly earned reputation as man-eaters. They are second only to great whites in attacking people. But because they have a near completely undiscerning palate, they are not likely to swim away after biting a human,
as great whites frequently do.
</br>
</br>
<li>Hunting</li>
They are consummate scavengers, with excellent senses of sight and smell and a nearly limitless menu of diet items. They have sharp, highly serrated teeth and powerful jaws that allow them to crack the shells of sea turtles and clams. The stomach contents
of captured tiger sharks have included stingrays, sea snakes, seals, birds, squids, and even license plates and old tires.
</br>
</br>
<li>Population</li>
Tiger sharks are common in tropical and sub-tropical waters throughout the world. Large specimens can grow to as much as 20 to 25 feet in length and weigh more than 1,900 pounds.
</br>
</br>
<li>Threats to Survival</li>
<code>They are heavily harvested for their fins, skin, and flesh, and their livers contain high levels of vitamin A, which is processed into vitamin oil. They have extremely low repopulation rates, and therefore may be highly susceptible to fishing pressure. They are listed as near threatened throughout their range.</code>
</ul>
</section>
</main>
First problem I found is that in your if loop :
if (link.classList.contains("active")) {
link.classList.remove("active");
link.classList.add("active");
}
.. only triggers on an element that already has the "active" class you want it to add, so it's not doing anything right now. If we take your existing if loop to iterate through the other and remove the active class from them, then we can safely add the active class to the link that was clicked:
window.onload = afterClick;
function afterClick() {
let linkClass = document.querySelectorAll(".nav-link");
// Add eventListener
linkClass.forEach((originalLink) =>
originalLink.addEventListener("click", function () {
let linkElems = document.querySelectorAll(".nav-link");
// Clear "active class from the same links"
linkElems.forEach((linkElem)=>{
if (linkElem.classList.contains("active")) {
linkElem.classList.remove("active");
}
});
//add the |"active" class to the originally clicked elem
originalLink.classList.add("active");
})
);
}
Hope it helps! :)
So I have an list with items where the years are bolded. But when i put them in JSON and later I set the text in HTML, the text is not bolded. In the link ,now I have the bold tags and the text . This is confusing . Can i make this work ?
<div class="year-list">
<h3 class="time-line">Here's a time line of Dr. Borlaug's life:</h3>
<div class="big-list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li><b>1938 </b> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.</li>
<li><b>1941 </b> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disenfectants, and other applied science.</li>
<li><b>1942 </b> - Receives a Ph.D. in Genetics and Plant Pathology</li>
<li><b>1944 </b> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat - including different varieties for each major climate on Earth.</li>
<li><b>1945 </b> - Discovers a way to grown wheat twice each season, doubling wheat yields</li>
<li><b>1953 </b> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertalizer. It goes on to provide 95% of Mexico's wheat.</li>
<li><b>1962 </b> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population</li>
<li><b>1970 </b> - receives the Nobel Peace Prize</li>
<li><b>1983 </b> - helps seven African countries dramatically increase their maize and sorghum yields</li>
<li><b>1984 </b> - becomes a distinguished professor at Texas A&M University</li>
<li><b>2005 </b> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."</li>
<li></li>
</ul>
</div>
</div>
This is the part of mine JSON.
{"divHoldingTitle":{"title":"Dr. Norman Borlaug","textSave":"The man who saved a billion lives"},"imageHolder":{"theBigPicture":"./images/smiling-people.jpg","textUnderPicture":"Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger."},"bigList":{"itemList":[{"item":"<b>1914 </b> - Born in Cresco, Iowa"},{"item":"<li><b>1933 </b> - Leaves his family\'s farm to attend the University of Minnesota, thanks to a Depression era program known as the\'National Youth Administration\'"}]}}
for(i in obj.bigList.itemList){
$('li').text(obj.bigList.itemList[i].item);
}
};
The problem is this.
Screenshot of the problem
As you can see. The lists have 1933 - Leaves his family's farm to..
But it is not bolded.
I am not sure how to solve this problem. I am using JavaScript .
This is due to using .text() method - it removes all formatting tags.
Use html() instead:
$('li').html(obj.bigList.itemList[i].item);
I have a page which consists of 3-column body. Inside the first and the third column there are buttons. I try to position them correctly.
In particular, I have a problem with the first column's button which must be displayed at the bottom of the page (near footer).
But the styles I used doesn't have an effect. I suppose it happens because the column is empty and positioning works relative to its height. I tried to make use of height:100%; property, but it didn't work.
How should I work around it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 20vh;
background-color:#f2f2f2;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 10vh;
}
footer {
background-color: black;
color:white;
} </style>
<style>
#upButton {position:absolute; left:0px; bottom:0px;}
</style>
<style>
.col1 {height:100%;}
</style>
</head>
<body>
<div id="header" class="header" align="center">
<h1 align="center">Some header
<small>some subheader</smalll>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 col1">
<a id="upButton"
href="#header" class="btn btn-success"
role="button">Up
</a>
</div>
<div class="col-md-8">...</div>
<div class="col-md-2">
<a href="#f" align="right" class="btn
btn-danger" role="button">Down
</a>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<p><a id="f">All right unreserved</a></p>
</div>
</footer>
</body>
So right now my solution works only if I put lots of text inside the first column - then the Up button is near footer, as it should be. But without text it goes upwards..
EDIT: I managed to solve it by putting both buttons right into body, but if there is a solution which allows for them to remain in their respective columns, I d like to know.
On the pictures the up button is next to the footer, while the down button is near header.
EDIT: The code with proposed solutions:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 20vh;
background-color:#f2f2f2;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 10vh;
}
footer {
background-color: black;
color:white;
} </style>
<style>
#upButton {position:fixed; left:0px; bottom:100px;}
.col1 {height:100%;}
</style>
</head>
<body>
<div id="header" class="header" align="center">
<h1 align="center">Some header
<small>some subheader</smalll>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 col1">
<a id="upButton"
href="#header" class="btn btn-success"
role="button">Up
</a>
</div>
<div class="col-md-8">.This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue would have been physically hidden from anyone for so long is definitely done by the latest science available at that period (1930s), but with today's satellites and space observation does not hold well at all, although it was probably ingenious for the time. Also getting there, getting in and discovering no new technology (based on electricity) works on the mountain is also very interesting, especially connected to Gurdjieff's notion that electricity was discovered before and is not an inexhaustible resource. Of course, Father Sogol is no one but Alexandre de (von) Saltzmann, one of the foremost Gurdjieff's students, of whom not as much is known, compared to the other students like Alexandre's wife Jeanne, and the de (von) Hartmann's. He must have been a formidable personality to have left such an impression on Daumal. This book is a gem, even in its unfinished form, or maybe because of it.This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue would have been physically hidden from anyone for so long is definitely done by the latest science available at that period (1930s), but with today's satellites and space observation does not hold well at all, although it was probably ingenious for the time. Also getting there, getting in and discovering no new technology (based on electricity) works on the mountain is also very interesting, especially connected to Gurdjieff's notion that electricity was discovered before and is not an inexhaustible resource. Of course, Father Sogol is no one but Alexandre de (von) Saltzmann, one of the foremost Gurdjieff's students, of whom not as much is known, compared to the other students like Alexandre's wife Jeanne, and the de (von) Hartmann's. He must have been a formidable personality to have left such an impression on Daumal. This book is a gem, even in its unfinished form, or maybe because of it.This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue would have been physically hidden from anyone for so long is definitely done by the latest science available at that period (1930s), but ..</div>
<div class="col-md-2">
<a href="#f" align="right" class="btn
btn-danger" role="button">Down
</a>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<p><a id="f">All right unreserved</a></p>
</div>
</footer>
</body>
</html>
One method I would recommend is that you use flex
First make sure body, container, row and col1 all take up full height even when empty (inspect to confirm).
If they do, then set col1 to display:flex. You could easily then use the flex-end property of flex children to make it stay down.
#upButton {
align-self: flex-end
}
Try to change your style to this. The output maybe the result your looking for.
<style>
#upButton {position:fixed; left:0px; bottom:0px;}
.col1 {height:100%;}
</style>
I changed the position from absolute to fixed, try to read different values for position... CSS Layout - The position Property
Making the upButton fixed we can control it irrespective of it's parent So this way we can achieve your requirement
<head>
<style>
#upButton {position:fixed; left:5px; bottom:5px;}
.col1 { height:100%; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" style="height: 100%">
<div class="col-xs-2 col1">
<a id="upButton" href="#header" class="btn btn-success" role="button">Up
</a>
</div>
<div class="col-xs-8">.......</div>
<div class="col-xs-2">
<a href="#f" align="right" class="btn btn-danger" role="button">Down
</a>
</div>
</div>
</div>
</body>
Live demo : https://jsbin.com/kuberop/2/edit?html,output
Can anyone help me, i have a simple yet complicated problem. I want to make it like below
Something like if you click on one picture the others will have a shade on it.
The page im working on now is http://www.3cwaremarketing.com/VisiSite/company-10/team/
Thanks for your help. You can see the details below.
HTML
function changeIt(objName) {
//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
var obj = document.getElementById(objName);
//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = new Array();
//Storing the image IDs into the array starts here
objId[0] = "image1";
objId[1] = "image2";
objId[2] = "image3";
objId[3] = "image4";
objId[4] = "image5";
//Storing the image IDs into the array ends here
//A counter variable going to use for iteration
var i;
//A variable that can hold all the other object references other than the object which is going to be visible
var tempObj;
//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
for (i = 0; i < objId.length; i++) {
if (objName == objId[i]) {
obj.style.display = "block";
} else {
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
<a name="isaac"></a>
<a id="one" href="#isaac" onclick="changeIt('image1');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/Isaac1.jpg" border="0" alt="one" />
</a>
<a name="alan"></a>
<a id="two" href="#alan" onclick="changeIt('image2');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/ed.jpg" border="0" alt="two" />
</a>
<a name="ed"></a>
<a id="three" href="#ed" onclick="changeIt('image3');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/alan.jpg" border="0" alt="three" />
</a>
<a name="matt"></a>
<a id="four" href="#matt" onclick="changeIt('image4');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/matt.jpg" border="0" alt="four" />
</a>
<br>
<br>
<div id="image1">
<h2>Isaac W. Jacobson</h2>
VP Business Development
<br>
<br>Mr. Jacobson brings a wealth of executive experience and professional relationships, having assembled top-tier executive teams and boards of directors for technology companies, syndicating venture capital, and buying and selling companies throughout
his career. He has held executive positions with media and technology entities such as theDial.com, Digonex Technologies, MusicRebellion, Digital Kiosk Technologies, Humanizing Technologies and eTAGZ Inc. In addition to building and growing technology
companies, Mr. Jacobson has had ownership interests across other sectors including precious metals, professional sports teams, and import/export companies working with the countries of Mexico, China, and the United Kingdom. A popular speaker and trusted
advisor to power brokers, he is often sought out by those in the highest ranks of business, politics, and entertainment to strategize on issues ranging from acquisitions, investments, and public policy to personal growth and bringing to market innovative
ideas. Mr. Jacobson is dedicated to his community, having established or served on numerous non-profit boards including the Snow College Foundation Board, the UVU Foundation Board, the Hispanic Chamber of Commerce, and the Family Defense PAC. He is
an avid donor and fundraiser for Republican political candidates and meaningful political initiatives to further Utah�s thriving business environment and family values. Mr. Jacobson is a father of three and he and his wife Tara reside in Mapleton, Utah.
</div>
<div id="image2" style="display:none">
<h2>Alan W. Bunker</h2>
CFO
<br>
<br>Mr. Bunker founded Spectrum Field Services with two other partners in 1987. A CPA and MBA, he has enjoyed an extensive career as a top executive in the public accounting, retail department store, real estate development, and health care industries.
He also has worked as an adjunct professor at the University of Utah. As a Senior Consultant with KPMG Peat Marwick in San Francisco, Mr. Bunker performed numerous consulting engagements in the savings and loan industry. He later became the Executive
Vice President and Chief Operating Officer of a real estate development firm, with major multi-family residential projects in Texas, Colorado, and Washington. Mr. Bunker has been heavily involved in the field service industry for over 20 years through
his participation with several industry-related associations. He periodically contributes articles to industry publications, and frequently has chaired committees and panels, including committees responsible for the development of field service standards
and procedures and technology advances for the industry. A long-time member of the Board of Governors of the National Association of Mortgage Field Services (NAMFS), Mr. Bunker is a past president of that organization.
</div>
<div id="image3" style="display:none">
<h2>Ed Bruno</h2>VP of Sales
<br>
<br>Mr. Bruno is an 18-year sales veteran with a performance record anchored on results. He has co-founded several start-ups, played a central role in three merger and acquisition events and lead sales teams of over 80 people to deliver on annual budgets
in excess of $400 million. His expertise crosses numerous business channels including media, technology, corporate communications, intellectual property, licensing, and webcast solutions. Mr. Bruno has held senior leadership roles including COO, CBO,
and VP of Sales in nine companies, two of them public. Mr. Bruno was voted into the �40 Under 40� by the Seattle Business Examiner. He holds Masters Degrees in English and Rhetorical Studies from Oregon State University</div>
<div id="image4" style="display:none">
<h2>A. Matthew Bunker</h2>VP Business Development
<br>
<br>Mr. Bunker is a natural-born networker and connector. He started his career as a staff member of the U.S. Senate Committee on the Judiciary in Washington, DC where he primarily focused on U.S. immigration policy but also assisted with judicial nominations
and crime legislation. Following his tenure with the Senate, Mr. Bunker continued to work with Congress with a government affairs and sports representation group. He also worked closely with the National Basketball Referees Association. Following his
career in Washington, DC, Mr. Bunker turned his attention to higher education, specifically building alumni associations. He was the Alumni Director for Salt Lake Community College, where he took their alumni activity from 32 active members to over
30,000 active members in under four years. Then he worked as the Alumni Manager with the MBA program at Brigham Young University. He organized its worldwide network of MBA alumni; focusing a great deal on social and new media, email marketing, and other
methods of connecting people together. Mr. Bunker speaks fluent Spanish. He holds a Bachelor of Arts in American Studies and Business from BYU and a Master of Public Affairs from the University of Missouri. He and his wife Jacquie are parents of four
children and they live in Saratoga Springs, Utah.</div>
<br>
I simplified your Javascript and added what was necessary to achieve what you defined as requirements. Check the snippet below. This is using vanilla Javascript only. To your images, I added a class="photo" since I assume there will also be other images on the page which should not get affected.
//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = ["image1","image2","image3","image4"];
var images = document.getElementsByClassName("photo");
function changeIt(objName) {
//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
for (var i = 0; i < objId.length; i++) {
console.log(i+": "+objId[i]);
var tempObj = document.getElementById(objId[i]);
if (objName != objId[i]) {
tempObj.style.display = "none";
images[i].style.filter = "sepia(75%)";
}
else {
tempObj.style.display = "block";
images[i].style.filter = "sepia(0)";
}
}
return;
}
/* make the effect smoothly animated in browsers that support it */
img {
transition-duration: 0.4s;
}
<a name="isaac"></a>
<a id="one" href="#isaac" onclick="changeIt('image1');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/Isaac1.jpg" border="0" alt="one" class="photo" />
</a>
<a name="alan"></a>
<a id="two" href="#alan" onclick="changeIt('image2');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/ed.jpg" border="0" alt="two" class="photo" />
</a>
<a name="ed"></a>
<a id="three" href="#ed" onclick="changeIt('image3');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/alan.jpg" border="0" alt="three" class="photo" />
</a>
<a name="matt"></a>
<a id="four" href="#matt" onclick="changeIt('image4');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/matt.jpg" border="0" alt="four" class="photo" />
</a>
<br>
<br>
<div id="image1">
<h2>Isaac W. Jacobson</h2>
VP Business Development
<br>
<br>Mr. Jacobson brings a wealth of executive experience and professional relationships, having assembled top-tier executive teams and boards of directors for technology companies, syndicating venture capital, and buying and selling companies throughout
his career. He has held executive positions with media and technology entities such as theDial.com, Digonex Technologies, MusicRebellion, Digital Kiosk Technologies, Humanizing Technologies and eTAGZ Inc. In addition to building and growing technology
companies, Mr. Jacobson has had ownership interests across other sectors including precious metals, professional sports teams, and import/export companies working with the countries of Mexico, China, and the United Kingdom. A popular speaker and trusted
advisor to power brokers, he is often sought out by those in the highest ranks of business, politics, and entertainment to strategize on issues ranging from acquisitions, investments, and public policy to personal growth and bringing to market innovative
ideas. Mr. Jacobson is dedicated to his community, having established or served on numerous non-profit boards including the Snow College Foundation Board, the UVU Foundation Board, the Hispanic Chamber of Commerce, and the Family Defense PAC. He is
an avid donor and fundraiser for Republican political candidates and meaningful political initiatives to further Utah�s thriving business environment and family values. Mr. Jacobson is a father of three and he and his wife Tara reside in Mapleton, Utah.
</div>
<div id="image2" style="display:none">
<h2>Alan W. Bunker</h2>
CFO
<br>
<br>Mr. Bunker founded Spectrum Field Services with two other partners in 1987. A CPA and MBA, he has enjoyed an extensive career as a top executive in the public accounting, retail department store, real estate development, and health care industries.
He also has worked as an adjunct professor at the University of Utah. As a Senior Consultant with KPMG Peat Marwick in San Francisco, Mr. Bunker performed numerous consulting engagements in the savings and loan industry. He later became the Executive
Vice President and Chief Operating Officer of a real estate development firm, with major multi-family residential projects in Texas, Colorado, and Washington. Mr. Bunker has been heavily involved in the field service industry for over 20 years through
his participation with several industry-related associations. He periodically contributes articles to industry publications, and frequently has chaired committees and panels, including committees responsible for the development of field service standards
and procedures and technology advances for the industry. A long-time member of the Board of Governors of the National Association of Mortgage Field Services (NAMFS), Mr. Bunker is a past president of that organization.
</div>
<div id="image3" style="display:none">
<h2>Ed Bruno</h2>VP of Sales
<br>
<br>Mr. Bruno is an 18-year sales veteran with a performance record anchored on results. He has co-founded several start-ups, played a central role in three merger and acquisition events and lead sales teams of over 80 people to deliver on annual budgets
in excess of $400 million. His expertise crosses numerous business channels including media, technology, corporate communications, intellectual property, licensing, and webcast solutions. Mr. Bruno has held senior leadership roles including COO, CBO,
and VP of Sales in nine companies, two of them public. Mr. Bruno was voted into the �40 Under 40� by the Seattle Business Examiner. He holds Masters Degrees in English and Rhetorical Studies from Oregon State University</div>
<div id="image4" style="display:none">
<h2>A. Matthew Bunker</h2>VP Business Development
<br>
<br>Mr. Bunker is a natural-born networker and connector. He started his career as a staff member of the U.S. Senate Committee on the Judiciary in Washington, DC where he primarily focused on U.S. immigration policy but also assisted with judicial nominations
and crime legislation. Following his tenure with the Senate, Mr. Bunker continued to work with Congress with a government affairs and sports representation group. He also worked closely with the National Basketball Referees Association. Following his
career in Washington, DC, Mr. Bunker turned his attention to higher education, specifically building alumni associations. He was the Alumni Director for Salt Lake Community College, where he took their alumni activity from 32 active members to over
30,000 active members in under four years. Then he worked as the Alumni Manager with the MBA program at Brigham Young University. He organized its worldwide network of MBA alumni; focusing a great deal on social and new media, email marketing, and other
methods of connecting people together. Mr. Bunker speaks fluent Spanish. He holds a Bachelor of Arts in American Studies and Business from BYU and a Master of Public Affairs from the University of Missouri. He and his wife Jacquie are parents of four
children and they live in Saratoga Springs, Utah.</div>
<br>
You want to do the opposite. Instead of adding shade to other pictures, just lower their opacity.
Set all image to semi-transparent, and full opaque on hover.
On click, add an "active" class that will hold the opaque state.
$("img").click( function(){
$(this)
.addClass("active") // Adds "active" class to all images
.siblings() // Selects images other than the one that's been clicked
.removeClass("active"); // Removes the "active" class on these images
$(".text")
.hide() // Hides all texts
.eq( $(this).index() ) // select only the text corresponding to the clicked image's index
.show() // Shows only the corresponding text
})
#container{
background: #492E1D;
display: inline-block;
}
img{
opacity : 0.5;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
cursor: pointer;
}
img:hover, img.active{
opacity:1;
}
.text{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<img src="http://www.lorempixel.com/150/200/people"/>
<img src="http://www.lorempixel.com/150/200/people"/>
<img src="http://www.lorempixel.com/150/200/people"/>
<img src="http://www.lorempixel.com/150/200/people"/>
</div>
<p class="text">Text for image 1</p>
<p class="text">Text for image 2</p>
<p class="text">Text for image 3</p>
<p class="text">Text for image 4</p>