nefah

Horizontal scrolling table with Fixed first column

Answer to question on Sitepoint forums: https://www.sitepoint.com/community/t/table-scrolling-horizontally-and-vertically/262865/12

I've only just knocked this up a few minutes ago so needs testing.

It also assumes that you won't be having form fields or the like in the cells because the way this works is that the table is cloned and then positioned on top of the original table with absolute positioning. The original table is in a div that allows the table to scroll horizontally while the cloned div is placed out of that context and does not scroll.

The cells in the cloned table are hidden with css except for the first column. That allows the illusion of a fixed first column.

nefah

Bootstrap Button Loading

A Pen by jmalatia on CodePen.

License.

nefah

<h1 class="text-center">Turn classic bootstrap modal into loading popup <small>WHY? Because bootstrap is freakin awesome!</small></h1>
<div class="row">
  <div class="col-sm-6">
    <div class="button-wrap">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-default btn-lg btn-block" id="just_load_please">
    Open loading modal<br>
    <small>This function can also be triggered through jquery event listener or inside a juqery function</small>
  </button>
    </div>

nefah

<div class="search-results">
  <div class="container">
    <div class="fluid-container">
      <div class="col col3">
        <div class="search-form form-redux">
          <input type="text" class="search-box" placeholder="search" />
        </div>

        <div class="subnav search-suggestions">
          <ul>

nefah

Borderless Text Input

A Pen by ShaylonH on CodePen.

License.

nefah

<table class="table table-header-rotated">
  <thead>
    <tr>
      <!-- First column header is not rotated -->
      <th></th>
      <!-- Following headers are rotated -->
      <th class="rotate"><div><span>Column header 1</span></div></th>
        <th class="rotate"><div><span>Column header 2</span></div></th>
        <th class="rotate"><div><span>Column header 3</span></div></th>
        <th class="rotate"><div><span>Column header 4</span></div></th>

nefah

Bootstrap 4 Modal with Form

A Pen by cristina on CodePen.

License.

nefah

<div class="loading">Loading&#8230;</div>

nefah

Full Screen loader

A Pen by Tyler Brown on CodePen.

License.

nefah

Bootstrap Full Page Transitions

A Pen by Priscila S Cunha on CodePen.

License.