Truncating Long Text to Short Text with jQuery – Dotdotdot

Truncating Long Text to Short Text with jQuery - Dotdotdot

Dotdotdot is a jQuery plugin for truncating multiple line content on a webpage. It uses an ellipsis to indicate that there is more text than currently visible. Optionally, the plugin can keep a “read more” anchor visible at the end of the content, after the ellipsis. When using the jQuery.dotdotdot plugin, you don’t need to worry about your HTML markup, the plugin knows its way around most elements. It’s responsive, so when resizing the browser, the ellipsis will update on the fly.

Read More Download Demo

Date Time Picker with jQuery – Xdan

Date Time Picker with jQuery - Xdan

DateTimePicker is jQuery plugin select date and time, use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms. It’s easy to customize options. feature: date time picker, date picker, time picker, mask date/time, inline date/time, light/dark theme, PeriodPicker, PeriodDateTimePicker, calendar pop up and many more.

Read More Download Demo

Responsive Off-Canvas Navigation Menu with jQuery CSS – Pushy

responsive off-canvas navigation menu with jquery css

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.

Features: Uses CSS transforms & transitions, Smooth performance on mobile devices, jQuery animation fallback for IE 7-9, Menu closes when a link is selected, Menu closes when the site overlay is selected, Auto-collapsible submenus, Left or right menu position, It’s responsive!

Read More Download Demo

Animate Placeholder Input Using jQuery and Bootstrap

Animate Placeholder Input Using jQuery and Bootstrap

How to create animates placeholder on form inputs to label using jquery and bootstrap

animateformlabelholder

Import Library

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="phanimate.jquery.js"></script>

Make Content

  <div class="container">
    <form>
<div class="custom-input">
  <label for="firstname">First Name</label>
  <input type="text" class="form-control" id="firstname">
</div>

<div class="custom-input">
  <label for="test">Test 1</label>
  <input type="text" class="form-control" id="test">
</div>

<div class="custom-input">
  <label for="test2">Test 2</label>
  <input type="text" class="form-control" id="test2" placeholder="test 2">
</div>

<div class="custom-input">
  <label>Test 3</label>
  <input type="text" class="form-control" placeholder="Placeholder 3">
</div>

<div class="custom-input">
  <label>Test 4</label>
  <input type="text" class="form-control">
</div>

<div class="custom-input">
  <input type="text" class="form-control" placeholder="Test 5">
</div>
  </form>
  </div>

 

Cascading Dropdown Lists Using jQuery

Cascading Dropdown Lists Using jQuery

How to create cascading dropdown lists on selectbox or combobox or listbox using jquery plugin

cascading-dropdown-682016

Import Library

<link rel="stylesheet" href="css/zurb-foundation-5.5.1/foundation.min.css">
<link rel="stylesheet" href="css/font-awesome-4.3.0/css/font-awesome.min.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.cascading-drop-down.js"></script>

Use Script

$('.cascadingDropDown').ssdCascadingDropDown({
        nonFinalCallback: function(trigger, props, data, self) {

            trigger.closest('form')
                    .find('input[type="submit"]')
                    .attr('disabled', true);

        },
        finalCallback: function(trigger, props, data) {

            if (props.isValueEmpty()) {
                trigger.closest('form')
                        .find('input[type="submit"]')
                        .attr('disabled', true);
            } else {
                trigger.closest('form')
                        .find('input[type="submit"]')
                        .attr('disabled', false);
            }

        }
    });

Design Style

body {

            padding: 2rem 0;

}
 .divider {
            height: 1.25rem;
            width: 100%;
            border-top: dashed 1px #aaa;
 }

Make Content

