สอบถามต้องการปรับขนาด dialog box ใน js

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามต้องการปรับขนาด dialog box ใน js

สอบถามต้องการปรับขนาด dialog box ใน js
ต้องการปรับขนาด dialog ให้สามารถเปลี่ยนได้อัตโนมัติ
คือเราทำให้ลองรับบนมือถือแต่มันทำไม่ได้โค้ดที่มัน fixed ค่าไว้

function addMarkers(placeType,chk,chk_lat,chk_lng) {
					if(chk == 0){
						deleteMarkers();
					}
									
					console.log(placeType);					
					//Reset Dupiclate direction show
					dD.setMap(null);
					
					//Fixed dupiclate directionInfoWindow
					if (directionInfoWindow) 
      				{
        				directionInfoWindow.close();
    				}

    				
    				var lat = chk_lat;
    				var lng = chk_lng;
    				var pos = new google.maps.LatLng(lat, lng);
    				map.setCenter(pos);
    				map.setZoom(15);
    				// $.ajax({   					
        //                     url: placeType,
        //                     dataType: 'json',
        //                     success: function(data) {
	       //                      $.each(data, function(i, items) {
								// 	if(chk_name == items.placenameth){
								// 		lat = items.latitude;
								// 		lng = items.longitude;
								// 		console.log(lat,lng);
								// 	}				
								// });
        //                     },
        //                     error: function() {
        //                     },complete: function(){
		                        $.ajax({
		                            url: placeType,
		                            dataType: 'json',
		                            success: function(data) {
			                            $.each(data, function(i, item) {
											var chk_near = (((Math.acos(Math.sin((item.latitude * Math.PI / 180)) * Math.sin((lat * Math.PI / 180)) + Math.cos((item.latitude * Math.PI / 180)) * Math.cos((lat * Math.PI/180)) * Math.cos((item.longitude - lng) * Math.PI / 180 )))) * 180 / Math.PI * 60 * 1.1515 * 1.609344).toFixed(2);
											if(chk_near <= 1.0){
																	var photo = '<img style="width:100px;height:100px;" src="'+item.photo '" />';	
																	var infowindow = new google.maps.InfoWindow({
																				content : "<div style="widht:200px;height:120px;" ><a class="button-info">" + item.placenameth + '<br/>'+photo+"</a></div>"
																	});

																	var placeLatLng = new google.maps.LatLng(item.latitude, item.longitude);
																			
																	var markerContent = "";
																			
																			//Check if content return null
																			if(item.directionth == null)
																			{
																				markerContent = "ไม่มีข้อมูล";
																				
																			}else{
																					
																				markerContent = item.directionth;
																			}
																			
																			var photoContent = '<img style="width:80px;height:80px;float:left;padding-right:10px;" src="'+item.photo '" />';
																			
																			// var icon = '/assets/pin-1.png';
																		 //        if (markerData.TypeId == '1') 
																		 //           icon = '/assets/img/pin-1.png'; 
																		 //        else if (markerData.TypeId == '2') 
																		 //           icon = '/assets/img/pin-2.png'; 
																		 //        else if(markerData.TypeId == '3') 
																		 //          icon = '/assets/img/pin-3.png'; 
																			// To add the marker to the map, use the 'map' property
																			var marker = new google.maps.Marker({
																				position : placeLatLng,
																				map : map,
																				title : item.placenameth,
																				content : '<div>'+ photoContent + markerContent + '</div>',
																				icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
																			});
																									
																			//Show infowindow when mouseover
																			google.maps.event.addListener(marker, 'mouseover', function() {

																				infowindow.open(map, marker);
																				
																			});							
																			//Hide infowindow when mouseout
																			google.maps.event.addListener(marker, 'mouseout', function() {
																				infowindow.close(map, marker);
																			});
																			
																			//Set click event for show dialog
																			google.maps.event.addListener(marker, 'click', function() {
																				
																				//Check if Body has Jquery popup element
																				var findModalElement = $('.ui-dialog').length;
																				
																				//Reset Dupiclate direction show
																				dD.setMap(null);
																				
																				//Check after click more than one time condition add popup content to difference 
																				if (findModalElement > 0) {
																					
																					//If findModalElement > 0 can't set default html elements so can add to popup box only
																					$(".ui-dialog-title").html(marker.title);
																					$("#dialog-confirm").html(marker.content);

																				} else {
																					
																					//Set Default popup value when first click
																					$("#dialog-confirm").attr('title', marker.title);
																					$("#dialog-confirm").html(marker.content);
																				}
																				var txt_title = marker.title;
																				//Get selceted latitude , longitude
																				var latitude  = this.getPosition().lat();
												    							var longitude = this.getPosition().lng();
												    						
																				//Popup dialog when click at selected point
																				$("#dialog-confirm").dialog({
																					resizable : false,
																					/*จาวาสคิปกำหนดขนาดซึ่งจะฟิกขนาด*/
																					width : auto,
      																				height : auto,
																					modal : true,
																					buttons : {
																						"ขอเส้นทาง" : function() {
																							console.log("chk ccc")
																						directionsDisplay.setMap(map);
																						calcRoute(latitude,longitude,currentLat,currentLong,txt_title);
																						$(this).dialog("close");
																						},
																					}
																				});
																			});
																			// Add marker to array
																			markers.push(marker);
											}					
										});
										markerCluster = new MarkerClusterer(map,markers);
		                            }
		                        });
		                //     }
		                // });	
				}

