How do you do this? (dot, circle etc.)

D

DL

Say, I have 4 "things" that I'd like to place or have its label
displayed at the following coordinates
x,y (0,90), x, y (90,0), x,y (180,90), x,y (90,180)
and at each of these coordinates I'd like js to have a mark like a dot
there.

How do we do that?

Also, what if we have 5 or 6 or 7 or more "things"? And it would be
nice if the dots are "drawn" to form a circle something. But this
part of the question would be easier once we get the first part
resolved...

Thanks in advance.
 
T

Thomas 'PointedEars' Lahn

DL said:
Say, I have 4 "things" that I'd like to place or have its label
displayed at the following coordinates
x,y (0,90), x, y (90,0), x,y (180,90), x,y (90,180)
and at each of these coordinates I'd like js to have a mark like a dot
there.

How do we do that?

Creating a block-level element, and positioning it with CSS.
Also, what if we have 5 or 6 or 7 or more "things"?

Creating more block-level elements, and positioning them with CSS.
And it would be nice if the dots are "drawn" to form a circle something.
[...]

SVG is better suited for this.
Thanks in advance.

You're welcome.


PointedEars
 
E

Evertjan.

DL wrote on 06 okt 2009 in comp.lang.javascript:
Say, I have 4 "things" that I'd like to place or have its label
displayed at the following coordinates
x,y (0,90), x, y (90,0), x,y (180,90), x,y (90,180)
and at each of these coordinates I'd like js to have a mark like a dot
there.

How do we do that?

Also, what if we have 5 or 6 or 7 or more "things"? And it would be
nice if the dots are "drawn" to form a circle something. But this
part of the question would be easier once we get the first part
resolved...

Here are a few hundred "things" put on coordinates:

<http://devrijehuisarts.org/test/JSgraph.asp>

Press viewsource if you are interested

I made this a few years ago, it still works on Chrome,
and probably on most browsers.
 
D

Don84

DL said:
Say, I have 4 "things" that I'd like to place or have its label
displayed at the following coordinates
x,y (0,90), x, y (90,0), x,y (180,90), x,y (90,180)
and at each of these coordinates I'd like js to have a mark like a dot
there.
How do we do that?

Creating a block-level element, and positioning it with CSS.
Also, what if we have 5 or 6 or 7 or more "things"?

Creating more block-level elements, and positioning them with CSS.
And it would be nice if the dots are "drawn" to form a circle something..
[...]

SVG is better suited for this.
Thanks in advance.

You're welcome.

PointedEars

Thank you for the pointer, that's very helpful. One issue though I'm
not that good at CSS, happen to have some sample code? In terms of
block element, between div and span, which one might fit the need
better? Or probably no difference?

Much appreciated.
 
D

Don84

DL wrote on 06 okt 2009 in comp.lang.javascript:




Here are a few hundred "things" put on coordinates:

<http://devrijehuisarts.org/test/JSgraph.asp>

Press viewsource if you are interested

I made this a few years ago, it still works on Chrome,
and probably on most browsers.

This is definitely interesting. But we need some tweak to make it
work for my need. Probably I haven't described the problem very
clearly, please see my attempt of describing it visually at this url,
http://groups.google.com/group/comp...g.html/browse_thread/thread/2e4f715e1c80acb0#

Also, I don't need the "graph" to be fancy but rather something multi-
dimensional.

Thanks.
 
G

Gregor Kofler

Don84 meinte:
Thank you for the pointer, that's very helpful. One issue though I'm
not that good at CSS, happen to have some sample code? In terms of
block element, between div and span, which one might fit the need
better? Or probably no difference?

Since "span" is an inline element I'd go for the "div".

Gregor
 
T

Thomas 'PointedEars' Lahn

Don84 said:
Thomas said:
DL said:
Say, I have 4 "things" that I'd like to place or have its label
displayed at the following coordinates
x,y (0,90), x, y (90,0), x,y (180,90), x,y (90,180)
and at each of these coordinates I'd like js to have a mark like a dot
there.
How do we do that?

Creating a block-level element, and positioning it with CSS.
Also, what if we have 5 or 6 or 7 or more "things"?

Creating more block-level elements, and positioning them with CSS.
And it would be nice if the dots are "drawn" to form a circle
something.
[...]

SVG is better suited for this.
[...]

Thank you for the pointer, that's very helpful. One issue though I'm
not that good at CSS,

Read the Specification¹, then. It contains many examples.
happen to have some sample code?

The following is ECMAScript-conforming script code that uses CSS shorthand
properties (as specified by W3C DOM Level 2)²:

