use browser default scrollbar on jquery ui modal dialog - javascript

Is it possible to use jquery ui's dialog, and span it across the full browser height?
Then, if there is extra page, use the browser default scrollbar to go up and down, freezing the rest of the page behind the overlay?
$(function()
{
$('#category_modal').dialog({
autoOpen: false,
title: 'hello',
modal: true,
height: auto,
width: 500,
resizable: false
});
});

Not using the default dialog. You can make the dialog 100% height/width and "overflow" text scrollable using CSS. Your dialog would look something like this in CSS:
#dialog_box {
width: 100%;
height: 100%;
overflow-y: scroll;
}
You could also put an iFrame within the dialog if you wanted. However, this is no way to completely "Freeze" what is in the background. The user can always select the background and use the mouse-wheel or simply use the browser's scroll bar. Using overflow-y will create a 2nd scroll bar on the edge of the dialog that will scroll the content within (should you need to).

Related

Window scroll to start when open dialog at the end of page

I have a page with width is over 100% (2000px). When I click to show dialog from button in the end of page (by horizontal page), window scroll to the start of page (by horizontal page) and display the dialog.
This is my code: codepen
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#popupContainer')))
.clickOutsideToClose(true)
.title('This is an alert title')
.textContent('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
.targetEvent(ev)
);
};
I use angularjs 1.5 and newest angular material js.
How can i show dialog from button in the end of page (by horizontal page) and window not scroll to the start of page?
You can add the following CSS.
.md-dialog-container {
width: 2000px;
}
md-backdrop {
width: 2000px;
}
md-dialog {
position: absolute;
top: 25%;
right: 10%;
}
It adjusts dialog container's and backdrop's width.
Then, positioning the dialog the way you want.
See a working CodePen.

Disable vertical scroll in mobile device only fory body (not also for div with overflow: auto)

I would like disable vertical scroll in all mobile devices and i found this:
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
that works very well...
but in this way i disable scroll also for a div (my menu) that has overflow: auto.
In dekstop browser to avoid anything with JQuery when $(window).scroll() add overflow: hidden to body. And in that way i don't have problem, but with native javascript code yes... i'm new in javascript.
So with jquery i was able disable scroll of body eccept div with overflow: auto, but not with that js code.
I hope you can help me and sorry for my english.
i solved always with jQuery:
when i want disable scroll add:
$("body").css({"overflow":"hidden",'position':'fixed'});
with body: fixed i'm sure that also with mobile device is impossible scroll the page (except div that has overflow: auto
you could disable the scrool on just the body part by making it the size of the screen and then make it so it doesnt scrol
document.body.addEventListener('touchmove', function(e){
document.getElementsByTagName('body')[0]. style .height = "100vh";
document.getElementsByTagName('body')[0]. style. overflow = "hidden";
});

javascript : toggle scrolling only on document body

I need a toggle function for a dialog popup that locks page scroll, but permits the dialog to be scrollable.
I have tried CSS only with, but the code does not work in Safari iOS.
body{overflow:hidden; } //does not work in Safari iOS
So, i think I may need to use some JS magic for this to work. Any Ideas? thx.
You can toggle a class on the body to stop the scrolling: http://codepen.io/J_Mack/pen/zGMGyM
.stop-scrolling {
width: 100vw;/*can also use %*/
height: 100vh;/*can also use %*/
overflow: hidden;
}
Read before you use vw/vh: http://caniuse.com/#feat=viewport-units

The page gets scrolled to the top if I apply height to the body

My problem is that I have a button on the html page, and when this button is clicked a popup box opens(covering the background), and to stop the background scroll I am applying this css:
windowHeight = $(window).height();
$("body").css({
"height": windowHeight,
"overflow": "hidden",
"overflow-y": "hidden"
});
Everything works perfectly but the page gets scrolled to top. How do I prevent this?
This is due to the fact that you change the height. You don't need to set the height, making the body overflow: hidden should be enough.
CSS:
.locked {
overflow-x: hidden; overflow-y: hidden;
}
Javascript:
$("body").addClass("locked");
Try it: http://jsbin.com/tapagexope/1/edit?html,css,js,output (Click the body)
Tested in FF 34 and Chrome 38.
Note that you should position your overlay in a container that is position: fixed and left, top, bottom, right are all 0, covering the whole viewport. Within that box you can center your overlay element.
I actually already wrote a jQuery plugin to solve this exact problem: jquery-disablescroll
Using the plugin script, when the popup opens call:
$(window).disablescroll();
When the popup is closed, enable scrolling again by calling:
$(window).disablescroll("undo");
Here's the example.

DIV Inside jQueryUI Dialog is overflowed after multiple resizes to the dialog

Hello and thank you all for the quality answers that I always found here...
I have a jQueryUI dialog with a DIV inside...
This div is set to fill the dialog space:
div.dialog-contents {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
When I start resizing the dialog (horizontal or vertical) it slowly starts to shrink or enlarge beyond the dialog boundaries!!!... this is weird...
When I inspect the element with debugging tools I notice this:
In the outer div (the div in wich the dialog is created) the size is computed this way:
width: 294.960000038147px;
But in the inner div (the one set to fill space) it is rounded, so it starts to be different pixels as I resize the dialog
width: 248px;
I dont know what I'm doing wrong, should I use some other setting to accomplish this?
I Just want my internal div to be always 100% width and 100% height (and staying inside dialog boundaries)
Here's the fiddle
http://jsfiddle.net/e9QjD/2/
Try to resize several times the dialog to see the behaviour
Thank you very much!
The following is a possible work around.
I did see there was an issue with the height of your window-session-editor the height keeps increasing slightly relative to the modal on each re-size. I could not see an issue with the width changing. I'm not sure why this is happening but a work around would be to re-adjust the height after every re-size.
$(function () {
$("#window-session_editor").dialog({
resizeStop: function( event, ui ) {
$(this).height($(this).parent().height()-$(this).prev('.ui-dialog-titlebar').height()-34);
}
});
});
http://jsfiddle.net/e9QjD/3/
Update addressing width
$(function () {
$("#window-session_editor").dialog({
resizeStop: function( event, ui ) {
$(this).height($(this).parent().height()-$(this).prev('.ui-dialog-titlebar').height()-34);
$(this).width($(this).prev('.ui-dialog-titlebar').width()+2);
}
});
});
http://jsfiddle.net/e9QjD/4/

Categories

Resources