Css in Javascript

Question

I would like to display a status message in javascript and would like to include some css to that staus message.Can anyone help me out with this?

Now I have two css classes named Available and Not available for the available I need to apply the Available css class and for not available I need to append the NotAvailable css class.

Here is my javascript code:

   function OnSuccess(response) {
        var mesg = $("#mesg")[0];

        switch (response.d) {
            case "true":
                mesg.style.color = "green";
                mesg.innerHTML = "Available";
                break;
            case "false":
                //                    mesg.style.color = "red";
                mesg.innerHTML = "Not Available";
                break;
            case "error":
                //                    mesg.style.color = "red";
                mesg.innerHTML = "Error occured";
                break;
        }
    }
    function OnChange(txt) {
        $("#mesg")[0].innerHTML = "";

    }

This is my Css:

    .Available
            {
                position: absolute;
                width: auto;
                margin-left: 30px;
                border: 1px solid #349534;
                background: #C9FFCA;
                padding: 3px;
                font-weight: bold;
                color: #008000;
            }

    .NotAvailable
{
     position:absolute;
     width:auto;
     margin-left:30px;
     border:1px solid #CC0000;
     background:#F7CBCA;
     padding:3px;
     font-weight:bold;
     color:#CC0000;
    }

a similar question http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript — ZX12R, Sep 23 '11 at 10:20
I don't get it. Why do you use `.NotAvaiable` and `.Avaiable` classes? Won't it be better to use `#mesg` and '#mesg.NotAvaiable' to make by default your container either avaiable or not available? Then you just toggle one class and your code would be much clearer. — avall, Sep 23 '11 at 10:27

score 2 · Accepted Answer · answered Sep 23 '11 at 10:18

2

mesg.addClass('Available');
mesg.removeClass('NotAvailable');

and vice versa.

answered Sep 23 '11 at 10:18

Dennis Traub

50,557
7
93
108

Thanks for all your valuable answers – coder Sep 23 '11 at 10:25
You're welcome. Btw, you can say thank you in Stackoverflow by accepting an answer with the tick mark to the left ;) – Dennis Traub Sep 23 '11 at 10:27
Yes I do but It takes me 9 mins to accept that as per rules as I have less reputation. – coder Sep 23 '11 at 10:29
@user944919 : Nothing to do with reputation in this. Everyone has to wait for 10 minutes after the question is being asked to accept an answer. – Harry Joy Sep 23 '11 at 10:31

Harry Joy · Answer 2 · 2011-09-23T10:23:49.347

1

You can use .addClass(cssClassName) adn .removeClass(cssClassName) method in jquery.

Something like this:

     switch (response.d) {
        case "true":
            mesg.removeClass('NotAvailable').addClass('Available');
            mesg.innerHTML = "Available";
            break;
        case "false":
            mesg.removeClass('Available').addClass('NotAvailable');
            mesg.innerHTML = "Not Available";
            break;
        case "error":
            mesg.removeClass('Available').addClass('NotAvailable');
            mesg.innerHTML = "Error occured";
            break;
    }

I have used removeClass(cssClass) and then addClass(className) because you are using same element to change class.

Also you can try .toggleClass(cssClassName)

edited Sep 23 '11 at 10:23

answered Sep 23 '11 at 10:18

Harry Joy

58,650
30
162
207

Lol we are really going for higher and higher levels of rewriting the code huh? – Dave Sep 23 '11 at 10:23
Thanks for all your valuable answers – coder Sep 23 '11 at 10:27
@Dave: as far as my key board has `CTRL`, `C` and `V` buttons I doesn't feel tedious in rewriting code with modification. Actually it also helps OP. – Harry Joy Sep 23 '11 at 10:35

score 1 · Answer 3 · answered Sep 23 '11 at 10:19

1

It's easier than you think. You just need to change those innerHTML lines to:

mesg.html("<div class='Available'>Available</div>");

mesg.html("<div class='Available'>Not Available</div>");

.html() is just jQuery's more compatible way of setting the innerHTML. And html really means html... so you can do anything there you can do in a regular web page!

answered Sep 23 '11 at 10:19

Dave

11,499
5
34
46

in that case: use the `.html();` function (jQuery-function) – Snicksie Sep 23 '11 at 10:20
True, that would be slightly more correct : ) I'll update the answer. – Dave Sep 23 '11 at 10:21
Thanks for all your valuable answers – coder Sep 23 '11 at 10:27

score 1 · Answer 4 · answered Sep 23 '11 at 10:19

1

jQuery also has a .css() function. Maybe that will do the trick?

Or do you want to add a class to your mesg? in that case: $("#mesg").addClass("classOfYourChoice");

answered Sep 23 '11 at 10:19

Snicksie

1,987
17
27

Thanks for all your valuable answers – coder Sep 23 '11 at 10:26

Css in Javascript

4 Answers4

Linked