0

Is there a common method to sync two properties via JavaScript or JQuery.

For example, I have a text field that is 'editable'. On double click, I hide it then show an input box. If the text field changes size, then the input has to change as well in order to maintain the layout. In the past, on a re-size event, I would make sure that I would change the size of both objects and it works fine. Essentially, I manually ensured that whenever the label changes size, I also changed the size of the input box.

Is there a better design pattern than just always setting both sizes? Maybe a listener for when CSS width changes or something?

Edit #1: Example

I want to make div_one be constantly checking div_two's width. When div_two's width changes, div_one's width will change its own width to match. To me it sounds like a "cssWidthChangeListener" or something.

Edit #2: Clarification

I don't think my post has been entirely clear up till now as i'm getting good responses for things happening in my examples, but not exactly what i'm getting at. Here is another re-statement of what I want.

How do I create an event/trigger when a css property, class, or attribute changes on an element? When div_one changes, I want to run a certain function.

Carlos Bribiescas
  • 4,197
  • 9
  • 35
  • 66
  • It is possible you are looking for following: http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element – Marek Galinski Mar 21 '14 at 20:41
  • Not quite, I know how to change a CSS property. In example, I want to make div_one be constantly checking div_two's width. Then when div_two's width changes, div_one's width will change its own width to match. To me it sounds like a "cssWidthChangeListener" or something. – Carlos Bribiescas Mar 21 '14 at 20:46
  • do you mean: http://stackoverflow.com/questions/1288297/jquery-auto-size-text-input-not-textarea – Tariq Mar 21 '14 at 20:59
  • That would do the trick, but its more like what I've done in the past. He binds on certain events that would trigger a resize in that example. I want to watch the actual property, vs he is watching events that could make changes to the property. – Carlos Bribiescas Mar 21 '14 at 21:11

2 Answers2

1

Change attributes on your elements. Do not change CSS properties directly. Manipulating CSS properties directly in JavaScript (except the occasional display: none;) almost always leads to headaches.

In your example you have two states: In state A, div_one has width N1 and div_two has width M1. In state B, div_one has width N2 and div_two has width M2. Knowing this, all you have to do is define the widths for each state as a class in your CSS file, and then manipulate the elements' (or their ancestors' or siblings') attributes (usually by adding and removing CSS classes) to tell them what state they're in.

I whipped up two quick example that you can see in this JSFiddle: http://jsfiddle.net/jrunning/7Bf92/

As you can see, all of the CSS properties are set in the CSS and only a class attribute is changed.

In Example 1, both <input>s have a common container <div>, and we signal a change in state by adding and removing the .container-active class from the <div>. Neither input needs to "know" about the other's width—they just have to know what their width is supposed to be in each state.

In Example 2, we toggle the .active class on the first <input>s, and by using the adjacent sibling selector (+) we make the second <input> change its appearance automatically. Sibling selectors only work in one direction, though: There's no way in pure CSS to make an element's style change based on elements that come after it.

Jordan Running
  • 102,619
  • 17
  • 182
  • 182
0

Angular JS provides as close a functionality I've been able to find with Data Bindings. I'm just going through the tutorial now, but I'll update this answer if I find out more precise information.

Carlos Bribiescas
  • 4,197
  • 9
  • 35
  • 66