Asp Forum - Displaying a pop-up thumbail for a list element

Dr J R Stockton

6/6/2014 8:49:00 AM

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

function Rodent(e) { e = e || window.event
var hic = e.target || e.toElement // target is not in IE8
hic.Elem = document.createElement("img")
hic.Elem.src = List[hic.Wich].URL
hic.Elem.align = "top"
hic.Elem.style.width = "10%"
hic.Elem.style.height = "10%"
hic.Elem.style.zIndex = "-66"
hic.ban = 0
hic.parentNode.appendChild(hic.Elem) }

--
(c) John Stockton, near London, UK. Using Google, no spell-check.
Mail: J.R.""""""""@physics.org or (better) via Home Page at
Web: <http://www.merlyn.demon.... (may move soon)
FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

15 Answers

Thomas 'PointedEars' Lahn

6/6/2014 2:28:00 PM

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

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...*-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-3...

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

<http://validator.w...

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

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

Thomas 'PointedEars' Lahn

6/6/2014 4:31:00 PM

[X-Post & F'up2 comp.infosystems.www.authoring.stylesheets]

Thomas 'PointedEars' Lahn wrote in comp.lang.javascript:

> [â?¦]
> 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.

Actually, given a recent enough layout engine, there is the possibility of
not requiring client-side scripting here at all. You can have transitions
(and animations), too.

HTMLÂ¹:

<div class="thumbnail-container">
<div class="trigger">â?¦</div>
<img src="â?¦" alt="â?¦" class="thumbnail">
</div>

CSS:

.thumbnail-container {
position: relative;
}

.trigger + img {
position: absolute;
top: 0;
opacity: 0;
transition-duration: 0.5s;
z-index: -1;
}

.trigger:hover + img,
.trigger:focus + img
{
opacity: 1;
z-index: auto;
}

________
Â¹ use semantic markup instead of â??divâ? elements where possible
--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Dr J R Stockton

6/6/2014 8:53:00 PM

On Friday, June 6, 2014 9:48:57 AM UTC+1, Dr J R Stockton wrote:
> I have a little list (G&S is on the radio at the moment) of links to images.
> ...

I would be grateful if one of the reasonably normal people here would sunmmarise anything, or its absence, in the Lahn su-peroration that might reasonably be considered helpful.

ANNOUNCEMENT : I have a new Windows 7 desktop PC, additionally to my existing laptop and my old Win XP PC. This technological leap forward should suppress most routine productive activity until I learn to control it sufficiently.

--
(c) John Stockton, near London, UK. Using Google, no spell-check.
Mail: J.R.""""""""@physics.org or (better) via Home Page at
Web: <http://www.merlyn.demon.... (may move soon)
FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

Mel Smith

6/6/2014 9:27:00 PM

Dr JR Stockton said:
> ANNOUNCEMENT : I have a new Windows 7 desktop PC, additionally to my
> existing laptop and my old Win XP PC. This technological leap forward
> should suppress most routine productive activity until I learn to control
> it sufficiently.

--- Off Topic ---

Hi Dr. JR

I recently also transferred all of my many years worth of XP devlopment
work onto a Win 7 Pro machine --- BUT, I installed that work in Windows XP
Mode under Windows Virtual PC, and now I have (finally) got used to using
Win XP in a slight-smaller XP window under Win 7 Pro. Quite mind-busting
for the last several weeks getting used to this and fighting my way past
obstacles!

But, at least, all the old XP proggies work nearly identically on the
Win 7 / XP Mode platform as they did on my old XP monster. e.g., I use old
FoxBase proggies for database 'finger' work touchups. They still work
flawlessly.

I do note that XP keyboard input is not as swift as on the old XP
machine.

My basic Win 7 Pro Machine (an ASUS Laptop) will become my web site
server in the autumn, and I'll be developing S/W on the XP Mode side
simultaneously -- I hope.

HTH,

-Mel Smith

dr.s.lartius

6/6/2014 9:44:00 PM

On Friday, June 6, 2014 10:26:50 PM UTC+1, Mel Smith wrote:
> Dr JR Stockton said:
>
> > ANNOUNCEMENT :
> > ...

> Hi Dr. JR
>
> I recently also transferred all of my many years worth of XP devlopment
> work onto a Win 7 Pro machine --- BUT, I installed that work in Windows XP
> Mode under Windows Virtual PC, and now I have (finally) got used to using
> Win XP in a slight-smaller XP window under Win 7 Pro.
> ...

I have had, /ab initio/, XP mode on my laptop; but I considered the laptop as an auxiliary machine.

The Win 7 desktop arrived this morning. Just before he left, my installer started an XP mode download, which did not work. With him controlling remotely, we started a successful download and set-up ... except that I cannot yet see now to start XP mode. I expect that on Monday he will know what to do; an E-mail is in hand.

Have you seen http://en.wikipedia.org/wiki/Cla... ??

--
(c) John Stockton, near London, UK. Using Google, no spell-check.
Mail: J.R.""""""""@physics.org or (better) via Home Page at
Web: <http://www.merlyn.demon.... (may move soon)
FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

Mel Smith

6/6/2014 11:09:00 PM

<dr.s.lartius@gmail.com> wrote in message
news:ac8d8337-da4e-4a0a-9e4c-5b9dc8f9f28e@googlegroups.com...
On Friday, June 6, 2014 10:26:50 PM UTC+1, Mel Smith wrote:
> Dr JR Stockton said:
>
> > ANNOUNCEMENT :
> > ...

I have had, /ab initio/, XP mode on my laptop; but I considered the laptop
as an auxiliary machine.

I have to transport my machines to Arizona each winter. My wife wants to
fly, I have to drive with my machines, and printers in the back of my van,
so I'm now desparately looking for a (liteweight) answer to my probs. As of
now, its my Win 7 Pro as Apache Server, and XP Mode as dev machine, and one
more 'drive' south with extra equipment

The Win 7 desktop arrived this morning. Just before he left, my installer
started an XP mode download, which did not work. With him controlling
remotely, we started a successful download and set-up ... except that I
cannot yet see now to start XP mode.

On the Start Menu, under All Programs, scroll down to 'Windows
Virtual PC' . Undet *that* option, find 'Windows XP Mode', click on that,
and your Win Xp 'machine' will start up. You'll have to play with the
sizing, etc. HTH.

I spent fragments of two week transferring old proggies over my local
intra-net to my XP Mode package. I almost never look at my 'old faithful' XP
dev machine anymore. My other and 'final' XP machine is my current Dell
Apache Server machine. In three months I'll start *its* retirement and pass
the server tasks back to my Win 7 Pro laptop which ran as a lone server all
last winter in the south. Was live 24/7 for 5 straight months with only
60-second shutdowns every week or so.

I expect that on Monday he will know what to do; an E-mail is in hand.

Have you seen http://en.wikipedia.org/wiki/Cla... ??

Don't remember if I have, but will look aand see., but will look and
verify.

Thanks,

-Mel

Andrew Poulos

6/7/2014 2:53:00 AM

On 7/06/2014 6:52 AM, Dr J R Stockton wrote:
> On Friday, June 6, 2014 9:48:57 AM UTC+1, Dr J R Stockton wrote:
>> I have a little list (G&S is on the radio at the moment) of links
>> to images. ...
>
> I would be grateful if one of the reasonably normal people here would
> sunmmarise anything, or its absence, in the Lahn su-peroration that
> might reasonably be considered helpful.

You got as complete an answer to your question as is possible. Is there
some of it that you cannot understand that you would like more help with?

Andrew Poulos

Dr J R Stockton

6/7/2014 12:03:00 PM

On Saturday, June 7, 2014 3:53:27 AM UTC+1, Andrew Poulos wrote:
> On 7/06/2014 6:52 AM, Dr J R Stockton wrote:
> > On Friday, June 6, 2014 9:48:57 AM UTC+1, Dr J R Stockton wrote:
> >> I have a little list (G&S is on the radio at the moment) of links
> >> to images. ...
> >
> > I would be grateful if one of the reasonably normal people here would
> > sunmmarise anything, or its absence, in the Lahn su-peroration that
> > might reasonably be considered helpful.
>
> You got as complete an answer to your question as is possible. Is there
> some of it that you cannot understand that you would like more help with?

I just wanted to know which, if any, part of it actually answered my question.

He does not seem to have noticed that a part of the code, while legitimate code, did not express what I would presumably want. The code I showed sets the size of the image to "10%", which FF29 at least takes as 10% of the viewport size. The viewport is generally not square, so square pictures give non-square thumbnails. It is that which I must tackle next.

--
(c) John Stockton, near London, UK. Using Google, no spell-check.
Mail: J.R.""""""""@physics.org or (better) via Home Page at
Web: <http://www.merlyn.demon.... (may move soon)
FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

Thomas 'PointedEars' Lahn

6/7/2014 1:34:00 PM

Dr J R Stockton wrote:

> On Saturday, June 7, 2014 3:53:27 AM UTC+1, Andrew Poulos wrote:
>> On 7/06/2014 6:52 AM, Dr J R Stockton wrote:
>> > On Friday, June 6, 2014 9:48:57 AM UTC+1, Dr J R Stockton wrote:
>> >> I have a little list (G&S is on the radio at the moment) of links
>> >> to images. ...
>> >
>> > I would be grateful if one of the reasonably normal people here would
>> > sunmmarise anything, or its absence, in the Lahn su-peroration that
>> > might reasonably be considered helpful.
>>
>> You got as complete an answer to your question as is possible. Is there
>> some of it that you cannot understand that you would like more help with?
>
> I just wanted to know which, if any, part of it actually answered my
> question.

All of it answered your question. If the â??Drâ? you are showing off in front
of your name means anything, you do not need anyone to connect the dots for
you.

> He does not seem to have noticed that a part of the code, while legitimate
> code, did not express what I would presumably want.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
This is not a guessing game. Ask about what you want to know. All crystal
balls are under repair.

> The code I showed sets the size of the image to "10%", which FF29 at least
> takes as 10% of the viewport size. The viewport is generally not square,
> so square pictures give non-square thumbnails. It is that which I must
> tackle next.

You did not ask about the size of the images at all. You asked how you can
overlay them on your list element without it changing size:

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

And that, together with many other problems of your approach, I did address.
I even gave you example code even though yours is actually a problem that
has very little to do with scripting; it has to do with CSS, on-topic in
<news:comp.infosystems.www.authoring.stylesheets>.

Instead of continuing to complain and insult people behind their backs, and
playing stupid, you should be grateful that I invested my precious time for
reading and replying to one of your postings, given that your posting was
mostly off-topic, you posted via borken Google Groups, and considering your
past and present behavior towards me â?? and make the best of it. For as
things are now, it may not happen again anytime soon.

See also the FAQ Notes for recommendations on how to ask questions.

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Christoph M. Becker

6/7/2014 4:24:00 PM

comp.lang.javascript

Displaying a pop-up thumbail for a list element

Dr J R Stockton

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Dr J R Stockton

Mel Smith

dr.s.lartius

Mel Smith

Andrew Poulos

Dr J R Stockton

Thomas 'PointedEars' Lahn

Christoph M. Becker

x Login to ForumsZone