<div class="row">

    <div class="column">





        <form>


            <h2>Product 1</h2>

            <div class="row">

                <div class="medium-6 columns">
                    <select
                        name="category"
                        class="cascadingDropDown"

                        data-group="product-1"
                        data-target="make"
                        data-url="data/make.json"
                        data-replacement="container1"

                        >
                        <option value="">Select category</option>
                        <option value="1">Shoes</option>
                        <option value="2">T-shirts</option>
                        <option value="3">Jeans</option>
                        <option value="4">Hats</option>
                        <option value="5">Belts</option>
                        </select>
                </div>

                <div class="medium-6 columns">
                    <select
                        name="make"
                        class="cascadingDropDown"

                        data-group="product-1"
                        data-id="make"
                        data-target="colour"
                        data-url="data/colour.json"
                        data-replacement="container1"
                        data-default-label="Select make"

                        disabled
                        >
                        </select>
                </div>

            </div>

            <div class="row">

                <div class="medium-6 columns">
                    <select
                        name="colour"
                        class="cascadingDropDown"

                        data-group="product-1"
                        data-id="colour"
                        data-target="size"
                        data-url="data/size.json"
                        data-replacement="container1"
                        data-default-label="Select colour"

                        disabled
                        >
                        </select>
                </div>

                <div class="medium-6 columns">
                    <select
                        name="size"
                        class="cascadingDropDown"

                        data-group="product-1"
                        data-id="size"
                        data-default-label="Select size"
                        data-replacement="container1"
                        data-url="data/final.json"
                        data-final
                        disabled
                        >
                        </select>
                </div>

            </div>

            <div class="row">

                <div class="large-4 medium-6 columns large-offset-4 medium-offset-3">

                    <input
                        type="submit"
                        class="small button"
                        value="ADD TO BASKET"
                        disabled
                    >

                </div>

            </div>

        </form>


        <div
            class="panel cascadingContainer"
            data-replacement-container="container1"
            data-default-content="To see results please make your selection using menus above."
            ></div>

        <div class="divider"></div>


        <form>


            <h2>Product 2</h2>


            <div class="row">

                <div class="medium-6 columns">
                    <select
                            name="category"
                            class="cascadingDropDown"

                            data-group="product-2"
                            data-target="make"
                            data-url="data/make.json"
                            data-replacement="container2"

                            >
                        <option value="">Select category</option>
                        <option value="1">Shoes</option>
                        <option value="2">T-shirts</option>
                        <option value="3">Jeans</option>
                        <option value="4">Hats</option>
                        <option value="5">Belts</option>
                    </select>
                </div>

                <div class="medium-6 columns">
                    <select
                            name="make"
                            class="cascadingDropDown"

                            data-group="product-2"
                            data-id="make"
                            data-target="colour"
                            data-url="data/colour.json"
                            data-replacement="container2"
                            data-default-label="Select make"

                            disabled
                            >
                    </select>
                </div>

            </div>

            <div class="row">

                <div class="medium-6 columns">
                    <select
                            name="colour"
                            class="cascadingDropDown"

                            data-group="product-2"
                            data-id="colour"
                            data-target="size"
                            data-url="data/size.json"
                            data-replacement="container2"
                            data-default-label="Select colour"

                            disabled
                            >
                    </select>
                </div>

                <div class="medium-6 columns">
                    <select
                            name="size"
                            class="cascadingDropDown"

                            data-group="product-2"
                            data-id="size"
                            data-url="data/final.json"
                            data-replacement="container2"
                            data-default-label="Select size"

                            disabled
                            >
                    </select>
                </div>

            </div>

        </form>

        <div
            class="panel cascadingContainer"
            data-replacement-container="container2"
            data-default-content="To see results please make your selection using menus above."
            ></div>

    </div>

</div>

 

Squeezing Header Scroll Down Using jQuery

Squeezing header on scroll down then up

How to squeezing header on scroll down and into navigation menu using jquery plugin

Squeezing header on scroll down then up

Import Library

<script src="jquery.min.js"></script>
<script src="jquery.squeezing_header.js"></script>

Use Script

$(document).on('ready', function() {
      return $('.header').squeezingHeader(
        [
          {
            element: '.title',
            mins: {
              fontSize: 20,
              height  : 20,
              width   : 200
            }
          }
        ]
      );
    });

Make Content

<div class="header" style="color: white; border: 2px solid white; background: royalblue; position: fixed; top: 0; right: 0; left: 0;">
    <h1 class='title' style='height: 100px;'>Header Website</h1>
  </div>

  <div class="content" style="height: 2000px;">
    <h3>Scroll down, then up.</h3>
  </div>

 

Line Number Textarea Using jQuery

Line-Number-Textarea-Using-jQuery2

How to create line number on textarea using jquery

Line-Number-Textarea-Using-jQuery2

Import Library

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery-linedtextarea.js"></script>
<link href="jquery-linedtextarea.css" type="text/css" rel="stylesheet" />

Use Script

