Positioning content with div tags - whats wrong here?

R

Randell_D

I got some javascript within Dreamweaver MX and am trying to
understand it - I got it to work and even managed to make some changes
to make it fit my web app but I don't like to use something unless I
am comfortable supporting it. So I've begun to write my own and am
failing to get it to work...

In the code below, I would have expected the words "our crap" to be
located 400px down, 400px from the left but instead the words just
appear in top left corner regardless of the co-ordinates i use.

This is my version - I'd appreciate it if someone could direct me as
to what is missing...

After the <BODY> tag I have the following

<div id="ourID"></div>
<script language="javascript">
function positionThis( content , tag, x, y )
{ ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Setup the environment

// If we were not passed co-ordinates so prepare to create dynamic
values
if( arguments.length < 3 )
{ x=-1;
y=-1;
}
// We don't have a valid x co-ordinate so create one
if( x<0 )
{ x = Math.floor(screen.width/3); }
// We don't have a valid y co-ordinate so create one
if( x<0 )
{ y = Math.floor(screen.height/5); }
// Reference the tag using a method valid for this browser
var pointer=new Object();
if( document.all[tag] )
{ pointer=document.all[tag]; }

if( document.getElementById(tag) )
{ pointer=document.getElementById(tag); }
// Position the pointer
pointer.left=x;
pointer.top=y;
// Display our content
if( pointer.visibility )
{
pointer.visibility = "hidden";
pointer.document.write(content);
pointer.document.close();
pointer.visibility = "visible";
}
else
{
pointer.display = "none";
pointer.innerHTML = content;
pointer.display = "block";
}
return true;
}

positionThis( "our crap", "ourID", 400, 400 );
</script>
 
D

David Mark

I got some javascript within Dreamweaver MX and am trying to

Oops. That's a bad place to get JavaScript.
understand it - I got it to work and even managed to make some changes
to make it fit my web app but I don't like to use something unless I
am comfortable supporting it. So I've begun to write my own and am

That's a good idea.
failing to get it to work...

In the code below, I would have expected the words "our crap" to be
located 400px down, 400px from the left but instead the words just
appear in top left corner regardless of the co-ordinates i use.

This is my version - I'd appreciate it if someone could direct me as
to what is missing...

After the <BODY> tag I have the following

<div id="ourID"></div>
<script language="javascript">

