получить скрипт вертикальной прокрутки, работающий в нескольких вкладках - PullRequest
Новая
       46

получить скрипт вертикальной прокрутки, работающий в нескольких вкладках

0 голосов
/ 19 апреля 2020

На указанной c веб-странице https://www.aeternus.org/try/, чтобы опубликовать sh некоторые цитаты на голландском (NL) языке, я установил скрипт выделения вертикальной прокрутки. На первой вкладке этот скрипт работает нормально и выполняет свою работу очень хорошо.

Основная проблема: Когда я пытаюсь установить тот же скрипт (но с другими цитатами на других языках (EN, DE, FR)) для 2-й, 3-й и 4-й вкладок. не работает, и скрипт на первой вкладке также перестает работать.

Я предполагаю, что с каждым переключателем табуляции: - Я должен "остановить" уже активный скрипт на "старой" вкладке , - и для «запуска» скрипта на «новой» вкладке.

Код, который я использую sofar, следующий: 

<style>
    @charset "UTF-8";

.tab-menu {
 list-style-type: none;
 overflow: hidden;
 margin: 2.5em 0 0 0;
 padding: 0;
}

.tab-menu li {
 display: inline;
 float: left;
}

.tab-menu li a {
 display: block;
 padding: 10px 18px;
 border-top: 1px solid #198219;
 border-left: 1px solid #198219;
 border-right: 1px solid #198219;
 color: #ffffff;
 background-color: #198219;
 text-decoration: none;
}

.tab-menu li a:hover {
 background-color: #208c20;
}

.tab-menu li.active a {
 color: #222222;
 background-color: #f5f5f5;
 border-top: 1px solid #ccf;
 border-left: 1px solid #ccf;
 border-right: 1px solid #ccf;
}

.tab-menu li.active a:hover {
 color: #222222;
 background-color: #f5f5f5;
 text-decoration: none;
 cursor: default;
}

.tab-content {
 position: relative;
 width: 100%;
 min-height: 180px;
 max-height: 380px;
 overflow: auto;
 margin-bottom: 2.5em;
 padding: 20px;
 border-left: 1px solid #ccf;
 border-bottom: 1px solid #ccf;
 background-color: #f5f5f5;
}

.tab-loading {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -16px;
 margin-left: -16px;
 width: 32px;
 height: 32px;
 background-image: url(./ajax-loader.gif);
}

.fa-circle {
   color: #4F81BD;
   position: relative;
   top: -0.20em;
}

#wrap{
 margin: 0px auto;
}

.right {
float: right;
}
</style>

<script src="https://www.aeternus.org/linski_tabs/jquery.fwd_tabs.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://www.aeternus.org/linski_tabs/jquery.liMarquee.js"></script> 
<link rel="stylesheet" href="https://www.aeternus.org/linski_tabs/liMarquee.css">

<!-- Initialization of plugin --> 
<script>
$(window).on('load',function(){
 $('.str4').liMarquee({
  direction: 'top',
  height:300,
  width: '100%',
  hoverStop: false,
  scrollDelay: 230
 });
})
$(function() { $(".tabs").fwd_tabs(); })
 </script>

<div class="tabs">
  <ul class="tab-menu">
   <li><a href="#tab-1">Quotes - NL</a></li>
   <li><a href="#tab-2">Quotes - EN</a></li>
   <li><a href="#tab-3">Quotes - DE</a></li>
   <li><a href="#tab-4">Quotes - FR</a></li>
  </ul>

<div class="tab-content" id="tab-1">
<div class="str4 mWrap">
<!-- Start Your Code -->
<div class="contItem" id="wrap";>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Wees niet bang voor schaduwen, het betekent dat er ergens dichtbij licht is.</div>
<div class="right">Ruth Renkle</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Waarom moeilijk doen als het samen kan?</div>
<div class="right">Loesje</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Hij die anderen kent is geleerd. Hij die zichzelf kent, is wijs.</div>
<div class="right">Lao Tse</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Probeer eerst te begrijpen, dan pas begrepen te worden.</div>
<div class="right">Stephen Covey</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Zorg ervoor dat de stem van je hart luider is dan die van je ego.</div>
<div class="right">Chinees gezegde</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Er ontstaat geen harmonie als iedereen dezelfde noot zingt.</div>
<div class="right">Doug Floyd</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Hoewel iedereen uniek is, durft slechts een enkeling anders te zijn.</div>
<div class="right">Wouter Kloosterman</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Let's make the impossible possible as possible as soon as possible.</div>
<div class="right">Pierre Linssen</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Bij een overwinning op jezelf is er geen verliezer.</div>
<div class="right">Olaf Hoenson</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Vriendschap is liefde op het eerste woord.</div>
<div class="right">Harry Mulisch</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Mensen met vaststaande antwoorden zijn bang voor de vraag.</div>
<div class="right">Kees Tillema</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
De dichter is een beeldhouwer die muziek schildert.</div>
<div class="right">Clem Schouwenaars</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Wie de toekomst als tegenwind ervaart, loopt in de verkeerde richting.</div>
<div class="right">Robbert Nijenhuis</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Misschien is ‘misschien’ het juiste woord voor zeker.</div>
<div class="right">Marc van Halsendaele</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Groot worden doe je door klein te blijven.</div>
<div class="right">Eckart Wintzen</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Het schijnt dat mensen die fouten durven maken ook veel creatiever zijn.</div>
<div class="right">Loesje</div><br><br>

