WordCycle

Cycles some words

by Sree K

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/jquery.mark.es6.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/superhero/bootstrap.min.css">
<script src="https://googledrive.com/host/0B8EMN-mA1X_mWGlEdUJPVHVPRXM/initsticky.js"></script>
<div class="section20230">
  <nav>
    <ul class="hidden20230 menu20230">
      <li>
        <div class="panel panel-default">
          <div class="search row">
            <div class="col-xs-6">
              <input type="text" name="keyword" class="form-control input-sm" placeholder="Type here what you are looking for...">
            </div>
            <div class="col-xs-6">
              <input type="checkbox" name="opt[]" value="separateWordSearch" unchecked> separate word search &nbsp;&nbsp;&nbsp;
              <input type="checkbox" name="opt[]" value="diacritics" checked> diacritics
              <br>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </nav>
</div>


<div class="panel panel-default">
  <div class="panel-body context">
    <div id="lecontainer11111">
      <h2>Do You Have These Frugal Living Habits</h2>
      <div>

        <p>Frugal living requires skills and ways of looking at things that help you take advantage of the money-saving opportunities in life. The truly frugal person makes these into habits. Six of these habits are outlined below. These are techniques that
          can be learned in a matter of a day or two, and made into new habits a few weeks. Then they will save money for you for the rest of your life.
          <br />
          <br /> 1. Frugal living requires a knowledge of values. How can you get a great deal on a car if you don’t know what a great deal is. Get in the habit of educating yourself on prices, especially before you’re ready to buy...

CSS

div.search span,
div.search input[name="keyword"] {
  display: block;
}

div.search input[name="keyword"] {
  margin-top: 4px;
}

div.panel {
  margin-bottom: 15px;
}

div.panel .panel-body p:last-child {
  margin-bottom: 0;
}

mark {
  padding: 0;
}

.col-xs-6 {
  float: left;
}

.search.row {
  background: #333333
}

.ui-grid-c .ui-block-a {
  clear: left;
}

.ui-grid-c >:nth-child(n) {
  /* width: 25%; */
  margin-right: 2px;
}

.ui-grid-c .ui-block-a,
.ui-grid-c .ui-block-b,
.ui-grid-c .ui-block-c,
.ui-grid-c .ui-block-d {
  /* width: 24.925%; */
}

.ui-block-a,
.ui-block-b,
.ui-block-c,
.ui-block-d,
.ui-block-e {
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.ui-grid-a,
.ui-grid-b,
.ui-grid-c,
.ui-grid-d {
  overflow: hidden;
}

.ui-btn-inner,
.ui-btn-text {
  -webkit-border-radius: inherit;
  border-radius: inherit;
}

.ui-btn-inner {
  font-size: 12px;
  padding: .6em 20px;
  min-width: .75em;
  display: block;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  zoom: 1;
}

.ui-btn-inner {
  border-top: 1px solid #fff;
  border-color: rgba(255, 255, 255, .3);
}


/* Inherited from a.searchButtonClickText_h.ui-btn.ui-btn-up-c.ui-shadow.ui-btn-inline*/

.ui-btn-up-c:visited,
.ui-btn-up-c a.ui-link-inherit {
  color: #2f3e46/*{c-bup-color}*/
  ;
}

ul.menu20230 {
  height: 45px !important;
}

ul.menu20230 li {
  width: 100% !important;
}

ul.menu20230.hidden20230 {
  background-color: transparent !important;
}

ul.menu20230 li a {
  line-height: 40px;
  padding-bottom: 5px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

.ui-btn {
  display: block;
  text-align: center;
  cursor: pointer;
  position: relative;
  margin: .5em 0;
  padding: 0;
}

.ui-btn-up-c,
.ui-btn-hover-c,
.ui-btn-down-c {
  font-family:...

JavaScript

$.noConflict()

arrowOffset = 0;
var offsets = [];

jQuery(function($) {
  var mark = function(arrowOffset) {
    // Read the keyword
    var keyword = $("input[name='keyword']").val();

    // Determine selected options
    var options = {
      "filter": function(node, term, counter, totalCounter) {
        if (term === keyword && counter == arrowOffset) {
          return false;
        } else {
          return true;
        }
      },
      done: function() {
        var m = $('mark[data-markjs]');
        
        offsets = [];
        
        for (var i = 0; i < m.length; i++)
					offsets.push($(m[i]).offset().top);
			}
    };

    $("input[name='opt[]']").each(function() {
      options[$(this).val()] = $(this).is(":checked");
    });

    // Mark the keyword inside the context
    $(".context").unmark();
    $(".context").mark(keyword, options);
  };

  /* */

  $("input[name='keyword']").on("keyup", function(e) {
    e.preventDefault();
    
    if (e.which == 13 || e.which == 40) { // 13 = enter key, 40 = down arrow
      if (++arrowOffset >= offsets.length) {
      	arrowOffset = 0;
      }
    } else if (e.which == 38) { // 38 = up arrow
    	if (--arrowOffset < 0) {
      	arrowOffset = offsets.length - 1;
      }
    }
    
    $('html,body').animate({
      scrollTop: offsets[arrowOffset] - 100
    }, 100);
  });

  $("input[name='keyword']").on("keyup", mark);
  $("input[type='checkbox']").on("change", mark);
});