时间线API [英] Timeline API

查看：76 发布时间：2019/6/5 6:07:54 javascript

本文介绍了时间线API的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在开发一个时间线API，开发人员可以使用它来为他们的网站添加一个

动态时间线。

这是一个* working * demo的基本界面。（它对我有用

无论如何在ie6& firefox 1.5上）

http://www.endeavorpub.com/wiki/timeline.html

请撕开我的代码并告诉我到目前为止我做错了什么...

最后，我希望这是跨浏览器兼容的，给予

deveoper这个能力设置颜色，范围，大小，位置和设置

marker&活动范围。

- JS
http：/ /www.endeavorpub.com

I am working on a timeline API that devevelopers can use to add a
dynamic timeline to their sites.

Here is a *working* demo of the basic interface. (it works for me
anyway on ie6 & firefox 1.5)

http://www.endeavorpub.com/wiki/timeline.html

Please tear apart my code and tell me what I''m doing wrong so far...

Eventually, I would like this to be cross-browser compatible, give the
deveoper the ability to set colors, ranges, sizes, positions, and set
markers & event ranges.

- JS
http://www.endeavorpub.com

推荐答案

jshanman写道：

jshanman wrote:

我正在努力一个时间线API，开发人员可以使用它来为他们的网站添加动态时间线。

这是基本界面的*工作*演示。（它对我有用
无论如何在ie6& firefox 1.5）

http://www.endeavorpub.com/wiki/timeline.html

请撕掉我的代码并告诉我我做错了所以远......

最终，我希望这是跨浏览器兼容的，让
开发人员能够设置颜色，范围，大小，位置和设置
标记&活动范围。

- JS
http://www.endeavorpub .com

I am working on a timeline API that devevelopers can use to add a
dynamic timeline to their sites.

Here is a *working* demo of the basic interface. (it works for me
anyway on ie6 & firefox 1.5)

http://www.endeavorpub.com/wiki/timeline.html

Please tear apart my code and tell me what I''m doing wrong so far...

Eventually, I would like this to be cross-browser compatible, give the
deveoper the ability to set colors, ranges, sizes, positions, and set
markers & event ranges.

- JS
http://www.endeavorpub.com

你的意思是告诉我这个小组的所有专家在我的代码中发现绝对没有

问题！

我发现了一个问题：在firefox中，我收到此消息：错误：

解析属性''left''的值。声明被删除。

在IE中（当删除try catch时），我得到对象错误。

这是代码：

if（document.getElementById（" marker" + IconName））{

document.getElementById（" marker" + IconName）.style。 v isibility =

" visible";

var p =（typeof

document.getElementById（" marker" + IconName）.style 。剩下）？ px：0;

尝试{

document.getElementById（" marker" + IconName）.style.l eft =

XPos + p;

} catch（e）{}

}否则{

这个[" Markers"] [" marker" + IconName] =

this.document.createElement（" DIV"）;

this [" Markers"] [" marker" + IconName] .className =

" MarkerClass";

这个[" Markers"] [" marker" + IconName] .title = LabelText;

this [" Markers"] [" marker" + IconName] .id =" marker" + IconName;

var p =（typeof

this [" Markers" ;] [" marker" + IconName] .style.left ==''string''）？ px：0;

尝试{

这个[" Markers"] [" marker" + IconName] .style.left = XPos + p; <这个[" Markers"] [" marker" + IconName] .style.top =

parseInt（this.height / 2,10） - （h-AnchorY））+ p;

这个[" Markers"] [" marker" + IconName] .style.width = w + p;

这个[" Markers"] [" marker" + IconName] .style.height = h + p;

document.getElementById（Target.id + " LabelDiv"）。appe ndChild（this [" Markers"] [" marker" + IconName]）;

}

我用的是推荐？" px"：0;我在搜索组中时发现了一些技巧，但为什么会导致错误呢？注意：所有标记都是

仍然在正确的位置绘制，这些错误只是在我拖动地图时填满了

控制台。

- JS

You mean to tell me all the experts in this group found absolutly no
problems in my code!

I found a problem : In firefox, I get this message : Error: Error in
parsing value for property ''left''. Declaration dropped.

In IE (when the try catch is removed), I get "Object Error".

Here is the code:

if (document.getElementById("marker"+IconName)) {
document.getElementById("marker"+IconName).style.v isibility =
"visible";
var p = (typeof
document.getElementById("marker"+IconName).style.l eft) ? "px":0;
try {
document.getElementById("marker"+IconName).style.l eft =
XPos+p;
} catch(e) {}
} else {
this["Markers"]["marker"+IconName] =
this.document.createElement("DIV");
this["Markers"]["marker"+IconName].className =
"MarkerClass";
this["Markers"]["marker"+IconName].title = LabelText;
this["Markers"]["marker"+IconName].id = "marker"+IconName;
var p = (typeof
this["Markers"]["marker"+IconName].style.left == ''string'') ? "px":0;
try {
this["Markers"]["marker"+IconName].style.left = XPos+p;
} catch(e) {}
this["Markers"]["marker"+IconName].style.top =
parseInt(this.height/2,10)-(h-AnchorY))+p;
this["Markers"]["marker"+IconName].style.width = w+p;
this["Markers"]["marker"+IconName].style.height = h+p;
document.getElementById(Target.id+"LabelDiv").appe ndChild(this["Markers"]["marker"+IconName]);
}

