Home > database >  Combine ScrollTo with data-target click
Combine ScrollTo with data-target click

Time:01-31

Picking up an older stale project here. The jQuery is within Joomla but †here are only differences (i.e. $ is replaced at the beginning of the function with jQuery).

I have a Function which shows different content based on the DataTarget - See HTML below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div  style="--m: 10; --tan: 0.41"><p>
<div >
<!-- Top images -->
<div >
<div  data-target="influence-1" style="--i: 5"><p><a href="#influence-info" id="scrollTo"><img src="https:///explore.morningstarfilm.co.uk/images/influence/plato-cropped.webp" alt="Plato">Plato</a></p></div>
<div  data-target="influence-2" style="--i: 6"><p><a href="#influence-info" id="scrollTo"><img src="https:///explore.morningstarfilm.co.uk/images/influence/augustine-cropped.webp" alt="Augustine">Augustine</a></p></div>
<div  data-target="influence-3" style="--i: 7"><p><a href="#influence-info" id="scrollTo"><img src="https:///explore.morningstarfilm.co.uk/images/influence/Aquinas-cropped.webp" alt="Thomas Aquinas">Aquinas</a></p></div>
<div  data-target="influence-4" style="--i: 8"><p><a href="#influence-info" id="scrollTo"><img src="https:///explore.morningstarfilm.co.uk/images/influence/bradwardine-cropped.webp" alt="Thomas Bradwardine">Thomas Bradwardine</a></p></div>
<div  data-target="influence-5" style="--i: 9"><p><a href="#influence-info" id="scrollTo"><img src="https:///explore.morningstarfilm.co.uk/images/influence/padua-cropped.webp" alt="Marsilius of Padua">Marsilius of Padua</a></p></div>
</div>
<!-- Arrow -->
<div >
  <div ><div  id="arrow-1"></div></div>
  <div ><div  id="arrow-2"></div></div>
  <div ><div  id="arrow-3"></div></div>
</div>

<!-- Centre image -->
<div >
<div ><p><a><img src="https:///explore.morningstarfilm.co.uk/images/influence/wycliffe-cropped.webp" alt="Wycliffe" >Wycliffe</a></p></div>
</div>
<!-- Arrow -->
<div >
  <div ><div  id="arrow-4"></div></div>
  <div ><div  id="arrow-5"></div></div>
  <div ><div  id="arrow-6"></div></div>
</div>
<!-- Bottom Images-->
<div >
  <div  data-target="influence-6" style="--i: 10"><p><a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/jan-hus-cropped.webp" alt="">Jan Hus</a></p></div>
  <div  data-target="influence-7" style="--i: 4"><p><a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/luther-cropped.webp" alt="Martin Luther">Martin Luther</a></p></div>
  <div  data-target="influence-8" style="--i: 3"><p><a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/oldcastle-cropped.webp" alt="Sir John Oldcastle">Sir John Oldcastle</a></p></div>
  <div  data-target="influence-9" style="--i: 2"><p><a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/purvey-cropped.webp" alt="John Purvey">John Purvey</a></p></div>
  <div  data-target="influence-10" style="--i: 1"><p><a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/tyndale-cropped.webp" alt="William Tyndale">William Tyndale</a></p></div>
</div>
</div>

<!-- Information text -->
<div id="influence-info">
</div>
<div >
<div  id="influence-1">
  <h3>Plato & Aristotle</h3>
  <div >
    <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Plato.webp" alt="Plato">
    </div>
    <div > <!-- Text container -->
      <div><h4>Plato</h4>
      <p>Together, the ancient Greek philosophers Plato and Aristotle dominate Western thought. It has been said that all European philx§osophy consists merely of footnotes to Plato. Aristotle, Plato's most famous student, occupied a particularly important place in the life of the medieval church. Following the example of Thomas Aquinas, many scholars referred to him simply as 'The Philosopher'.
      </p>
    </div></div>
  <div >
    <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Aristotle.webp" alt="Aristotle">
    </div>
    <div > <!-- Text container -->
      <div><h4>Aristotle</h4>
      <p>Aristotle provided not merely a worldview, but a whole grammar of logic that profoundly defined how people thought and the questions they asked. Like all medieval Christendom, Wycliffe's understanding of reality was shaped by a careful synthesis of these pagan Greek philosophers with the Bible.
      </p>
    </div></div>
    <div >
      <a href="#" >Discover more: Nature of Reality, Summary of Being</a>
    </div>
  </div>
