All geek questions in one place

JQuery UI Dialog - when you open the browser, IE7 instantly moves to the bottom of the page

I was working on a new MVC MVC website and integrated some of the awesome jquery user interface components.

ive tested it in IE8, FF, opera and Chrome, and everything looks good. As soon as I test in IE7, its dialogs that cause the problem are amazing.

basically it happens that the user you click opens a dialog box, the page will scroll immediately at the bottom of the page. This is especially bad if the page is quite long.

this only happens in IE7 (and probably 6, but I'm not even going there!).

I spent several hours reading the forums, and this seems to them not the only one.

I created a dirty hack that doesn't get carried away, but it works.

onclick="SignIn(); <% if(ModelHelperClass.CheckForOldIEVersion() == true) Response.Write("window.scrollTo(0, 0);"); %> return false;">

Has anyone else had this problem and solved 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 ---

Hi, thanks for the reply -

at the top of my page I have this ad ...

 <!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 function 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 said, it works fine in all browsers except IE7

+4
source share
7 answers

I decided to remove the comma in the html code:

watch width: 715

Before:

 $(function(){ // Dialog $('#dialog').dialog({ autoOpen: false, width: 715,});

After:

 $(function(){ // Dialog $('#dialog').dialog({ autoOpen: false, width: 715 });

IE7 told me the error in the line where the comma was.

0
source

I had the same problem with IE7 and I used the latest jquery and didn't have any commas.

The fix turned out to be simple - a simple addition to CSS. Adding .ui-dialog{ position: absolute; overflow:hidden } .ui-dialog{ position: absolute; overflow:hidden } fixes it in IE7.

+6
source

Does the dialog use position: fixed ? IE7 notes that it is only in standard mode, but in quirks mode, it inserts such a dialog box into a normal page stream, causing the rest of the page to move down.

Therefore, we must double check if you are really in standard mode:

  • The Doctype declaration should be absolutely the first in the document (there should not be any comments or anything else!)
  • I would test with <!doctype html> , because it works great to put IE7 (and all modern browsers) into standard mode, and it is harder to make an input error.
+1
source

I changed the jquery-ui.css class for the .ui dialog from a position relative to absolute. Tested in IE 7,8,9, Chrome 14.0.835.163 beta-m, Safari 5.1, FireFox 3.6.16

+1
source

I had this problem before, but it was only because I did not include CSS jQuery UI. And honestly, this sounds like a CSS issue.

How do you create a dialogue? I see the "SignIn" function, but what does it mean? (You can manually set the position of the dialog in the .dialog () method, by the way ... not sure if this will help you a bit)

Also, make sure your browser is in standard mode. If you are in Quirks mode, this can affect any styles you apply. If you do not know how to do this, at least you need to declare DOCTYPE. 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 HTML parts.

0
source

I had this problem, but it went away when I upgraded to jquery 1.4.4 and jqueryui 1.8.7

0
source

None of the CSS tips helped.

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

Source: https://habr.com/ru/post/1311452/

More articles:


All Articles