var div = document.createElement("div");
if (div)
{
/* TODO: add more feature tests here */

/* Some layout engines don't display elements without content */
div.appendChild(document.createTextNode("\u00A0"));

div.style.position = "absolute";
div.style.left = "0";
div.style.top = "90px";
div.style.width = "1px";
div.style.height = "1px";
div.style.backgroundColor = "red";

document.body.appendChild(div);
}
In terms of block element, between div and span, which one might fit the
need better? Or probably no difference?

SPAN is an inline-level element. It would need to be formatted
display:block first, but it can be child element of almost any other element
within the BODY element.

DIV is a block-level element. It would not need to be formatted
display:block first, but it MUST NOT be contained in any inline-level
element.

SVG has the `circle' element, but it may require a plugin to be displayed.


Why do you start threads as "DL" and reply as "Don84", or switch in-between?
I for one find that very confusing and wish you would decide for one name,
preferably your real one.


PointedEars
___________
¹ <http://www.w3.org/TR/CSS>
² <http://www.w3.org/DOM/DOMTR>
 
D

Don84

Don84 said:
Thomas said:
DL wrote:
Say, I have 4 "things" that I'd like to place or have its label
displayed at the following coordinates
x,y (0,90), x, y (90,0), x,y (180,90), x,y (90,180)
and at each of these coordinates I'd like js to have a mark like a dot
there.
How do we do that?
Creating a block-level element, and positioning it with CSS.
Also, what if we have 5 or 6 or 7 or more "things"?
Creating more block-level elements, and positioning them with CSS.
And it would be nice if the dots are "drawn" to form a circle
something.
[...]
SVG is better suited for this.
[...]
Thank you for the pointer, that's very helpful.  One issue though I'm
not that good at CSS,

Read the Specification¹, then.  It contains many examples.
happen to have some sample code?

The following is ECMAScript-conforming script code that uses CSS shorthand
properties (as specified by W3C DOM Level 2)²:

  var div = document.createElement("div");
  if (div)
  {
    /* TODO: add more feature tests here */

    /* Some layout engines don't display elements without content */
    div.appendChild(document.createTextNode("\u00A0"));

    div.style.position = "absolute";
    div.style.left = "0";
    div.style.top = "90px";
    div.style.width = "1px";
    div.style.height = "1px";
    div.style.backgroundColor = "red";

    document.body.appendChild(div);
  }
In terms of block element, between div and span, which one might fit the
need better?  Or probably no difference?

SPAN is an inline-level element.  It would need to be formatted
display:block first, but it can be child element of almost any other element
within the BODY element.

DIV is a block-level element.  It would not need to be formatted
display:block first, but it MUST NOT be contained in any inline-level
element.

SVG has the `circle' element, but it may require a plugin to be displayed..

Why do you start threads as "DL" and reply as "Don84", or switch in-between?  
I for one find that very confusing and wish you would decide for one name,
preferably your real one.

PointedEars
___________
¹  <http://www.w3.org/TR/CSS>
²  <http://www.w3.org/DOM/DOMTR>
--
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann

I just tried your code, not working (with IE7 and Firefox 3.5 both on
Windows Vista Home Premium). The complete test code below. Sorry
about the sig (at one point the DL didn't work or I forgot then added
Don84, real name LI Chunshen, go by Don)
Maybe I didn't do something right.

<html>
<head>
<title></title>
<script type="text/javascript">
var div = document.createElement("div");
if (div)
{
/* TODO: add more feature tests here */

/* Some layout engines don't display elements without content */
div.appendChild(document.createTextNode("\u00A0"));

div.style.position = "absolute";
div.style.left = "0";
div.style.top = "90px";
div.style.width = "1px";
div.style.height = "1px";
div.style.backgroundColor = "red";

document.body.appendChild(div);
}
</script>
</head>
<body>
<h1>Multi-dimensional view of data sets</h1>
</body>
</html>
 
T

Thomas 'PointedEars' Lahn

Please trim your quotes to the relevant parts. See
<http://jibbering.com/faq/#posting> pp.
I just tried your code, not working (with IE7 and Firefox 3.5 both on
Windows Vista Home Premium). [...] Maybe I didn't do something right.

Your markup is not Valid. Especially, the DOCTYPE declaration is missing,
which triggers Quirks/Compatibility Mode.

<http://validator.w3.org/> (you should target HTML 4.01 Strict first)

Also, a 1×1 pixel sized red dot at the lower border of the viewport may be
hard to be spotted. Try different values.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Please trim your quotes to the relevant parts. See
<http://jibbering.com/faq/#posting> pp.
I just tried your code, not working (with IE7 and Firefox 3.5 both on
Windows Vista Home Premium). [...] Maybe I didn't do something right.

Your markup is not Valid. Especially, the DOCTYPE declaration is missing,
which triggers Quirks/Compatibility Mode.

<http://validator.w3.org/> (you should target HTML 4.01 Strict first)