$(function() {
  // Target all classed with ".lined"
  $(".lined").linedtextarea(
    {selectedLine: 1}
  );
  // Target a single one
  	$("#mytextarea").linedtextarea();
});

Make Content

<textarea class="lined" rows="20" cols="60">
your text on textarea
</textarea>

 

Vertical Menu Using jQuery and Bootstrap

vertical menu using jquery and bootstrap.

How to make vertical menu for desktop web apps using jquery and bootstrap.

vertical menu using jquery and bootstrap.

Import Library

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="bootstrap-vertical-menu.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Use Script

$(document).ready(function() {
      $('a').click(function(event) {
        $('a').removeClass('selected');
        $(this).addClass('selected');
        event.preventDefault();
      })
 });

Make Content

<nav class="navbar navbar-vertical-left">
  <ul class="nav navbar-nav">
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-star"></i> 
        <span>Menu 1</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-font"></i> 
        <span>Menu 2</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-rocket"></i> 
        <span>Menu 3</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-cog"></i> 
        <span>Menu 4</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-users"></i> 
        <span>Menu 5</span>
      </a>
    </li>
  </ul>
</nav>

 

Nested Menus Using jQuery and Bootstrap

Nested Menus Using jQuery and Bootstrap

Nested menus or navigation (deeply nested menus) using jquery and bootstrap is support desktop or mobile, Nested Nav is responsive plugin for bootstrap 2.3 – 3+

Nested Menus Using jQuery and Bootstrap

Import Library

<link href="//maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="nestednav.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="jquery.nestednav.min.js"></script>

Design Style

body .btn {
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: #999;
  text-shadow: none;
}
body .btn:hover {
  background: #ab86bd;
}
body .btn.btn-navbar {
  background: #a883ba;
  border:none;
  box-shadow: none;
}
body .btn.btn-navbar .icon-bar {
  box-shadow: none;
}
body .btn.btn-main {
  background: #8d689f;
  padding: 20px;
  color: #fff;
}
body .btn.btn-main:hover {
  background: #ab86bd;
}
body .navbar.navbar-inverse .navbar-inner {
  border-radius: 0;
  background: #666;
  border: none;
}
body .navbar.navbar-inverse .navbar-inner a {
  text-shadow: none;
}
body .navbar.navbar-inverse .nav-collapse > ul > li a {
  color: #777;
}
body .navbar.navbar-inverse .nav-collapse > ul > li > a {
  color: #fff;
}
body .navbar.navbar-inverse .navbar-inner .active a,
body .navbar.navbar-inverse .navbar-inner a:hover,
body .navbar.navbar-inverse .navbar-inner a:focus {
  background: #888;
  color: #fff;
}
body .navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
body .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, 
body .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle,
body .navbar.navbar-inverse .navbar-inner .dropdown-submenu.open > a,
body .navbar.navbar-inverse .navbar-inner .dropdown-submenu:hover > a,
body .navbar.navbar-inverse .navbar-inner .dropdown-submenu:focus > a  {
  background: #888;
  color: #fff;
}
body .nav-collapse.in.collapse {
  height: auto !important;
}
body {
  color: #777;
}
.box-purple {
  background: #ab86bd;
  padding: 20px;
  color: #fff;
  border-bottom: 4px solid #8d689f;
}
.box-green {
  background: #cbdb8f;
  padding: 20px;
  color: #fff;
  border-bottom: 4px solid #9cab61;
}
.box-grey {
  background: #999;
  padding: 20px;
  color: #fff;
  border-bottom: 4px solid #777;
}
.switch-vs {
  position:absolute;
  right: 0;
  top:0;
}

#docs table {
  word-wrap: break-word;
  table-layout: fixed;
  width: 90%;
  margin:auto;
}

@media (max-width: 800px) {
  body {
  padding: 0;
  }
  .page-header {
  padding: 20px;
  }
  .icon-random {
  font-size: 100px !important;
  line-height:100px;
  }
  .icon-random:before {
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
  .switch-vs {
  position: static;
  display:block;
  }
}

/* modify nestednav css for theme purposes */
#nested-nav {
  background: #555;
}
#nested-nav .nested-item {
  background: #666;
  color: #555;
}
#nested-nav a.nested-link {
  color: #a8b86c;
}
#nested-nav .nested-no-link {
  color: #999999;
}
#nested-nav .nested-caret, #nested-nav .nested-no-caret {
  background: #777;
}
#nested-nav .nested-container .nested-box,
#nested-nav .nested-container {
  background: #555;
}
#nested-nav .nested-container .nested-box-title {
  background: #a8b86c;
}
#nested-nav .nested-container .nested-box-close {
  background: #93a357;
}
#nested-nav .nested-container .nested-box .nested-no-caret {
  background: #606060;
}
#nested-nav .nested-container .nested-box .nested-caret {
  background: #444;
  color: #a8b86c;
}

