Awesome Bootstrap Checkboxes for Multiselect Dropdown

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet" />

<form>
    <div class="form-group">
        <select name="teams" id="teams" multiple="multiple" class="form-control">
            <option value="vikings">Minnesota Vikings</option>
            <option value="packers">Green Bay Packers</option>
            <option value="lions">Detroit Lions</option>
            <option value="bears">Chicago Bears</option>
            <option value="patriots">New England Patriots</option>
            <option value="jets">New York Jets</option>
            <option value="bills">Buffalo Bills</option>
            <option value="dolphins">Miami Dolphins</option>
        </select>
    </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

SCRIPT

$(document).ready(function() {
    $('select').multiselect({
        templates: { // Use the Awesome Bootstrap Checkbox structure
            li: '<li class="checkList"><a tabindex="0"><div class="aweCheckbox aweCheckbox-danger"><label for=""></label></div></a></li>'
        }
    });
    $('.multiselect-container div.aweCheckbox').each(function(index) {

        var id = 'multiselect-' + index,
            $input = $(this).find('input');

        // Associate the label and the input
        $(this).find('label').attr('for', id);
        $input.attr('id', id);

        // Remove the input from the label wrapper
        $input.detach();

        // Place the input back in before the label
        $input.prependTo($(this));

        $(this).click(function(e) {
            // Prevents the click from bubbling up and hiding the dropdown
            e.stopPropagation();
        });

    });
});



CSS

body {
    padding: 20px;
}

form {
    max-width: 500px;
    margin: auto;
}

.aweCheckbox {
    padding-left: 20px;
}

.aweCheckbox label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: 0 20px 0 10px;
    cursor: pointer;
}

.aweCheckbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.aweCheckbox label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: -20px;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
    color: #555555;
}

.aweCheckbox input[type="checkbox"] {
    opacity: 0;
    z-index: 1;
}

.aweCheckbox input[type="checkbox"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.aweCheckbox input[type="checkbox"]:checked + label::after {
    font-family: "FontAwesome";
    content: "\f00c";
}

.aweCheckbox input[type="checkbox"]:indeterminate + label::after {
    display: block;
    content: "";
    width: 10px;
    height: 3px;
    background-color: #555555;
    border-radius: 2px;
    margin-left: -16.5px;
    margin-top: 7px;
}

.aweCheckbox input[type="checkbox"]:disabled + label {
    opacity: 0.65;
}

.aweCheckbox input[type="checkbox"]:disabled + label::before {
    background-color: #eeeeee;
    cursor: not-allowed;
}

.aweCheckbox.aweCheckbox-circle label::before {
    border-radius: 50%;
}

.aweCheckbox.aweCheckbox-inline {
    margin-top: 0;
}

.aweCheckbox-danger input[type="checkbox"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

.aweCheckbox-danger input[type="checkbox"]:checked + label::after {
    color: #fff;
}

.aweCheckbox-danger input[type="checkbox"]:indeterminate + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

.aweCheckbox-danger input[type="checkbox"]:indeterminate + label::after {
    background-color: #fff;
}

input[type="checkbox"].styled:checked + label:after {
    font-family: 'FontAwesome';
    content: "\f00c";
}

input[type="checkbox"] .styled:checked + label::before {
    color: #fff;
}

input[type="checkbox"] .styled:checked + label::after {
    color: #fff;
}

jQuery position DIV fixed at top on scroll add css

<div id="startchange"></div> 


$(document).ready(function(){       
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() { 
 scroll_start = $(this).scrollTop();
 if(scroll_start > offset.top) {
 $("#cat-menu").css({position:'fixed',top:'0px'});
  } else {
 $('#cat-menu').css({position:'fixed',top:'46px'});
  }
});
}
});

Yii2 Between mysql Query

$model = User::find()->select('username')->asArray()->where('userid between 1 and 5')->all();

OUTPUT

  SELECT `username` FROM `tbl_user` WHERE userid between 1 and 5

Price Range Jquery Dual input box with drop down

HTML

<div class="container">
    <div class="dropdown">
        <button id="min-max-price-range" class="dropdown-toggle" href="#" data-toggle="dropdown">Budget<strong class="caret"></strong>
        </button>
        <div class="dropdown-menu col-sm-2" style="padding:10px;">
            <form class="row">
                <div class="col-xs-5">
                    <input class="form-control price-label" placeholder="Min" data-dropdown-id="price-min" />
                </div>
                <div class="col-xs-2"> - </div>
                <div class="col-xs-5">
                    <input class="form-control price-label" placeholder="Max" data-dropdown-id="price-max" />
                </div>
                <div class="clearfix"></div>
                <ul id="price-min" class="col-sm-12 price-range list-unstyled">
                    <li data-value="0">0</li>
                    <li data-value="10">10</li>
                    <li data-value="20">20</li>
                    <li data-value="30">30</li>
                    <li data-value="40">40</li>
                    <li data-value="50">50</li>
                    <li data-value="60">60</li>
                </ul>
                <ul id="price-max" class="col-sm-12 price-range text-right list-unstyled hide">
                    <li data-value="0">0</li>
                    <li data-value="10">10</li>
                    <li data-value="20">20</li>
                    <li data-value="30">30</li>
                    <li data-value="40">40</li>
                    <li data-value="50">50</li>
                    <li data-value="60">60</li>
                </ul>
            </form>
        </div>
    </div>
