Jquery UI Dialog - when opened IE7 Browser moves instantly to the bottom of the page
i have been working on a new .net MVC site and have integrated some of the awesome jquery UI components.
ive been testing it in IE8, FF, opera and Chrome and all looks well. Once I test in IE7, surprisingly its the dialogs that are causing a problem.
basically what’s happening is that one you user clicks to open a dialog the page will scroll immediately to the bottom of the page. This is especially bad if the page is quite long.
this only happens in IE7 (and probably 6 but im not even going there!).
I have spend a few hours reading forums and it seems im not the only one.
I have created a dirty hack which im not keen on but it does work.
onclick="SignIn(); <% if(ModelHelperClass.CheckForOldIEVersion() == true) Response.Write("window.scrollTo(0, 0);"); %> return false;">
has anyone else had this issue and resolved it without resorting to dirty hacks ?
im using jquery-ui-1.8.custom.min.js and jquery-1.4.2.min.js
any help is most appreciated
Truegilly
Update---
hello, thanks for the response -
at the top of my page i have this declaration...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
i am including these files....
<link href="/Scripts/css/blitzer/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.1.custom.min.js" ></script>
here is my signin function - the other dialogs are pretty similar
// Sign in to the site
funct开发者_运维技巧ion SignIn()
{
$("#SignIn").dialog({
bgiframe: true,
modal: true,
resizable: false,
buttons: {
'Sign In': function () {
// the username and password
var Username = $("#Username").val();
var Password = $("#Password").val();
var dataString = 'Username=' + Username + '&Password=' + Password;
// AJAX here....
// when the user clicks sign in, the form is submitted
//$("#SignInForm").submit();
},
Cancel: function () {
$(this).dialog('close');
}
}
});
}
as i say, it works fine in all browsers except IE7
I had the same issue with IE7 and was using the latest version of jquery and didn't have any stray commas.
The fix turned out to be easy - a simple addition to the CSS. Adding .ui-dialog{ position: absolute; overflow:hidden } fixes it in IE7.
Does the dialog use position: fixed? IE7 honors that only when in standards mode, but in quirks mode, it inserts such a dialog in the normal page flow, causing the rest of the page to move down.
Therefore, we should double-check, if you're really in standards mode:
- The Doctype declaration must be the absolutely first thing in the document (there must not be any comment or anything above it!)
- I would test with
<!doctype html>, because it works very well to put IE7 (and all modern browsers) in standards mode, and it's harder to make a typing mistake.
I changed the jquery-ui.css class for .ui-dialog from position of relative to absolute. Tested in IE 7,8,9, Chrome 14.0.835.163 beta-m, Safari 5.1, FireFox 3.6.16
I've solved It removing a comma in the html code:
look after width: 715
Before:
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 715,});
After:
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 715
});
IE7 reported me an error in the line where there was a comma.
I had this problem before, but it was just because I didn't include the jQuery UI CSS. And, this sounds like a CSS issue to me, honestly.
How are you making the dialog appear? I see the "SignIn" function, but what does that contain? (You can manually set the position of the dialog in the .dialog() method, by the way... not sure if that would help you out a little)
Also, make sure your browser is in standards-compliant mode. If you're in Quirks mode, that could have an effect on any styles that are applied. If you don't know how to do this, at the very least you need to have a DOCTYPE declared. Something like <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> at the top of the HTML.
I had this issue but it went away when I upgraded to jquery 1.4.4 and jqueryui 1.8.7
None of the CSS tips did the trick for me.
How I fixed it:
HTML
<a href="javascript:openDialogFunction(parameters)">...</a>
Javascript
function openDialogFunction(parameters) {
var topOff = $(window).scrollTop();
//code to open the dialog
$(window).scrollTop(topOff);
}
加载中,请稍侯......
精彩评论