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>