How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?


Tags: javascript,jquery,html,css,css-position

Problem :

I have a bunch of functionality for manipulating one div's position and I need another div (not child or parent) to follow any position change automatically.

Here is a very simplified illustration: http://jsfiddle.net/ZHLD5/

<div id="follower"></div>
<div id="main"></div>

$('#main').draggable();

How to achieve this in CSS or jquery without changing html structure and without messing with selectors in draggable() and bunch of other codes?

So basically, how to make one div's position (not child or parent) completely linked / dependent on another div's position?



Solution :

$('#main').draggable({
  drag: function( event, ui ) {
    $('#follower').css({
      top: ui.position.top,
      left: ui.position.left
    });
  }
});

Another approach here

As long as you are using draggable(jQuery ui),You can easily achieve it like this. But since the function is called alot. don't forget to use id as the selector for performance.


    CSS Howto..

    CSS/Menu: How to position element right below/beside elements

    How to create a header that changes as you scroll down the page? [duplicate]

    How to dynamically add .css to a custom Javafx LineChart Node?

    css: How to select first anchor tag inside table

    How to modify multiple elements of a block with BEM CSS

    CSS: How to make a nav menu with a sub nav menu directly below it?

    HTML/CSS How to make a menu closed and then use class=“active”

    How to stop css class on textbox

    How can i override this css behavior with jquery?

    How to make heading appear in different colors

    How to overlay zoom icons over images and always keep them lined up perfectly?

    How to add multiple button in 1 line (css)? [duplicate]

    CSS: How to float:right and center

    jQuery Cycle Plugin is showing border of auto-generated links

    How to detect when CSS value has changed?

    How to adjust the height of a series of DIVs by CSS

    How to fill in blank space using html and css

    How to keep text in textfield even after focus and remove on key press?

    How to use custom CSS with my Sharepoint WebPart?

    HTML CSS: How to align grid to content area?

    how to choose what transform is applied first in css

    How do I set background-image height using jQuery?

    How to animate a height change using javascript and css?

    How do I make a Javascript alert display only once, ever? [closed]

    So I have an HTML file with a paragraph and I need to break into three lines BUT i can only modify the CSS. How do I pull this off? (code below)

    how do you center columns/rows

    MeteorJs: how to add multiple js and css file based on templates.?

    How to fix IE support for line break using CSS pseudo-element?

    How to create cascading menus in rails?

    How to vertically align text over an image