</div>
</div>
<div  id="influence-2">
  <h3>Augustine</h3>
  <div >
  <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Augustine.webp" alt="Augustine">
    </div>
    <div > <!-- Text container -->
      <p>A 4th century Bishop of a city in modern Algeria, Augustine is recognised as the most influential theologian of the classical age. In his day, Christianity was facing a challenge from a British monk, Pelagius, who said that with a bit of effort, human beings could follow Jesus example, and live without sin. Augustine set out from the Bible the whole system familiar to modern Christians: original sin, human helplessness, a sovereign God election and divine grace.
      </p>
    </div>
  <div >
    <div > <!-- Image container -->
      <img src="/images/influence/content/blank.webp">
    </div>
    <div > <!-- Text container -->
      <p>His “Confessions” - a poetical autobiography in the form of a prayer - continue to be read by Christians today, in every denomination around the world. 
      </p>
    </div>
    <div >
      <a href="#" >Discover more: God's Masterplan, Rome</a>
    </div>
  </div>
</div>
</div>
<div  id="influence-3">
  <h3>Thomas Aquinas</h3>
  <div >
  <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Aquinas.webp">
    </div>
    <div > <!-- Text container -->
      <p>While Wycliffe did not always agree with Thomas Aquinas, it is undeniable that the Italian theologian, friar, and philosopher had a deep impact on him.  Wycliffe could hardly have avoided Aquinas – no other thinker of the medieval church had such a massive legacy, and Aquinas quickly became the benchmark of orthodox theology. 
      </p>
    </div>
  <div >
    <div > <!-- Image container -->
      <img src="/images/influence/content/blank.webp">
    </div>
    <div > <!-- Text container -->
      <p>Aquinas' major book - Summa Theologica - is famously unfinished. Late in life, Aquinas had a mystical experience of God's presence and declared afterwards that all his writings were “like straw to me”. He wrote no more. Christians of many different denominations continue to respect, study and appreciate Aquinas.
      </p>
    </div>
    <div >
      <a href="#" >Discover more: God Exists, Friar Trilogy</a>
    </div>
  </div>
</div></div>
<div  id="influence-4">
  <h3>Thomas Bradwardine</h3>
  <div >
  <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Bradwardine-Oxford.webp">
    </div>
    <div > <!-- Text container -->
      <p>Oxford University could boast a long pedigree of some of the greatest mind of the Middle Ages, such as William of Ockham and John Duns Scotus. Wycliffe was impacted by many, but perhaps none so much as Thomas Bradwardine. 
      </p>
    </div>
  <div >
    <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Bradwardine.webp">
    </div>
    <div > <!-- Text container -->
      <p>Bradwardine was not only a theologian. He combined a mathematical mindset with a great curiosity about the world and became one of the pioneers in the development of modern science. He spoke against the theology of his day, advocating a robust return to Augustine's ideas of predestination, grace and original sin. He died during the Black Death, shortly after being appointed Archbishop of Canterbury. Wycliffe followed Bradwardine's lead and regarded him as a most incisive mentor. .
      </p>
    </div>
    <div >
      <a href="#" >Discover more: The Bible Studied Student</a>
    </div>
  </div>
