SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Css Rules not working on dynamic content

    Hi there,

    I have an application which uses JQuery to apply new CSS classes to certain elements.

    What I want to do is have a parent container which starts off with "some_class" and then toggle that class on a click event so that all of the children inside obey a new CSS rule.

    so that .someclass .element changes to .newclass .element

    I have outlined both the old rule and the new rule in my stylesheet in the head of the page.

    The problem I have is that when I use jQuery to apply the class the children of the new class aren't obeying the CSS rule I have outlined for them.

    The event is firing fine and I can see the parent container class change in firebug.

    Surely all of the CSS rules are interpreted from the browser as the DOM loads, why would the CSS not change elements that it already has rules for?
    "Persistence is the path to perfection"

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Are you able to post a link? It would be interesting to see what's happening here.

  3. #3
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    [solved]

    Hi Ralph,

    Thanks for your reply, I have posted this in the wrong forum, I should have used the jQuery forum. I don't know if you are into jQuery but if you are you will be familiar with the addClass and toggleClass functions.

    I haven't confirmed it yet but I'm pretty sure that I can't use those functions to change the class of a parent and expect all of the children to change with it. The only element that will change is the element which you select with jQuery as in:

    Code:
    $(".parent").addClass("new_class"); // changes only parent element
    I will probably need to add that class to all of the children by first selecting them with jQuery as below:

    Code:
    $(".parent").children().addClass("new_class"); // to select all children
    I can see that you are an administrator, maybe you can move this post to the js forum.

    thanks anyway
    "Persistence is the path to perfection"

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Done.

    I'm not very experienced with jQuery, but I would be surprised if adding a class to a parent element didn't affect the children too ... as long as your styles are set up for inheritance, such as

    Code:
    .new_class p {color: red;}
    But I'd be interested to know either way.

  5. #5
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there, the answer is in this thread, its like I said, you need to add the class to the children:

    http://stackoverflow.com/questions/1...child-elements

    thanks Ralph
    "Persistence is the path to perfection"

  6. #6
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there,

    for anyone reading my post please disregard the above the real answer was that I had made a classic CSS mistake:

    I had started my some_class name with a number as in "4Style" , this is always bad practice and numbers should be avoided in this context and if used at all they must be escaped like as in .\35

    Apologies, useful blunder to remeber though!
    "Persistence is the path to perfection"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •