fancybox border - two colors

Question

I have form and send data from it via ajax to php file and get result e.g. 0 and 1

If I get 0 as a result, I'd like to like to show red fancybox (body and border) if I get 1, show green fancybox (body and border)

Ok - I defined styles in css:

<style type="text/css">
    #green {
        background-color: #bef781;
    } 
    #red {
        background-color: #f5a9a9;
    } 
    #fancybox-content #red {
        border: 10px solid #f5a9a9 !important;
        background-color: #f5a9a9;
    }
</style>

and attach them to div in response from ajax:

$.ajax(
{
    url : formURL,
    type: "POST",
    data : postData,
    success: function(response) 
    {
        if (response == "1") {
            $.fancybox("<div id=\"green\";><h1>Green response</h1></div>");
        }
        else {
            $.fancybox("<div id=\"red\";><h1>Red response</h1></div>");
        }
    }
}

Both boxes are showing as expected but the problem is with border - in css I can change default white color like this:

#fancybox-content {
       border: 30px solid #bef781 !important;
}

and it's working but only for one box (green or red) - how to change border in second box ??

Regards

Hi - fancybox version 1.3.4 – user1908583 Sep 02 '14 at 23:06 — user1908583, Sep 02 '14 at 23:06

Kristoffer Jälén · Answer 1 · 2014-09-02T20:34:07.310

0

If we assume that the first fancybox is the red one, and the next fancybox is the green one, then you can use the CSS :first-child selector.

#fancybox-content:first-child {
   border: 30px solid #f5a9a9 !important;
}

#fancybox-content:nth-child(2) {
   border: 30px solid #bef781 !important;
}

edited Sep 02 '14 at 20:34

answered Sep 02 '14 at 19:54

Kristoffer Jälén

3,223
3
21
39

Oh wait, do you mean you want to style the `#fancybox-content`, and not the `#red` content? Then you have to select the parent element of `#red` (and `#green`). You'll have to use JavaScript for that. See: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Kristoffer Jälén Sep 02 '14 at 20:02
Hi Kristoffer, Thank You for answer, I added more of my code to the first post. When I add #fancybox-content #red I still get white border in box but if I change it to #fancybox-content (without #red) the box is full red - how to get full green box ? – user1908583 Sep 02 '14 at 20:28
If we assume that the first fancybox is red, and the next fancybox is the green one, then you can use the CSS `:first-child` selector. I've updated the answer. – Kristoffer Jälén Sep 02 '14 at 20:34
I changed the code in css from #fancybox-content #red to #fancybox-content:first-child but it didn't changed anything - and it doesn't matter if it is red or green box - there still is white border – user1908583 Sep 02 '14 at 21:19

score 0 · Accepted Answer · answered Sep 02 '14 at 23:39

Inside your ajax success function you could manipulate both, the content and the color of fancybox inside variables using a switch statement. Then apply those settings using the onStart (fancybox v1.3.x) callback like :

success: function(response) {
    var _textResponse, _color;
    switch (response) {
        case 1:
            _textResponse = "<div id=\"green\"><h1>Green response</h1></div>",
            _color = "green";
            break;
        case 2:
            _textResponse = "<div id=\"red\"><h1>Red response</h1></div>",
            _color = "red";
            break;
        default:
            break;
    };
    $.fancybox(_textResponse, {
        padding: 30, // instead of border-width
        onStart: function () {
            $("#fancybox-content").css({
                backgroundColor: _color,
                borderColor: _color,
                boderStyle: "solid"
            });
        }
    });
}

See JSFIDDLE (it simulates the numeric ajax response as in your code above. You can play with the variable for a different response)

Notice I am not adding additional css but through jQuery

fancybox border - two colors

2 Answers2