</div></div>
<div  id="influence-5">
  <h3>Marsilius of Padua</h3>
  <div >
  <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Marsilius-of-Padua.webp">
    </div>
    <div > <!-- Text container -->
      <p>It is difficult to know how much Wycliffe studied the work of the scholar Marsilius of Padua. His enemies, however, were quick to make the connection.  A rector of the Sorbonne University in Paris, Marsilius had been declared a heretic by the Pope after writing an inflammatory book called “Defender of the Peace”. 
      </p>
    </div>
  <div >
    <div > <!-- Image container -->
      <img src="/images/influence/content/blank.webp">
    </div>
    <div > <!-- Text container -->
      <p>A pioneer of political democracy in the state, Marsilius argued from the Bible that democracy should also apply in the church. Priests and bishops should be elected by the whole body of Christians. These leaders should follow the path of Jesus, choosing to serve rather than be served; to give rather than receive. Whatever the connection, Wycliffe's ideas on Dominion overlap closely with Marsilius'.
      </p>
    </div>
    <div >
      <a href="#" >Discover more: “The Right to Rule” Heretic</a>
    </div>
  </div>
</div></div>
<div  id="influence-6">
  <h3>Jan Hus</h3>
  <div >
  <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Jan-Hus.webp">
    </div>
    <div > <!-- Text container -->
      <p>Not all Wycliffe's students were English. International scholars carried his ideas – and sometimes his books – out across Europe. Jan Hus, Dean of Theology at the University in Prague, was fascinated by Wycliffe and found in his writings the answers to some questions he had been struggling with. He began to teach Wycliffe's philosophy in the classroom, and then to preach his theology in the church.
      </p>
    </div>
  <div >
    <div > <!-- Image container -->
      <img src="/images/influence/content/blank.webp">
    </div>
    <div > <!-- Text container -->
      <p>Hus was a charismatic preacher and inspirational reformer, challenging corruption and advocating a new understanding of what it meant to be the Church. Many followed him and he became a national hero. When the Council of Constance burned him for heresy in 1415, Bohemia erupted in full-throated religious revolution.
      </p>
    </div>
    <div >
      <a href="#" >Discover more: Constance, Prague</a>
    </div>
  </div>
</div></div>
<div  id="influence-7">
  <h3>Martin Luther</h3>
  <div >
  <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Plato.webp">
    </div>
    <div > <!-- Text container -->
      <p>Few people occupy such a massive place in the history of the Christian Church as Martin Luther. A German monk who appeared to single-handedly start the Protestant Reformation, Luther became a legend in his own lifetime. 
      </p>
    </div>
  <div >
    <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Aristotle.webp">
    </div>
    <div > <!-- Text container -->
      <p>The image of Luther nailing his famous 95 Theses to the main door of the church in Wittenberg has become an icon for the whole Reformation. For Luther, however, it was just one more step on his journey of spiritual discovery and theological liberation.</p>
      <p>Luther was not directly influenced by Wycliffe, yet Wycliffe foreshadowed many of the themes and principles that would emerge in the Protestant Reformation. He was a sign of things to come. 
      </p>
    </div>
    <div >
      <a href="#" >Discover more: God Exists, Friar Trilogy</a>
    </div>
  </div>
</div></div>
<div  id="influence-8">
  <h3>Sir John Oldcastle</h3>
  <div >
  <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Plato.webp">
    </div>
    <div > <!-- Text container -->
      <p>The Lollard movement inspired by John Wycliffe found followers from all walks of life. Many were from the lower classes, but some were noblemen. Sir John Oldcastle braved the anger of the church by speaking up in Parliament for tolerance towards the Lollards. 
      </p>
    </div>
  <div >
    <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Aristotle.webp">
    </div>
    <div > <!-- Text container -->
      <p>Soon Oldcastle found himself in the Tower of London, sentenced to death as a heretic. Refusing to go quietly, he escaped and attempted to raise an army of Lollards. He hoped to bring down the King and install a new government to rule England on Wycliffe's principles. The rebellion was an utter failure. Oldcastle was killed and the Lollards were now seen not only as heretics, but traitors also.
      </p>
    </div>
    <div >
      <a href="#" >Discover more: Legend, God Rules</a>
    </div>
  </div>
