Question

I have a browser check:

$(document).ready(function() {
if ($.browser.chrome) {
  //show document write input only if chrome = true else, ignore it
}
});
</script>

HTML

<input name="name" type="text" size="30" maxlength="50" **IF CHROME == TRUE? document.write("style="position:relative; margin-top:-3px; margin-left:-1px;"");** >

Obviously the above is incorrect .. Can someone please explain the proper way of doing this? Thanks!

Answer 1

While I am not a fan of this one-off hack, the following explains how it can be obtained given that $.browser.chrome evaluates as expected.

---

The document cannot be written to inline at this point, however, the attributes of the element can be changed. For instance, inside the conditional if-check:

$(inputSelector).attr('style',
    'position:relative; margin-top:-3px; margin-left:-1px;');

However, since the style attribute, which is “text”, is synthesized to a “stye object”, it is usually best to avoid text-DOM access. This can be achieved using the jQuery.css method:

$(inputSelector).css({
    position: 'relative',
    marginTop: '-3px',
    marginLeft: '-1px'
})

Where inputSelector is an appropriate selector to match the appropriate element(s). For instance, <input name="theName" .. can be matched with [name="theName"]. See jQuery selectors for more details.