</div>

HTML

$('#min-max-price-range').click(function(event) {
    setTimeout(function() {
        $('.price-label').first().focus();
    }, 0);
});
var priceLabelObj;
$('.price-label').focus(function(event) {
    priceLabelObj = $(this);
    $('.price-range').addClass('hide');
    $('#' + $(this).data('dropdownId')).removeClass('hide');
});

$(".price-range li").click(function() {
    priceLabelObj.attr('value', $(this).attr('data-value'));
    var curElmIndex = $(".price-label").index(priceLabelObj);
    var nextElm = $(".price-label").eq(curElmIndex + 1);

    if (nextElm.length) {
        $(".price-label").eq(curElmIndex + 1).focus();
    } else {
        $('#min-max-price-range').dropdown('toggle');
    }
});

Using Range Slider as Search Filter in PHP Mysql Databse

PHP CODE

<?php 

global $mysqli;
$mysql_db_hostname = "localhost";
$mysql_db_user = "dbusername";
$mysql_db_password = "12345";
$mysql_db_database = "dbname";

@$mysqli = new mysqli($mysql_db_hostname, $mysql_db_user, $mysql_db_password, $mysql_db_database);

//Output any connection error
if ($mysqli->connect_error) {
    //die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}

$range = $_POST['range'];
global $mysqli;
$data = '';
$query = "SELECT * FROM your_table_name WHERE price <= $range";
$result = $mysqli->query($query);
if ($result->num_rows > 0) {
    while( $row = $result->fetch_array(MYSQLI_ASSOC)){
    echo '<p>' . $row['item'] . '</p>';
    }
}else{
   echo $data;
}

?>

HTML

<html>

<head>
    <title> Using Range Slider as Filter - www.hemant9807.blogspot.com </title>
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="mhead">
            <h1>Using Range Slider as Filter - www.hemant9807.blogspot.com</h1>
        </div>
        <div id="input-wrapper">
            <input type="range" id="rangeslider" min="0" max="50" value="20" oninput="updateOutput(value, true)" onchange="deactivate()" />
            <div id="reel">
                <div id="rn"></div>
            </div>
            <div id="static-output"></div>
        </div>
        <div id="products">
        </div>
    </div>

</html>

CSS

body {
    padding-top: 50px;
    background: #26ace2;
    font-family: Verdana;
}

h1 {
    font: normal 36px Verdana;
    ;
    color: white;
    padding: 50px;
    text-align: center;
    padding-bottom: 0;
}

#input-wrapper {
    width: 400px;
    margin: 0 auto;
    position: relative;
    padding-top: 64px;
    padding-bottom: 10px;
    overflow-x: hidden;
}

#rangeslider {
    display: block;
    -webkit-appearance: none;
    outline: none;
    height: 5px;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
}

#rangeslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    height: 5px;
    width: 54px;
    position: relative;
}

#rangeslider::-webkit-slider-thumb:after {
    content: '< >';
    word-spacing: 20px;
    text-align: center;
    background: hsl(140, 50%, 70%);
    font: bold 17px/25px Verdana;
    ;
    color: white;
    width: 54px;
    height: 25px;
    position: absolute;
    top: -10px;
    left: 0;
    color: transparent;
    transition: color 0.25s;
}

#rangeslider::-webkit-slider-thumb:before {
    content: '';
    height: 5px;
    width: 400px;
    position: absolute;
    top: 0;
    right: 0;
    background: hsl(140, 50%, 70%);
    pointer-events: none;
}

#reel {
    width: 54px;
    height: 54px;
    overflow: hidden;
    position: absolute;
    top: 0;
    opacity: 0;
    transition: opacity 0.25s;
}

#rn {
    background: linear-gradient(hsl(0, 80%, 70%), hsl(120, 80%, 70%));
    transition: all 0.25s;
}

#rn span {
    font: 30px/54px Oswald;
    color: white;
    display: block;
    text-align: center;
}

#static-output {
    font: bold 17px/25px Verdana;
    ;
    color: white;
    position: absolute;
    bottom: 0;
    height: 25px;
    width: 54px;
    text-align: center;
    pointer-events: none;
    transition: color 0.25s;
}

