JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<!-- PROFILES -->
<div class="stuffProfiles scroller">
<!-- PROFILE -->
<div class="profile">
<h1>Susan Miller</h1>
<h2>Helpdesk Assistant Los Dropos, CA</h2>
<p> Completely transformed the company's IT strategy to coordinate the
systems with the company's business objectives.
Helped to organise many events in the community while at school. </p>
<p>Can assist with: </p>
<ul>
<li> - PC software issues</li>
<li> - New equipment order</li>
<li> - Global economic crisis</li>
</ul>
</div>
<!-- /PROFILE -->
<!-- PROFILE -->
<div class="profile">
<h1>Susan Miller</h1>
<h2>Helpdesk Assistant Los Dropos, CA</h2>
<p> Completely transformed the company's IT strategy to coordinate the
systems with the company's business objectives.
Responsible for linking 300 retail outlets to corporate headquarters.
Managed 600+ employees and a $50 million operations budget.
Helped to organise many events in the community while at school. </p>
<p>Can assist with: </p>
</div>
<!-- /PROFILE -->
<!-- PROFILE -->
<div class="profile">
<h1>Susan Miller</h1>
<h2>Helpdesk Assistant Los Dropos, CA</h2>
<p> Helped to organise many events in the community while at school. </p>
<p>Can assist with: </p>
<ul>
<li> - PC software issues</li>
<li> - New equipment order</li>
<li> - Global economic crisis</li>
</ul>
</div>
<!-- /PROFILE -->
<!-- PROFILE -->
<div...
CSS
@charset "utf-8";
/* CSS Document */
* { margin: 0px; padding: 0px;}
.navi a { color: #000; font-family: Tahoma, Geneva, sans-serif; font-size: 14px;}
.navi a:hover { color: #000;}
.navi .next { position: absolute; right: 15px; top: 30px;}
.navi .prev { position: absolute; right: 35px; top: 30px;}
.scroller div { display: none;}
.scroller div:first-child { display: block;}
JavaScript
(function($) {
/*! Scroller
---------------------------------------------*/
$.fn.Scroller = function() {
//Set height
$('.scroller').each( function() {
var height = 0;
$(this).children('div').each(function() {
if ( height < $(this).height() ) {
height = $(this).height();
}
});
$(this).css("height", height + "px");
});
$('.scroller').each( function() {
var NextArrow = $(this).parent().find('.next');
var PrevArrow = $(this).parent().find('.prev');
// Set a timeout
var timeOut = setTimeout(nextNotice, 5000);
// pause on hover
$(this).hover(
function() { clearTimeout(timeOut);
}, function() { timeOut = setTimeout(nextNotice, 5000);
});
// Next notice function called on timeout or click
//set a flag that use to be an oberver to listen when the fadeIn done
var flag = true;
function nextNotice(event) {
var CurrentScrollerDiv = $(this).parent().find('.scroller');
if(!flag){
return false;
}
clearTimeout(timeOut);
flag = false;
timeOut = setTimeout(nextNotice, 5000);
if ($(CurrentScrollerDiv + ' div:visible').is(CurrentScrollerDiv + ' div:last-child')) {
$(CurrentScrollerDiv + ' div:visible').fadeOut(300);
$(CurrentScrollerDiv + ' div:first-child').fadeIn("slow",function(){
flag =...