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

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

Is there a quick way (simple syntax) to place a new DOM element vertically below instead of Horizontal (to the right)?

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

Contents

  Is there a quick way (simple syntax) to place a new DOM element vertically below instead of Horizontal (to the right)? justaguy <lichunshen84@gmail.com> - 2016-11-15 18:04 -0800
    Re: Is there a quick way (simple syntax) to place a new DOM element vertically below instead of Horizontal (to the right)? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-11-15 23:49 -0800
      Re: Is there a quick way (simple syntax) to place a new DOM element vertically below instead of Horizontal (to the right)? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-11-16 11:07 +0100
    Re: Is there a quick way (simple syntax) to place a new DOM element vertically below instead of Horizontal (to the right)? JJ <jj4public@vfemail.net> - 2016-11-16 19:05 +0700
      Re: Is there a quick way (simple syntax) to place a new DOM element vertically below instead of Horizontal (to the right)? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-11-16 13:38 +0100
        Re: Is there a quick way (simple syntax) to place a new DOM element vertically below instead of Horizontal (to the right)? justaguy <lichunshen84@gmail.com> - 2016-11-16 18:18 -0800
      Re: Is there a quick way (simple syntax) to place a new DOM element vertically below instead of Horizontal (to the right)? justaguy <lichunshen84@gmail.com> - 2016-11-16 18:18 -0800

#31724 — Is there a quick way (simple syntax) to place a new DOM element vertically below instead of Horizontal (to the right)?

span or div. Or finding x, y coordinates and then placing a new element at such coordinates is the only option to do it? 
Table's TR seems one option.

Thanks.

[toc] | [next] | [standalone]

#31725

On Tuesday, November 15, 2016 at 8:05:03 PM UTC-6, justaguy wrote:
> span or div. Or finding x, y coordinates and then placing a new element at such coordinates is the only option to do it? 
> Table's TR seems one option.

For once in your life in this group, stop putting half of your question in the subject line and nowhere else. 

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

#31727

"Michael Haufe (TNO)" <tno@thenewobjective.com> wrote on 16 Nov 2016 in
comp.lang.javascript: 

> On Tuesday, November 15, 2016 at 8:05:03 PM UTC-6, justaguy wrote:
>> span or div. Or finding x, y coordinates and then placing a new element
>> at such coordinates is the only option to do it? Table's TR seems one
>> option. 
> 
> For once in your life in this group, stop putting half of your question
> in the subject line and nowhere else. 
> 

Hear, hear!


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

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

#31728

On Tue, 15 Nov 2016 18:04:56 -0800 (PST), justaguy wrote:
> span or div. Or finding x, y coordinates and then placing a new element at
> such coordinates is the only option to do it? 
> Table's TR seems one option.

There's no quick/simple way.
If you just want to do everything as simple as possible, use a library.

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

#31729

JJ wrote:
^^
Your real name belongs there.

> On Tue, 15 Nov 2016 18:04:56 -0800 (PST), justaguy wrote:
>> [Is there a quick way (simple syntax) to place a new DOM element 
>> vertically below instead of Horizontal (to the right)?]
>> span or div. Or finding x, y coordinates and then placing a new element
>> at such coordinates is the only option to do it?
>> Table's TR seems one option.
> 
> There's no quick/simple way.

IBTD.

> If you just want to do everything as simple as possible, use a library.

This problem can probably be solved using CSS only:

  .foo {
    position: relative;
  }

  .foo .bar {
    position: absolute; /* or “fixed” */
    bottom: 0;
  }

Scripting it would not require a library:

  ancestor.style.position = "relative";

  var element = document.createElement("baz");
  element.style.position = "absolute"; /* or "fixed" */
  element.style.bottom = "0";
  element.appendChild(document.createTextNode("blub"));

  parentNode.appendChild(element);

(possibility: ancestor === parentNode)

Alternatively, one can set the “className” property of the relevant element 
objects, or use the “classList” property to add() class names, and apply the 
stylesheet above by making it the content of a newly created and inserted 
“style” element:

  var style = document.createElement("style");
  style.type = "text/css";
  style.appendChild(document.createTextNode(".foo …"));

  (document.head || document.getElementsByTagName("head")[0])
    .appendChild(style);

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

#31730

On Wednesday, November 16, 2016 at 7:39:00 AM UTC-5, Thomas 'PointedEars' Lahn wrote:
> JJ wrote:
> ^^
> Your real name belongs there.
> 
> > On Tue, 15 Nov 2016 18:04:56 -0800 (PST), justaguy wrote:
> >> [Is there a quick way (simple syntax) to place a new DOM element 
> >> vertically below instead of Horizontal (to the right)?]
> >> span or div. Or finding x, y coordinates and then placing a new element
> >> at such coordinates is the only option to do it?
> >> Table's TR seems one option.
> > 
> > There's no quick/simple way.
> 
> IBTD.
> 
> > If you just want to do everything as simple as possible, use a library.
> 
> This problem can probably be solved using CSS only:
> 
>   .foo {
>     position: relative;
>   }
> 
>   .foo .bar {
>     position: absolute; /* or “fixed” */
>     bottom: 0;
>   }
> 
> Scripting it would not require a library:
> 
>   ancestor.style.position = "relative";
> 
>   var element = document.createElement("baz");
>   element.style.position = "absolute"; /* or "fixed" */
>   element.style.bottom = "0";
>   element.appendChild(document.createTextNode("blub"));
> 
>   parentNode.appendChild(element);
> 
> (possibility: ancestor === parentNode)
> 
> Alternatively, one can set the “className” property of the relevant element 
> objects, or use the “classList” property to add() class names, and apply the 
> stylesheet above by making it the content of a newly created and inserted 
> “style” element:
> 
>   var style = document.createElement("style");
>   style.type = "text/css";
>   style.appendChild(document.createTextNode(".foo …"));
> 
>   (document.head || document.getElementsByTagName("head")[0])
>     .appendChild(style);
> 

Great idea of using CSS, thanks, and I just realized a very simple way to do it vertical at the left margin would be a simple DIV tag.  However, the object is in the middle of the screen DIV tag wouldn't suffice to create a new element right below the current object.

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

#31731

On Wednesday, November 16, 2016 at 7:05:54 AM UTC-5, JJ wrote:
> On Tue, 15 Nov 2016 18:04:56 -0800 (PST), justaguy wrote:
> > span or div. Or finding x, y coordinates and then placing a new element at
> > such coordinates is the only option to do it? 
> > Table's TR seems one option.
> 
> There's no quick/simple way.
> If you just want to do everything as simple as possible, use a library.

Like jQuery, how do we do this with jQuery?  Thanks.

[toc] | [prev] | [standalone]

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

csiph-web