JQuery position element based on window resizing

Question

If you look at this page: http://dev.driz.co.uk/tips/ I'm experimenting a bit to learn more about jQuery and how to develop things similar to what we saw on Facebook.

You will see that I have a tooltip located relative to the red box. However, if you resize the window, it will not adjust the tip to it. How to fix it?

Also considering that the element is quite tall if the user resizes the window, I would like the tip to move up so that it appears in the screen view in other words, always having about 20 pixels from the bottom of the page, but keeping the arrow in the same place now, therefore, he adjusts only the field himself.

Can someone help me achieve these two things? Very grateful. Thanks

Answer 1

you will need to calculate the position in the window resize event:

$(window).resize(function() { // your positioning code here }); 

---

 $(document).ready(function() { calculation(); $(window).resize(calculation); function calculation() { var location = $("#link").offset(); var top = location.top; var left = location.left; left = left - $('#tip').width(); left = left - 15; $("#tip").css({ 'position': 'absolute', 'top': top + 'px', 'left': left + 'px' }); } });