Positioning problem

[Dan]

I'm trying to create a menu in javascript. I've created the bitmaps with
text over the top of them. The problem i'm having is that the positions
aren't correct. If I wrap the code in PRE tags, then this fixes it. But
this seems to be a bit of a hack, as apposed to finding what the bug is.
I've included examples of the problem below:

http://dracan.x-1.net/test/index.html (Demonstrates the problem)
http://dracan.x-1.net/test/index2.html (Using the PRE hacky fix)

The actual relevant javascript code is here:

http://dracan.x-1.net/test/menu.js

Thanks for any help,
Dan.

[Lasse Reichstein Nielsen]

"Dan" <da*@nospam.com> writes:

I'm trying to create a menu in javascript. I've created the bitmaps with
text over the top of them. The problem i'm having is that the positions
aren't correct. If I wrap the code in PRE tags, then this fixes it. But
this seems to be a bit of a hack, as apposed to finding what the bug is.
I've included examples of the problem below:

http://dracan.x-1.net/test/index.html (Demonstrates the problem)
http://dracan.x-1.net/test/index2.html (Using the PRE hacky fix)

The actual relevant javascript code is here:

http://dracan.x-1.net/test/menu.js

Thanks for any help,

In your code, you write:
document.writeln (">" + obj_text + "<\DIV>\n");
Notice that it is a "\" in front of the "DIV", not "/" as it should be.
That means that the div's are not terminated, so instead they are all
nested inside each other.

Again saved by the bookmarklet:
javascript:document.body.innerHTML.replace(/&/g,"&amp;").replace(/</g,"&lt;")
:)

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Dan]

Doh! :) Well spotted. What's this bookmarklet thing? I'm fairly new to
javascript (if you hadn't guessed), so i've not heard of it.

Thanks,
Dan.
"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:n0**********@hotpop.com...

"Dan" <da*@nospam.com> writes:

I'm trying to create a menu in javascript. I've created the bitmaps with text over the top of them. The problem i'm having is that the positions
aren't correct. If I wrap the code in PRE tags, then this fixes it. But this seems to be a bit of a hack, as apposed to finding what the bug is.
I've included examples of the problem below:

http://dracan.x-1.net/test/index.html (Demonstrates the problem)
http://dracan.x-1.net/test/index2.html (Using the PRE hacky fix)

The actual relevant javascript code is here:

http://dracan.x-1.net/test/menu.js

Thanks for any help,
In your code, you write:
document.writeln (">" + obj_text + "<\DIV>\n");
Notice that it is a "\" in front of the "DIV", not "/" as it should be.
That means that the div's are not terminated, so instead they are all
nested inside each other.

Again saved by the bookmarklet:

javascript:document.body.innerHTML.replace(/&/g,"&amp;").replace(/</g,"&lt;"
) :)

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Lasse Reichstein Nielsen]

"Dan" <da*@nospam.com> writes:

What's this bookmarklet thing? I'm fairly new to
javascript (if you hadn't guessed), so i've not heard of it.

A bookmarklet is just a bookmark (what Microsoft calls a "Favorite").
Instead of an URL that points to a new page, it contains Javascript
code. Selecting the bookmark executes the code in the context of the
current page, and possibly replaces it.

In this case:

javascript:document.body.innerHTML.replace(/&/g,"&amp;").replace(/</g,"&lt;")

the bookmarklet shows the HTML code of the actual document, not the
source that generated it with document.write's. With generated code,
it is hard to see the bugs in the code that generates it, but often
easy to see when looking at the actual code.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Albert Wagner]

On 07 Oct 2003 15:29:43 +0200
Lasse Reichstein Nielsen <lr*@hotpop.com> wrote:
<snip>

javascript:document.body.innerHTML.replace(/&/g,"&amp;").replace(/</
g,"&lt;")

<snip>

How would you do this without using .innerHTML?

--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)

[Lasse Reichstein Nielsen]

Albert Wagner <al******@tcac.net> writes:

On 07 Oct 2003 15:29:43 +0200
Lasse Reichstein Nielsen <lr*@hotpop.com> wrote:
<snip>

javascript:document.body.innerHTML.replace(/&/g,"&amp;").replace(/</
g,"&lt;")

<snip>

How would you do this without using .innerHTML?

Much harder :)

I would traverse the DOM document tree and build the corresponding
HTML:

function traverse(node){
if (node.nodeType == 3){
return node.nodeValue.replace(/&/g,"&amp;").replace(/</g,"&lt;"));
}
if (node.nodeType == 1){
var tag="<"+node.tagName;
var attr = node.attributes;
for (var i=0;i<attr.length;i++) {
tag+=" "+attr[i].name+"=\""+attr[i].value+"\"";
}
tag += ">";
for (var chld=node.firstChild;chld;chld=chld.nextSibling) {
tag+=traverse(chld);
}
tag+="<\/"+node.tagName+">";
return tag;
}
return "";
}

You can then use
traverse(document.body).replace(/&/g,"&amp;").
replace(/</g,"&lt;").
replace(/\n/g,"<br>")
to get an HTML representation of the document structure.

To create it as a bookmarklet, you have to includ the function in the
bookmark. That takes some munging to get on one line:

javascript: function traverse(node){ if (node.nodeType == 3){ return node.nodeValue.replace(/&/g,"&amp;").replace(/</g,"&lt;"); } if (node.nodeType == 1){ var tag="<"+node.tagName; var attr = node.attributes;for (var i=0;i<attr.length;i++) { tag+=" "+attr[i].name+"=\""+attr[i].value+"\""; } tag += ">"; for (var chld=node.firstChild;chld;chld=chld.nextSibling) { tag+=traverse(chld); } tag+="<\/"+node.tagName+">"; return tag; } return ""; }traverse(document.body).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\n/g,"<br>")

This simple code makes end tags for all tags, including </img> and </input>.

It might be too long for some browsers. It works in Opera 7.2, but not
in Mozilla FB and IE. Since they both have innerHTML, it's not that
important. It will never work in Netscape 4, no matter what method is used.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Albert Wagner]

On 07 Oct 2003 17:57:18 +0200
Lasse Reichstein Nielsen <lr*@hotpop.com> wrote:
<snip>

I would traverse the DOM document tree and build the corresponding
HTML:

<snip>

Wow. I am of two minds now. I am sorry that my question involved such
an unexpectedly long response. But I am extremely grateful for your
labor, in that I prefer Opera for development. I think gratitude wins
out, though. Thank you.
--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)