Get css properties from string

Question

I am creating a plugin that allows the user to define the notification by typing something like this.

growl-top-left-300px;

I was using a split to get rid the width, but this still required me to have quite a few if statements because I user had the following choices

for example I had

if (position == "growl-top-left" || position == "growl-left-top") {
    container.css ({
        top: '0px',
        left: '0px'
    });
}else if (position == "growl-top-right" || position == "growl-right-top") {
    container.css ({
        top: '0px',
        right: '0px'
    });
}else if (position == "growl-top-center" || position == "growl-center-top") {
    // apply css // Not done yet
}else if (position == "growl-bottom-left" || position == "growl-left-bottom") {
    container.css ({
        bottom: '0px',
        left: '0px'
    });
}else if (position == "growl-bottom-right" || position == "growl-right-bottom") {
    container.css ({
        bottom: '0px',
        right: '0px'
    });
}else if (position == "growl-bottom-center" || position == "growl-center-bottom") {
    // apply css // not done yet
}

but as you can imagine that seems like a lot of redundant code, and I just want to know if anyone has a nicer way to clean it up?

I thought it would be nice if I could get the top and left css values so I can write the following code:

container.css ({
    retrivedCSS[0]: '0px',
    retrivedCSS[1]: '0px'
})

where retrivedCSS[0] would be the first position and the [1] would be the second position

you could just apply it as a class on the element then just use css like .growl-top-left, .growl-left-top {} — Pete
– Pete, Commented Mar 1, 2013 at 16:16
What do you have inside those if's? If it has something like setting top and left for growl-left-top, then I have a trick ;) — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Mar 1, 2013 at 16:17
@Pete I want this to not use any other files than the plugin it self. Thank you though. — Robert E. McIntosh
– Robert E. McIntosh, Commented Mar 1, 2013 at 16:18

Selvakumar Arumugam · Accepted Answer · 2013-03-01 17:49:55Z

2

How about splitting the position string and using those tokens. See below,

var tokens = position.split('-');

var updateCSS = {};
updateCSS[tokens[1]] = updateCSS[tokens[2]] = '0px';    

container.css (updateCSS);

Incase if you use more complicated string like growl-top-center-padding e.t.c, use an iterate.

var updateCSS = {};
var tokens = position.split('-');

for (var i = 0; i < tokens.length; i++) {
   if(tokens[i] == 'growl') continue;

   updateCSS[tokens[i]] = '0px';
}

container.css (updateCSS);

edited Mar 1, 2013 at 17:49

answered Mar 1, 2013 at 16:26

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

12 Comments

Robert E. McIntosh Over a year ago

What does the if (tokens[i] == 'grow') continue; mean? Wouldn't that mean that it would skip the actual locations since token[1] would equal top and not growl.

Selvakumar Arumugam Over a year ago

@RobertE.McIntosh It is token[i], not token[1]. Note the i (iterator)

Amberlamps Over a year ago

@RobertE.McIntosh: I guess Vega thought that growl can not possibly be part of the CSS expression.

Selvakumar Arumugam Over a year ago

@Amberlamps Is it part of CSS? Well, he can remove that condition if he want growl to be part of CSS. I was going by what he had inside those if conditions in his post.

Robert E. McIntosh Over a year ago

@Vega the problem is that in your split the very first object would be gorwl not a location and following that only the second and thrid objects are going to be locations and the very last object well be a padding.

|

Amberlamps · Accepted Answer · 2013-03-01 16:19:23Z

2

How about this:

// map string to one key
var key = position.split("-").sort().join("-");

var map = {

    "growl-bottom-center": "your CSS",
    // ...
    "growl-right-top": "your CSS"

}

applyCSS(map[key]);

answered Mar 1, 2013 at 16:19

Amberlamps

40.7k6 gold badges46 silver badges54 bronze badges

1 Comment

Robert E. McIntosh Over a year ago

This might stress the engine a little more but the less lines would probably make up for it.

Brad M · Accepted Answer · 2013-03-01 16:29:15Z

1

Use could use fallthrough switch statements, although they are still pretty ugly.

switch(position.split("-").sort().join("-")) {
    case 'growl-top-left': //apply css
        break;
    case 'growl-center-top': // apply css
        break;
}

Thanks to @Amberlamps for the brilliant suggestion on using position.split("-").sort().join("-") His full solution is absolutely better than this as well.

edited Mar 1, 2013 at 16:29

answered Mar 1, 2013 at 16:18

Brad M

7,9101 gold badge25 silver badges40 bronze badges

4 Comments

Robert E. McIntosh Over a year ago

Why do I always forget about switch statements... Every time I tell you. Before I mark this as the answer, I would like to see if anyone else has any other ideas, but this seems like a great solution to shorting the code.

Amberlamps Over a year ago

Replace position with position.split("-").sort().join("-"). That will save you 50% of your case statements.

Robert E. McIntosh Over a year ago

@Amberlamps Wouldn't that be more for the JavaScript engine to handle then just adding the one extra line per case?

Amberlamps Over a year ago

@RobertE.McIntosh: It would probably stress the engine a bit more. But you would have less lines and the engine is very powerful after all.

Collectives™ on Stack Overflow

Get css properties from string

3 Answers 3

12 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related