runat="server" breaks my jquery / css functionality

jquery css runatserver
gdbj picture gdbj · May 24, 2011 · Viewed 7.9k times · Source

I have a page that changes media on a page, like pictures or PDF's, using JQuery so that each user click doesn't require a page refresh / new database access.

I have a DIV container that holds all this activity. It works and looks great! When I add runat="server" to the DIV tag, all my nice behaviour breaks. This is without any code written yet to manipulate the object server side. For some reason, my styles / behaviours do not get applied correctly.

I'm guessing there is something simple, but I'm tired of guessing. I'm hoping someone on here knows why that might be happening?

Edit: This is for an ASP.Net application.

  <div id="slidingContent" runat="server" >
    <div class="item" id="media3" name="media3">
       My media here.
    </div>
  </div>

Answer

ravinggenius picture ravinggenius · May 24, 2011

I'm assuming you have this in the context of a .net application. If so you should specify that somewhere in your question. runat="server" will mangle id; view the HTML source in your browser to see exactly what it does. You need to add classes to your markup and modify your CSS and JavaScript to use the classes instead of ids.

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More