Also, a 1×1 pixel sized red dot at the left border of the viewport may be
hard to be spotted. Try different values.


PointedEars
 
D

Don84

Please trim your quotes to the relevant parts.  See
<http://jibbering.com/faq/#posting> pp. ok.

Don84 said:
I just tried your code, not working (with IE7 and Firefox 3.5 both on
Windows Vista Home Premium).  [...] Maybe I didn't do something right..

Your markup is not Valid.  Especially, the DOCTYPE declaration is missing,
which triggers Quirks/Compatibility Mode.
I'm now using

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
....
</head>
<body>
....
</body>
<http://validator.w3.org/> (you should target HTML 4.01 Strict first)

Also, a 1×1 pixel sized red dot at the lower border of the viewport maybe
hard to be spotted.  Try different values.

new values below, still to no avail, how come?
...
div.style.left = "100";
div.style.top = "90px";
div.style.width = "20px";
div.style.height = "20px";
...
 
T

Thomas 'PointedEars' Lahn

Don84 said:
I just tried your code, not working (with IE7 and Firefox 3.5 both on
Windows Vista Home Premium). The complete test code below. [...]
Maybe I didn't do something right.

<html>
<head>
<title></title>
<script type="text/javascript">

Validity aside, this cannot work because at this point the BODY element has
not yet been parsed and therefore the object otherwise referred to by
`document.body' is unavailable. You need to call a function (e.g., in the
`onload' attribute value), or place the SCRIPT element in the BODY element.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Don84 said:
Thomas said:
Please trim your quotes to the relevant parts. See
<http://jibbering.com/faq/#posting> pp.
ok.
[...]
I'm now using

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ^^^^^^^^^^^^^^^^^^^^^^
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<http://validator.w3.org/> (you should target HTML 4.01 Strict first) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Also, a 1×1 pixel sized red dot at the lower border of the viewport may
be hard to be spotted. Try different values.

new values below, still to no avail, how come?

See my later follow-up.

You did not refer to that, so it was irrelevant and to be trimmed.


PointedEars
 
D

Don84

Don84 said:
I just tried your code, not working (with IE7 and Firefox 3.5 both on
Windows Vista Home Premium).  The complete test code below.  [...]
Maybe I didn't do something right.
<html>
<head>
  <title></title>
  <script type="text/javascript">

Validity aside, this cannot work because at this point the BODY element has
not yet been parsed and therefore the object otherwise referred to by
`document.body' is unavailable.  You need to call a function (e.g., in the
`onload' attribute value), or place the SCRIPT element in the BODY element.

PointedEars

Man, silly me, totally out of mind!
The static one is working. The following one which is generated
dynamically with a loop count of 4 failed to render the dot. What
have I missed?

Many thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
function addDot() {


var div100 = document.createElement("div100");
if (div100)
{
/* TODO: add more feature tests here */

/* Some layout engines don't display elements without content */
div.appendChild(document.createTextNode("div100"));

// div.style.position = "absolute";
div.style.position = "relative";


div.style.left = "100";
div.style.top = "190px";
div.style.width = "20px";
div.style.height = "20px";
div.style.backgroundColor = "red";

document.body.appendChild(div100);
}



var div200 = document.createElement("div200");
if (div200)
{
/* TODO: add more feature tests here */

/* Some layout engines don't display elements without content */
div.appendChild(document.createTextNode("div200"));

// div.style.position = "absolute";
div.style.position = "relative";


div.style.left = "200";
div.style.top = "290px";
div.style.width = "20px";
div.style.height = "20px";
div.style.backgroundColor = "red";

document.body.appendChild(div200);
}



var div300 = document.createElement("div300");
if (div300)
{
/* TODO: add more feature tests here */

/* Some layout engines don't display elements without content */
div.appendChild(document.createTextNode("div300"));

// div.style.position = "absolute";
div.style.position = "relative";


div.style.left = "300";
div.style.top = "390px";
div.style.width = "20px";
div.style.height = "20px";
div.style.backgroundColor = "red";

document.body.appendChild(div300);
}



var div400 = document.createElement("div400");
if (div400)
{
/* TODO: add more feature tests here */

/* Some layout engines don't display elements without content */
div.appendChild(document.createTextNode("div400"));

// div.style.position = "absolute";
div.style.position = "relative";


div.style.left = "400";
div.style.top = "490px";
div.style.width = "20px";
div.style.height = "20px";
div.style.backgroundColor = "red";

document.body.appendChild(div400);
}


}
</script>
</head>
<body onload="addDot()">
<h1>Multi-dimensional view of data sets</h1>
</body>
</html>
 
D

Don84

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <script type="text/javascript">
  function addDot() { ....
  }
  </script>
</head>
<body onload="addDot()">
<h1>Multi-dimensional view of data sets</h1>
</body>
</html>

