Newbe Dev Stack

Answer : The CSS specification requires that position:fixed be anchored to the viewport, not the containing positioned element. If you must specify your coordinates relative to a parent, you will have to use JavaScript to find the parent's position relative to the viewport first, then set the child (fixed) element's position accordingly. ALTERNATIVE : Some browsers have sticky CSS support which limits an element to be positioned within both its container and the viewport. Per the commit message: sticky ... constrains an element to be positioned inside the intersection of its container box, and the viewport. A stickily positioned element behaves like position:relative (space is reserved for it in-flow), but with an offset that is determined by the sticky position. Changed isInFlowPositioned() to cover relative and sticky. Depending on your design goals, this behavior may be helpful in some cases. It is currently a working draft, and has decent suppo...

Answer : It appears that all of the JavaScript must be included inside of the SVG for it to run. I was unable to reference any external function, or libraries. This meant that your code was breaking at svgstyle = svgobj.getStyle(); This will do what you are attempting. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> <script type="text/ecmascript"><![CDATA[ function changerect(evt) { var svgobj=evt.target; svgobj.style.opacity= 0.3; svgobj.setAttribute ('x', 300); } ]]> </script> <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' /> </sv...

Answer : Unfortunately, you need to manually fire the change event. And using the Event Constructor will be the best solution. var select = document.querySelector('#sel'), input = document.querySelector('input[type="button"]'); select.addEventListener('change',function(){ alert('changed'); }); input.addEventListener('click',function(){ select.value = 2; select.dispatchEvent(new Event('change')); }); <select id="sel" onchange='alert("changed")'> <option value='1'>One</option> <option value='2'>Two</option> <option value='3' selected>Three</option> </select> <input type="button" value="Change option to 2" /> And, of course, the Event constructor is not supported in IE. So you may need to polyfill with this: function Event( event, params ) { params = params || { bub...