Jquery - Css "transform:scale" Affects '.offset()' Of Jquery

I'm Trying To do Validation in jQuery. It'll produce error after blur event occurs by checking whether the given input is empty. Based on that, it'll create a

var lf=$(this).offset().left+$(this)[0].getBoundingClientRect().width+12;

try this workaround

http://jsfiddle.net/H5sW9/10/

get current scale in matches[ 1] (scaleX) and matches[ 2] (scaleY)

var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/;
var matches =$("body").css('transform').match(matrixRegex);

before append store the zoom to 100%

$("body").css('transform', 'scale(' + '1' + ')');

after you've added the div restore to 125%

 $("body").css('transform', 'scale(' + matches[1] + ')');

I have used only transform and not -webkit-transition,-moz-transform.... that you should use.

to scale for different factors x and y you should use

$("body").css('transform', 'scale(' + '1' +','  +'1' + ')');

Solution 2:

here is the working solution

CSS

.inpt:focus {
    background:#fff;
    color:#222;
    border:2px solid #000;
}
.err {
    background:pink;
    border:2px solid #f00;
    color:#a00;
}
.errdiv {
    position:absolute;    
    height:30px;
    display:inline-block;
    padding:5px;
    border-radius:5px;
    background:#a00;
    border:1px solid #a44;
    color:#fff;
    text-align:center;    
    font-weight:bolder;
    visibility:visible;
    opacity:0;
}

HTML

<center>Hello Every One!</center><hr><center><inputclass="inpt"placeholder="name"type="text" /><br /><inputclass="inpt"placeholder="email"type="text" /><br /><inputclass="inpt"placeholder="password"type="password" /><br /></center><center>
    Just Try Focusing and Bluring the Inputs
</center>

JAVASCRIPT

$(document).ready(function() {
    $(".inpt").blur(function() {
        // Check Input for validation.
        $(".errdiv").remove(); //Remove Any Previous Error.var vl = $(this).val();
        var vl1 = vl.split(" ").join("");
        if (vl == "" || vl1 == "") {
            // Input is Empty Mark It red.
            $(this).addClass("err");
        }
    });
    $(".inpt").focus(function() {
        //Check Whether Input is marked Red or Not (hasClass) err?// $(".errdiv").remove(); //Remove Any Previous Error.if ($(this).hasClass("err")) {
            // Input is Marked!
            $(this).removeClass("err");
//            var tp=$(this).offset().top+12;// not needed //            var lf=$(this).offset().left+$(this).width()+12;// not needed//             // Add Error Div and appropriate Message.
            $('<div class="errdiv">*This is Required.</div>').insertAfter(this);

            $(".errdiv").animate({
                "visibility": "visible",
                "opacity": "1"
            }, 1000); //Show What is The Error?
        }
    });
});

A bit of modification that is all

Remove top and left property from your .errdiv class and append the div dynamically after the element

Share