Use Script

$(document).ready(function(){
    $('#nestify23').click(function(){
      $('#main-nav').nestednav();
      setTimeout(function(){
        $('.btn.btn-navbar').click();
      }, 550);
    });
});

Make Content

<div id="main-nav" class="navbar navbar-inverse">
      <div class="navbar-inner">
        <div class="container">
          <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="http://www.verticolabs.com/">VerticoLabs</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="/nestedNav/">These</a></li>
              <li><a href="/nestedNav/">Are</a></li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="/nestedNav/">Boring <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="/nestedNav/">Links</a></li>
                  <li><a href="/nestedNav/">You</a></li>
                  <li><a href="/nestedNav/">Should not</a></li>
                  <li><a href="/nestedNav/">Click</a></li>
                  <li><a href="/nestedNav/">Snore</a></li>
                  <li class="dropdown-submenu">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="/nestedNav/">Fruits <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="/nestedNav/">Bananas</a></li>
                      <li><a href="/nestedNav/">Watermelons</a></li>
                      <li><a href="/nestedNav/">Tomatoes</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
                            <li class="dropdown">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">Linkless Dropdown <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="/nestedNav/">Tomato</a></li>
                  <li><a href="/nestedNav/">Carrot</a></li>
                  <li><a href="/nestedNav/">Olive</a></li>
                                </ul>
                            </li>
            </ul>
          </div>
        </div>
      </div>
</div>

 

Expandable Image Gallery Using jQuery and Bootstrap

Expandable Image Gallery Using jQuery and Bootstrap

How to expandable image galley or portfolio using jquery and twitter bootstrap with grid system

Expandable Image Gallery Using jQuery and Bootstrap

Import Library

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/gridex.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap-gridex.min.js"></script>

Design Style

html, body {
  height: 100%;
  color: #656565;
}

a:focus {
  outline: none;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -120px;
}
.footer, .push {
  height: 120px;
}

Use Script

$(function() {
  $('.gridex').gridex();
});

Make Content

<div class="container wrapper">
  <div class="clearfix"></div>
  <ul class="thumbnails gridex">
        <li class="span3 clearfix">
            <a href="#" class="thumbnail"> <img alt="270x170" src="http://placehold.it/270x170" /> </a>
            <!-- gd-expander required -->
            <div class="gd-expander">
                <!-- gd-inner optional -->
                 <div class="gd-inner">
                    <div class="row-fluid">
                        <div class="span6 text-center">
                            <img alt="270x170" class="img-polaroid" src="http://placehold.it/370x270" />
                        </div>
                        <div class="span6">
                            <h2>Heading text 1</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </p>
                            <a href="#" class="btn btn-success">Visit Website</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
  </ul>
  <div class="push"></div>
</div>

 

Portfolio Filter Using jQuery and Bootstrap

How to make gallery or portfolio very mild (lightweight) with button filter using jquery, bootstrap, and bootstrap-portfilter.js.

screenshot-portfoliofilter-442016

Import library

<link href="bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="jquery-1.9.1.min.js"></script>
<script src="bootstrap-portfilter.min.js"></script>

Button Filter

<div class="container wrapper">
        <div class="pull-right">
             <button class="btn btn-small btn-primary" data-toggle="portfilter" data-target="all">All</button>
  </div>
        <div class="clearfix"></div>
</div>

Thumbnails Gallery

<ul class="thumbnails gallery">
  <li class="span3 clearfix" data-tag='brand'>
    <div class="thumbnail">
      <img alt="270x170" src="http://placehold.it/270x170" />
      <div class="caption">
        <h4>Brand Project</h4>
      </div>
    </div>
  </li>
</ul>
<div class="push"></div>

Make Style

html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -120px;
}
.footer, .push {
  height: 120px;
}