Path: csiph.com!usenet.pasdenom.info!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail From: Thomas 'PointedEars' Lahn Newsgroups: comp.lang.javascript Subject: Re: Displaying a pop-up thumbail for a list element Date: Fri, 06 Jun 2014 16:27:59 +0200 Organization: PointedEars Software (PES) Lines: 234 Message-ID: <2885526.4atoRGsWlH@PointedEars.de> References: Reply-To: Thomas 'PointedEars' Lahn Mime-Version: 1.0 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: 8Bit X-Trace: solani.org 1402064882 12872 eJwNx8kRADEIA7CaMrYhlMNy9F/CRj8JdqycJqNWu9NXkShh4/inGt32V7oHi9zaRg4c4M0fJ50RTw== (6 Jun 2014 14:28:02 GMT) X-Complaints-To: abuse@news.solani.org NNTP-Posting-Date: Fri, 6 Jun 2014 14:28:02 +0000 (UTC) User-Agent: KNode/4.12.4 X-User-ID: eJwFwYEBwCAIA7CXLNKi5wyE/09Ywi2owkU5h2Pzpt8gwuOWMmUIoUKDW18bwKpexg03HOM6b2sq+iQzf1fJFWI= Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg== X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&. I have a little list (G&S is on the radio at the moment) of links to > images. I want thumbnails when I hover over part of a list element. > > So far, I have little images appearing, but they increase the height of > the list element, which I do not want; I want them to overlay, rather than > push aside. Can they be shown without altering the previous > "typesetting", and if so how? I have tried z-index variously, but not > necessarily correctly. Otherwise I will presumably have to use a > minimum-size minimum-chrome pop-up window. > > I currently have (not optimised) for onmouseover :- I do not know what you consider “optimised”, so I will comment on everything I find wrong there. > function Rodent(e) { e = e || window.event Error-prone/inefficient/insufficient. if (!e) { e = window.event; } if (e) { // … } is the least you should do. > var hic = e.target || e.toElement // target is not in IE8 Only superficially there is a dichotomy of DOM implementations. The least you should do is if (hic) { // … } Note that “e.target” also is unavailable in IE 9 and 10 when in Browser Compatibility Mode. > hic.Elem = document.createElement("img") “hic” refers to a DOM object, a *host* object. By assigning to its “Elem” property, you are augmenting that object because it does not have a built-in “Elem” property (the names of all *specified* built-in properties start lowercase). You should not augment host objects because they need not observe the same rules as native objects; certainly you should not write to properties of host objects without checking their existence first: If you need to attach non-string information to a host object, such as a reference to another object (as here), you should wrap it in your own (native) object and store that information in properties of that object. See JSX:dom/widgets.js for an example. [Element-related string information can now (HTML5) be stored in “data-*” attributes, using hic.setAttribute("data-…", "…") to store, and hic.getAttribute("data-…") to retrieve it: ] > hic.Elem.src = List[hic.Wich].URL Same problem. HTML element objects do not have a built-in “Wich” property, so it must have been user-defined. > hic.Elem.align = "top" The “align” attribute/property has never been implemented in an interoperable way and is deprecated/obsolete in favor of CSS: Probably you were looking for hic.Elem.style.position = "absolute"; hic.Elem.style.top = "0"; but AISB this approach is ill-advised. (See below for a better one.) > hic.Elem.style.width = "10%" > hic.Elem.style.height = "10%" > hic.Elem.style.zIndex = "-66" Setting the “z-index” style property of the “img” element (object) to a negative value is not going to cause the new “img” element to overlay the target element; it is going to cause the target element to overlay the “img” element instead (as the *largest* z-index in a stacking context "wins"). This rather "works" because the negative value does not take effect as the element boxes do not overlap yet: > hic.ban = 0 See above. > hic.parentNode.appendChild(hic.Elem) } Using semicolons to separate simple statements, with each simple statement on its own line, is a mark of good code style in these languages as it is less error-prone and easier to read. So is using identifiers starting with a capital character only for constructors and constructor-like factories. In particular, there is a built-in “Set” constructor (ES6) that would have interfered or that you would have interfered with if you had redefined “Set” as you might have redefined “List” here. (You cannot know the runtime environment your code will eventually be exposed to. When those identifiers make sense – e.g if you want your own List type – and you are in doubt, use your own namespace, not the global one.) In summary, a better approach¹: function Rodent (target, wich) { /* or: if (!target) { returnOrThrowException(); } dep. on flexibility */ if (target) { this.target = target; /* * everything from here would go into an init() method with a general * solution, like jsx.dom.widgets.Widget.prototype.init() */ /* * there would be a method returning the computed style * based on DOM model, like jsx.dom.css.getComputedStyle(); */ var computedStyle = document.defaultView.getComputedStyle( target.parentNode, null).position; if (oldPosition == "static") { /* * depends on the element you append the “img” element to; * if you would append it to the target element, you would * read and set its “position” style property instead */ target.parentNode.style.position = "relative"; } var img = this.img = document.createElement("img"); if (img) { /* * avoid this closure: pass “list” and “wich”, list[which], * or list[wich].URL to this constructor instead */ img.src = list[wich].URL; /* * there would be a convenience method for setting several * style properties on the same DOM object, with a general * solution, like jsx.dom.widgets.Widget.prototype.setStyle() */ img.style.display = "none"; img.style.position = "absolute"; img.style.left = "0"; img.style.top = "0"; img.style.width = "10%"; img.style.height = "10%"; /* * Setting zIndex may not be necessary because positioned * elements have a higher stack level than non-positioned ones * (see above) */ img.style.zIndex = "1701"; /* * this would be done in a wrapper smoothing out DOM Event * differences, like jsx.dom.addEventListener() */ target.onmouseover = function () { /* * this would be done in an update() method with a general * solution, like jsx.dom.widgets.Widget.prototype.update() */ img.style.display = ""; }; target.onmouseout = img.onmouseout = function () { /* * this would be done in an update() method with a general * solution, see above */ img.style.display = "none"; }; target.parentNode.appendChild(img); } } this.ban = 0; } /* in a loop over all target objects¹ */ new Rodent(…, 42); This code is untested, but the scripted stylesheet approach works in Chromium 34 (I have tested it with a paragraph and an image in the CSS 2.1 Specification there). It should also work everywhere else. An advantage of only showing and hiding the “img” element with scripting is that this solution can be made more accessible if the “img” element is generated always, and only hidden/shown with scripting (by constructor and on event). In that case the pre-existing “img” element could be accessed by a name or ID whose prefix or suffix corresponds with that of the ID of the event target. ______ ¹ It is the reference to the attached “img” object that lets the target specific event listener make sense here. Usually, one should reuse event listeners if possible in order to save heap memory with several targets that should exhibit the same behavior. -- PointedEars FAQ: | SVN: Twitter: @PointedEars2 | ES Matrix: Please do not Cc: me. / Bitte keine Kopien per E-Mail.