Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Positioning content with div tags - whats wrong here?

Reply
Thread Tools

Positioning content with div tags - whats wrong here?

 
 
Randell_D
Guest
Posts: n/a
 
      12-04-2007
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>
 
Reply With Quote
 
 
 
 
Randell_D
Guest
Posts: n/a
 
      12-04-2007

I found an earlier post on google groups that appears to bring me in
the right direction...
http://groups.google.com/group/comp....fc792624e6d5aa

titled "positioning a layer's contents at bottom of browser" with a
solution provided by Martin Honnen if anyone is looking for something
similar...

cheers!

 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      12-04-2007
On Dec 4, 11:01 am, Randell_D <(E-Mail Removed)> wrote:
> 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?

}

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


 
Reply With Quote
 
vbgunz
Guest
Posts: n/a
 
      12-04-2007
Randell_D wrote:
> 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!
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-05-2007
David Mark wrote:
> On Dec 4, 11:01 am, Randell_D <(E-Mail Removed)> wrote:
>> <script language="javascript">

>
> 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/...ml#edef-SCRIPT
http://validator.w3.org/

>> { y = Math.floor(screen.height/5); }


http://dorward.me.uk/tmp/fullscreen.jpeg

>> // Reference the tag using a method valid for this browser

>
> 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/docs...of_Differences

>> if( document.getElementById(tag) )

>
> 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.

>> { pointer=document.getElementById(tag); }
>> // Position the pointer

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


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


PointedEars
--
"Use any version of Microsoft Frontpage to create your site. (This won't
prevent people from viewing your source, but no one will want to steal it.)"
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      12-05-2007
On Dec 4, 8:27 pm, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
wrote:
> David Mark wrote:
> > On Dec 4, 11:01 am, Randell_D <(E-Mail Removed)> wrote:
> >> <script language="javascript">

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

>
> 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/...idator.w3.org/
>
> >> { y = Math.floor(screen.height/5); }

>
> http://dorward.me.uk/tmp/fullscreen.jpeg
>
> >> // Reference the tag using a method valid for this browser

>
> > 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/docs...ide:grin:etail...
>


Thanks for that. There is no need to create an Object either.

> >> if( document.getElementById(tag) )

>
> > 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.


Obviously. The whole script should be rewritten.

>
> >> { pointer=document.getElementById(tag); }
> >> // Position the pointer

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

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


Thanks for that.
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-05-2007
Randy Webb wrote:
> Thomas 'PointedEars' Lahn said the following on 12/4/2007 8:27 PM:
>> David Mark wrote:
>>> On Dec 4, 11:01 am, Randell_D <(E-Mail Removed)> wrote:
>>>> <script language="javascript">
>>> 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/...ml#edef-SCRIPT
>> http://validator.w3.org/

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


Yes, there are.

> Give it a rest.


Learn to read.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$(E-Mail Removed)>
 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      12-06-2007
On Dec 5, 6:22 pm, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
wrote:
> Randy Webb wrote:
> > Thomas 'PointedEars' Lahn said the following on 12/4/2007 8:27 PM:
> >> David Mark wrote:
> >>> On Dec 4, 11:01 am, Randell_D <(E-Mail Removed)> wrote:
> >>>> <script language="javascript">
> >>> 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/...ml#edef-SCRIPT
> >>http://validator.w3.org/

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

>
> Yes, there are.


But they do not work in all browsers. Therefore you are stuck with
the non-standard "text/javascript."

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-06-2007
David Mark wrote:
> [...] Thomas 'PointedEars' Lahn [...] wrote:
> > Randy Webb wrote:
> > > Thomas 'PointedEars' Lahn said the following on 12/4/2007 8:27 PM:
> > >> David Mark wrote:
> > >>> On Dec 4, 11:01 am, Randell_D <(E-Mail Removed)> wrote:
> > >>>> <script language="javascript">
> > >>> 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/...ml#edef-SCRIPT
> > >>http://validator.w3.org/

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

> >
> > Yes, there are.

>
> But they do not work in all browsers. Therefore you are stuck with
> the non-standard "text/javascript."


"text/javascript" is _not_ non-standard. It has been standardized
more than two years ago:

http://pointedears.de/scripts/test/mime-types/


PointedEars
 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      12-06-2007
On Dec 6, 6:28 am, "Thomas 'PointedEars' Lahn" <(E-Mail Removed)>
wrote:
> David Mark wrote:
> > [...] Thomas 'PointedEars' Lahn [...] wrote:
> > > Randy Webb wrote:
> > > > Thomas 'PointedEars' Lahn said the following on 12/4/2007 8:27 PM:
> > > >> David Mark wrote:
> > > >>> On Dec 4, 11:01 am, Randell_D <(E-Mail Removed)> wrote:
> > > >>>> <script language="javascript">
> > > >>> 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/...ml#edef-SCRIPT
> > > >>http://validator.w3.org/

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

>
> > > Yes, there are.

>
> > But they do not work in all browsers. Therefore you are stuck with
> > the non-standard "text/javascript."

>
> "text/javascript" is _not_ non-standard. It has been standardized
> more than two years ago:


Standardized by whom?

>
> http://pointedears.de/scripts/test/mime-types/


I don't consider pages on your personal site to be standards
references.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
Adding float makes nested div tags go out of parent div. Jimmy HTML 7 11-21-2008 10:44 AM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
Whats wrong with DIV in Table? Martin Schneider HTML 8 01-17-2005 07:56 PM
table-tags within div-tags Chris HTML 5 02-10-2004 08:57 PM



Advertisments