I used the recommended ?"px":0; trick that I discovered while searching
the group, but why is it causing errors? Note: All the markers are
still drawn in their correct positions, these errors just fill up the
console as I drag the map.

- JS

jshanman写道：

jshanman wrote:

jshanman写道：

jshanman wrote:

我正在开发一个时间线API，开发人员可以使用它来为他们的网站添加动态时间线。

这是基本界面的*工作*演示。（它对我有用
无论如何在ie6& firefox 1.5）

http://www.endeavorpub.com/wiki/timeline.html

请撕掉我的代码并告诉我我做错了所以远......

最终，我希望这是跨浏览器兼容的，让
开发人员能够设置颜色，范围，大小，位置和设置
标记&活动范围。

- JS
http://www.endeavorpub .com
你的意思是告诉我这个组中的所有专家在我的代码中发现绝对没有问题！

I am working on a timeline API that devevelopers can use to add a
dynamic timeline to their sites.

Here is a *working* demo of the basic interface. (it works for me
anyway on ie6 & firefox 1.5)

http://www.endeavorpub.com/wiki/timeline.html

Please tear apart my code and tell me what I''m doing wrong so far...

Eventually, I would like this to be cross-browser compatible, give the
deveoper the ability to set colors, ranges, sizes, positions, and set
markers & event ranges.

- JS
http://www.endeavorpub.com
You mean to tell me all the experts in this group found absolutly no
problems in my code!

|这是Usenet。这是一个讨论组，而不是帮助台。你发布了

|什么，我们讨论它。如果你有一个问题，那恰好得到了

|在讨论过程中回答，然后很好。如果没有，你可以

|全额退还您的会员费。 - 在Alt.html中的Mark Parnell

我发现了一个问题：在firefox中，我收到此消息：错误：解析属性''left''的值时出错。宣言下降。

这是一个CSS（布局引擎）错误，而不是脚本（引擎）错误。安装

Console ^ 2，FireBug或两者，以过滤控制台消息（因为Firefox

1.5 / Gecko 1.8b1）。

在IE中（当删除try catch时），我得到对象错误。

可能它会说明代码的哪一行。

< URL：http：//jibbering.com/faq/#FAQ4_43> ;

以下是代码：

