jQuery dialog problem

Javascript coding ..

Moderators: macek, egami, gesf

faust
New php-forum User
New php-forum User
Posts: 109
Joined: Thu May 03, 2012 7:22 am

jQuery dialog problem

Postby faust » Thu Jun 07, 2012 11:37 pm

I am using the jQuery dialog plugin http://jqueryui.com/demos/dialog/ I want to open the dialog inside another div tag, but it keep opens in top of everything, so when I resize the browser window, the background moves. I want it to move with the background. I tried .append() to append it to the div in the background, but nothing happens. I tried adding a defaultClass in the dialog options with different positions. I tried to move the div that is the dialog itself inside the other div but still no result... Any suggestions?

faust
New php-forum User
New php-forum User
Posts: 109
Joined: Thu May 03, 2012 7:22 am

Re: jQuery dialog problem

Postby faust » Fri Jun 08, 2012 1:17 am

basically I need to append the dialog to a div tag that exists on the page. I'm sure that when I do that when resizing the window, the dialog will move according to the parent div. But when I use .append() or .appendTo() nothing happens. No errors thrown... I'm stuck with this for 2 day :( Help me...

faust
New php-forum User
New php-forum User
Posts: 109
Joined: Thu May 03, 2012 7:22 am

Re: jQuery dialog problem

Postby faust » Fri Jun 08, 2012 6:37 am

I got it to work after all. I'll try to summarize what I did so if anyone else have this problem maybe I could help a little :)
1. I get the offset of the element I want to position my dialog over:

Code: Select all

var cInfo = $('# elementToPlaceTheDialogOver ').offset();


2. Then I use the position options of the dialog to place it on top of that element:

Code: Select all

$( "#dialog" ).dialog({position: [cInfo.left, cInfo.top]});


3. Then I make an resize event, so if the user resizes the window, the modal dialog stays on top of the element:

Code: Select all

$(window).resize(function() {
   var cInfo = $('#elementToPlaceTheDialogOver').offset();

   $('#dialog').dialog({
      position: [cInfo.left, cInfo.top]
   });
});


aaaand that's it. I hope I helped someone :)


Return to “JavaScript”

Who is online

Users browsing this forum: No registered users and 0 guests