Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #24620

Re: Displaying a pop-up thumbail for a list element

Show all headers | View raw

Dr J R Stockton wrote:

> 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:

<http://ecma-international.org/ecma-262/5.1/#sec-8.6.2>

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:

<http://www.w3.org/TR/2014/CR-html5-20140204/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes>]

>   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:

<http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-3211094>

<http://www.w3.org/TR/2014/CR-html5-20140204/embedded-content-0.html#the-img-element>

<http://validator.w3.org/>

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:

<http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#z-index>

>   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: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-06 01:48 -0700
  Re: Displaying a pop-up thumbail for a list element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-06 16:27 +0200
    Re: Displaying a pop-up thumbail for a list element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-06 18:31 +0200
  Re: Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-06 13:52 -0700
    Re: Displaying a pop-up thumbail for a list element "Mel Smith" <syntel@cox.net> - 2014-06-06 15:26 -0600
      Re: Displaying a pop-up thumbail for a list element dr.s.lartius@gmail.com - 2014-06-06 14:43 -0700
        Re: Displaying a pop-up thumbail for a list element "Mel Smith" <syntel@cox.net> - 2014-06-06 17:08 -0600
    Re: Displaying a pop-up thumbail for a list element Andrew Poulos <ap_prog@hotmail.com> - 2014-06-07 12:53 +1000
      Re: Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-07 05:02 -0700
        Re: Displaying a pop-up thumbail for a list element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-07 15:33 +0200
  Re: Displaying a pop-up thumbail for a list element Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-07 18:24 +0200
    Re: Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-07 11:01 -0700
      Re: Displaying a pop-up thumbail for a list element Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-07 20:22 +0200
        Re: Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-08 08:41 -0700
      Re: Displaying a pop-up thumbail for a list element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-07 21:20 +0200
        Re: Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-08 08:45 -0700

csiph-web