CODEWITHSUNDEEP
javascriptjqueryhtmlcsscross-browser
Eric
Eric

Reputation: 575

JS to detect browser resolution works in Chrome & Safari but not IE9 or FF9

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

Upvotes: 1

Views: 1163

Answers (2)

ryanve
ryanve

Reputation: 52531

When you say browser resolution to you mean the physical size of the monitor? If so, you can use: 

var w = window.screen.width;
var h = window.screen.height;

Those are the same as the device size.

See: responsejs.com/labs/dimensions/

Upvotes: 0

Kristian
Kristian

Reputation: 21830

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
    );
};

Upvotes: 2

Related Questions