0

I have a page with some sliders that produce some css code:(It is a box shadow generator) I have a button that adds the produced code to a specific area(#saved ul) and passes that code to an array called used(I use this array to check if the user has added again a code to that area.If the code exists in the array a message will appear " The combination has been used").But today i came up to a problem.As you know box shadow has 2 ways to be applied:

  1. outset
  2. inset

To change the way the box shadow is applied I use a slider.If the value of the slider is 0 it will be outset else it will be inset.

Now back to my problem.When the user chooses to add a code that has used again the page throws a message(The combination has been used).But if the user changes the slider to select inset box shadow which is different brom outset the message will appear again. Here is my code:

$("#mark").click(function(){
        var marking=$("#x").val()+$("#y").val()+$("#blur").val()+$("#spread").val();
        if (marking==0){
            console.log("No code changed");
        }
        else{

        var x=$("#x").val()+"px ";
            var y=$("#y").val()+"px ";
            var b=$("#blur").val()+"px ";
            var s=$("#spread").val()+"px ";
            $r=$("#red").val();
            $g=$("#green").val();
            $b=$("#blue").val();
            $color=" rgb("+$r+","+$g+","+$b+")";
            var finalCode=0;
            if($("#blur").val()==0 && $("#spread").val()==0){
                finalCode=x+y;
            }
            else if($("#blur").val() != 0 && $("#spread").val()==0) {
                finalCode=x+y+b;
            }
        if ($("#inset").val()==0) {
            if (used.indexOf((finalCode+$color)) != -1){
                alert("That combination has been used");
            }
            else{
            $("#saved ul").append("<li class='text-warning h3 marked'>box-shadow:"+finalCode+$color+";</li>");
            used.push(finalCode+$color);
        }

        }
        else{
            if (used.indexOf((finalCode+$color)) != -1){
                alert("That combination has been used");
            }
            else{
            $("#saved ul").append("<li class='text-success h3 marked'> box-shadow:inset "+finalCode+$color+";</li>");

        }
        }
}

    });

Any ideas???

4
  • What did you get with your current approach ?
    – Bla...
    Dec 10, 2014 at 12:47
  • How about binding if it's inset or outset with api.jquery.com/jquery.data to the li element and then just check if it's in used and the element has the same in/outset value as the slider has currently?
    – wawa
    Dec 10, 2014 at 12:49
  • @wawa Can you give me an example? Dec 10, 2014 at 12:59
  • @stranger4js just thought about it, since you use an native array and not a jQuery DOM node, there's not much you can do with jQuery.data. What I'd do is to use two arrays instead of one. Instead of the used array I'd use an usedInset and usetOutset array and just perform the checks on them.
    – wawa
    Dec 12, 2014 at 9:30

1 Answer 1

1

I haven't tested it, but it should work like this.

var used = {
    inset   : [],
    outset  : []
}

$("#mark").click(function(){
    var marking=$("#x").val()+$("#y").val()+$("#blur").val()+$("#spread").val();
    if (marking==0) {
        // make sure to remove this before publishing the app
        console.log("No code changed");
    } else{
        var x=$("#x").val()+"px ";
        var y=$("#y").val()+"px ";
        var b=$("#blur").val()+"px ";
        var s=$("#spread").val()+"px ";
        $r=$("#red").val();
        $g=$("#green").val();
        $b=$("#blue").val();
        $color=" rgb("+$r+","+$g+","+$b+")";
        var finalCode=0;
        if($("#blur").val()==0 && $("#spread").val()==0){
            finalCode=x+y;
        } else if ($("#blur").val() != 0 && $("#spread").val()==0) {
            finalCode=x+y+b;
        }
        if ($("#inset").val()==0) {
            if (used.inset.indexOf((finalCode+$color)) != -1){
                alert("That combination has been used");
            } else{
                $("#saved ul").append("<li class='text-warning h3 marked'>box-shadow:"+finalCode+$color+";</li>");
                used.inset.push(finalCode+$color);
            }
        } else {
            if (used.outset.indexOf((finalCode+$color)) != -1){
                alert("That combination has been used");
            } else{
                $("#saved ul").append("<li class='text-success h3 marked'> box-shadow:inset "+finalCode+$color+";</li>");
                used.outset.push(finalCode+$color);
            }
        }
    }
});

If you prefer you could use to vars for inset and outset

var usedInset = [];
var usedOutset = new Array();
// what ever you prefere
[...]
if ($("#inset").val()==0) {
    if (usedInset.indexOf((finalCode+$color)) != -1){
        alert("That combination has been used");
    } else{
        $("#saved ul").append("<li class='text-warning h3 marked'>box-shadow:"+finalCode+$color+";</li>");
        usedInset.push(finalCode+$color);
    }
} else {
    if (usedOutset.indexOf((finalCode+$color)) != -1){
        alert("That combination has been used");
    } else{
        $("#saved ul").append("<li class='text-success h3 marked'> box-shadow:inset "+finalCode+$color+";</li>");
        usedOutset.push(finalCode+$color);
    }
}

Hope this helps (:

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.