jQuery UI Dialog cause page jump on open & close on ASP.NET - asp.net

I have an ASP.NET C# page, with image thumbnails in it.
I created a script that opens a jQuery UI Dialog on each hover on a thumbnail that shows me the thumbnail in larger size in a dialog view, and when I hover out - dialog closes.
My little annoying problem is, that in every mouseover (trigger dialog to open) - the page makes itself 'longer' - a scrollbar appears on the side of the browser, and it seems like the page gets longer when a dialog is openning, but it shouldn't do so.
When I hover off (mouseout) - the dialog disappears and the page returns to its normal state.
Because of this- when I hover through the thumbnails, my page 'jumps'.
I looked for a solution for this, and I've added return false; for each dialog open, and close - and it still doesn't make any different.
Sorry for the unperfect english, and thanks for all helpers!

I finally got my solution - for all interested:
open: function(event, ui){
/*
* Scrollbar fix
*/
$('body').css('overflow','hidden');
}
I added this to dialog's opening event and it fixed the issue!

Related

How to remove unknown property created during opening of a mat-select modal

I am facing problem on removing unknown division created during opening of a mat-select.
When I am opening a modal and after selecting values ,I need to click directly on the button given on side but because of some property of modal a div is getting created and I have to do two clicks on the button to apply changes.
Right now when I am clicking outside the mat-select modal to make it close then clicking on button it is going correct. But I need to open modal -> select options -> direct click on the button given.
Something in the background is blocking the first click when opening a mat-select modal. I am not able to see what is that. Is there some css property that can be block ? I am not getting exact hidden problem.
Modals in Angular Material create something that's called 'backdrop' by default. This backdrop is like a layer right behind your modal, filling the whole page. If you click somewhere on the page, your target will be the backdrop, which then closes the modal.
So for you to achieve, what you want to achieve, you have the following options:
edit the backdrop behavior to not prevent the default click action, so that clicks on the backdrop close the modal but also trigger the action you want
remove the backdrop on opening of the modal (this can be done by setting a flag hasBackdrop in the open methods config parameters) and close the modal programmatically by triggering the close method of the MatDialogRef
This is standard modal behavior, you should include all your needed options either before opening a modal or in the modal itself after being opened.

Sidepanel does not disappear after clicking somewhere else

I am working on alpha.dubaiexporters.com.
http://alpha.dubaiexporters.com/aboutus.aspx
Upon resizing the browser, the blue button panel comes and after clicking on it, it shows the navigation side bar.The issue is that after clicking somewhere else, it does not disappear.
I don't seem to find the issue here. The home page is not creating any problems. Rest pages do.
You can add to end of your code when you activate the menu and
$(".container").on("click", function(){
$(".menu-btn").click();
});
And inside the menu-btn.click() add a $(".container").off(); so it toggles the behaviour.

Load Dialog and keep prev page in background?

Loading a dialog will make disappear the prev page in order to show the dialog. Is there a way to leave prev page and load dialog over it?
That way I can give dialog some transparency background, or even no background!
Thanks.
The new overlay panels in jquery mobile 1.2 alpha will accomplish what you're wanting. I'd wait til they work out the bugs though.
See here: http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/popup-panels.html

how to disable parent window in asp.net using javascript

i hv an asp.net form in which i have used master page, in this by clicking on one link button a popup window will be opened, my problem is i want to close a popup child window when parent form is closed.. or i should make parent form disable when child popup is active...
i got some code but its working only for IE,, please help me to work this in Google chrome
this is my code which is working For IE
in parent window i wrote like this
function topWindow() {
var popup = window.open('BranchSearch.aspx', 'mywindow', 'location=1,width=450,height=100,toolbar=0,menubar=no,resizable=no,scrollbars=no,status=no,left=340,top=340');
popup.focus();
}
and in body tag of child pop window i wrote like dis
please help me as soon as possible
thank u
You can use window.showModalDialog This will disable parent window until you close the child window.

Referencing parent window from an iframe on a modal popup

I am using the AJAX modalpopupextender and I have an iframe embedded in the modal popup. I need to be able to reference the parent window (the window from which the modal popup was launched) to reload/change the URL when certain events on the modal popup are fired. I have tried window. top, window.parent, opener, root, etc., and have had no success. Any help would be appreciated.
Something along the lines of:
self.parent.opener
I've created a modal popup a bit like that in the past, and that selector enabled me to start mucking around with the DOM on the page that opened the window.
See more here or here

Resources