Grow your CSS skills. Land your dream job.

Problems with adding CSS to a jQuery .after() element

  • # May 25, 2012 at 10:29 pm

    Here is the html … I tried to apply the css inline …

    .....









    .....

    Here is the js code …

    .....
    else
    {
    $("#contact-form").hide('slow');
    $(".success-message1") .after('Your message was successfully sent!');
    $(".success-message2") .after('You should receive a response with in one to two business days.');
    }
    .....

    Here is the CSS …


    .success-message1:{
    top: -7px;
    position: absolute;
    left: 52px;
    font-size: 1.1em;
    }

    .success-message2:{
    font-size: 0.8em;
    position: absolute;
    top: 56px;
    right: 10px;
    left: 47px;

    None of these options worked … Here is a link to my website … http://lynchburgpatriots.webatu.com/Contact.html

    Any help would be appreciated!!!

    Thanks!

    # May 25, 2012 at 11:18 pm

    Maybe you mean:

    $(".success-message1").html('Your message was successfully sent!');
    $(".success-message2").html('You should receive a response with in one to two business days.');

    CSS Selectors doesn’t require colon before bracket:

    .success-message1 {
    top: -7px;
    position: absolute;
    left: 52px;
    font-size: 1.1em;
    }

    .success-message2 {
    font-size: 0.8em;
    position: absolute;
    top: 56px;
    right: 10px;
    left: 47px;
    }
    # May 26, 2012 at 1:09 am

    Thank you sooo much! Oh, yeah I know CSS selectors do not need colons before the bracket … I had just tried using the CSS Pseudo-element :after and had forgotten to delete the colon.

    Thanks again!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".