Get rid of that language attribute. Optionally, add type="text/
javascript".
function positionThis( content , tag, x, y )
{ ///////////////////////////////////////////////////////////////////////////-/////////////////////////////////////////////
// Setup the environment

// If we were not passed co-ordinates so prepare to create dynamic
values
if( arguments.length < 3 )
{ x=-1;
y=-1;
}
// We don't have a valid x co-ordinate so create one
if( x<0 )
{ x = Math.floor(screen.width/3); }
// We don't have a valid y co-ordinate so create one
if( x<0 )

I assume you mean y<0, but the whole thing is silly. Why set x and y
to -1 in the first place?
{ y = Math.floor(screen.height/5); }
// Reference the tag using a method valid for this browser

You can't reference a tag. Dreamweaver meant to say element.
var pointer=new Object();

There is no need to instantiate an Object here. Also, "pointer" is a
lousy name for a variable in any language (and particularly
inappropriate in JavaScript.)
if( document.all[tag] )

What if the "all" property does not exist? Change to:

if (document.all)
{ pointer=document.all[tag]; }

if( document.getElementById(tag) )

Same here and put an else before the if.
{ pointer=document.getElementById(tag); }
// Position the pointer

Check that "pointer" was set to an element with a style property
before proceeding any further.

if (pointer && pointer.style) {
pointer.left=x;

pointer.style.left = x + 'px';
pointer.top=y;
Same.

// Display our content
if( pointer.visibility )
{
pointer.visibility = "hidden";
pointer.document.write(content);
pointer.document.close();
pointer.visibility = "visible";
}

Delete that clause as you can't find an element in NN4 with
document.all or document.getElementById.
else
{
pointer.display = "none";
Delete.

pointer.innerHTML = content;
pointer.display = "block";

pointer.style.position = 'absolute';

The computed style will be now be 'block' and the element will be
positioned where you want it, assuming it doesn't have a positioned
parent.
}
return true;

Why return anything unconditionally?

}
 
V

vbgunz

Randell_D said:
I got some javascript within Dreamweaver MX and am trying to
understand it - I got it to work and even managed to make some changes
to make it fit my web app but I don't like to use something unless I
am comfortable supporting it. So I've begun to write my own and am
failing to get it to work...

In the code below, I would have expected the words "our crap" to be
located 400px down, 400px from the left but instead the words just
appear in top left corner regardless of the co-ordinates i use.

This is my version - I'd appreciate it if someone could direct me as
to what is missing...

After the <BODY> tag I have the following

<div id="ourID"></div>
<script language="javascript">
function positionThis( content , tag, x, y )
{ ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Setup the environment

// If we were not passed co-ordinates so prepare to create dynamic
values
if( arguments.length < 3 )
{ x=-1;
y=-1;
}
// We don't have a valid x co-ordinate so create one
if( x<0 )
{ x = Math.floor(screen.width/3); }
// We don't have a valid y co-ordinate so create one
if( x<0 )
{ y = Math.floor(screen.height/5); }
// Reference the tag using a method valid for this browser
var pointer=new Object();
if( document.all[tag] )
{ pointer=document.all[tag]; }

if( document.getElementById(tag) )
{ pointer=document.getElementById(tag); }
// Position the pointer
pointer.left=x;
pointer.top=y;
// Display our content
if( pointer.visibility )
{
pointer.visibility = "hidden";
pointer.document.write(content);
pointer.document.close();
pointer.visibility = "visible";
}
else
{
pointer.display = "none";
pointer.innerHTML = content;
pointer.display = "block";
}
return true;
}

positionThis( "our crap", "ourID", 400, 400 );
</script>

If you're just looking for code to copy and paste, I may have a
solution. I use plenty of techniques here, I hope you may learn
something from it

function positionThis(content, id, x, y) {
var container = document.getElementById(id);
var content =
container.childNodes[0] ?
container.removeChild(container.childNodes[0]) :
document.createTextNode(content);

container.appendChild(content);
container.style.position = 'absolute';

var xint = (parseInt(x) > 0) ? parseInt(x) :
Math.floor(screen.width/3);
var xunit = typeof x === 'string' ? x.match(/\d+(\D+)/)[1] : 'px';
container.style.left = xint + xunit;

var yint = (parseInt(y) > 0) ? parseInt(y) :
Math.floor(screen.height/5);
var yunit = typeof y === 'string' ? y.match(/\d+(\D+)/)[1] : 'px';
container.style.top = yint + yunit;

// verbose alerts
alert('please check if coordinates in the document match\n\n' +
'x = ' + (xint + xunit) + ' and y = ' + (yint + yunit));
}
positionThis('our crap', 'ourID');
positionThis('our crap', 'ourID', 400, 400);
positionThis('our crap', 'ourID', '2in', '30em');
positionThis('our crap', 'ourID', '35pt', '15ex');

if you want answers, for a start, object.style.top|left require a unit
e.g., px, em. also, I see you're sort of skipping the style object
alltogether, you most likely forgot it. So, pointer.visibility
shouldn't work *but* perhaps pointer.style.visibility would? good luck!
 
T

Thomas 'PointedEars' Lahn

David said:
Get rid of that language attribute. Optionally, add type="text/
javascript".

The `type' attribute is *required* in Valid (X)HTML:

http://www.w3.org/TR/html4/interact/scripts.html#edef-SCRIPT
http://validator.w3.org/
http://dorward.me.uk/tmp/fullscreen.jpeg


You can't reference a tag. Dreamweaver meant to say element.

It meant to say "element object".
var pointer=new Object();

There is no need to instantiate an Object here. [...]

The Object object is created, not instantiated:

http://developer.mozilla.org/en/doc...ls_of_the_Object_Model#Summary_of_Differences
Same here and put an else before the if.

It would be better if that was the first branch. document.all is only
required for IE 4.
Check that "pointer" was set to an element with a style property
before proceeding any further.

posting = posting.replace(/\belement\b/g, "$& object");


PointedEars
 
D

David Mark

The `type' attribute is *required* in Valid (X)HTML:

And yet there is no standard value for it that works. That is one you
can safely leave off. I don't, but many people do.
http://www.w3.org/TR/html4/interact/scripts.html#edef-SCRIPThttp://validator.w3.org/
You can't reference a tag. Dreamweaver meant to say element.

It meant to say "element object".
There is no need to instantiate an Object here. [...]

The Object object is created, not instantiated:

http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Detail...

Thanks for that. There is no need to create an Object either.
It would be better if that was the first branch. document.all is only
required for IE 4.

Obviously. The whole script should be rewritten.
posting = posting.replace(/\belement\b/g, "$& object");

Thanks for that.
 
T

Thomas 'PointedEars' Lahn

Randy said:
Thomas 'PointedEars' Lahn said the following on 12/4/2007 8:27 PM:

Although there are no properly defined MIME types for that attribute.

Yes, there are.
Give it a rest.

Learn to read.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Randy said:
Thomas 'PointedEars' Lahn said the following on 12/5/2007 6:22 PM:


I have asked you before for a URL that shows the proper MIME types for
the script element and you haven't given one yet.

Yes, I have.

http://groups.google.com/group/comp...ript+author:PointedEars+MIME#f9ea91fa30ba786b
Nothing you said showed me where to find the proper MIME types for the
script element. And, given that the "validator" will happily accept
"your mama" as the type attribute of a script element, then validating
isn't worth a whole lot.

<script type="your mama">
</script>

I have said it before: the W3C Markup Validator only tests against a
DTD. However, of course the prose of the specification, which is not
tested against, is normative as well (unless explicitly marked
otherwise):

http://www.w3.org/TR/REC-html40/interact/scripts.html#edef-SCRIPT


PointedEars
 
T

Thomas 'PointedEars' Lahn

David said:
Standardized by whom?

The Internet Engineering Steering Group (IESG).
I don't consider pages on your personal site to be standards
references.

It has text on it that can be read and understood, and visible
hyperlinks on that text which can be followed. Iff one is willing to.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Randy said:
Thomas 'PointedEars' Lahn said the following on 12/6/2007 8:04 AM:
David said:
[...] "Thomas 'PointedEars' Lahn" [...] wrote:
"text/javascript" is _not_ non-standard. It has been standardized
more than two years ago:
Standardized by whom?
The Internet Engineering Steering Group (IESG).
It has text on it that can be read and understood, and visible
hyperlinks on that text which can be followed. Iff one is willing to.

Yeah, posting a URL directly to the source is too complicated when you
can plug a personal page instead.

It is not only one URL there that is required for understanding, hence
my referring to the test case which also connects the dots for you.
But, for the future and the intellectually challenged among us, here
it is again in plain plain text (sic!):

| [...]
| With the publication of [RFC4329], Scripting Media Types, by the
[IETF]
| on 2005-06-27 (see announcement[1]), four new media types have been
| registered in the standards tree[2]: text/javascript[3] (obsolete),
| text/ecmascript (obsolete), application/javascript[4], and
| application/ecmascript. [...]
|
| [RFC4329] http://rfc-editor.org/rfc/rfc4329.txt
| [IETF] http://ietf.org/
| [1] http://www1.ietf.org/mail-archive/web/ietf-announce/current/msg01349.html
| [2] http://www.iana.org/assignments/media-types/
| [3] http://www.iana.org/assignments/media-types/text/
| [4] http://www.iana.org/assignments/media-types/application/

Most certainly at some point in the future someone of the
aforementioned group who read that will ask where there is the
standard that says the above applies for the `type' attribute of HTML
`script' elements. So I will also connect the dots for them regarding
that, here and now:

,-[HTML 4.01 Specification at <http://www.w3.org/TR/REC-html40/
interact/scripts.html#edef-SCRIPT>]
|
| 18.2.1 The SCRIPT element
|
| [...]
| <!ELEMENT SCRIPT - - %Script; -- script statements -->
| <!ATTLIST SCRIPT
| charset %Charset; #IMPLIED -- char encoding of linked
resource --
| type %ContentType; #REQUIRED -- content type of script
language --
^[1]
| [...]
|
| type = [content-type] [CI]
| This attribute specifies the scripting language of the element's
contents
| and overrides the default scripting language. The scripting
language is
| specified as a content type (e.g., "text/javascript"). Authors
must supply
| a value for this attribute. There is no default value for this
attribute.
|
| [1] http://www.w3.org/TR/REC-html40/sgml/dtd.html#ContentType
| [content-type] http://www.w3.org/TR/REC-html40/types.html#type-content-type

,-<http://www.w3.org/TR/REC-html40/sgml/dtd.html#ContentType>
|
| <!ENTITY % ContentType "CDATA"
| -- media type, as per [RFC2045]
| -->

,-<http://www.w3.org/TR/REC-html40/types.html#type-content-type>
|
| 6.7 Content types (MIME types)
|
| Note. A "media type" (defined in [RFC2045] and [RFC2046])
specifies
| the nature of a linked resource. This specification employs the
term
| "content type" rather than "media type" in accordance with current
| usage. Furthermore, in this specification, "media type" may refer
| to the media where a user agent renders a document.
|
| This type is represented in the DTD by %ContentType;[1].
|
| Content types are case-insensitive[2].
|
| Examples of content types include "text/html", "image/png", "image/
gif",
| "video/mpeg", "text/css", and "audio/basic". For the current list of
| registered MIME types, please consult [MIMETYPES].
|
| [1] http://www.w3.org/TR/REC-html40/sgml/dtd.html#ContentType
| [2] http://www.w3.org/TR/REC-html40/types.html#case-insensitive
| [MIMETYPES] http://www.w3.org/TR/REC-html40/references.html#ref-MIMETYPES

,-<http://www.w3.org/TR/REC-html40/references.html#ref-MIMETYPES>
|
| [MIMETYPES]
| List of registered content types (MIME types). Download a list of
| registered content types from
| ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.

,-<ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/README>
|
| At one time the RFC Editor and the IANA were one person, Jon Postel,
| so IANA registration information was maintained in this directory.
| The IANA is now a separate organization, and IANA databases may be
| found at http://www.iana.org.
|
| In particular, MIME media type registrations will be found at:
|
| http://www.iana.org/assignments/media-types

Further comments regarding this should be directed to /dev/null (or
`NUL:' if you like Windows) where they will receive the attention they
deserve.
BTW, the images on that page don't display properly for me.

BAD. There has been a necessary quick update that did not include the
icon for Firefox 2.0. But there are too many icons already, and the
local version, where both issues are fixed, is still under
construction.


PointedEars
 
T

Thomas 'PointedEars' Lahn

[Argh, crappy Google Groups. The following rewrapped posting should
be better legible.]

Randy said:
Thomas 'PointedEars' Lahn said the following on 12/6/2007 8:04 AM:
David said:
[...] "Thomas 'PointedEars' Lahn" [...] wrote:
"text/javascript" is _not_ non-standard. It has been standardized
more than two years ago:
Standardized by whom?
The Internet Engineering Steering Group (IESG).
It has text on it that can be read and understood, and visible
hyperlinks on that text which can be followed. Iff one is willing to.

Yeah, posting a URL directly to the source is too complicated when you
can plug a personal page instead.

It is not only one URL there that is required for understanding, hence
my referring to the test case which also connects the dots for you.
But, for the future and the intellectually challenged among us, here
it is again in plain plain text (sic!):

| [...]
| With the publication of [RFC4329], Scripting Media Types, by the
| [IETF] on 2005-06-27 (see announcement[1]), four new media types
| have been registered in the standards tree[2]: text/javascript[3]
| (obsolete), text/ecmascript (obsolete), application/javascript[4],
| and application/ecmascript. [...]
|
| [RFC4329] http://rfc-editor.org/rfc/rfc4329.txt
| [IETF] http://ietf.org/
| [1] http://www1.ietf.org/mail-archive/web/ietf-announce/current/msg01349.html
| [2] http://www.iana.org/assignments/media-types/
| [3] http://www.iana.org/assignments/media-types/text/
| [4] http://www.iana.org/assignments/media-types/application/

Most certainly at some point in the future someone of the
aforementioned group who read that will ask where there is the
standard that says the above applies for the `type' attribute of HTML
`script' elements. So I will also connect the dots for them regarding
that, here and now:

,-[HTML 4.01 Specification at
| <http://www.w3.org/TR/REC-html40/interact/scripts.html#edef-
SCRIPT>]
|
| 18.2.1 The SCRIPT element
|
| [...]
| <!ELEMENT SCRIPT - - %Script; -- script statements -->
| <!ATTLIST SCRIPT
| charset %Charset; #IMPLIED -- char encoding of linked
| resource --
| type %ContentType; #REQUIRED -- content type of script
^[1]
| language --
| [...]
|
| type = [content-type] [CI]
| This attribute specifies the scripting language of the element's
| contents and overrides the default scripting language. The
| scripting language is specified as a content type (e.g.,
| "text/javascript"). Authors must supply a value for this
| attribute. There is no default value for this attribute.
|
| [1] http://www.w3.org/TR/REC-html40/sgml/dtd.html#ContentType
| [content-type] http://www.w3.org/TR/REC-html40/types.html#type-content-type

,-<http://www.w3.org/TR/REC-html40/sgml/dtd.html#ContentType>
|
| <!ENTITY % ContentType "CDATA"
| -- media type, as per [RFC2045]
| -->

,-<http://www.w3.org/TR/REC-html40/types.html#type-content-type>
|
| 6.7 Content types (MIME types)
|
| Note. A "media type" (defined in [RFC2045] and [RFC2046])
| specifies the nature of a linked resource. This specification
| employs the term "content type" rather than "media type" in
| accordance with current usage. Furthermore, in this
| specification, "media type" may refer to the media where a
| user agent renders a document.
|
| This type is represented in the DTD by %ContentType;[1].
|
| Content types are case-insensitive[2].
|
| Examples of content types include "text/html", "image/png",
| "image/gif", "video/mpeg", "text/css", and "audio/basic".
| For the current list of registered MIME types, please consult
| [MIMETYPES].
|
| [1] http://www.w3.org/TR/REC-html40/sgml/dtd.html#ContentType
| [2] http://www.w3.org/TR/REC-html40/types.html#case-insensitive
| [MIMETYPES] http://www.w3.org/TR/REC-html40/references.html#ref-MIMETYPES

,-<http://www.w3.org/TR/REC-html40/references.html#ref-MIMETYPES>
|
| [MIMETYPES]
| List of registered content types (MIME types). Download a list of
| registered content types from
| ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.

,-<ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/README>
|
| At one time the RFC Editor and the IANA were one person, Jon Postel,
| so IANA registration information was maintained in this directory.
| The IANA is now a separate organization, and IANA databases may be
| found at http://www.iana.org.
|
| In particular, MIME media type registrations will be found at:
|
| http://www.iana.org/assignments/media-types

Further comments regarding this should be directed to /dev/null (or
`NUL:' if you like Windows) where they will receive the attention they
deserve.
BTW, the images on that page don't display properly for me.

BAD. There has been a necessary quick update that did not include the
icon for Firefox 2.0. But there are too many icons already, and the
local version, where both issues are fixed, is still under
construction.


PointedEars
 
R

Randell_D

Thanks to everyone who shared comments and solutions! I hope health
wealth and peace follows you all in 2008...
 

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,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top