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]

Re: Positioning problem

"Dan" <dan@nospam.com > writes:
[color=blue]
> 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,[/color]

In your code, you write:
document.writel n (">" + 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:docu ment.body.inner HTML.replace(/&/g,"&amp;").repl ace(/</g,"&lt;")
:)

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

[Dan]

Re: Positioning problem

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" <lrn@hotpop.com > wrote in message
news:n0cdfgt8.f sf@hotpop.com.. .[color=blue]
> "Dan" <dan@nospam.com > writes:
>[color=green]
> > I'm trying to create a menu in javascript. I've created the bitmaps[/color][/color]
with[color=blue][color=green]
> > 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.[/color][/color]
But[color=blue][color=green]
> > 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,[/color]
>
> In your code, you write:
> document.writel n (">" + 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:
>[/color]
javascript:docu ment.body.inner HTML.replace(/&/g,"&amp;").repl ace(/</g,"&lt;"
)[color=blue]
> :)
>
> /L
> --
> Lasse Reichstein Nielsen - lrn@hotpop.com
> Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
> 'Faith without judgement merely degrades the spirit divine.'[/color]

[Lasse Reichstein Nielsen]

Re: Positioning problem

"Dan" <dan@nospam.com > writes:

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

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:docu ment.body.inner HTML.replace(/&/g,"&amp;").repl ace(/</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 - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

[Albert Wagner]

Re: Positioning problem

On 07 Oct 2003 15:29:43 +0200
Lasse Reichstein Nielsen <lrn@hotpop.com > wrote:
<snip>[color=blue]
> javascript:docu ment.body.inner HTML.replace(/&/g,"&amp;").repl ace(/</
> g,"&lt;")[/color]
<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]

Re: Positioning problem

Albert Wagner <alwagner@tcac. net> writes:
[color=blue]
> On 07 Oct 2003 15:29:43 +0200
> Lasse Reichstein Nielsen <lrn@hotpop.com > wrote:
> <snip>[color=green]
> > javascript:docu ment.body.inner HTML.replace(/&/g,"&amp;").repl ace(/</
> > g,"&lt;")[/color]
> <snip>
>
> How would you do this without using .innerHTML?[/color]

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;").repl ace(/</g,"&lt;"));
}
if (node.nodeType == 1){
var tag="<"+node.ta gName;
var attr = node.attributes ;
for (var i=0;i<attr.leng th;i++) {
tag+=" "+attr[i].name+"=\""+att r[i].value+"\"";
}
tag += ">";
for (var chld=node.first Child;chld;chld =chld.nextSibli ng) {
tag+=traverse(c hld);
}
tag+="<\/"+node.tagName+ ">";
return tag;
}
return "";
}

You can then use
traverse(docume nt.body).replac e(/&/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;").repl ace(/</g,"&lt;"); } if (node.nodeType == 1){ var tag="<"+node.ta gName; var attr = node.attributes ;for (var i=0;i<attr.leng th;i++) { tag+=" "+attr[i].name+"=\""+att r[i].value+"\""; } tag += ">"; for (var chld=node.first Child;chld;chld =chld.nextSibli ng) { tag+=traverse(c hld); } tag+="<\/"+node.tagName+ ">"; return tag; } return ""; }traverse(docum ent.body).repla ce(/&/g,"&amp;").repl ace(/</g,"&lt;").repla ce(/\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 - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

[Albert Wagner]

Re: Positioning problem

On 07 Oct 2003 17:57:18 +0200
Lasse Reichstein Nielsen <lrn@hotpop.com > wrote:
<snip>
[color=blue]
> I would traverse the DOM document tree and build the corresponding
> HTML:[/color]
<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)