CODEWITHSUNDEEP
javascriptcss
coder
coder

Reputation: 13250

Css in Javascript

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

Upvotes: 0

Views: 3464

Answers (4)

Harry Joy
Harry Joy

Reputation: 59650

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)

Upvotes: 1

Snicksie
Snicksie

Reputation: 1997

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");

Upvotes: 1

Dave
Dave

Reputation: 11879

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!

Upvotes: 1

Dennis Traub
Dennis Traub

Reputation: 51624

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

and vice versa.

Upvotes: 2

Related Questions