Home/ Questions/Q 7655089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T12:25:28+00:00

I have the following code that would like to have a generic function for

  • 0

I have the following code that would like to have a generic function for if possible. When needs to happen is the label on top needs to change color. I have a color gradient behind it so I need to use transparent PNG for the corners. The layout width needs to be liquid so I can’t really change the HTML too much.`

<div class="inputBody">
<div class="inputtop"><span class="inputtoptext">Username</span></div>
<div><input type="text" size="25"></div>`
</div>

<script>
$('input').focus(function() {
    $(this).addClass("yellowinput");

});

$('input').blur(function() {
    $(this).removeClass("yellowinput");
});
</script>

`

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can make one piece of code that works on a unit like this. All relevant id values are changed to class names and the whole piece is put into a container. That lets us find the object associated with this input container in a generic way relative to the object that caused the event.

    <div class="inputContainer">
    <span class="orderlabel-left">
        <img src="resources/images/labelbackground-left.png" class="leftsidecorneruser">
    </span>
    <span class="orderlabel orderlabelcommon">Username</span>
    <span class="orderlabel-right">
        <img src="resources/images/labelbackground-right.png" class="rightsidecorneruser">
    </span>
    <div>
        <input type="text" value="" name="" class="orderinput" size="40" tabindex="1" id="user">
    </div>
</div>


$('input').focus(function() {
    var container = $(this).closest(".inputContainer");
    container.find(".leftsidecorneruser").attr("src", "resources/images/yellowleft.png");
    container.find(".rightsidecorneruser").attr("src", "resources/images/yellowright.png");
    container.find(".orderlabelcommon").removeClass("orderlabel").addClass("yellowbackground");
}); 
$('input').blur(function() {
    var container = $(this).closest(".inputContainer");
    container.find(".leftsidecorneruser").attr("src", "resources/images/labelbackground-left.png");
    container.find(".rightsidecorneruser").attr("src", "resources/images/labelbackground-right.png");
    container.find(".orderlabelcommon").addClass("orderlabel").removeClass("yellowbackground");
});

    FYI, a different approach could be done with a lot less code and using mostly CSS rules like this:

    $('input').focus(function() {
    $(this).closest("inputContainer").addClass("hasFocus");
});

$('input').blur(function() {
    $(this).closest("inputContainer").removeClass("hasFocus");
});

    Then, you would just make all your CSS rules contingent upon whether an object has a parent CSS class .hasFocus or not. The images would have to change to be background images, but they can even be done in CSS too.

    • 0