javascript - What type of event handler would I use to manipulate the size of a div? -
i have figured out how use event handlers manipulate color using onmouseover don't know change here in order affect size of divs.
what have 5 divs green , 100x100 px. , trying manipulate event handlers make div moused on grow 150x150.
this have far don't know change this.style.backgroundcolor to.
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> </head> <body> <div id="category"> <div class="content"> <h2>title here</h2> <p>content area</p> </div> <div class="content"> <h2>title here</h2> <p>content area</p> </div> <div class="content"> <h2>title here</h2> <p>content area</p> </div> <div class="content"> <h2>title here</h2> <p>content area</p> </div> <div class="content"> <h2>title here</h2> <p>content area</p> </div> </div> <style> div {background-color: springgreen;} div {width: 100px;} div {height: 100px;} </style> </body> <script src="js/main.js"></script> </html> and javascript
/** * created mark on 3/28/2015. * */ var category = document.getelementbyid("category"); (var child = category.firstchild; child != null; child = child.nextsibling) { if (child.nodetype == 1 && child.classname == "content") { child.onmouseover = function() { this.style.backgroundcolor = "#ff0000"; }; child.onmouseout = function() { //let original background show through. this.style.backgroundcolor = "transparent"; } } }
you can have custom event that. if want event. or else can have simple callback function.
var elem = $(".content-area"); // $ document.querseletor() not jquery eventtarget.call(elem); so actuall function should like:
function resized(elem, cb) { var ew = elem.offsetwidth, eh = elem.offsetheight; setinterval(function() { if(elem.width != ew || elem.height != eh) { ew = elem.width; eh = elem.height; // either cb() or elem.fire(); } }, 2000) } more or less, untested..
Comments
Post a Comment