I am using JQuery dialog to display dialog box on my page. When i click on button JQuery Dialog pops up but it enables browsers scrollbars too. My default page does not show scrollbars it shows only when JQuery dialog opens. Do i need to set any dialog property to disable web page resizing when showing dialog in order to avoid showing scrollbars when JQuery Dialog opens?
Sounds like your dialog is bigger than the browser window.
Does it matter that scrollbars appear?
You could use the CCS3 property
html {overflow-y: scroll;}
To always show the scrollbar so the page doesn't jump about.
Related
If you have a jQuery dialog window such as this, and lets say you have a vertical scrollbar (E.g to much text where container has a specific height).
In IE you can then use arrows up and down alongside page up and down
however in chrome / firefox you can't they just scroll the outside page.
Is there anyway to make the behave the same?
This is more of an usability or accessibility issue with the modal dialog box.The best approach is to trap focus of the modal dialog i.e. tabbing should not move focus out of dialog box. And also put a tabindex=0 on ui-dialog-content so that div must get focus on tabbing and then you can use up and down arrow key to navigate content of modal dialog.
I have a app where there is list which loading by scroll, and I have modal window, when I open window I still can load list, but this is error. How can I disable scroll in parent window (body) ? I know about overflow: hidden for body, but maybe there is special option in Ext.window.Window in order to disable scroll.
Thanks.
I think you will have same issue with all ui controls under modal dialog. You can add transparent div to feel all background and display modal dialog in front of this div. In this case all ui controls in the back of dialog will not be accessible for user.
When initialising your Ext.window.Window you can add param modal: true which will add an overlay to the background which may prevent user scrolling. Otherwise it will be a manual process of setting overflow:hidden on the body when your window is shown.
Source: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.window.Window
I'm trying to use the Jquery Scrollbar plugin from the below link..
http://manos.malihu.gr/jquery-custom-content-scroller/
I'm working on a web application chat window UI, I wanted to use a dark-thick jquery scrollbar for the Chat message body. The chat window will be opened upon click of a button after 8 seconds. Below are my questions...
I'm able to add this custom scrollbar using Chrome develepor tools console but not directly as the window is loading on the fly..
Where do I need to write the code "$("#id").mCustomScrollbar()" as the chat window is loaded upon the click of a button;
Also, in the message body div element the scrollbar plugin is creating another div with classes "mCustomScrollBox mCS-dark-thick". Whenever a message is sent, we are creating another div element to show in the message body. But this div is loading below the "plugin div", which is not correct as the messages are shown from bottom;
When modal window is opened I want browser's scrollbar to be attached to this modal window so that scrolling will scroll down the modal window and initial page will remain locked. I have seen this in getglue.com. Here are screen shots attached or you can visit the site too.
Original
Modal window is open now
As you can see the default scroll bar is now binded to modal window and page at background is locked.
How this can be achieved ? I am using jqmodal plugin (if it helps).
The effect is achieved by setting appropriate values for the CSS-property overflow-y on the the overlay and its container (see for example this MDN-article).
Here's an example of how to achieve something similar: http://jsfiddle.net/ZwXdD/
I am currently using a Jquery ui modal box.
When I am slightly scrolled down the page and click on the link to open the Modal box the box should open in the middle of the page, the modal opens in the correct position but makes the page scroll to the top making it look like the modal is opening at the bottom of the page.
this is the code i am using to open the modal
$("#lightboxOne").click(function(){
$("#example").dialog();
return false;
});
And here is a the test url for the problem
http://satbulsara.com/NSJ-LOCAL-02-06/eqs1.htm
the link to open the dialogue is called Show the Dialog
How can this be fixed?
Thanks,
Sat
After hours ripping out the lightbox i found it was a hidden div