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

Groups > comp.lang.javascript > #24617 > unrolled thread

Displaying a pop-up thumbail for a list element

Back to article view | Back to comp.lang.javascript

Contents

  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

#24617 — Displaying a pop-up thumbail for a list element

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.co.uk/> (may move soon)
 FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

[toc] | [next] | [standalone]

#24620

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.

[toc] | [prev] | [next] | [standalone]

#24622

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

[toc] | [prev] | [next] | [standalone]

#24636

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.co.uk/> (may move soon)
 FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

[toc] | [prev] | [next] | [standalone]

#24637

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

[toc] | [prev] | [next] | [standalone]

#24638

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

-- 
  (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.co.uk/> (may move soon)
 FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

[toc] | [prev] | [next] | [standalone]

#24639

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

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

Thanks,

-Mel 

[toc] | [prev] | [next] | [standalone]

#24640

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

[toc] | [prev] | [next] | [standalone]

#24643

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.co.uk/> (may move soon)
 FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

[toc] | [prev] | [next] | [standalone]

#24644

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

[toc] | [prev] | [next] | [standalone]

#24658

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

As others have already pointed out, this is more a CSS related issue,
and should be asked and discussed in a proper newsgroup.  Solutions have
been already presented in
<news:53931a6b$0$6672$9b4e6d93@newsspool3.arcor-online.net>.

If you prefer, you most likely can stick with your current HTML markup,
and insert the img elements on the client side (assuming that ECMAScript
support is available there).  However, it doesn't seem to be necessary
to do that in a mouseover event listener, what would save you the
trouble to store references to these images in properties of host objects.

Assuming a slight variation of the HTML markup presented in my post in
c.i.w.a.stylesheets, namely

      <ul id="img-list">
        <li><a href="...">...</a></li>
        <li><a href="...">...</a></li>
    </ul>

you could use something like the following to insert all img elements
permanently (put the script element at the bottom of the body element,
for instance).

    <script>
        (function () {
            var imgList = document.getElementById("img-list"),
                anchors = imgList.getElementsByTagName("a");

            for (var i = 0, n = anchors.length; i < n; ++i) {
                var anchor = anchors[i],
                    img = document.createElement("img");
                img.src = anchor.href;
                anchor.insertBefore(img, anchor.firstChild)
            }
        }());
    </script>

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#24669

On Saturday, June 7, 2014 5:24:10 PM UTC+1, Christoph Michael Becker wrote:
> 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.

> >   hic.Elem.style.width = "10%"
> >   hic.Elem.style.height = "10%"

> >   hic.parentNode.appendChild(hic.Elem) }


> As others have already pointed out, this is more a CSS related issue,
> and should be asked and discussed in a proper newsgroup.

No; I need to use script for this.

> you could use something like the following to insert all img elements
> permanently (put the script element at the bottom of the body element,
> for instance).

Being unaware of the context, you are, without realising it, apparently making an unjustified assumption.  The number of avaiilable images is very large, and the individual images themselves are mostly not small.  Loading all of them at once would be unreasonable.

One should not redesign an application without knowing exactly what the application is.

The original question is now history; when you posted, I had already indicated that my interest had changed to the proper sizing of the thumbnails.

Style properties for images should include something like   .style.size = "??%"   in which the percentage scales the image in both directions.  That may already exist; but I do not recall seeing it.


-- 
  (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.co.uk/> (may move soon)
 FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

[toc] | [prev] | [next] | [standalone]

#24670

Dr J R Stockton wrote:

> The original question is now history; when you posted, I had already
> indicated that my interest had changed to the proper sizing of the
> thumbnails.
>
> Style properties for images should include something like
> .style.size = "??%"   in which the percentage scales the image in
> both directions.  That may already exist; but I do not recall seeing
> it.

You have already seen (and even used) style.width and style.height.  Set
only either of them.

However, that will most likely not have the effect you are looking for,
but these "details" seem to better be addressed in a newsgroup dealing
with CSS.

[xpost & fup2 comp.infosystems.www.authoring.stylesheets]

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#24676

On Saturday, June 7, 2014 7:22:10 PM UTC+1, Christoph Michael Becker wrote:
> Dr J R Stockton wrote:

> > The original question is now history; when you posted, I had already
> > indicated that my interest had changed to the proper sizing of the
> > thumbnails.

> > Style properties for images should include something like
> > .style.size = "??%"   in which the percentage scales the image in
> > both directions.  That may already exist; but I do not recall seeing
> > it.
> 
> You have already seen (and even used) style.width and style.height.  Set
> only either of them.

It had not occurred to me, but I discovered before reading your reply, that setting one would change both.  I now have control, and just need to consider whether I want to set the height, the width, or the area.

> However, that will most likely not have the effect you are looking for,

It does have a desirable and controllable effect.

-- 
  (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.co.uk/> (may move soon)
 FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

[toc] | [prev] | [next] | [standalone]

#24672

Dr J R Stockton wrote:

> Christoph Michael Becker wrote:
>> 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.
>> >
>> >   hic.Elem.style.width = "10%"
>> >   hic.Elem.style.height = "10%"
>> >
>> >   hic.parentNode.appendChild(hic.Elem) }
>>
>> As others have already pointed out, this is more a CSS related issue,
>> and should be asked and discussed in a proper newsgroup.
> 
> No; I need to use script for this.

Irrelevant; you would be scripting CSS properties, if that (the stylesheet 
can be prepared in advance so that you only have to set the “id” or “class” 
attribute of the new element, if that).
 
>> you could use something like the following to insert all img elements
>> permanently (put the script element at the bottom of the body element,
>> for instance).
> 
> Being unaware of the context, you are, without realising it, apparently
> making an unjustified assumption.

One would not need to make assumptions if you had given sufficient context.

> The number of avaiilable images is very large, and the individual images
> themselves are mostly not small.  Loading all of them at once would be
> unreasonable.

ACK.  A quick test in Chromium 34 shows that resources for “img” element 
objects are loaded even if the elements/objects have not been inserted in 
the document tree, and even if the “display” style property had been set to 
"none" before setting the “src” property.  This is probably to facilitate 
the corresponding events, e.g. to determine whether image data could be 
loaded even before trying to render it.  [That you can get the Console in 
any tab of Chrome Dev Tools by pressing <Esc> becomes most handy here; you 
can focus the “Network” tab and observe the resource being loaded when you 
type the statements.]

So go ahead, create the element objects with script once if you must; but 
you still need to understand CSS in order to solve your *layout* problem.
And you *really* should not augment host objects.

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

[toc] | [prev] | [next] | [standalone]

#24677

On Saturday, June 7, 2014 8:20:48 PM UTC+1, Thomas 'PointedEars' Lahn wrote:


> One would not need to make assumptions if you had given sufficient context.

One would not need to maake assumptions if one were trying to answer just the question that was asked and were smart enough to understand it.

-- 
  (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.co.uk/> (may move soon)
 FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web