#products {
    width: 500px;
    margin: 0 auto;
    padding: 25px;
    text-align: center;
    font-size: 18px;
    background: rgba(34, 53, 39, 0.48);
    margin-top: 35px;
    display: none;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

div#products p {
    margin: 5px 0;
    color: #fff;
}

.active #reel {
    opacity: 1;
}

.active #static-output {
    color: transparent;
}

.active #rangeslider::-webkit-slider-thumb:after {
    color: white;
}

.mhead {
    background-color: #009;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    text-align: center;
    font-family: Verdana;
    ;
    position: fixed;
    top: 0px;
    width: 100%;
}

#input-wrapper {
    margin-top: 10%;
}

#myad {
    margin: 60px auto;
    width: 768px;
}

.mhead h1 {
    padding-top: 25px;
}


JS

<script>
    var min = $("#rangeslider").attr("min");
var max = $("#rangeslider").attr("max");

var rn = "";
for (var i = min; i <= max; i++)
    rn += "<span>" + i + "</span>";
$("#rn").html(rn);

updateOutput($("#rangeslider").val(), false);

var rfigure, h, v;

function updateOutput(figure, activate) {
    if (activate)
        $("#input-wrapper").addClass("active");

    rfigure = Math.round(figure);
    $("#static-output").html(rfigure);

    h = figure / max * ($("#input-wrapper").width() - $("#reel").width()) + 'px';

    v = rfigure * $("#reel").height() * -1 + 'px';

    $("#static-output, #reel").css({
        left: h
    });
    $("#rn").css({
        transform: 'translateY(' + v + ') translateZ(0)'
    });
}

function deactivate() {
    $("#input-wrapper").removeClass("active");
    var range = $('#rangeslider').val();
    $("#products").html('');
    $("#products").css('display', 'none');
    jQuery.ajax({
        type: "POST",
        url: 'data.php',
        data: {
            range: range
        },
        success: function(result) {
            if (result) {
                $("#products").html(result);
                $("#products").css('display', 'block');
            }
        }
    });

} 
</script>

How to filter by price ranges in PHP / MySQL Database

HTML

<label>0-500
    <input type="checkbox" name="price[]" value="1" />
</label>
<label>500-1000
    <input type="checkbox" name="price[]" value="2" />
</label>
<label>1000-2000
    <input type="checkbox" name="price[]" value="3" />
</label>


PHP CODE

//parameter like [0 => "2", 1 => "3"]
function getQuery($form) {
    $query = "SELECT * FROM yourtable WHERE false";
    if (in_array("1", $form)) {
        $query. = " OR price >= 0 AND price <= 500";
    }
    if (in_array("2", $form)) {
        $query. = " OR price >= 500 AND price <= 1000";
    }
    if (in_array("3", $form)) {
        $query. = " OR price => 1000 AND price <= 2000";
    }
    return $query;
}


OR

//parameter like [0 => "500-1000", 1 => "1000-2000"]

function getQuery($form) {
    $query = "SELECT * FROM yourtable WHERE false";
    foreach($form as $range) {
        $ranges = explode("-", $range);
        $from = ranges[0];
        $to = ranges[1];
        $query. = " OR BETWEEN $from AND $to";
    }
    return $query;
}

Change CSS value when page has loaded?

$('body').css({
margin: '0',
padding: '0',
height: '100%',
overflow: 'hidden',
})

jQuery selector for selecting an input field with a class

<input type="text" class="form-control" value="Hemant" name="name">

$('input.form-control[type='text']').val();

How do I add an integer value with javascript (jquery) to a value that's returning a string

<span id="price"> 8 </span>
var currentValue = $('#price').innerHTML;

var newValue = parseInt(currentValue) + 1

Submit form with Enter key without submit button form post/get

HTML

<form>
    <input type="text" name="name">
</form

JS

$("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        $("form").submit();
    }
});

JQuery regex validation of e-mail check preg_match

var userinput = $(this).val();
var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i

if (!pattern.test(userinput)) {
    alert('not a valid e-mail address');
}​

how to check string and number in jquery

var EmailCheck = new RegExp(/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/);

var UsernameVal = document.getElementById('mobileNo').value;

if (!isNaN(parseFloat(UsernameVal)) && isFinite(UsernameVal)) {
    if (UsernameVal.length < 10 || UsernameVal.length > 10 || UsernameVal.length > 11) {
        document.getElementById("errorMsg").innerHTML = "Please Enter 10 Digit Mobile No. ";
        return false;
    }
} else if (!EmailCheck.test(UsernameVal)) {
    document.getElementById("errorMsg").innerHTML = "Please Enter Correct Email";
    return false;
}