1

I am currently a little stuck with 'splitting' a css value in Jquery.

I have a div styled like:

.loadingTank {
  display: inline-block;
  border: 2px solid black;
  margin: 15px;
  max-width: 350px;
  height: 500px;
  width: 30%;
  background-color: #808080;
  box-shadow: inset 0px -200px 0px -2px #383838;
  /*Change this value for leveling*/
  float: left;
  position: relative;
}
.loadingTank:before {
  content: "";
  width: 70%;
  height: 100%;
  float: left;
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(208, 208, 208, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#66000000', endColorstr='#00d0d0d0', GradientType=1);
}
.loadingTank:after {
  /*idea is for this to be the 'leveling'*/
  content: "";
  width: 10%;
  height: 100%;
  border-radius: 10px;
  border: 2px solid black;
  background-color: lightGray;
  margin-right: 10%;
  float: right;
  font-size: 100%;
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(1%, rgba(128, 128, 128, 1)), color-stop(9%, rgba(128, 128, 128, 1)), color-stop(10%, rgba(0, 0, 0, 1)), color-stop(11%, rgba(128, 128, 128, 1)), color-stop(19%, rgba(128, 128, 128, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(21%, rgba(128, 128, 128, 1)), color-stop(29%, rgba(128, 128, 128, 1)), color-stop(30%, rgba(0, 0, 0, 1)), color-stop(31%, rgba(128, 128, 128, 1)), color-stop(39%, rgba(128, 128, 128, 1)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(41%, rgba(128, 128, 128, 1)), color-stop(49%, rgba(128, 128, 128, 1)), color-stop(50%, rgba(0, 0, 0, 1)), color-stop(51%, rgba(128, 128, 128, 1)), color-stop(59%, rgba(128, 128, 128, 1)), color-stop(60%, rgba(0, 0, 0, 1)), color-stop(61%, rgba(128, 128, 128, 1)), color-stop(69%, rgba(128, 128, 128, 1)), color-stop(70%, rgba(0, 0, 0, 1)), color-stop(71%, rgba(128, 128, 128, 1)), color-stop(79%, rgba(128, 128, 128, 1)), color-stop(80%, rgba(0, 0, 0, 1)), color-stop(81%, rgba(128, 128, 128, 1)), color-stop(89%, rgba(128, 128, 128, 1)), color-stop(90%, rgba(0, 0, 0, 1)), color-stop(91%, rgba(128, 128, 128, 1)), color-stop(99%, rgba(128, 128, 128, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
}
<div class="loadingTank"></div>

in which I want the 'level' of the tank to move dynamically using jquery.

i am trying to get/set the "-200px" from

box-shadow: inset 0px -200px 0px -2px #383838;

I am using the following jquery function in order to 'get' the css related to this:

 $('#SetValue').click(function () {
            var myVal = $('.loadingTank').css("box-shadow");
            alert(myVal + " is currently the box shadow");
        });

in which alerts me to:

rgb(56, 56, 56) 0px -200px 0px -2px inset

I would like to obtain just the "-200" part of this.

How can I 'split' this myVal further to only obtain this desired part?

Note: the rest of the css line will remain the same, but this -200px will be edited.

Update

I have changed my 'Box shadow' into the correct format;

box-shadow: rgb(56, 56, 56) 0px -200px 0px -2px inset;

However, trying the 'get' css function,

in Chrome, it returns:

rgb(56, 56, 56) 0px -200px 0px -2px inset

Whereas, in IE 11, it returns:

inset 0px -200px 0px -2px rgb(56, 56, 56)

In Firefox:

rgb(56, 56, 56) 0px -200px 0px -2px inset  //same as chrome

And so the location of the '-200px' has changed within these browsers. LIVE DEMO of problem - try running in both ie and chrome

Improve this question
2
  • 2
    I think it is a shame, that we can't get/set individual properties like box-shadow-spread. Commented Dec 9, 2014 at 10:31
  • it would make this so much easier in this situation... Commented Dec 9, 2014 at 11:12

1 Answer 1

Reset to default
3

Try using .split() as show :-

myVal = myVal.split(" ")[4]

above shown code will give you output as -200px but if you want only -200 then use parseInt()

myVal = parseInt(myVal,10);

Fiddle.

EDIT :-

If IE is giving different css property string then you can detect the browser and see if it's IE then use [2] index otherwise [4] index.

OR you can try something like this :-

if((myVal.split(" ")[2]).indexOf(")") >= 0){
   myVal = myVal.split(" ")[4]    
}
else{
   myVal = myVal.split(" ")[2]
}

Fiddle

Fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

I changed the index to [4] which got it, thanks. Quick Q: Will all browsers read the css in the same order (i.e. 'inset last, color first, etc)?
Yes, because it is documented.
@jbutler483....yes agree with barth ... every browser will read in this order ...
inset 0px -200px 0px -2px #383838 (seems to be the way i wrote it in my css)? Whereas chrome seems to be altering it into rgb format? I'll try placing it like 'chromes' format in my css and see what the does in ie
@Kartikeya: please see updated question for your opinion/advice
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.