• cicakchanson

    (@cicakchanson)


    Hi,

    I’m trying to get my form labels for a specific plugin I bought to display inline. Its called eMember. It comes with a sidebar widget and I am trying to follow the code found on this site to accomplish my goal Click HERE of getting the USERNAME and PASSWORD labels to display inline.

    So far I can get the form label positioned over the field without too much trouble using CSS but it will not fade out when clicked upon. If you could point me in the direction of what I might be doing wrong that would really help.

    I’m going to paste the CSS I’m using and the Javascript. My apologies in advance if I’m making a silly mistake since I know next to nothing about Javascript.

    Also, I would post a link to the site I’m working on but I’m using a MAMP development server so I guess you’ll just have to trust me on calling out the right html elements.

    So here goes (I’m currently using this CSS)

    eMember_text_input{position: relative; z-index:2}
    label{position: relative; z-index:1}
    label.eMember_label {
    padding-left: 6px;
    font-weight: normal;
    font-size: 12px;
    font-family: "Helvetica Neue";
    opacity: 0.75;
    -webkit-transition: opacity 0.15s linear;}
    label.eMember_label + eMember_text_input{margin-top: -22px;}
    
    label.focus { opacity: 0.35; }
    label.has-text { opacity: 0.0; -webkit-transition-duration: 0s; }

    and here is the Java script that currently resides in the footer.php file

    <script type="text/javascript">
    
    $(document).ready(function(){
    
    $("label.eMember_label + eMember_text_input").each(function (type) {
    
    Event.observe(window, 'load', function () {
    setTimeout(function(){
    if (!input.value.empty()) {
    input.previous().addClassName('has-text');
    }
    }, 200);
    });
    
    $(this).focus(function () {
    $(this).prev("label.eMember_label").addClass("focus");
    });
    
    $(this).keypress(function () {
    $(this).prev("label.eMember_label").addClass("has-text").removeClass("focus");
    });
    
    $(this).blur(function () {
    if($(this).val() == "") {
    $(this).prev("label.eMember_label").removeClass("has-text").removeClass("focus");
    }
    });
    });
    });</script>

    Thanks in advance for any help you can offer.

  • The topic ‘Inline Form label issue’ is closed to new replies.