<div style="float:left">&nbsp;<i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
De manier waarop we aandacht geven, maakt het verschil tussen au en wow.</div>
<div class="right">&nbsp;&nbsp;&nbsp;&nbsp;Isaac Shapiro</div><br><br>

</div>
<!-- End Your Code -->   
</div>
</div>

<div class="tab-content" id="tab-2">
<p>Also, the number of daily new infections appears to have stabilised. Although the health ministry has warned that weekend figures can be misleading because of a delay by local authorities in reporting data, the apparently improving picture will further encourage calls for the lifting of certain restrictions. There has been growing social and political pressure on Prime Minister Sánchez to allow children, in particular, to go outside. Opposition leader Pablo Casado tweeted that "these little heroes are climbing the walls" after more than a month of not being allowed out beyond the confines of their homes.</p>
</div>

<div class="tab-content" id="tab-3">
<p>Schnee besteht aus vielen kleinen Schneekristallen, die in einem Kristallgitter fest miteinander verbunden sind. Schneeflocken sind keine gefrorenen Wassertropfen, sondern bilden sich in einer Kette von physikalischen Prozessen. Die meist sechseckige Form der Schneekristalle erklärt sich aus der Kristall-gitter-Struktur der Wassermoleküle. Diese bilden, wenn es kalt genug ist, die typische Sternstruktur aus. Die genaue Form der Schneeflocken ist vor allem abhängig von der Temperatur und der Luftfeuchtigkeit bei der Entstehung.</p>
</div>

<div class="tab-content" id="tab-4">
<p>Il a toujours la même allure d’adolescent dégingandé aux pulls couleur pastel démodés et aux yeux qui sourient en permanence derrière des lunettes rondes. Mais avec sa fortune de 100 milliards de dollars, sa place de deuxième homme le plus riche du monde, son passé de PDG d’un des joyaux de l’industrie américaine du software, ses réseaux planétaires et la force de frappe de sa Fondation philanthropique dotée d’un fonds de 40 milliards, Bill Gates représente à lui tout seul une entreprise de «soft power» mondiale.</p>
</div>
</div>

Я подготовил кодовую ручку по адресу: https://codepen.io/piotr-linski/pen/BaozEVZ Незначительная проблема: По неясной для меня причине в коде ручки также видно содержимое вкладок других вкладок.

Любые предложения, особенно как решить основную проблему высоко ценятся.

1 Ответ

0 голосов
/ 01 мая 2020

Мне удалось создать альтернативное решение для отображения разных вертикальных областей на нескольких вкладках. Это альтернативное решение основано на: - следующем jquery tabs-script, проверке этой ссылки ... - следующем вертикальном сценарии выделения, проверке этой ссылки ... 

<style>
#marqueecontainer {
position: relative;
width: 100%; /*marquee width */
height: 300px; /*marquee height */
background-color: #F5F5F5;
overflow: hidden;
// border: 2px solid purple;
// padding: 2px;
margin-left: 3px;
padding-left: 0px;
// margin-top: -5px;
}

#vmarquee {
position: absolute;
width: 100%;
}
</style>

<link href="https://www.aeternus.org/linski_tabs/vermar.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.aeternus.org/linski_tabs/jquery.fwd_tabs.js"></script>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- � Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=1500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1.0 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>