Ok, object (div id) reference problem in the above code. But the
following code appears to be ok, but why then only red dot shows up
instead of two? Thanks.

<script type="text/javascript">
function addDot() {
var div = document.createElement("div");
if (div)
{

/* Some layout engines don't display elements without content */
div.appendChild(document.createTextNode("div1"));

div.style.position = "absolute";
div.style.left = "100";
div.style.top = "90px";
div.style.width = "20px";
div.style.height = "20px";
div.style.backgroundColor = "red";

document.body.appendChild(div);
}

var div2 = document.createElement("div2");
if (div2)
{

/* Some layout engines don't display elements without content */
div.appendChild(document.createTextNode("div200"));

div.style.position = "relative";
div.style.left = "200";
div.style.top = "190px";
div.style.width = "20px";
div.style.height = "20px";
div.style.backgroundColor = "red";

document.body.appendChild(div2);
}

}
</script>
 
D

Don84

ok, i've made it working, that is, the expected number of red dots as
div(s) did show up. But I still have a couple of questions.

a) with IE7, the positions of dots are about right while with Firefox
3.5, they all seemed left-aligned (incorrect).

b) the textNode value for each div shows up inside the dot. A
desirable outcome would be right next to it. Possible? If so how?

c) the dot size are different. div1 is smaller (about right) while
div2 is bigger. But both
uses
div[x].style.width = "20px";
div[x].style.height = "20px";
how come? How to resolve it?

Many thanks.
 
T

Thomas 'PointedEars' Lahn

Don84 said:
a) with IE7, the positions of dots are about right while with Firefox
3.5, they all seemed left-aligned (incorrect).

Maybe margins are in place?
b) the textNode value for each div shows up inside the dot. A
desirable outcome would be right next to it. Possible? If so how?

You need another element at approximately the same coordinates.
c) the dot size are different. div1 is smaller (about right) while
div2 is bigger. But both
uses
div[x].style.width = "20px";
div[x].style.height = "20px";

It is rather unlikely that XHTML markup that contains these lines would be
Valid.

Have you already read <http://jibbering.com/faq/#posting> pp.?


PointedEars
 
D

Don84

Here's an update. Please see below.
Also, new question, how to add an external link to one or many DIV
(s).

my attempt 1
div[x].href.document.location = "externaLink.html"
failed

my attempt 2
div[x].onclick = "externaLink.html"
also failed

Thanks.
ok, i've made it working, that is, the expected number of red dots as
div(s) did show up.  But I still have a couple of questions.

a) with IE7, the positions of dots are about right while with Firefox
3.5, they all seemed left-aligned (incorrect).

b) the textNode value for each div shows up inside the dot.  A
desirable outcome would be right next to it.  Possible?  If so how?

c) the dot size are different.  div1 is smaller (about right) while
div2 is bigger.  But both
uses
div[x].style.width = "20px";
div[x].style.height = "20px";
how come?  How to resolve it?

c) resolved.
 
E

Evertjan.

Don84 wrote on 06 okt 2009 in comp.lang.javascript:

[please do not quote signatures on usenet]
This is definitely interesting. But we need some tweak to make it
work for my need.

Yes, that tweaak is called "programming", and that is what this NG is all
about.
Probably I haven't described the problem very
clearly, please see my attempt of describing it visually at this url,
http://groups.google.com/group/comp.infosystems.www.authoring.html/brow
se_thread/thread/2e4f715e1c80acb0#

That is about tables, not your Q in this NG, that was:
Say, I have 4 "things" that I'd like to place or have its label
displayed at the following coordinates
x,y (0,90), x, y (90,0), x,y (180,90), x,y (90,180)

I showed you how to put a point on a coordinate defined lace on the page.
Also, I don't need the "graph" to be fancy

You can look at the source code I included to see how each point is
dispayed by the code.

but rather something multi-dimensional.

Screens are two-dimensional, meseems.
 
D

Don84

Please see my comments or new questions below.
Maybe margins are in place?
Could we do something about it?
You need another element at approximately the same coordinates.
Good point, thank you and I've incorporated it.
c) the dot size are different.  div1 is smaller (about right) while
div2 is bigger.  But both
uses
div[x].style.width = "20px";
div[x].style.height = "20px";

It is rather unlikely that XHTML markup that contains these lines would be
Valid.
My previous update post indicated it's no longer an issue.

Please take a look at my previous update post with a new question of
adding a link with (target="_new") attribute to an element
dated
"Date: Tue, 6 Oct 2009 16:28:42 -0700 (PDT)
Local: Tues, Oct 6 2009 7:28 pm"

Many thanks.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,774
Messages
2,569,599
Members
45,177
Latest member
OrderGlucea
Top