JSFiddle - React, Tailwind, and code Playground

by codecowboy

HTML

<script src="http://breastcancermosaic.gehealthcare.com/wp-content/themes/mosiac/inc/js/cufon-yui.js"></script>
<script src="http://breastcancermosaic.gehealthcare.com/wp-content/themes/mosiac/inc/js/GE_Inspira_400-GE_Inspira_700.font.js"></script>
<div id="post_page">
<div class="story type-story status-publish">
        <div id="scroll_buttons">
               <div id="btn_scroll_up"></div>
                <div id="btn_scroll_down"></div>
            </div>
    <div class="entry-content">
        <h2 class="title">Cufon replaced title</h2><p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque tristique venenatis. Nullam vestibulum quam ac enim mollis ac feugiat orci pretium. Sed pretium cursus massa, vel mollis sem consequat sed. Etiam at tortor sem. In sollicitudin urna massa. In hac habitasse platea dictumst. Maecenas ac arcu ut felis dignissim pellentesque. Nullam tellus justo, tempor sit amet mattis luctus, feugiat quis nulla. In hac habitasse platea dictumst. Mauris a lectus turpis. Ut eget velit sed augue porta facilisis. Pellentesque facilisis feugiat risus, non iaculis lectus iaculis luctus. Vestibulum pharetra fringilla odio eu facilisis. Vivamus ligula purus, gravida in varius vel, ultrices sed dolor. Cras a sapien eget elit fringilla varius at in leo.</p>
<p>
    Integer vehicula dictum est, non ullamcorper metus pellentesque sed. Maecenas est quam, fringilla et pretium non, euismod et felis. Quisque cursus ultrices pharetra. Etiam facilisis eleifend justo, vitae ultrices ipsum mattis sed. Quisque augue tortor, faucibus sit amet elementum et, ornare sed lorem. Nullam lobortis commodo nulla, a feugiat metus placerat ultricies. Suspendisse vel commodo erat. Mauris at urna eros. Suspendisse hendrerit, ligula sed placerat gravida, libero lacus consequat enim, ac gravida mauris enim at libero. Donec ultrices ultrices enim eu rutrum. Suspendisse potenti.</p>
<p>
    Aliquam erat volutpat. Donec sed tellus diam. Nullam...

CSS

@charset "UTF-8";
body {
    font: 100%/1.4 Arial, Helvetica, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    color: #666666;
    overflow: hidden;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 10px;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    font-weight:bold;
}

p { font-weight:normal; }
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a{
    color: #42413C;
}

/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
    width: 960px;
    background: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose...

JavaScript

Cufon.replace('.entry-content .title');

mouseisdown = false;

    $('#btn_scroll_up').mousedown(function(event) {
        mouseisdown = true;
        ScrollUp();
    }).mouseup(function(event) {
        mouseisdown = false;
    });

    $('#btn_scroll_down').mousedown(function(event) {
        mouseisdown = true;
        ScrollDown();
    }).mouseup(function(event) {
        mouseisdown = false;
    }); 

    $(document).mousedown( function(event) { //This is to make sure the event stops if the mouse is no longer over the control
    }).mouseup(function(event) {
        mouseisdown = false;
    });

    function ScrollUp() {

      var topVal = parseInt($(".entry-content").css("top"),10); 
     
      if (topVal < 0 && !$(".entry-content").is(':animated') ) { //This is to stop it when it reaches the top
        $(".entry-content").animate({"top":topVal + 200 + 'px'}, 800, "easeInOutCubic");
        mosaic_p_position = $(".entry-content > p").last().offset().top; // this is the position of the last paragraph within the div
 
      }

    }


    function ScrollDown() {
      mosaic_p_position = $(".entry-content > p").last().offset().top;


      var topVal = parseInt($(".entry-content").css("top"),10);
      
         if( mosaic_p_position > 350
          && !$(".entry-content").is(':animated')) {  
          
        $('.entry-content').animate({"top":topVal - 200  + 'px'}, 800, "easeInOutCubic");
        mosaic_p_position = $(".entry-content > p").last().offset().top;
        

      }
    }