<script>
$(function() { $(".tabs").fwd_tabs(); });
</script>

 <div class="tabs">
  <ul class="tab-menu">
   <li><a href="#tab-NL">Quotes - NL</a></li>
   <li><a href="#tab-EN">Quotes - EN</a></li>
   <li><a href="#tab-DE">Quotes - DE</a></li>
   <li><a href="#tab-NL">Quotes - FR</a></li>
  </ul>

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee">




<div class="tab-content" id="tab-NL">
<br><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Wees niet bang voor schaduwen, het betekent dat er ergens dichtbij licht is.</div>
<div class="right">Ruth Renkle</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Waarom moeilijk doen als het samen kan?</div>
<div class="right">Loesje</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Hij die anderen kent is geleerd. Hij die zichzelf kent, is wijs.</div>
<div class="right">Lao Tse</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Probeer eerst te begrijpen, dan pas begrepen te worden.</div>
<div class="right">Stephen Covey</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Zorg ervoor dat de stem van je hart luider is dan die van je ego.</div>
<div class="right">Chinees gezegde</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Er ontstaat geen harmonie als iedereen dezelfde noot zingt.</div>
<div class="right">Doug Floyd</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Hoewel iedereen uniek is, durft slechts een enkeling anders te zijn.</div>
<div class="right">Wouter Kloosterman</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
De mens die zich niet ontwikkelt, loopt de kans ingewikkeld te blijven.</div>
<div class="right">Eric de Waard</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Bij een overwinning op jezelf is er geen verliezer.</div>
<div class="right">Olaf Hoenson</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Vriendschap is liefde op het eerste woord.</div>
<div class="right">Harry Mulisch</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Mensen met vaststaande antwoorden zijn bang voor de vraag.</div>
<div class="right">Kees Tillema</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
De dichter is een beeldhouwer die muziek schildert.</div>
<div class="right">Clem Schouwenaars</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Wie de toekomst als tegenwind ervaart, loopt in de verkeerde richting.</div>
<div class="right">Robbert Nijenhuis</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Misschien is ‘misschien’ het juiste woord voor zeker.</div>
<div class="right">Marc van Halsendaele</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Groot worden doe je door klein te blijven.</div>
<div class="right">Eckart Wintzen</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Het schijnt dat mensen die fouten durven maken ook veel creatiever zijn.</div>
<div class="right">Loesje</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Onze manier van aandacht geven, maakt het verschil tussen au en wow.</div>
<div class="right">&nbsp;&nbsp;&nbsp;&nbsp;Isaac Shapiro</div><br><br>

</div>



<div class="tab-content" id="tab-EN">
<br><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Change is painful in the beginning, but worth it in the end.</div>
<div class="right">Jaykaran Sagar</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Raise your words, not your voice. It is rain that grows flowers, not thunder.</div>
<div class="right">Rumi</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
We are not retreating, we are just advancing in another direction.</div>
<div class="right">General D. McArthur</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Be the change you wish to see in the world.</div>
<div class="right">Mahatma Gandhi</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Each of us can make a difference. Together we make change.</div>
<div class="right">Barbara Mikulski</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Small opportunities are often the beginning of great enterprises.</div>
<div class="right">Demosthenes</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Minds are like parachutes, they work best when open.</div>
<div class="right">Thomas Dewar</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Let's make the impossible possible as possible as soon as possible.</div>
<div class="right">Pierre Linssen</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
A good plan today is better than a perfect plan tomorrow.</div>
<div class="right">George Patton</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
All things are difficult before they are easy.</div>
<div class="right">Thomas Fuller</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Honesty is being able to tell the truth without hurting anyone.</div>
<div class="right">Federico Fellini</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
It is harder to crack a prejudice than an atom.</div>
<div class="right">Albert Einstein</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Either you run the day, or the day runs you.</div>
<div class="right">Jim Rohn</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Ideologies separate us. Dreams and anguish bring us together.</div>
<div class="right">Eugene Ionesco</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Most smiles are started by another smile.</div>
<div class="right">Frank A. Clark</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
The only way to have a friend ist to be one.</div>
<div class="right">Ralph Waldo Emerson</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
The greatest amount of wasted time is the time not getting started.</div>
<div class="right">&nbsp;&nbsp;&nbsp;&nbsp;Dawson Trotman</div><br><br>
</div>