ส่วนแสดง dialog 

		<div id="dialog-confirm" title="">
		</div>


Kainmin 02-11-2014 12:39:51

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
เอาโค้ดมาผิดอันนี้ๆ

function addMarkers(placeType,chk,chk_lat,chk_lng) {
					if(chk == 0){
						deleteMarkers();
					}
									
					console.log(placeType);					
					//Reset Dupiclate direction show
					dD.setMap(null);
					
					//Fixed dupiclate directionInfoWindow
					if (directionInfoWindow) 
      				{
        				directionInfoWindow.close();
    				}

    				
    				var lat = chk_lat;
    				var lng = chk_lng;
    				var pos = new google.maps.LatLng(lat, lng);
    				map.setCenter(pos);
    				map.setZoom(15);
		                        $.ajax({
		                            url: placeType,
		                            dataType: 'json',
		                            success: function(data) {
			                            $.each(data, function(i, item) {
											var chk_near = (((Math.acos(Math.sin((item.latitude * Math.PI / 180)) * Math.sin((lat * Math.PI / 180)) + Math.cos((item.latitude * Math.PI / 180)) * Math.cos((lat * Math.PI/180)) * Math.cos((item.longitude - lng) * Math.PI / 180 )))) * 180 / Math.PI * 60 * 1.1515 * 1.609344).toFixed(2);
											if(chk_near <= 1.0){
																	var photo = '<img style="width:100px;height:100px;" src="'+item.photo '" />';	
																	var infowindow = new google.maps.InfoWindow({
																				content : "<div style="widht:200px;height:120px;" ><a class="button-info">" + item.placenameth + '<br/>'+photo+"</a></div>"
																	});

																	var placeLatLng = new google.maps.LatLng(item.latitude, item.longitude);
																			
																	var markerContent = "";
																			
																			//Check if content return null
																			if(item.directionth == null)
																			{
																				markerContent = "ไม่มีข้อมูล";
																				
																			}else{
																					
																				markerContent = item.directionth;
																			}
																			
														var photoContent = '<img style="width:80px;height:80px;float:left;padding-right:10px;" src="'+item.photo '" />';
																			
														// To add the marker to the map, use the 'map' property
														var marker = new google.maps.Marker({
														position : placeLatLng,
														map : map,
														title : item.placenameth,
														content : '<div>'+ photoContent + markerContent + '</div>',
														icon : '//maps.google.com/mapfiles/ms/icons/blue-dot.png'
														});
																									
														//Show infowindow when mouseover
														google.maps.event.addListener(marker, 'mouseover', function() {

														infowindow.open(map, marker);
																				
														});							
														//Hide infowindow when mouseout
														google.maps.event.addListener(marker, 'mouseout', function() {
														infowindow.close(map, marker);
														});
																			
														//Set click event for show dialog
														google.maps.event.addListener(marker, 'click', function() {
																				
														//Check if Body has Jquery popup element
														var findModalElement = $('.ui-dialog').length;
																				
														//Reset Dupiclate direction show
														dD.setMap(null);
																				
														//Check after click more than one time condition add popup content to difference 
														if (findModalElement > 0) {
																					
														//If findModalElement > 0 can't set default html elements so can add to popup box only
														$(".ui-dialog-title").html(marker.title);
														$("#dialog-confirm").html(marker.content);

														} else {
																					
														//Set Default popup value when first click
														$("#dialog-confirm").attr('title', marker.title);
														$("#dialog-confirm").html(marker.content);
																				}
																				var txt_title = marker.title;
																				//Get selceted latitude , longitude
																				var latitude  = this.getPosition().lat();
												    							var longitude = this.getPosition().lng();
												    						
																				//Popup dialog when click at selected point
																				$("#dialog-confirm").fancybox({
																					resizable : false,
																					/*จาวาสคิปกำหนดขนาดซึ่งจะฟิกขนาด*/
																					width : 400,
      																				height : 450,
																					modal : true,
																					
																				});
																			});
																			// Add marker to array
																			markers.push(marker);
								}					
						});
										markerCluster = new MarkerClusterer(map,markers);
		                            }
		            });
				}


kainmin 02-11-2014 12:44
 ความคิดเห็นที่ 2
ตัวนี้ของ jquery ui น่าจะปรับยาก ลองดูตามตัวอย่างนี้เป็นแนวทาง

http://jsfiddle.net/jasonday/nWcFR/


ninenik 02-11-2014
 ความคิดเห็นที่ 3
พี่นิคตอนนี้ทำให้ปรับขนาดอัตโนมัติได้แล้วแต่ติดปัญหา
Dialog ไม่อยู่ตรงกลาง ต้องทำอย่างไงพี่


kainmin 05-11-2014 14:09
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