dhtml

Alternative to DOMNodeInserted

由 时光怂恿深爱的人放手 提交于 2019-11-27 06:10:42
DOMNodeInserted is known to make dynamic pages slow, MDN even recommends not using it altogether, but doesn't provide any alternatives. I'm not interested in the element inserted, I just need to know when some script modifies the DOM. Is there a better alternative to mutation event listeners (maybe getElementsByTagName inside an nsiTimer)? If you are creating a web app that targets recent mobile phones and newer versions of browsers (Firefox 5+, Chrome 4+, Safari 4+, iOS Safari 3+, Android 2.1+), you can use the following code to create an awesome event for the insertion of dom nodes, and it

Is there a best practice for generating html with javascript

由 a 夏天 提交于 2019-11-27 05:52:36
I'm calling a web service that returns an array of objects in JSON. I want to take those objects and populate a div with HTML. Let's say each object contains a url and a name. If I wanted to generate the following HTML for each object: <div><img src="the url" />the name</div> Is there a best practice for this? I can see a few ways of doing it: Concatenate strings Create elements Use a templating plugin Generate the html on the server, then serve up via JSON. Jim Fiorato Options #1 and #2 are going to be your most immediate straight forward options, however, for both options, you're going to

How to resize html canvas element?

由 こ雲淡風輕ζ 提交于 2019-11-27 03:38:06
I have a canvas element defined statically in the html with a width and height. If I attempt to use JavaScript to resize it dynamically (setting a new width and height - either on the attributes of the canvas or via the style properties) I get the following error in Firefox: uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: file:///home/russh/Desktop/test.html :: onclick :: line 1" data: no] Is it possible to resize this element or do I have to destroy it and create a new

Child element click event trigger the parent click event

由 情到浓时终转凉″ 提交于 2019-11-27 01:23:27
Say you have some code like this: <html> <head> </head> <body> <div id="parentDiv" onclick="alert('parentDiv');"> <div id="childDiv" onclick="alert('childDiv');"> </div> </div> </body> </html>​ I don't want to trigger the parentDiv click event when I click on the childDiv , How can I do this? Updated Also, what is the execution sequence of these two event? Adil You need to use event.stopPropagation() Live Demo $('#childDiv').click(function(event){ event.stopPropagation(); alert(event.target.id); });​ event.stopPropagation() Description: Prevents the event from bubbling up the DOM tree,

How can I dynamically create a tweet button?

由 限于喜欢 提交于 2019-11-27 01:10:37
问题 I'm currently trying to create a tweet button with the horizontal count feature dynamically: JavaScript var twitter = document.createElement('a'); twitter.setAttribute('href', 'http://twitter.com/share'); twitter.setAttribute('class', 'twitter-share-button twitter-tweet'); twitter.setAttribute('data-url','http://mindcloud.co.uk/idea/?idea=' + this.id); twitter.setAttribute('data-count', 'horizontal'); twitter.setAttribute('data-via', 'jtbrowncouk'); twitter.style.top = '20px'; twitter.style

IE8 v8 not changing class for a DOM element despite JS function changing the element attribute

由 谁说胖子不能爱 提交于 2019-11-26 23:43:12
问题 I have an on-screen keyboard in order to provide a safer input for passwords. The keyboard itself is placed like this: <div class="teclado_grafico" id="teclado_grafico"> <a class="tecla_teclado" onmousedown="teclaAction( this, 'caja_selector'); return false" style="top: 0px; left: 0px;">Q</a> <a class="tecla_teclado" onmousedown="teclaAction( this, 'caja_selector'); return false" style="top: 0px; left: 28px;">W</a> . . . </div> And it has a "Shift button" which fires a JS function with this

jQuery get the id/value of <li> element after click function

由 ぃ、小莉子 提交于 2019-11-26 21:42:54
How can I alert the id of the <li> item clicked? <ul id='myid'> <li id='1'>First</li> <li id='2'>Second</li> <li id='3'>Third</li> <li id='4'>Fourth</li> <li id='5'>Fifth</li> </ul> (Anything that can replace the id may be value or something else will also work.) $("#myid li").click(function() { alert(this.id); // id of clicked li by directly accessing DOMElement property alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose alert($(this).html()); // gets innerHTML of clicked li alert($(this).text()); // gets text contents of clicked li }); If you are talking about

How do I programmatically click on an element in JavaScript?

由 时光怂恿深爱的人放手 提交于 2019-11-26 14:19:55
In IE, I can just call element.click() from JavaScript - how do I accomplish the same task in Firefox? Ideally I'd like to have some JavaScript that would work equally well cross-browser, but if necessary I'll have different per-browser JavaScript for this. The document.createEvent documentation says that " The createEvent method is deprecated. Use event constructors instead. " So you should use this method instead: var clickEvent = new MouseEvent("click", { "view": window, "bubbles": true, "cancelable": false }); and fire it on an element like this: element.dispatchEvent(clickEvent); as shown

What is the best JavaScript code to create an img element

由 廉价感情. 提交于 2019-11-26 12:36:32
问题 I want to create a simple bit of JS code that creates an image element in the background and doesn\'t display anything. The image element will call a tracking URL (such as Omniture) and needs to be simple and robust and work in IE 6 =< only. Here is the code I have: var oImg = document.createElement(\"img\"); oImg.setAttribute(\'src\', \'http://www.testtrackinglink.com\'); oImg.setAttribute(\'alt\', \'na\'); oImg.setAttribute(\'height\', \'1px\'); oImg.setAttribute(\'width\', \'1px\');

Is there a best practice for generating html with javascript

由 无人久伴 提交于 2019-11-26 12:34:31
问题 I\'m calling a web service that returns an array of objects in JSON. I want to take those objects and populate a div with HTML. Let\'s say each object contains a url and a name. If I wanted to generate the following HTML for each object: <div><img src=\"the url\" />the name</div> Is there a best practice for this? I can see a few ways of doing it: Concatenate strings Create elements Use a templating plugin Generate the html on the server, then serve up via JSON. 回答1: Options #1 and #2 are
订阅 dhtml