if（document.getElementById（" marker" + IconName））{
^

标识符只有在引用构造函数时才应该以大写字母开头。

document.getElementById（" marker" + IconName）.style.v isibility =
" visible";
var p =（typeof
document.getElementById（" marker" + IconName）.style.l eft）？ " px"：0;
尝试{
document.getElementById（" marker" + IconName）.style.l eft =
XPos + p;
} catch（e ）{}

OMG。你肯定想在这里优化：

var marker = document.getElementById（" marker" + IconName）;

if（marker）

{

marker.style.visibility =" visible";

//`typeof something''总是评估为非空字符串，

//因此在布尔表达式中为true;你想比较

//它对着一个字符串。而且这仍然没有意义。

var p =（typeof marker.style.left）？ px：0;

尝试

{

marker.style.left = XPos + p;

}

catch（e）{}

}

现在已经删除了冗余，从而提高了效率/>
增加，你想重新考虑你的方法：没有冒错误的风险和

试图在以后处理它，但试图在第一次阻止它

相反，通过在访问之前进行功能测试来确定。

< URL：http：//pointedears.de/scripts/test/whatami#inference>

//来自types.js

函数isMethod（a）

{

var t;

return（a&&（（t = typeof a）==" function" || t ==" object"））;

}

//来自dhtml.js

函数setStyleProperty（o，s，v）

{

if（typeof o。 style！=" undefined"

&& typeof o.style [s]！=" undefined"）

{

o.styl e [s] = v;

return（o.style [s] == v）;

}

返回false;

}

if（typeof document！=" undefined"

&& isMethod（document.getElementById））

{

var marker = document.getElementById（" marker" + iconName）;

if（marker ）

{

setStyleProperty（marker，" visibility"，" visible"）;

setStyleProperty（marker，" left"， XPos +" px"）;

} else {
此[" Markers"] [" marker" + IconName] =
this.document.createElement（" ; DIV"）;

W3C DOM Level 2 HTML规范声明传递给DOM方法的元素类型标识符

应该是小写的。

这个[ 标记，标记，IconName.className =
MarkerClass;
此[" Markers"] [" marker" + IconName] .title = LabelText; <这个[" Markers"] [" marker" + IconName] .id =" marker" + IconName;
var p =（typeof
this [" Markers"] [" ; marker" + IconName] .style.left ==''string''）？ " PX"：0;

这是老式怪物Geckos的解决方法 - 你真的想支持它们吗？此外，在下面你假设如果'left''是一个数字，

其余的必须是一个数字。推理？

尝试{
这[标记]，["标记" + IconName] .style.left = XPos + p;
} catch（e）{这个[" Markers"] [" marker" + IconName] .style.top =
parseInt（this.height / 2,10） - （h-AnchorY））+ p;
^^^^^^^^^^^^^^^^^^^^^^^^^^

如果this.height是一个字符串，你不能分开它2没有NaN结果。

首先转换，然后计算，反之亦然。

这个[" Markers"] [" marker" + IconName]。 style.width = w + p;
此[" Markers"] [" marker" + IconName] .style.height = h + p;
document.getElementById（Target.id +" LabelDiv"）。appe ndChild（this [" Markers"
[" marker" + IconName]）; }

同样在这里。它可能比上面更低效和丑陋吗？

}

其他

{

//你确定你想要this.document.createElement（）吗，

//而不仅仅是document.createElement（）？

if（（marker =这个[" Markers"] [" marker" + iconName]

= this.document.createElement（" div"）））

{

//您可能还想对那些进行功能测试

marker.className =" MarkerClass";

marker.title = labelText;

marker.id =" marker" + iconName;

//正如我上面所说，这被认为是过时的

var p =（typeof marker.style.left ==''string' '）？ " PX" ：0;

setStyleProperty（marker，" left"，xPos + p）;

setStyleProperty（marker，" top"，

parseInt（this.height，10）/ 2 - （h - anchorY））+ p）;

setStyleProperty（marker，" width"，w + p）;

setStyleProperty（marker，" height"，h + p）;

var oTarget = document.getElementById（target.id +" LabelDiv"）;

if（oTarget&& isMethod（oTarget.appendChild））

{

oTarget.appendChild（marker）;

}

}

}

我使用推荐的？" px"：0;我在搜索小组时发现的技巧，

几年前必须发布，我想。

但为什么会导致错误？

可能是因为你的第一次比较和你的计算是错误的。

注意：所有标记仍然绘制在正确的位置，这些
错误只需在我拖动地图时填满控制台。

| This is Usenet. It is a discussion group, not a helpdesk. You post
| something, we discuss it. If you have a question and that happens to get
| answered in the course of the discussion, then great. If not, you can
| have a full refund of your membership fees. -- Mark Parnell in alt.html
I found a problem : In firefox, I get this message : Error: Error in
parsing value for property ''left''. Declaration dropped.
That is a CSS (layout engine) error, not a script (engine) error. Install
Console^2, FireBug, or both, to filter console messages (since Firefox
1.5/Gecko 1.8b1).
In IE (when the try catch is removed), I get "Object Error".
Probably it says in which line of the code.

<URL:http://jibbering.com/faq/#FAQ4_43>
Here is the code:

if (document.getElementById("marker"+IconName)) { ^
Identifiers should start uppercase only if they refer to constructors.
document.getElementById("marker"+IconName).style.v isibility =
"visible";
var p = (typeof
document.getElementById("marker"+IconName).style.l eft) ? "px":0;
try {
document.getElementById("marker"+IconName).style.l eft =
XPos+p;
} catch(e) {}
OMG. You definitely want to optimize here:

var marker = document.getElementById("marker" + IconName);
if (marker)
{
marker.style.visibility = "visible";

// `typeof something'' always evaluates to a non-empty string,
// therefore `true'' in a boolean expression; you want to compare
// it against a string. And still there would be no point in this.
var p = (typeof marker.style.left) ? "px": 0;
try
{
marker.style.left = XPos+p;
}
catch(e) {}
}

Now that redundancy has been removed and thereby efficiency has been
increased, you want to reconsider your approach: Not risking the error and
attempting to handle it later, but attempting to prevent it in the first
place instead, by doing feature tests prior to access.

<URL:http://pointedears.de/scripts/test/whatami#inference>

// from types.js
function isMethod(a)
{
var t;
return (a && ((t = typeof a) == "function" || t == "object"));
}

// from dhtml.js
function setStyleProperty(o, s, v)
{
if (typeof o.style != "undefined"
&& typeof o.style[s] != "undefined")
{
o.style[s] = v;
return (o.style[s] == v);
}

return false;
}

if (typeof document != "undefined"
&& isMethod(document.getElementById))
{
var marker = document.getElementById("marker" + iconName);
if (marker)
{
setStyleProperty(marker, "visibility", "visible");
setStyleProperty(marker, "left", XPos + "px");
} else {
this["Markers"]["marker"+IconName] =
this.document.createElement("DIV");
The W3C DOM Level 2 HTML Specification states that element type identifiers
passed to DOM methods should be lowercase.
this["Markers"]["marker"+IconName].className =
"MarkerClass";
this["Markers"]["marker"+IconName].title = LabelText;
this["Markers"]["marker"+IconName].id = "marker"+IconName;
var p = (typeof
this["Markers"]["marker"+IconName].style.left == ''string'') ? "px":0;
That''s a workaround for old buggy Geckos -- do you really want to support
them? Furthermore in the following you assume that if `left'' is a number,
the rest must be a number, too. Reasoning?
try {
this["Markers"]["marker"+IconName].style.left = XPos+p;
} catch(e) {}
this["Markers"]["marker"+IconName].style.top =
parseInt(this.height/2,10)-(h-AnchorY))+p; ^^^^^^^^^^^^^^^^^^^^^^^^^^
If this.height is a string, you cannot divide it by 2 without a NaN result.
First convert, then calculate, not vice-versa.
this["Markers"]["marker"+IconName].style.width = w+p;
this["Markers"]["marker"+IconName].style.height = h+p;
document.getElementById(Target.id+"LabelDiv").appe ndChild(this["Markers" ["marker"+IconName]); }
Same here. Can it possibly be more inefficient and ugly than the above?

}
else
{
// Are you sure you want this.document.createElement() here,
// and not simply document.createElement() instead?
if ((marker = this["Markers"]["marker" + iconName]
= this.document.createElement("div")))
{
// you may also want to do feature tests for those
marker.className = "MarkerClass";
marker.title = labelText;
marker.id = "marker" + iconName;

// As I said above, this is considered obsolete
var p = (typeof marker.style.left == ''string'') ? "px" : 0;

setStyleProperty(marker, "left", xPos + p);
setStyleProperty(marker, "top",
parseInt(this.height, 10) / 2 - (h - anchorY)) + p);
setStyleProperty(marker, "width", w + p);
setStyleProperty(marker, "height", h + p);

var oTarget = document.getElementById(target.id + "LabelDiv");
if (oTarget && isMethod(oTarget.appendChild))
{
oTarget.appendChild(marker);
}
}
}
I used the recommended ?"px":0; trick that I discovered while searching
the group,
Must be posted several years ago, I suppose.
but why is it causing errors?
Probably because your first comparison and your calculation were wrong.
Note: All the markers are still drawn in their correct positions, these
errors just fill up the console as I drag the map.

Firefox 1.5支持W3C DOM Level 2 Style，其中非零长度必须具有

a单位，如CSS中所指定。因此，如果您尝试省略该单位，则会出现_CSS_错误消息。

HTH

PointedEars

-

但他没有那个

艺术家的最高礼物，知道何时停止。

- Sherlock Holmes

Firefox 1.5 supports W3C DOM Level 2 Style, where non-zero lengths must have
a unit, as specified in CSS. Hence the _CSS_ error message if you attempt
to omit the unit.
HTH

PointedEars
--
But he had not that supreme gift of the
artist, the knowledge of when to stop.
-- Sherlock Holmes

Thomas''PointedEars''Lahn写道：

Thomas ''PointedEars'' Lahn wrote:

注意：所有标记仍然以正确的方式绘制这些
错误只是在我拖动地图时填满了控制台。

Note: All the markers are still drawn in their correct positions, these
errors just fill up the console as I drag the map.

Firefox 1.5支持W3C DOM Level 2 Style，其中非零长度必须具有
CSS中指定的单位。因此，如果您尝试省略该单位，则会出现_CSS_错误消息。

HTH

PointedEars
-
但他没有
艺术家的至高礼物，何时停止的知识。
- Sherlock Holmes

感谢您的帮助！

我实施了你的建议，但我仍然遇到了同样的问题。结果是因为如果日期是< 4000BC，xPos是

false，因此它试图添加falsepx作为左边

值...但是你的代码更干净，更有效率。

另一个问题：是否有更好的方法来引用本地对象

（this）在window.setTimeout中？

代码：

if（this.timeline.NextDraw）

window.clearTimeout（this.timeline.NextDraw）;

this.timeline.NextDraw =

window.setTimeout（" document.getElementById（'' " + this .id +"''）。timeline.DrawLabels（）"，50）;

我读过以前的帖子，说明setTimeout在Global中运行/>
上下文。有没有*更好的方式，然后我上面的例子？我不想要任何全局变量或函数。

- JS

Thank you for your help!

I implemented your suggestions and I still ended up with the same
problem. It ended being because if a date was < 4000BC, xPos was
false, and therefore it was trying to add "falsepx" as the left
value... But your code is cleaner and more efficient anyway.

Another Question: Is there a better way of referencing a local object
(this) in a window.setTimeout ?

Code:
if (this.timeline.NextDraw)
window.clearTimeout(this.timeline.NextDraw);
this.timeline.NextDraw =
window.setTimeout("document.getElementById(''"+this .id+"'').timeline.DrawLabels()",50);

I read previous posts that state a setTimeout runs in the Global
Context. Is there a *better* way then my example above? I don''t want
any global variables or functions.

- JS

这篇关于时间线API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

时间线API [英] Timeline API

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

时间线API [英] Timeline API

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