Geek Answers Handbook

JQuery element position after html () call

I use this plugin for dropdown menus: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

The button is inside the div as:

<div class="stuff"> some stuff <a class="quickfire">menu</a> </div>

I apply it to some link, for example:

 jQuery('.quickfire').menu({ content: jQuery('#search-engines').html(), // grab content from this page showSpeed: 400 });

Where .quickfire is the name of the link class. So far, so good, it works.

However, the user can also initiate an AJAX call, which selects the HTML link from the server and replaces the “stuff” div with new content (which itself will contain the quickfire link).

 jQuery.ajax({ url: 'ajax_file.php', data: { action: 'create_option_new_version', id: jQuery('#qid').val(), div: jQuery("#addMoreOptions").parent().parent().attr('id'), cleanOutput: true }, success: function(data, textStatus, jqXHR){ jQuery(".stuff").html(data); } });

As expected, the quickfire link is no longer tied to jQuery Menu. So, I bind it every time:

 jQuery.ajax({ url: 'ajax_file.php', data: { action: 'create_option_new_version', id: jQuery('#qid').val(), div: jQuery("#addMoreOptions").parent().parent().attr('id'), cleanOutput: true }, success: function(data, textStatus, jqXHR){ jQuery(".stuff").html(data); var position = jQuery('.quickfire').position(); console.log("left: " + position.left + " top: " + position.top); jQuery('.quickfire').menu({ content: jQuery('#search-engines').html(), // grab content from this page showSpeed: 400 }); } });

Almost there!

The problem is that when I click on the newly created quick launch button, it works, but the menu appears in the upper left corner of the screen, and not next to the button!

I tried to print the "position" of the quick launch button. For the initial load, one said 361 x 527. For subsequent ones, they all say that 0 x 320

Here is the real code:

 jQuery("#addMoreOptions").live('click',function(){ jQuery(".lastPollOptionInput").removeClass("lastPollOptionInput"); jQuery.ajax({ url: 'ajax_file.php', data: { action: 'create_option_new_version', id: jQuery('#qid').val(), div: jQuery("#addMoreOptions").parent().parent().attr('id'), cleanOutput: true }, success: function(data, textStatus, jqXHR){ jQuery("#addMoreOptions").parent().parent().html(data); jQuery('.quickfire').fgmenu({ content: jQuery('#search-engines').html(), // grab content from this page showSpeed: 400 }); } }); });
+7
source share
3 answers

I would go the simple way. Just get the position of the element before calling AJAX:

 var x = $('#old-div').offset().left; var y = $('#old-div').offset().top;

After calling AJAX, apply the position to the new element:

 $('#new-div').css({ "left" : x, "top" : y });

In addition, I did not understand if there is a menu: absolute or any other. Check this. I hope I was useful, cheers and good luck!

+1
source

Maybe you use fgmenu() instead of menu() ? (Update: you said you renamed the function from the menu to fgmenu yourself, so it's possible that it calls $.fn.menu - in other words, the conflicting jQuery user interface function - internally in places ...)

Check the console for errors, just in case there is something obvious.

My next assumption would be that jQuery("#addMoreOptions").parent().parent() may not be the element you expect from it, and it may actually be an <html> element or some another unexpected unexpected node.

Another thing is that since you call $(something).parent().html("blah") , you replace $(something) node, which may not exist on subsequent calls.

If there is a better way to find and save a link to the intended node, I would suggest doing this instead.

0
source

If the item is displayed in the wrong place, after re-entering / reconnecting, you need to check the css of the object. Firebug is a simple tool to use for this purpose, and it has saved me countless hours when dealing with CSS issues. When the content is read, two things have changed:

1) the parent container for the new content has changed, and therefore the context is how the position of the menu item has changed. 2) css menu has changed, perhaps from Absolute to Relative or Inherit?

Usually the simplest answer is correct, but Firebug is the way to find it. You can select any element with it to see the css attached to it ... you just need to find out about it.

http://getfirebug.com/layout

0
source

More articles:


All Articles