Okay, so what I figured I'd do was use relative positioning and just set a negative right margin to the label. I was so excited after I "relativized" my placeholder labels, but then remembered I had to test everything in IE. Crossing my fingers in hope that IE wouldn't choke, I tested IE6, 7, and 8. Against all hope, it failed, miserably.
Here's the link to the test area.
Here's the JavaScript code:
Code: Select all
function inputFocus(eventObject)
{
var inputElement = $(eventObject.target);
var inputOffset = inputElement.offset();
var inputTotalHeight = inputElement.height()+
parseInt(inputElement.css("paddingTop"))+
parseInt(inputElement.css("paddingBottom"))+
parseInt(inputElement.css("borderTopWidth"))+
parseInt(inputElement.css("borderBottomWidth"));
var labelElement = $("label.placeholder[for="+inputElement.attr("id")+"]");
var labelOffset = labelElement.offset();
var labelTotalHeight = labelElement.height()+
parseInt(labelElement.css("paddingTop"))+
parseInt(labelElement.css("paddingBottom"))+
parseInt(labelElement.css("borderTopWidth"))+
parseInt(labelElement.css("borderBottomWidth"))
var labelCurrentTop = parseInt(labelElement.css("top"));
var labelClass = "tip-above";
var labelNewTop = labelCurrentTop - labelTotalHeight;
if (labelOffset.top + labelNewTop < 0)
{
var labelClass = "tip-below";
var labelNewTop = labelCurrentTop + inputTotalHeight;
}
labelElement.addClass(labelClass).css(
{
zIndex: 1,
//This formula must parse after the labelClass was added
marginRight: parseInt(labelElement.css("marginRight"))+(labelElement.offset().left - inputElement.offset().left)
}
).animate(
{
top: labelNewTop+"px",
opacity: 1
},
100
);
}
function inputBlur(eventObject)
{
var inputElement = $(eventObject.target);
var labelElement = $("label.placeholder[for=" + inputElement.attr("id") + "]");
var inputOffset = inputElement.offset();
var labelNewTop = parseInt(labelElement.css("top")) + inputElement.offset().top - labelElement.offset().top;
if (this.value)
var opacity = 0;
else
var opacity = 1;
labelElement.removeClass("tip-above tip-below").css(
{
zIndex: 0,
marginRight: parseInt(labelElement.css("marginRight")) + (labelElement.offset().left - inputElement.offset().left)
}
).animate(
{
top: labelNewTop+"px",
opacity: opacity
},
100
);
}
$("label.placeholder").each(function(i) {
var labelElement = $(this);
var inputElement = $("#"+labelElement.attr("for"));
labelElement.css(
{
position: "relative",
zoom: 1,
marginRight: labelElement.offset().left - inputElement.offset().left,
top: inputElement.offset().top - labelElement.offset().top
}
);
inputElement.focus(inputFocus).blur(inputBlur);
});
Here's the CSS:
Code: Select all
/* LABELS */
label.placeholder {
padding: 4px 5px;
border-width: 0px;
color: #888;
cursor: text;
}
label.placeholder.tip-above{
background: #9edaff;
-webkit-border-radius: 3px 3px 0px 0px;
-moz-border-radius: 3px 3px 0px 0px;
color: #333;
font-weight: bold;
}
label.placeholder.tip-below {
background: #bde6ff;
-webkit-border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
color: #424242;
font-weight: bold;
}
Not only does this break as far as layout goes, but IE also throws these useless errors which explains the problem as clearly as mud used in a telescope.
I don't see where the problem lies, I don't even know where to start. Not only does IE have the most problems out of any browser, but it sucks noodles when it comes to debugging. Why Microsoft, why?! I know why! It's a conspiracy! Microsoft knows that the Web as a platform is going to take over the desktop industry, so rather then moving forward with innovation, they are just trying to suck up as much money left in the current market...
How do you guys ever handle IE? Or do you not dabble in the client-side much? How could one ever solve such an issue? How do I even expect anyone on this forum to know how to solve this problem?
I just can't wait till
Google Chrome Frame is out of beta.