i have two radio button:
radiobutton1 and radiobutton2 and when i hover over it i showed the jquery-ui dialog window… currently its showing the dialogue too far to the right… what i want to show the dialog window right underneath the radiobutton. as shown in second image.
$(document).ready(function () {
$('#div_').dialog({
autoOpen: false,
});
$(".radiobutton1").hover(
function (){
$('#div_').dialog({title: "Iamge Left)"});
$('#div_').removeClass("radiobutton1_1 radiobutton2").dialog('open');
var target = $(this);
$("#div_").dialog("wid").position({
my: 'center top',
at: 'center bottom'//,
//of: target
});
},
function (){
$('#div_').dialog('close');
});
$(".radiobutton2").hover(
function (){
$('#div_').dialog({title: "Images Right"});
$('#div_').removeClass("radiobutton1_1 radiobutton2").addClass("radiobutton2").dialog('open');
$("#div_").dialog("wid").position({
my: 'center top',
at: 'center bottom'//,
//of: target
});
},
function (){
$('#div_').dialog('close');
});
});
I think what you have is almost correct. You just need to have
my: 'left top', instead ofmy: 'center top'in the position method. Also, change.dialog("wid")to.dialog("widget"). I am guessing the latter is a typo at your side.See this in action: http://jsfiddle.net/william/dVZex/.