</div></div>
<div  id="influence-9">
  <h3>John Purvey</h3>
  <div >
  <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Plato.webp">
    </div>
    <div > <!-- Text container -->
      <p>Wycliffe's curate in Lutterworth, John Purvey remained one of Wycliffe's closest friends and supporters. Many scholars believe that a large proportion of the Wycliffe Bible was the result of the work of Purvey, rather than of Wycliffe himself.  
      </p>
    </div>
  <div >
    <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Aristotle.webp">
    </div>
    <div > <!-- Text container -->
      <p>After Wycliffe's death, John Purvey became one of the leaders of the Lollard movement. This grouping did not form any organisation or network, but continued to teach and follow Wycliffe's ideas. Focussed on a spiritual connection with God, these men and women gathered around the Bible, and read it to each other. Like Wycliffe himself, the Lollards were denounced as heretics, and Purvey spent more than ten years in prison.
      </p>
    </div>
    <div >
      <a href="#" >Discover more: “Spreading the Gospel” Wycliffe's Bible</a>
    </div>
  </div>
</div></div>
<div  id="influence-10">
  <h3>William Tyndale</h3>
  <div >
  <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Plato.webp">
    </div>
    <div > <!-- Text container -->
      <p>The English Reformation during the reign of Henry VIII took place 150 years after Wycliffe. Much of the drama of the story is found in Henry's personal life, and his famous six wives. One of the most influential moments, however, came first: William Tyndale published the New Testament in English.
      </p>
    </div>
  <div >
    <div > <!-- Image container -->
      <img src="/images/influence/content/INFLUENCE-Aristotle.webp">
    </div>
    <div > <!-- Text container -->
      <p>Like Wycliffe, Tyndale believed that nothing was more important than reading the Word of God. Unlike Wycliffe, Tyndale had the advantage of the printing press. 16,000 copies were despatched across England within ten years. Henry may have shaped the Reformation for his own purposes, but it was the English Bible that fuelled it, as it had fuelled the Lollard movement more than a century earlier.
      </p>
    </div>
    <div >
      <a href="#" >Discover more: Wycliffe's Bible The Truth of Sacred Scripture</a>
    </div>
  </div>
</div>
</div></div>

I then have a Function which correctly shows the Datatarget on clicking the relevant element:

$(document)
  .on("click", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const currentElement = $(this);
    const dataTarget = currentElement.data("target");

    const dataTargetElem = $("div.timeline-info#"   dataTarget);
    $(".timeline-pills .timeline-element").removeClass("active");
    currentElement.addClass("active");

    $(".timeline-info").hide();
    dataTargetElem.show();
  });

I have found a ScrollTp function but I'm not sure how to integrate it within the above:

// Scroll to section
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.size() === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $(id).offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

You can see the current work in progress here. Could anybody assist with me combining these two to achieve the scroll to the influence-info section? Thank you so much in advance.

CodePudding user response:

The scroll script was slightly old

I fixed it by changing your id="scrollTo" to and changing size() to .length

$(document)
  .on("click", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const currentElement = $(this);
    const dataTarget = currentElement.data("target");

    const dataTargetElem = $("div.timeline-info#"   dataTarget);
    $(".timeline-pills .timeline-element").removeClass("active");
    currentElement.addClass("active");

    $(".timeline-info").hide();
    dataTargetElem.show();
  });


// Scroll to section
$(document).on('click', '.scrollTo', function(e) {
  e.preventDefault();
  // target element id
  const id = $(this).attr('href');
  // target element
  const $id = $(id);
  if ($id.length === 0) {
    return;
  }
  // top position relative to the document
  const pos = $id.offset().top;
  // animated top scrolling
  $('body, html').animate({
    scrollTop: pos
  });
});
img { height: 200px }
<base href="https://explore.morningstarfilm.co.uk/influence" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

