Question

For some reason this basic JS to detect the browser’s resolution works in Safari and Chrome but not in IE9 or FF9. Basically whenever the form this is all in is about to be submitted the JS should update the hidden fields with the browser height and width. But again this doesn’t work in IE9 or FF9.

Submit button –

<input type="image" src="lib/send_feedback.jpg" border="0" class="feedback-submit-img" onClick="javascript: validate(); return false;"/>

Hidden form code –

<input name="h" id="h" type="hidden" value="" /><input name="w" id="w" type="hidden" value="" />

Related jQuery –

// Submit form to next page
function submitForm() {
//   document.forms["feedbackform"].submit();
    document.feedbackform.submit();
}
// Submit form and validate email using RFC 2822 standard
function validateEmail(email) { 
    // Modified version original from: http://stackoverflow.com/a/46181/11236
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
// Return true if email field is left unchanged
function originalText(email){
    var defaultMsg;
    defaultMsg = "Enter your email address (optional)";
    if(defaultMsg == email){
        return true;    
    }
    return false;
}
// Verify or decline with error message
function validate(){
    $("#result").text("");
    var email = $("#email").val();
    if ((validateEmail(email)) || originalText(email)) {
        w.value = screen.width;
        h.value = screen.height;
        submitForm();
    } else {
        $("#result").text(email + " is not a valid email.");
        $("#result").css("color", "red");
    }
    return false;
}
$("form").bind("submit", validate);

Here is the entire code and the CSS

Answer 1

jquery has a way to get the height (using the .height() method) which is cross browser compliant. A manual way to do cross browser compliant document height is something the following

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

http://james.padolsey.com/javascript/get-document-height-cross-browser/

and here is the jquery version (from a comment in that same link)

$.getDocHeight = function(){
    return Math.max(
        $(document).height(),
        $(window).height(),
        /* For opera: */
        document.documentElement.clientHeight
    );
};