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

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

Putting something into DOM without being visible

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

Contents

  Putting something into DOM without being visible bit-naughty@hotmail.com - 2017-02-02 11:35 -0800
    Re: Putting something into DOM without being visible Ben Bacarisse <ben.usenet@bsb.me.uk> - 2017-02-02 20:01 +0000
    Re: Putting something into DOM without being visible JJ <jj4public@vfemail.net> - 2017-02-03 17:41 +0700
      Re: Putting something into DOM without being visible "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-03 12:57 +0100
    Re: Putting something into DOM without being visible Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-02-03 13:22 +0100
    Re: Putting something into DOM without being visible bit-naughty@hotmail.com - 2017-02-05 05:03 -0800
      Re: Putting something into DOM without being visible "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-05 19:14 +0100

#32446 — Putting something into DOM without being visible

If someone clicks a button, I want to download stuff with AJAX, and then, I guess, append it to the DOM tree. But I DON'T want it to be visible straightaway - I'll make it visible later. What do I do?


Thanks.

[toc] | [next] | [standalone]

#32448

bit-naughty@hotmail.com writes:

> If someone clicks a button, I want to download stuff with AJAX, and
> then, I guess, append it to the DOM tree. But I DON'T want it to be
> visible straightaway - I'll make it visible later. What do I do?

You have lots of options.  The simplest is probably to use "display:
none" or "visibility: hidden".  See [1] for the difference -- it's not
clear which you mean.  Other ways to hide elements (such as positioning
them outside of the viewport) have too many problems to be worth
recommending.

To change the view you can switch the property directly on the elements
(or on a container element), or you can use classes.

Remember to consider the impact on accessibility if this is going to be
used by others.

[1] https://www.w3.org/TR/2011/REC-CSS2-20110607/propidx.html

-- 
Ben.

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

#32455

On Thu, 2 Feb 2017 11:35:42 -0800 (PST), bit-naughty@hotmail.com wrote:
> If someone clicks a button, I want to download stuff with AJAX, and then,
> I guess, append it to the DOM tree. But I DON'T want it to be visible
> straightaway - I'll make it visible later. What do I do?
> 
> Thanks.

Or process the AJAX result and build the elements, but don't append the
their container into the DOM tree until it's actually needed to be shown.

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

#32457

JJ <jj4public@vfemail.net> wrote on 03 Feb 2017 in comp.lang.javascript:

> On Thu, 2 Feb 2017 11:35:42 -0800 (PST), bit-naughty@hotmail.com wrote:
>> If someone clicks a button, I want to download stuff with AJAX, and then,
>> I guess, append it to the DOM tree. But I DON'T want it to be visible
>> straightaway - I'll make it visible later. What do I do?
>> 
>> Thanks.
> 
> Or process the AJAX result and build the elements, but don't append the
> their container into the DOM tree until it's actually needed to be shown.

Or try this, 
where image-element 'q' is removed from the DOM-tree 
but kept available for later reinsertion:

<body>

<img id=q src='myImage.jpg'>

<script type='text/javascript'> 'use strict'

	let q = document.getElementById('q');
	let b = q.parentNode; // = document.body
	
	window.setTimeout('b.removeChild(q);',2000);
	window.setTimeout('b.appendChild(q);',5000);

</script>



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#32458

Stefan Ram wrote:

> bit-naughty@hotmail.com writes:
>> If someone clicks a button, I want to download stuff with
>> AJAX, and then, I guess, append it to the DOM tree. But I
> 
>   You also might use
> 
> document.createElement
> 
>   to create a DOM fragment,

This creates an _element_, not a “DOM fragment”.

The method you would be looking for then is 
document.createDocumentFragment().

>   append the downloaded material to
>   the DOM fragment and then insert the DOM fragment into the
>   DOM later.

An advantage of an actual document fragment appears to be that you can 
insert subtrees of elements at the same time:

  var fragment = document.createDocumentFragment();

  var div = document.createElement("div");
  div.id = "foo";
  fragment.appendChild(div);
 
  var div2 = document.createElement("div");
  div2.id = "bar";
  fragment.appendChild(div2);

  /* appends div#foo and div#bar to the document body */
  document.body.appendChild(fragment);

So I would suggest to use a document fragment for inserting several sibling 
elements as you would use an Array instance (in other languages: string 
buffer) to concatenate several strings efficiently.  (If you are inserting a 
tree that is based on one element node only, you can indeed just insert that 
element node instead.)

It could also be used as a storage for DOM nodes.  It has several document 
methods like .getElementById() and .querySelector() that would allow one to 
select and even clone specific nodes from it.

>   (DISCLAIMER: I have never done this IIRC, only read
>   about it.)

This works, but if there is the possibility that the document object 
representing the document that the node is being inserted into is different 
from the one from which the node was created, one has to call the target 
document object’s importNode() method before attempting to insert the 
node.

For example:

  var element = document.createElement("foo");
  
  /* 
   * if my.nodeStorage is defined in the parent frameset,
   * and holds a reference to a Map instance
   */
  window.parent.my.nodeStorage.set("foo", element);

  /* later */
  var foreignNode = window.parent.my.nodeStorage.get("foo");
  var importedNode = document.importNode(foreignNode, true);
  document.body.appendChild(importedNode);

<https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#32473

Wow thanks guys! :) Evertjan, an actual, cogent *reply* from you, without any sarcy comments?? GOOD! Keep it up!

Btw, Stefan Ram's post is not showing up in my  Google Groups, could someone please post the message? (I read Thomas's reply TO him without reading the actual post!!! :( (and didn't understand too much of it! :)) )

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

#32477

bit-naughty@hotmail.com wrote on 05 Feb 2017 in comp.lang.javascript:

> Evertjan, an actual, cogent *reply* from you, without any sarcy
> comments?? GOOD! Keep it up! 

I have no idea what reply you are talking about.

Please comply with the sensible rules of Netiquette,
and quote what your are responding on.

It seems that probably your definition of 'cogent' 
is whether you understand it, 
while I strive for sensibility in general.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [standalone]

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

csiph-web