<div  style="--m: 10; --tan: 0.41">
  <p>
    <div >
      <!-- Top images -->
      <div >
        <div  data-target="influence-1" style="--i: 5">
          <p>
            <a href="#influence-info" ><img src="https:///explore.morningstarfilm.co.uk/images/influence/plato-cropped.webp" alt="Plato">Plato</a>
          </p>
        </div>
        <div  data-target="influence-2" style="--i: 6">
          <p>
            <a href="#influence-info" ><img src="https:///explore.morningstarfilm.co.uk/images/influence/augustine-cropped.webp" alt="Augustine">Augustine</a>
          </p>
        </div>
        <div  data-target="influence-3" style="--i: 7">
          <p>
            <a href="#influence-info" ><img src="https:///explore.morningstarfilm.co.uk/images/influence/Aquinas-cropped.webp" alt="Thomas Aquinas">Aquinas</a>
          </p>
        </div>
        <div  data-target="influence-4" style="--i: 8">
          <p>
            <a href="#influence-info" ><img src="https:///explore.morningstarfilm.co.uk/images/influence/bradwardine-cropped.webp" alt="Thomas Bradwardine">Thomas Bradwardine</a>
          </p>
        </div>
        <div  data-target="influence-5" style="--i: 9">
          <p>
            <a href="#influence-info" ><img src="https:///explore.morningstarfilm.co.uk/images/influence/padua-cropped.webp" alt="Marsilius of Padua">Marsilius of Padua</a>
          </p>
        </div>
      </div>
      <!-- Arrow -->
      <div >
        <div >
          <div  id="arrow-1"></div>
        </div>
        <div >
          <div  id="arrow-2"></div>
        </div>
        <div >
          <div  id="arrow-3"></div>
        </div>
      </div>

      <!-- Centre image -->
      <div >
        <div >
          <p>
            <a><img src="https:///explore.morningstarfilm.co.uk/images/influence/wycliffe-cropped.webp" alt="Wycliffe" >Wycliffe</a>
          </p>
        </div>
      </div>
      <!-- Arrow -->
      <div >
        <div >
          <div  id="arrow-4"></div>
        </div>
        <div >
          <div  id="arrow-5"></div>
        </div>
        <div >
          <div  id="arrow-6"></div>
        </div>
      </div>
      <!-- Bottom Images-->
      <div >
        <div  data-target="influence-6" style="--i: 10">
          <p>
            <a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/jan-hus-cropped.webp" alt="">Jan Hus</a>
          </p>
        </div>
        <div  data-target="influence-7" style="--i: 4">
          <p>
            <a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/luther-cropped.webp" alt="Martin Luther">Martin Luther</a>
          </p>
        </div>
        <div  data-target="influence-8" style="--i: 3">
          <p>
            <a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/oldcastle-cropped.webp" alt="Sir John Oldcastle">Sir John Oldcastle</a>
          </p>
        </div>
        <div  data-target="influence-9" style="--i: 2">
          <p>
            <a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/purvey-cropped.webp" alt="John Purvey">John Purvey</a>
          </p>
        </div>
        <div  data-target="influence-10" style="--i: 1">
          <p>
            <a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/tyndale-cropped.webp" alt="William Tyndale">William Tyndale</a>
          </p>
        </div>
      </div>
    </div>

    <!-- Information text -->
    <div id="influence-info">
    </div>
    <div >
      <div  id="influence-1">
        <h3>Plato & Aristotle</h3>
        <div >
          <div >
            <!-- Image container -->
            <img src="/images/influence/content/INFLUENCE-Plato.webp" alt="Plato">
          </div>
          <div >
            <!-- Text container -->
            <div>
              <h4>Plato</h4>
              <p>Together, the ancient Greek philosophers Plato and Aristotle dominate Western thought. It has been said that all European philx§osophy consists merely of footnotes to Plato. Aristotle, Plato's most famous student, occupied a particularly
                important place in the life of the medieval church. Following the example of Thomas Aquinas, many scholars referred to him simply as 'The Philosopher'.
              </p>
            </div>
          </div>
          <div >
            <div >
              <!-- Image container -->
              <img src="/images/influence/content/INFLUENCE-Aristotle.webp" alt="Aristotle">
            </div>
            <div >
              <!-- Text container -->
              <div>
                <h4>Aristotle</h4>
                <p>Aristotle provided not merely a worldview, but a whole grammar of logic that profoundly defined how people thought and the questions they asked. Like all medieval Christendom, Wycliffe's understanding of reality was shaped by a careful
                  synthesis of these pagan Greek philosophers with the Bible.
                </p>
              </div>
            </div>
            <div >
              <a href="#" >Discover more: Nature of Reality, Summary of Being</a>
            </div>
          </div>
        </div>
      </div>
      <div  id="influence-2">
        <h3>Augustine</h3>
        <div >
          <div >
            <!-- Image container -->
            <img src="/images/influence/content/INFLUENCE-Augustine.webp" alt="Augustine">
          </div>
          <div >
            <!-- Text container -->
            <p>A 4th century Bishop of a city in modern Algeria, Augustine is recognised as the most influential theologian of the classical age. In his day, Christianity was facing a challenge from a British monk, Pelagius, who said that with a bit of effort,
              human beings could follow Jesus example, and live without sin. Augustine set out from the Bible the whole system familiar to modern Christians: original sin, human helplessness, a sovereign God election and divine grace.
            </p>
          </div>
          <div >
            <div >
              <!-- Image container -->
              <img src="/images/influence/content/blank.webp">
            </div>
            <div >
              <!-- Text container -->
              <p>His “Confessions” - a poetical autobiography in the form of a prayer - continue to be read by Christians today, in every denomination around the world.
              </p>
            </div>
            <div >
              <a href="#" >Discover more: God's Masterplan, Rome</a>
            </div>
          </div>
        </div>
      </div>
      <div  id="influence-3">
        <h3>Thomas Aquinas</h3>
        <div >
          <div >
            <!-- Image container -->
            <img src="/images/influence/content/INFLUENCE-Aquinas.webp">
          </div>
          <div >
            <!-- Text container -->
            <p>While Wycliffe did not always agree with Thomas Aquinas, it is undeniable that the Italian theologian, friar, and philosopher had a deep impact on him. Wycliffe could hardly have avoided Aquinas – no other thinker of the medieval church had
              such a massive legacy, and Aquinas quickly became the benchmark of orthodox theology.
            </p>
          </div>
          <div >
            <div >
              <!-- Image container -->
              <img src="/images/influence/content/blank.webp">
            </div>
            <div >
              <!-- Text container -->
              <p>Aquinas' major book - Summa Theologica - is famously unfinished. Late in life, Aquinas had a mystical experience of God's presence and declared afterwards that all his writings were “like straw to me”. He wrote no more. Christians of many
                different denominations continue to respect, study and appreciate Aquinas.
              </p>
            </div>
            <div >
              <a href="#" >Discover more: God Exists, Friar Trilogy</a>
            </div>
          </div>
        </div>
      </div>
      <div  id="influence-4">
        <h3>Thomas Bradwardine</h3>
        <div >
          <div >
            <!-- Image container -->
            <img src="/images/influence/content/INFLUENCE-Bradwardine-Oxford.webp">
          </div>
          <div >
            <!-- Text container -->
            <p>Oxford University could boast a long pedigree of some of the greatest mind of the Middle Ages, such as William of Ockham and John Duns Scotus. Wycliffe was impacted by many, but perhaps none so much as Thomas Bradwardine.
            </p>
          </div>
          <div >
            <div >
              <!-- Image container -->
              <img src="/images/influence/content/INFLUENCE-Bradwardine.webp">
            </div>
            <div >
              <!-- Text container -->
              <p>Bradwardine was not only a theologian. He combined a mathematical mindset with a great curiosity about the world and became one of the pioneers in the development of modern science. He spoke against the theology of his day, advocating a
                robust return to Augustine's ideas of predestination, grace and original sin. He died during the Black Death, shortly after being appointed Archbishop of Canterbury. Wycliffe followed Bradwardine's lead and regarded him as a most incisive
                mentor. .
              </p>
            </div>
            <div >
              <a href="#" >Discover more: The Bible Studied Student</a>
            </div>
          </div>
        </div>
      </div>
      <div  id="influence-5">
        <h3>Marsilius of Padua</h3>
        <div >
          <div >
            <!-- Image container -->
            <img src="/images/influence/content/INFLUENCE-Marsilius-of-Padua.webp">
          </div>
          <div >
            <!-- Text container -->
            <p>It is difficult to know how much Wycliffe studied the work of the scholar Marsilius of Padua. His enemies, however, were quick to make the connection. A rector of the Sorbonne University in Paris, Marsilius had been declared a heretic by the
              Pope after writing an inflammatory book called “Defender of the Peace”.
            </p>
          </div>
          <div >
            <div >
              <!-- Image container -->
              <img src="/images/influence/content/blank.webp">
            </div>
            <div >
              <!-- Text container -->
              <p>A pioneer of political democracy in the state, Marsilius argued from the Bible that democracy should also apply in the church. Priests and bishops should be elected by the whole body of Christians. These leaders should follow the path of
                Jesus, choosing to serve rather than be served; to give rather than receive. Whatever the connection, Wycliffe's ideas on Dominion overlap closely with Marsilius'.
              </p>
            </div>
            <div >
              <a href="#" >Discover more: “The Right to Rule” Heretic</a>
            </div>
          </div>
        </div>
      </div>
      <div  id="influence-6">
        <h3>Jan Hus</h3>
        <div >
          <div >
            <!-- Image container -->
            <img src="/images/influence/content/INFLUENCE-Jan-Hus.webp">
          </div>
          <div >
            <!-- Text container -->
            <p>Not all Wycliffe's students were English. International scholars carried his ideas – and sometimes his books – out across Europe. Jan Hus, Dean of Theology at the University in Prague, was fascinated by Wycliffe and found in his writings the
              answers to some questions he had been struggling with. He began to teach Wycliffe's philosophy in the classroom, and then to preach his theology in the church.
            </p>
          </div>
          <div >
            <div >
              <!-- Image container -->
              <img src="/images/influence/content/blank.webp">
            </div>
            <div >
              <!-- Text container -->
              <p>Hus was a charismatic preacher and inspirational reformer, challenging corruption and advocating a new understanding of what it meant to be the Church. Many followed him and he became a national hero. When the Council of Constance burned
                him for heresy in 1415, Bohemia erupted in full-throated religious revolution.
              </p>
            </div>
            <div >
              <a href="#" >Discover more: Constance, Prague</a>
            </div>
          </div>
        </div>
      </div>
      <div  id="influence-7">
        <h3>Martin Luther</h3>
        <div >
          <div >
            <!-- Image container -->
            <img src="/images/influence/content/INFLUENCE-Plato.webp">
          </div>
          <div >
            <!-- Text container -->
            <p>Few people occupy such a massive place in the history of the Christian Church as Martin Luther. A German monk who appeared to single-handedly start the Protestant Reformation, Luther became a legend in his own lifetime.
            </p>
          </div>
          <div >
            <div >
              <!-- Image container -->
              <img src="/images/influence/content/INFLUENCE-Aristotle.webp">
            </div>
            <div >
              <!-- Text container -->
              <p>The image of Luther nailing his famous 95 Theses to the main door of the church in Wittenberg has become an icon for the whole Reformation. For Luther, however, it was just one more step on his journey of spiritual discovery and theological
                liberation.
              </p>
              <p>Luther was not directly influenced by Wycliffe, yet Wycliffe foreshadowed many of the themes and principles that would emerge in the Protestant Reformation. He was a sign of things to come.
              </p>
            </div>
            <div >
              <a href="#" >Discover more: God Exists, Friar Trilogy</a>
            </div>
          </div>
        </div>
      </div>
      <div  id="influence-8">
        <h3>Sir John Oldcastle</h3>
        <div >
          <div >
            <!-- Image container -->
            <img src="/images/influence/content/INFLUENCE-Plato.webp">
          </div>
          <div >
            <!-- Text container -->
            <p>The Lollard movement inspired by John Wycliffe found followers from all walks of life. Many were from the lower classes, but some were noblemen. Sir John Oldcastle braved the anger of the church by speaking up in Parliament for tolerance towards
              the Lollards.
            </p>
          </div>
          <div >
            <div >
              <!-- Image container -->
              <img src="/images/influence/content/INFLUENCE-Aristotle.webp">
            </div>
            <div >
              <!-- Text container -->
              <p>Soon Oldcastle found himself in the Tower of London, sentenced to death as a heretic. Refusing to go quietly, he escaped and attempted to raise an army of Lollards. He hoped to bring down the King and install a new government to rule England
                on Wycliffe's principles. The rebellion was an utter failure. Oldcastle was killed and the Lollards were now seen not only as heretics, but traitors also.
              </p>
            </div>
            <div >
              <a href="#" >Discover more: Legend, God Rules</a>
            </div>
          </div>
        </div>
      </div>
      <div  id="influence-9">
        <h3>John Purvey</h3>
        <div >
          <div >
            <!-- Image container -->
            <img src="/images/influence/content/INFLUENCE-Plato.webp">
          </div>
          <div >
            <!-- Text container -->
            <p>Wycliffe's curate in Lutterworth, John Purvey remained one of Wycliffe's closest friends and supporters. Many scholars believe that a large proportion of the Wycliffe Bible was the result of the work of Purvey, rather than of Wycliffe himself.
            </p>
          </div>
          <div >
            <div >
              <!-- Image container -->
              <img src="/images/influence/content/INFLUENCE-Aristotle.webp">
            </div>
            <div >
              <!-- Text container -->
              <p>After Wycliffe's death, John Purvey became one of the leaders of the Lollard movement. This grouping did not form any organisation or network, but continued to teach and follow Wycliffe's ideas. Focussed on a spiritual connection with God,
                these men and women gathered around the Bible, and read it to each other. Like Wycliffe himself, the Lollards were denounced as heretics, and Purvey spent more than ten years in prison.
              </p>
            </div>
            <div >
              <a href="#" >Discover more: “Spreading the Gospel” Wycliffe's Bible</a>
            </div>
          </div>
        </div>
      </div>
      <div  id="influence-10">
        <h3>William Tyndale</h3>
        <div >
          <div >
            <!-- Image container -->
            <img src="/images/influence/content/INFLUENCE-Plato.webp">
          </div>
          <div >
            <!-- Text container -->
            <p>The English Reformation during the reign of Henry VIII took place 150 years after Wycliffe. Much of the drama of the story is found in Henry's personal life, and his famous six wives. One of the most influential moments, however, came first:
              William Tyndale published the New Testament in English.
            </p>
          </div>
          <div >
            <div >
              <!-- Image container -->
              <img src="/images/influence/content/INFLUENCE-Aristotle.webp">
            </div>
            <div >
              <!-- Text container -->
              <p>Like Wycliffe, Tyndale believed that nothing was more important than reading the Word of God. Unlike Wycliffe, Tyndale had the advantage of the printing press. 16,000 copies were despatched across England within ten years. Henry may have
                shaped the Reformation for his own purposes, but it was the English Bible that fuelled it, as it had fuelled the Lollard movement more than a century earlier.
              </p>
            </div>
            <div >
              <a href="#" >Discover more: Wycliffe's Bible The Truth of Sacred Scripture</a>
            </div>
          </div>
        </div>
      </div>
    </div>

  • Related