Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><strong>Edit 4:</strong> Live Demo</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() { $('#toggleColor').on('click', function() { $(this).toggleClass('darkblue'); }).attrchange({ trackValues: true, callback: function(event) { $(this).html("&lt;ul&gt;&lt;li&gt;&lt;span&gt;Attribute Name: &lt;/span&gt;" + event.attributeName + "&lt;/li&gt;&lt;li&gt;&lt;span&gt;Old Value: &lt;/span&gt;" + event.oldValue + "&lt;/li&gt;&lt;li&gt;&lt;span&gt;New Value: &lt;/span&gt;" + event.newValue + "&lt;/li&gt;&lt;/ul&gt;"); } }); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; } #toggleColor { height: 70px; width: 300px; padding: 5px; border: 1px solid #c2c2c2; background-color: #DBEAF9; } #toggleColor span { font-weight: bold; } #toggleColor.darkblue { background-color: #1A9ADA; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://meetselva.github.io/attrchange/javascripts/attrchange.js"&gt;&lt;/script&gt; &lt;p&gt;Click below div to toggle class darkblue.&lt;/p&gt; &lt;div id="toggleColor"&gt;&lt;/div&gt;</code></pre> </div> </div> </p> <p><strong>Edit 3:</strong> I have put all this together as a plugin that can be downloaded from git <a href="https://github.com/meetselva/attrchange" rel="nofollow noreferrer"><strong>attrchange</strong></a> and here is the <a href="http://meetselva.github.com/attrchange/" rel="nofollow noreferrer"><strong>demo page</strong></a>. </p> <p><strong>Edit 2:</strong></p> <ol> <li>Fix for propertName in IE7 &amp; IE8</li> </ol> <p><strong>Edit 1:</strong> </p> <ol> <li>Handle multiple elements </li> <li>Ordered the conditions as MutationObserver, DOMAttrModified and onpropertychange for better implementation.</li> <li>Added modified Attribute Name to the callback.</li> </ol> <p>Thanks to @benvie for his feedback.</p> <p><strong>DEMO:</strong> <a href="http://jsfiddle.net/zFVyv/10/" rel="nofollow noreferrer">http://jsfiddle.net/zFVyv/10/</a> (Tested in FF 12, Chrome 19 and IE 7.)</p> <pre><code>$(function() { (function($) { var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; function isDOMAttrModifiedSupported() { var p = document.createElement('p'); var flag = false; if (p.addEventListener) p.addEventListener('DOMAttrModified', function() { flag = true }, false); else if (p.attachEvent) p.attachEvent('onDOMAttrModified', function() { flag = true }); else return false; p.setAttribute('id', 'target'); return flag; } $.fn.attrchange = function(callback) { if (MutationObserver) { var options = { subtree: false, attributes: true }; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(e) { callback.call(e.target, e.attributeName); }); }); return this.each(function() { observer.observe(this, options); }); } else if (isDOMAttrModifiedSupported()) { return this.on('DOMAttrModified', function(e) { callback.call(this, e.attrName); }); } else if ('onpropertychange' in document.body) { return this.on('propertychange', function(e) { callback.call(this, window.event.propertyName); }); } } })(jQuery); $('.test').attrchange(function(attrName) { alert('Attribute: ' + attrName + ' modified '); }).css('height', 100); }); </code></pre> <p><strong>Ref:</strong> </p> <ol> <li><a href="https://stackoverflow.com/a/4562426/297641">Detect if DOMAttrModified supported</a></li> <li><a href="https://stackoverflow.com/a/10466236/297641">DOMAttrModified for chrome</a></li> <li><a href="https://developer.mozilla.org/en/DOM/DOM_Mutation_Observers" rel="nofollow noreferrer">Mutation Observer</a></li> <li><a href="https://developer.mozilla.org/en/DOM/Mutation_events" rel="nofollow noreferrer">Why should we avoid using Mutation events?</a></li> <li><a href="http://msdn.microsoft.com/en-us/library/ie/ms536956%28v=vs.85%29.aspx" rel="nofollow noreferrer">onPropertyChange IE</a></li> </ol> <blockquote> <p>Mutation Observers is the proposed replacement for mutation events in DOM4. They are expected to be included in Firefox 14 and Chrome 18</p> </blockquote> <p><strong>Browser Support:</strong></p> <p><code>onpropertychange</code> - is supported in IE (tested in IE 7)</p> <p><code>DOMAttrModified</code> - is supported in IE 9, FF and Opera</p> <p><code>MutationObservers</code> - is very new and it worked fine in <a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="nofollow noreferrer">Chrome 18</a>. Not sure how far it is supported and yet to be tested in Safari. </p> <p>Thanks <a href="https://stackoverflow.com/questions/10868104/can-you-have-a-javascript-hook-trigger-after-a-dom-elements-style-object-change/11004907#comment14381951_11004907">@benvie</a> on adding info about WebkitMutationObserver</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload