SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: .css property

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .css property

    .

    Hi - I am probably overlooking something simple, but can't tell why the following code fragment is not working :

    Code JavaScript:
    $(document).ready(function(){
      $('#signup form:input').css('background-color', 'lemonchiffon')
    });

    Code HTML4Strict:
    <div id="signup">
            <h2>Sign up</h2>  
            <form action="">
              <div>
                <label for="name">Name:</label>
                <input name="name" id="name" type="text"/>
              </div>
              <div>
                <label for="email">Email:</label>
                <input name="email" id="email" type="text"/>
              </div>
              <div>
                <label for="website">Web site URL:</label>
                <input name="website" id="website" type="text" />
              </div>      
              <div>
                <label for="password">Password:</label>
                <input name="password" id="password" type="password" />
              </div>   
              <div>
                <label for="passconf">Confirm Password:</label>
                <input name="passconf" id="passconf" type="password" />
              </div>      
              <div>
              	<input type="submit" value="Submit" />
              </div>
            </form>
    </div>


    but when I hard wire the style into the css file, it works just fine.

    .

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    This looks invalid to me (unless there's some jQuery voodoo I've not heard of):

    Code:
    form:input
    Try

    Code:
    form input

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ralph.m View Post
    This looks invalid to me (unless there's some jQuery voodoo I've not heard of):
    That :input voodoo is a perfectly cromulent jQuery selector that can serve to embiggen the flexibility of your code. It matches all form controls, such as input, textarea, select and button elements.

    The problem is that there's no gap, without which means that it's looking for form elements that are also form controls, which are mutually exclusive.
    Put a space in there and it will then match what you want correctly.

    Code javascript:
    $('#signup form :input')

    If you want to restrict it to only input fields (no other type of form control) then the suggestion from Ralph's post will work too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    That :input voodoo is a perfectly cromulent jQuery selector that can serve to embiggen the flexibility of your code.
    Ha ha, figured as much. Thanks Paul.

    PS: thanks for teaching me a new word: "cromulent" (though I'm not sure if I should be endorsing Simpsons vocab). D'oh!

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    :-) thank you Paul, the space did the trick....

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    That :input voodoo is a perfectly cromulent jQuery selector that can serve to embiggen the flexibility of your code. It matches all form controls, such as input, textarea, select and button elements.

    The problem is that there's no gap, without which means that it's looking for form elements that are also form controls, which are mutually exclusive.
    Put a space in there and it will then match what you want correctly.

    Code javascript:
    $('#signup form :input')

    If you want to restrict it to only input fields (no other type of form control) then the suggestion from Ralph's post will work too.

    :-) thank you Paul, the space did the trick....

    .


    Apologies for posting this twice.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The problem is that there's no gap, without which means that it's looking for form elements that are also form controls, which are mutually exclusive.
    Put a space in there and it will then match what you want correctly.

    Once again if I understood you correctly, had the code been :

    Code HTML4Strict:
                <label id="signup" for="name">Name:</label>              //   <--------   id="signup"
    <input name="name" id="name" type="text"/>

    instead of :


    Code HTML4Strict:
    <div id="signup">                                        //   <--------   original code
            <h2>Sign up</h2>  
            <form action="">
              <div>
                <label for="name">Name:</label>
                <input name="name" id="name" type="text"/>
              </div>


    then the original code would have matched correctly, i.e without the space :


    Code JavaScript:
    $('#signup form:input')


    .

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mnaseersj View Post
    then the original code would have matched correctly, i.e without the space :

    Code JavaScript:
    $('#signup form:input')
    No, that understanding is not correct.

    form:input is looking for a form element that is also a form control. Since a form element is not a form control, you get no match.
    Whereas form :input is looking inside forms for elements that are form controls.

    If it helps, consider div.header
    That too is getting only div elements that also have that class name. Their descendants do not come in to things at this point.
    With div .header though, that's getting all elements within the div that contain the appropriate class.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    No, that understanding is not correct.

    form:input is looking for a form element that is also a form control. Since a form element is not a form control, you get no match.
    Whereas form :input is looking inside forms for elements that are form controls.

    If it helps, consider div.header
    That too is getting only div elements that also have that class name. Their descendants do not come in to things at this point.
    With div .header though, that's getting all elements within the div that contain the appropriate class.

    thanks, I got confused when I saw the following code after your initial explanation, I was thinking along the right lines but got the example wrong in my previous post.

    Code JavaScript:
    $('.check-all:checkbox').change(function() {
    var group = ':checkbox[name=' + $(this).attr('name') + ']';
    $(group).attr('checked', $(this).attr('checked'));
    });


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
  •