IS it possible to set the width of a td at client side as well as server side?

Question

I have a problem in setting the width of the element both at server and client side. At client side the css is not overriding the applied css from server side. All I need to do is add css to td at server side, and client side remove the old css and apply the new css.

Here is my code

Design Page

 <td id="tdlblOverRideText" runat="server">
         <asp:Label ID="lblOverRideText" Text="Overridden charges are denoted by green background" runat ="server" Visible ="false" BackColor="#efffff"></asp:Label>    
     </td>

Server side:

tdlblOverRideText.Attributes.Add("class", "OverRideText");

Clientside:

    $("#tdlblOverRideText").removeClass("OverRideText");
    $("#tdlblOverRideText").addClass("OverRideTextHide");

CSS

td.OverRideText {
    font-style:italic;
    text-align:right !important;
    padding-right:1%;   
}
td.OverRideTextHide {
    font-style:italic;
    text-align:right;
    padding-right:10%;   
}

Since its a lazy loading I cannot use

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "text", "jsmethod();", true);

because this will call the js method on second time load and not for the first pageload.

Answer 1

 //check from 10 to 10 seconds if you have you class somwhere on dom var mytick = setInterval(animationFunction, 1000) function animationFunction() { console.log("tick"); if ($(".OverRideText").length > 0) { $(".OverRideText").removeClass("OverRideText").addClass("OverRideTextHide"); //here you can destroy the loop if you want //clearTimeout(mytick) } } var step=0; setInterval(function() { step++; console.log("lazy load"); $('#wrapper').append('<div class="OverRideText">Text ' + step + '</div>'); }, 1000); 

 .OverRideText { font-style:italic; text-align:right !important; padding-right:10%; } .OverRideTextHide { font-style:italic; text-align:right; padding-right:50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="wrapper"> <div class="OverRideText">Text 0</div> </div> 

I've been using javascript interval execution to check if element having class='OverRideText' can be found; why not id? because inserting with lazy loading same id is incorrect in html. Another lazy load trick (to simulate a lazy load) is inserting elements with that class at a interval of 10 seconds.

Now back to the main problem your lazy load most be performed with ajax, ajax get has success event, in success event you can perform what animation you like.