jquery - Progress bar with negative value .css(width, )

Question

I search and research into the foruns, of all the internet... but I don't found it the solution...

I need, this:

<label> Name:
        <input type="text" id="name" name="name" required />
</label> 
<div class="container">
        <div class="progress progress-danger progress-striped active">
            <div class="bar" id="progBar" ></div> 
        </div>
    </div>  

So, I want that when the user exits the field (onBlur), he receives the amount of characters and return as the value of the progress bar, and if this parameter is negative, return as the value of the progress bar, only negative, or is the bar again.

The code of bar and JS...

$(document).ready(function() {

$("*").blur(function() {
    var $bar = $("#progBar");
    var $name = $("name");

    if ($("#name").val().length > 2) {
        $bar.css('width', "30%");
    } else {
        $bar.css('width', "-30%"); //How, I do this????????
    }   

Answer 1

负宽度是什么意思？在 css 中，不允许使用负宽度。

在此处阅读或在 Google 上搜索。

http://www.css3.com/css-width/

CSS 宽度

此属性为块级元素和替换元素指定元素渲染框的宽度。不允许使用负值。

正宽度是一个属性，如果您正在寻找元素左侧的宽度，它不是负宽度，它仍然是宽度，您可能有不同的元素来显示该宽度。

这就是你要找的东西。

JSFIDDLE

这适用于 2 个输入字段，

if (($("#name").val().length > 2) && ($("#email").val().length>2)) {
    $('#positive').css('width','100%');
} else if($("#name").val().length > 2 || $("#email").val().length>2){
    $('#positive').css('width','50%');
} else{
    $('#positive').css('width','0%');
}

您可能还想查看 jquery ui 的进度条，

一个 jsFiddle 显示在这里。

小提琴

Answer 2

您可以同时设置左边距和进度条的宽度，以便将其与负值一起使用。

看看这个例子：

$(document).ready(function() {

  $("*").blur(function() {
    var $bar = $("#progBar");
    var $name = $("#name");

    if ($("#name").val().length > 2) {
        $bar.css('width', "30%").css("margin-left","50%");
    } else {
        var x=-30;
        $bar.css('width', Math.abs(x) + "%").css("margin-left", (50 + x) + "%");
    }
  });
});

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

<label>Name: <input type="text" id="name" name="name" required /></label> 
<div class="container">
	<div class="progress">
		<div class="progress-bar progress-bar-danger active" id="progBar" role="progressbar" style="width:30%;margin-left:20%;"></div> 
	</div>
</div>