jquery 3

by ebaloSnositelXX

HTML

<div class="container">
    <form>
        <table>
            <tr>
                <td>Email</td>
                <td>
                    <input type="email" class="with-clear-box">
                </td>
            </tr>
            <tr>
                <td>Пароль</td>
                <td>
                    <input type="password">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="Войти">
                </td>
            </tr>
        </table>
    </form>
</div>
<div class="result"></div>
<script type="text/x-template" id="template-clear-btn">
    <div class="outer-clear-btn">
        <span class="clear-btn"></span>
    </div>
</script>

CSS

html,
body {
    height: 2000px;
}

.container {
    position: absolute;
    top: 100px;
    left: 200px
}

.outer-clear-btn {
    position: absolute;
    background-color: yellow;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.clear-btn:before {
    content: "X";
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

input {
    height: 20px;
}

.result {
    position: absolute;
    top: 200px;
    left: 200px;
    border: 1px blue solid;
}

JavaScript

(function($) {
    var methods = {
        isArabicOrJewishClient: function() {
            var html = $("html");
            if (html.attr("dir") == "rtl") {
                return true;
            } else {
                return false;
            }
        },
        isChromeOrMacClient: function() {
            if (/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) ||
                navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)) {
                return true;
            } else {
                return false;
            }
        },
        isSearchType: function(input) {
            return input.attr("type") == "search";
        },
        convertPxToPt: function(px) {
            return px * 0.75;
        },
        adjustToInput: function(btn, input) {
            btn.width(input.height());
            btn.height(input.height());
            btn.css("lineHeight", btn.height() + "px");
            btn.css("font-size", this.convertPxToPt(btn.height()) + "pt");
            btn.css("color", input.css("backgroundColor"));
        },
        createPadding: function(btn, input) {
            input.before(btn);
            input.css("padding-right", btn.outerWidth());

            var inputWidth = input.width();
            input.width(inputWidth - btn.outerWidth());
        },
        posBtn: function(btn, input) {
            var cords = input.position();
            if (this.isArabicOrJewishClient()) {
                btn.css("left", cords.left + input.prop("clientLeft"));
            } else {
                btn.css("left", cords.left + input.outerWidth() - input.prop("clientLeft") - btn.outerWidth());
            }
            btn.css("top", cords.top + input.prop("clientTop") + parseFloat(input.css("paddingTop")));
            console.log(cords);
        },
        setEvents: function(btn) {
            btn.bind("click", null, function(event) {
                var target = event.currentTarget;
                if...