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;
    }

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
– avall, Commented Sep 23, 2011 at 10:27

Dennis Traub · Accepted Answer · 2011-09-23 10:18:25Z

2

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

and vice versa.

answered Sep 23, 2011 at 10:18

Dennis Traub

51.9k7 gold badges100 silver badges113 bronze badges

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

4 Comments

coder Over a year ago

Thanks for all your valuable answers

Dennis Traub Over a year ago

You're welcome. Btw, you can say thank you in Stackoverflow by accepting an answer with the tick mark to the left ;)

coder Over a year ago

Yes I do but It takes me 9 mins to accept that as per rules as I have less reputation.

Harry Joy Over a year ago

@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.

Dave · Accepted Answer · 2011-09-23 10:19:11Z

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, 2011 at 10:19

Dave

11.9k5 gold badges37 silver badges46 bronze badges

3 Comments

Snicksie Over a year ago

in that case: use the .html(); function (jQuery-function)

Dave Over a year ago

True, that would be slightly more correct : ) I'll update the answer.

coder Over a year ago

Thanks for all your valuable answers

Snicksie · Accepted Answer · 2011-09-23 10:19:28Z

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, 2011 at 10:19

Snicksie

1,99717 silver badges27 bronze badges

1 Comment

coder Over a year ago

Thanks for all your valuable answers

Harry Joy · Accepted Answer · 2011-09-23 10:23:49Z

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, 2011 at 10:23

answered Sep 23, 2011 at 10:18

Harry Joy

59.8k30 gold badges166 silver badges211 bronze badges

3 Comments

Dave Over a year ago

Lol we are really going for higher and higher levels of rewriting the code huh?

coder Over a year ago

Thanks for all your valuable answers

Harry Joy Over a year ago

@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.

Collectives™ on Stack Overflow

Css in Javascript

4 Answers 4

4 Comments

3 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related