Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML JavaScript

jQuery dialog problem

Javascript coding ..

Moderators: macek, egami, gesf

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 :)
faust
New php-forum User
New php-forum User
 
Posts: 109
Joined: Thu May 03, 2012 7:22 am


Return to JavaScript

Who is online

Users browsing this forum: No registered users and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.

cron