0

The requirement is fairly simple, I need to show a popup on click of a link in a table where the user clicked (X and Y coordinates). User can add tables from a list on a web page.

When the user clicks on a link for the first time, the popup does show at the right location but window scrolls to the bottom (focus is shifted to the bottom) and there's lot of extra space created beneath the table. This is annoying because now the user has to scroll up to see the table and the popup. Interestingly, this happens only on IE (ver. 7.0). I tested with Firefox, it works just fine.

Any help shall be appreciated.

Thanks Kunal

Kunal
  • 11
  • 1
  • 3

2 Answers2

1

Sounds like you've got an anchor link (e.g. #footer) and it is jumping to that (note that the example I gave would jump to as it'll use any IDs as anchors).

You should call .preventDefault() on the javascript event. eg (jQuery):

$('a').click(function(e) {
    e.preventDefault();
    //other code...
});

Code regarding comments:

//get current position
var event = getEvent ( ffEvent );
event.preventDefault();
jQuery("#"+oMatrixModel.m_sPortletNameSpace+"popupDiv").dialog({
 position: [event.clientX,event.clientY], modal: true,
 resizable:false , height: 'auto', dialogClass: 'alert'
 });
Blair McMillan
  • 5,299
  • 2
  • 25
  • 45
  • I just tested my existing code on IE 8, it works fine there as well. So, I guess the issue is just with IE 7 – Kunal Mar 18 '11 at 15:02
  • Hmm, it still sounds like that's the issue though. What's the `href` of the link that you are clicking? – Blair McMillan Mar 18 '11 at 15:04
  • Well, it's a legacy app which uses JSP tag lib to generate HTML on the fly...13.2105 – Kunal Mar 18 '11 at 15:15
  • Ok, so it does have an anchor (the `#`). Usually that would jump you to the top of the page though. Can you check whether there's a call to `.preventDefault()` in your JS code? If you're not sure, can you show the code that binds your links to showing the popup? – Blair McMillan Mar 18 '11 at 15:18
  • Add `event.preventDefault()` between those two lines. See my edit for clarification. – Blair McMillan Mar 18 '11 at 15:30
  • Hummm I added a call to event.preventDefault(), following is what happened: Firefox (ver 3.6.15)- works fine! even before it was working well. IE (ver 7)- can't see even the popup! IE (ver 8)- can't see even the popup! – Kunal Mar 18 '11 at 15:39
  • I read this web page- http://api.jquery.com/event.preventDefault/ I don't understand why would the popup jump to the top of the page when I'm providing the location. – Kunal Mar 18 '11 at 15:43
  • Sorry, the popup jumps to the top of the page or the page scrolls to the bottom (leaving the popup at the top of the page in the correct spot)? Which is it? – Blair McMillan Mar 18 '11 at 15:52
  • I'm sorry if I confused you. When I added the event.preventDefault() call, I don't get to see the popup at all on IE 7 and 8. However, it works fine on FireFox. On IE the JavaScript error is "Object does not support this property or method". – Kunal Mar 18 '11 at 15:54
  • Here's why it doesn't work on IE: http://stackoverflow.com/questions/1000597/event-preventdefault-function-not-working-in-ie-any-help the new code is: if(event.preventDefault) event.preventDefault(); else event.returnValue = false; Still, on IE 7 the page scrolls to the bottom (leaving the popup at the top of the page in the correct spot). Works fine on IE 8 and FireFox, this means event.preventDefault didn't do any good. – Kunal Mar 18 '11 at 15:59
  • Odd. It must be something else then causing the issue. If you remove `position: [event.clientX,event.clientY],` from your dialog code does that stop IE from jumping to the bottom of the page? Don't worry if the dialog isn't in the right spot anymore, we can try and fix that after, just need to work out what's causing IE to scroll. – Blair McMillan Mar 18 '11 at 16:12
  • No. I removed the relative positioning of the popup. IE 7- popup appears in the center of the page but still jumps to the bottom. IE 8- popup appears in the center of the page and as usual the focus remains on the center. – Kunal Mar 18 '11 at 16:20
1

Guys, I finally got it working, it was actually a CSS issue. I added the following snippet to a css my app uses and all worked fine:

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
Naftali
  • 144,921
  • 39
  • 244
  • 303
Kunal
  • 11
  • 1
  • 3