<div class="tab-content" id="tab-DE">
<br><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Fang an! Dadurch alleine kann das Unmögliche möglich werden.</div>
<div class="right">Thomas Carlyle</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Das Neue ist immer risikoreich. Denn für das Neue gibt es keine Erfahrungen.</div>
<div class="right">N. Blüm</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Wer glaubt etwas zu sein, hat aufgehört etwas zu werden.</div>
<div class="right">Philip Rosenthal</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Ich kann, weil ich will, was ich muss.</div>
<div class="right">Immanuel Kant</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Die Kinder sind die wirklichen Lehrmeister der Menschheit.</div>
<div class="right">Peter Rosegger</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Wer seine Schwächen nicht kennt, hat eine Stärke zu wenig.</div>
<div class="right">Lothar Habler</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Das Wichtigste in einem Gespräch ist zu hören, was nicht gesagt wurde.</div>
<div class="right">Peter F. Drucker</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Das Unmögliche ist das, was man nie versucht hat.</div>
<div class="right">Hans Günther Adler</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Lass deine Taten sein wie deine Worte. Und deine Worte wie dein Herz.</div>
<div class="right">Ludwig Uhland</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Wer etwas will, findet Wege. Wer etwas nicht will, findet Gründe.</div>
<div class="right">Dalai Lama</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Es gibt keine fünf oder sechs Weltwunder, sondern nur eines: die Liebe.</div>
<div class="right">Jacques Prévert</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Nicht: Es muß etwas geschehen, sondern: Ich muß etwas tun.</div>
<div class="right">Hans Scholl</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Interessante Selbstgespräche setzen einen klugen Partner voraus.</div>
<div class="right">Herbert George Wells</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Die Praxis sollte das Ergebnis des Nachdenkens sein, nicht umgekehrt.</div>
<div class="right">Hermann Hesse</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Die Gedankenfreiheit haben wir. Jetzt brauchen wir nur noch die Gedanken.</div>
<div class="right">Karl Kraus</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Optimisten leiden ohne zu klagen. Pessimisten klagen ohne zu leiden.</div>
<div class="right">Karl Farkas</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Wer wirklich Neues erdenken will, kann gar nicht genug, “verrückt” sein.</div>
<div class="right">&nbsp;&nbsp;&nbsp;&nbsp;Niels Bohr</div><br><br>

</div>





<div class="tab-content" id="tab-FR">
<br><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Rien n’est permanent, sauf le changement.</div>
<div class="right">Héraclite d’Ephèse</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Aimer, c’est savoir dire je t’aime sans parler.</div>
<div class="right">Victor Hugo</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
L’extraordinaire se trouve au chemin des gens ordinaires.</div>
<div class="right">Paulo Coelho</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Un vrai leader n’a pas besoin de conduire. Il suffit qu’il montre le chemin.</div>
<div class="right">Henry Miller</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Aucun homme n’a reçu de la nature le droit de commander aux autres.</div>
<div class="right">Denis Diderot</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Il ya une grande différence entre gagner beaucoup d’argent et être riche.</div>
<div class="right">Marlène Dietrich</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
La beauté commence au moment ou vous décidez d’être vous-même.</div>
<div class="right">Coco Chanel</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Celui qui ne rêve pas, est déjà mort, mais il ne le sait pas.</div>
<div class="right">Jo Coeijmans</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Celui qui ferme sa porte aux erreurs, la ferme aussi aux vérités.</div>
<div class="right">Tagore</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
L’arbre se sauve en laissant tomber ses feuilles.</div>
<div class="right">Pierre Jean Jouve</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Ecrire, c’est une façon de parler sans être interrompu.</div>
<div class="right">Carla Lane</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Grand est celui qui n’a pas perdu son coeur d’enfant.</div>
<div class="right">Mencius</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Il est bon de lire entre les lignes, cela fatigue moins les yeux.</div>
<div class="right">Sacha Guitry</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Être un homme, c’est bien. Mais il y a encore mieux: être humain.</div>
<div class="right">Jules Romains</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Ce qui compte, c’est l’intensité d’une vie, pas la dureé d’une vie.</div>
<div class="right">Jacques Brel</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
Il faut vivre l’instant présent, jour après jour … ici et maintenant.</div>
<div class="right">Simone Elkeles</div><br><br>

<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>&nbsp;&nbsp;
On oublie le dernier rêve; on se remémore toujours le premier amour.</div>
<div class="right">&nbsp;&nbsp;&nbsp;&nbsp;Michel Bouthot</div><br><br>
</div>

</div>
</div>
</div>

Демонстрацию codepen, включая HTML, CSS и JS, , можно найти здесь ...

Тем не менее, я все еще открыт для предложения, чтобы решить мой начальный вопрос. И предложения по дальнейшему улучшению альтернативного решения приветствуются.

...