Set_position for modal dialog

maricanis

Hi,

I have a strange difference between WebDialog behavior when show() and show_modal() are used.
I'm using Windows 7 and have the same behavior both in Sketchup 2013 and 2014

My goal is to create modal dialog (WebDialog) and position it in the center of its parent dialog (which is also WebDialog).
In code coordinates for modal dialog are calculated before it is created, and I get next problem.

Test1

create WebDialog
set_position()
callback 'onload' is called - dialog contents are loaded
show_modal()
result: Modal dialog is opened on correct position, but its contents aren't always loaded - when I go with mouse over dialog contents are shown one by one

Test2

create WebDialog
callback 'onload' is called - dialog contents are loaded
set_position() inside callcack 'onload'
show-modal()
result: Dialog is shown on its last position for a second and then 'jumps' to correct position. all contents are loaded correctly.

What else I've tried:

Call set position inside show_modal() block -> the same 'jumping' of dialog as in Test2
Use show() instead of show_modal() in Test1 -> dialog is always loaded correctly, no jumping.
Initialize WebDialog with hash argument, and exclude 'preferences_key' inside Test2 -> 'jumping' of dialog remains, as if last position is saved.

From all my tests it seems that position should be set before onload and show_modal() are called; but how to avoid problem of not showing dialog contents in this case.
Note again that using of show() instead of show_modal() solves the problem, but I really need modal dialog here.

I've gone through Thom's lost manual, tried some stuffs but no success.

Ideas?

tt_su

Got a small sample code to reproduce and illustrate the issue?

Dan Rathbun

... and what version of Internet Explorer are you testing under ?

jolran

If I remembered I hustled with this some time ago and lost patience.

Solution, just make a html div/modal dialog on top and block layers underneath.

Might be a simpler solution..

Making a div that covers the entire page

I would like to make a div that covers the entire page. I put a css style with height:100% but this covers only the viewable area. I want it to also cover the area when I scroll down.

Stack Overflow (stackoverflow.com)

edit: I think I missread you problem. It's more related to position, rather than creating modal dialog..

maricanis

Hi,

Dan, IE version is 11. In my html file I tried to set different IE versions from 8 - 11, but all give the same problem with empty dialog opened.

Here is the part of the code. This code as result opens dialog on correct position but sometimes dialog is empty (and when I go over it with mouse controls inside dialog appear one by one).

class LocationDialog  
	#parent - parent WebDialog object
	#locationValues - array of values used to initialize dialog contents
	def initialize(parent, locationValues)
		@parent = parent
		@locationValues = locationValues
		
		#calculate dialog position in the center of parent dialog
		#arguments are dialog width and height
		pos = calculateDialogPosition(250,200)
		if pos == nil
			pos = [300, 300]
		end
		
		#create and show dialog
		options = {
			;dialog_title => TRANS.tr("Location"),
			;scrollable => false,
			#;preferences_key => 'SELocationDialog',
			;height => 300,
			;width => 200,
			;left => 300,
			;top => 300,
			;resizable => false,
		}
		@wd = UI;;WebDialog.new(options)
        	f=File.join(DL_DAYLIGHTING_PATH,"html_files\\Dialogs\\locationdialog.html")
		if not File.file?(f)
			UI.messagebox(text,MB_OK,"Dialog definition file #{f} doesn't exist")
			return
		end
		
		@wd.set_file(f)
		@wd.set_size(250,220)
		@wd.set_position(pos[0], pos[1])
				
		#add callbacks
		@wd.add_action_callback('onload') { |dialog, params|
			TRANS.webdialog(@wd) #translate GUI before loading
			@wd.execute_script("initializeLocation(#{to_json(@locationValues)});")	
		}
		#other callbacks ...

		@wd.show_modal() {}
	end

And part of html code is


<!DOCTYPE html>
<html >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="MSThemeCompatible" content="Yes">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Location dialog</title>

<link rel="stylesheet" href="./dl_dialog.css" media="screen" type="text/css">
</head>

<body>
	<div>
		<div class="label_text_row">
			<div class="floatLeft"><label for="location_text" >Location</label></div>
			<div class="floatLeft"><input type="text" id="location_text" value=""></div>
		</div>
	...		
	</div>
<script type='text/javascript' src='json2.js'></script>
<script type='text/javascript'>

	//initialize dialog
	rubyCalled( 'onload',"" );
	
	function rubyCalled( cb_name, msg ) {
		//alert ("JD;rubyCalled");
		fake_url = 'skp;' + cb_name + '@' +msg;
		window.location.href = fake_url;
	}
	
	function initializeLocation(json_location_string){
        var json_location = eval(json_location_string);
        document.getElementById("location_text").value = json_location.location;
		...
	}
</script>

	</body>
</html>

I suppose there is some problem with loading - as it is not finished when dialog is shown in some cases. But mystery remains why dialog is shown correctly when dialog is not modal (when show() function is used instead of show_modal().

Thanks in advance,
Marija

tt_su

I know that under OSX there are issues if you use the body.load event to modify the webdialog. It appear white until you click in the window - but I've not seen that under Windows.
For the OSX issue the solution is to use the event that trigger when the DOM is ready. All though, I use jQuery to take care of cross-compatibility issues.