Show box on textbox focus, wrapping the textbox

Question

Hey.

Actually it's a lot easier to show you what I want to achieve instead of trying to explain.

State 1: http://i38.tinypic.com/2i04135.png

The field Responsibles hos no focus. Pretty simple.

State 2: http://i36.tinypic.com/1zwjm3c.png

The field Responsibles got focus. A div shows up around the textbox and the text.

It's no problem showing the gray box and position it. The problem is to have the textbox show up inside the box, but still maintain it's current position.

When the textbox is being positioned absolute (tried z-index), the content is being messed up ofcourse.

I'm using jQuery.

Any ideas anyone?

Answer 1

You don't need to give the textbox an absolute position. Just give it position: relative and set the zIndex so it comes on top of the gray box. If it has position: static (default) zIndex won't work.

Answer 2

Have you looked at jQuery Tools Expose?

---

Here is some code using Expose with mouseover... I also posted a sample at this pastebin

$(function() {
 $("#test").hover(
  function() {
   $(this).expose({api: true}).load()
  }, function() {
   $(this).expose().close();
 });
});

---

Edit: Sorry, here is the code for focus & blur:

$(function() {
 $("#test")
  .focus(function() {
   $(this).expose({api: true}).load();
  })
  .blur(function() {
   $(this).expose().close();
  });
});

---

Edit #3: Just because I have OCD and can't leave things hanging LOL... I worked out a script that does what you want without using Expose (posted at this pastebin as well). You can add a fade in and fade out if you want.

CSS

input, select { width: 200px; }
#expose {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #444;
 z-index: 99;
}
.focused {
 position: relative;
 top: 0;
 left: 0;
 z-index: 100;
}
label.focused {
 color: #ddd;
}

HTML (I tried to mimic your image)

<fieldset><legend>Fields</legend>
<label for="frespon">Responsibilites:</label><br/>
<input type="text" id="frespon" class="expose" /><br/>
<br/>

<label for="fprojectid">ProjectID:</label><br/>
<select id="fprojectid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="fstatusid">StatusID:</label><br/>
<select id="fstatusid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="ftypeid">TypeID:</label><br/>
<select id="ftypeid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="ftitle">Title:</label><br/>
<input type="text" id="ftitle" class="expose" /><br/>
</fieldset>

Scripting

$(document).ready(function(){
 $('.expose').focus(function(){
  $('<div></div>')
   .attr('id','expose')
   .appendTo('body');
  $(this).addClass('focused')
   .parent().find('label[for="' + this.id + '"]').addClass('focused');
 })
 $('.expose').blur(function(){
  $('.expose').removeClass('focused')
   .parent().find('label[for="' + this.id + '"]').removeClass('focused');
  $('#expose').remove();
 })
})