HTML, JavaScript And CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
 
User Name:
Password:
Remember me
Go Back   ASP Free Forums > Programming > HTML, JavaScript And CSS Help
Reload this Page

JavaScript - Can't See Object Properties

Discuss Can't See Object Properties in the HTML, JavaScript And CSS Help forum on ASP Free.
Can't See Object Properties HTML Help forum discussing HTML, DHTML, XHTML, and JavaScript languages for web development, including CSS style sheet coding. All aspects of website development are covered here.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread ASP Free Forums Sponsor:
  #1  
Old April 3rd, 2008, 11:35 AM
cjreynolds cjreynolds is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Mar 2005
Posts: 351 cjreynolds User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 Days 10 h 9 m 21 sec
Reputation Power: 4
JavaScript - Can't See Object Properties
Why won't this work:
Code:
<BODY>
<DIV ID="heightGuage">&nbsp;</DIV>
<SCRIPT LANGUAGE="javascript">
<!--
guage=document.getElementById(heightGuage)
alert(guage.style.top);
// -->
</SCRIPT>

</BODY>

No alert comes up. If I use a string value in the alert statement, it works - It just doesn't see the "heightGuage" DIV's properties...

joe
Reply With Quote
  #2  
Old April 3rd, 2008, 07:44 PM
markoc's Avatar
markoc markoc is offline
Contributing User
ASP Free Regular (2000 - 2499 posts)
  
Join Date: Nov 2003
Location: UK
Posts: 2,140 markoc User rank is First Lieutenant (10000 - 20000 Reputation Level)markoc User rank is First Lieutenant (10000 - 20000 Reputation Level)markoc User rank is First Lieutenant (10000 - 20000 Reputation Level)markoc User rank is First Lieutenant (10000 - 20000 Reputation Level)markoc User rank is First Lieutenant (10000 - 20000 Reputation Level)markoc User rank is First Lieutenant (10000 - 20000 Reputation Level)markoc User rank is First Lieutenant (10000 - 20000 Reputation Level)markoc User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 3 Weeks 15 h 12 m 13 sec
Reputation Power: 201
Can't See Object Properties
you don't use style.top as this to set the position you need to use offsetTop to get the value.

like the following:

Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
</head>
<body>
<div id="heightGuage">&nbsp;</div>
<script language="javascript">
<!--//
var guage = document.getElementById("heightGuage").offsetTop;
alert(guage);
// -->
</script>
</body>
</html>
__________________
Hope this advise helps.

If so please show your appreciation by adding reputation points (click gauge image on top right of this post and score).
Reply With Quote
  #3  
Old April 8th, 2008, 12:31 PM
cjreynolds cjreynolds is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Mar 2005
Posts: 351 cjreynolds User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 Days 10 h 9 m 21 sec
Reputation Power: 4
Good answer - when I copy the code into a new page, it works as expected. However, when I add it to the pages it was intended for, I consistantly get a value of -1, dispite where the div appears on the page.

Here's the defective code:

Code:
<HTML>

<HEAD>

<META NAME="keywords" CONTENT="SBDC,NTSBDC,SBA,small business,north texas small business development center,
	small business development center, ">
<META NAME="description" CONTENT="Welcome to the North Texas Development Center - promoting small
	business success by providing management education.">
<META NAME="author" CONTENT="C.J. Reynolds">
<META NAME="copyright" CONTENT="Copyright © 2005 North Texas Small Business Development Center">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<TITLE>North Texas Small Business Development Center - Economic Impact</TITLE>

<STYLE TYPE='TEXT/CSS'>
<!--

.head1800 {font-family:Arial Narrow, Arial, Helvetica, sans-serif, Verdana; font-style:italic; color:#000099; font-size:50px; text-align:center;}
.horGrad800 {width:330px;}

//-->
</STYLE>

<link rel="stylesheet" href="include/default.css" /> 										<!-- include default style sheet -->
<script type="text/javascript" language="javascript" src="include/scripts.js"></script>		<!-- invoke scripts.js for javascript functions -->

</HEAD>

<BODY BGCOLOR="#80B6F1" TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">

<DIV WIDTH="100%" BGCOLOR="WHITE" style="background-color:white; width:100%; text-align:left;"><IMG ID="topBannerImg" SRC="images/sbdc_banner2.jpg" BORDER="0" WIDTH="995" HEIGHT="139" style="position:relative; z-index:3;"></DIV>

<TABLE HEIGHT="100%" WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0" style="position:relative; top:-4;">	<!-- This is the table that contains all three columns -->
	<TR>
		<TD ID="tblContent" WIDTH="780" VALIGN="TOP">		<!-- open cell for right pane -->
			<TABLE ALIGN="LEFT" BORDER="0" WIDTH="100%" CELLPADDING="0" CELLSPACING="0">
				<TR>
					<TD WIDTH="100%" ALIGN="CENTER">	<!-- All page content (the right column) will be contained in this cell -->
<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->

<!--	***** Page Header ***** -->
	
<TABLE WIDTH="100%" ALIGN="CENTER" BORDER="0" CELLPADDING="10" CELLSPACING="0">
	<TR>
		<TD WIDTH="100%" ALIGN="CENTER" ID="mainHeading" class="medHeading">	
			Economic Impact<BR>
			<IMG SRC="images/horizontal_gradient.jpg" ID="hGrad" WIDTH="430" HEIGHT="13"></TD>
	</TR><TR>
<!--	***** 1st paragraph ***** -->
		<TD WIDTH="100%" ALIGN="LEFT"><BR>
				<DIV CLASS="firstPara">The North Texas <ACRONYM title="Small Business Development Center">SBDC</ACRONYM> Region has a population of over 7 million and more than 150,000 small businesses.  To ensure comprehensive business counseling and training services are provided to our varied and large constituency, we have thirteen <A HREF="map.shtml" TARGET="_blank">field centers</A>, five specialty centers and eight satellite offices.  Working synergistically, these centers have a dramatic impact on the area’s annual economy. In 2003, 1,626 jobs were created, 2,959 jobs were retained, and nearly $35 million in capital formation resulted from <ACRONYM title="Small Business Development Center">SBDC</ACRONYM> program efforts; the North Texas <ACRONYM title="Small Business Development Center">SBDCs</ACRONYM> invested 24,000 hours counseling 6,094 clients, and trained more than 13,000 entrepreneurs.</DIV>
		</TD>
	</TR>
</TABLE>
<DIV ID="heightGuage">This is a Test</DIV>
<SCRIPT LANGUAGE="javascript">
<!--//
var guage = document.getElementById("heightGuage").offsetTop;
alert(guage);
// -->
</SCRIPT>

<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->
					</TD>
				</TR>
			</TABLE>				<!-- close table containing right column -->
		</TD>						<!-- close cell containing all page content -->
	</TR>
</TABLE>							<!-- close table containing page -->

</BODY>

</HTML>

If I take out two of the tables, like so:
Code:
<HTML>

<HEAD>

<META NAME="keywords" CONTENT="SBDC,NTSBDC,SBA,small business,north texas small business development center,
	small business development center, ">
<META NAME="description" CONTENT="Welcome to the North Texas Development Center - promoting small
	business success by providing management education.">
<META NAME="author" CONTENT="C.J. Reynolds">
<META NAME="copyright" CONTENT="Copyright © 2005 North Texas Small Business Development Center">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<TITLE>North Texas Small Business Development Center - Economic Impact</TITLE>

<STYLE TYPE='TEXT/CSS'>
<!--

.head1800 {font-family:Arial Narrow, Arial, Helvetica, sans-serif, Verdana; font-style:italic; color:#000099; font-size:50px; text-align:center;}
.horGrad800 {width:330px;}

//-->
</STYLE>

<link rel="stylesheet" href="include/default.css" /> 										<!-- include default style sheet -->
<script type="text/javascript" language="javascript" src="include/scripts.js"></script>		<!-- invoke scripts.js for javascript functions -->

</HEAD>

<BODY BGCOLOR="#80B6F1" TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">

<DIV WIDTH="100%" BGCOLOR="WHITE" style="background-color:white; width:100%; text-align:left;"><IMG ID="topBannerImg" SRC="images/sbdc_banner2.jpg" BORDER="0" WIDTH="995" HEIGHT="139" style="position:relative; z-index:3;"></DIV>

<!--	***** Page Header ***** -->
	
<TABLE WIDTH="100%" ALIGN="CENTER" BORDER="0" CELLPADDING="10" CELLSPACING="0">
	<TR>
		<TD WIDTH="100%" ALIGN="CENTER" ID="mainHeading" class="medHeading">	
			Economic Impact<BR>
			<IMG SRC="images/horizontal_gradient.jpg" ID="hGrad" WIDTH="430" HEIGHT="13"></TD>
	</TR><TR>
<!--	***** 1st paragraph ***** -->
		<TD WIDTH="100%" ALIGN="LEFT"><BR>
				<DIV CLASS="firstPara">The North Texas <ACRONYM title="Small Business Development Center">SBDC</ACRONYM> Region has a population of over 7 million and more than 150,000 small businesses.  To ensure comprehensive business counseling and training services are provided to our varied and large constituency, we have thirteen <A HREF="map.shtml" TARGET="_blank">field centers</A>, five specialty centers and eight satellite offices.  Working synergistically, these centers have a dramatic impact on the area’s annual economy. In 2003, 1,626 jobs were created, 2,959 jobs were retained, and nearly $35 million in capital formation resulted from <ACRONYM title="Small Business Development Center">SBDC</ACRONYM> program efforts; the North Texas <ACRONYM title="Small Business Development Center">SBDCs</ACRONYM> invested 24,000 hours counseling 6,094 clients, and trained more than 13,000 entrepreneurs.</DIV>
		</TD>
	</TR>
</TABLE>
<DIV ID="heightGuage">This is a Test</DIV>
<SCRIPT LANGUAGE="javascript">
<!--//
var guage = document.getElementById("heightGuage").offsetTop;
alert(guage);
// -->
</SCRIPT>


</BODY>

</HTML>

Then it works.

Any suggestions?

joe
Last edited by cjreynolds : April 8th, 2008 at 02:26 PM.
Reply With Quote
  #4  
Old April 8th, 2008, 02:51 PM
cjreynolds cjreynolds is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Mar 2005
Posts: 351 cjreynolds User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 Days 10 h 9 m 21 sec
Reputation Power: 4
I seem to have the problem identified (not solved)...

If I put the "heightGuage" div inside any table, it doesn't work.

This works:
Code:
<DIV ID="heightGuage">This is a Test</DIV>
<SCRIPT LANGUAGE="javascript">
<!--//
var guage = document.getElementById("heightGuage").offsetTop;
alert(guage);
// -->
</SCRIPT>


</BODY>

</HTML>

This doesn't:
Code:
<TABLE><TR><TD>
<DIV ID="heightGuage">This is a Test</DIV>
<SCRIPT LANGUAGE="javascript">
<!--//
var guage = document.getElementById("heightGuage").offsetTop;
alert(guage);
// -->
</SCRIPT>
</TD></TD></TABLE>

</BODY>

</HTML>

It returns "0"

Hope that helps...

joe
Reply With Quote
  #5  
Old April 9th, 2008, 11:42 AM
cjreynolds cjreynolds is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Mar 2005
Posts: 351 cjreynolds User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 Days 10 h 9 m 21 sec
Reputation Power: 4
Found a fix!

Of course, I just realized that the code where I need to detect the top of the div is loaded before the div is built, so there's no way I can do what I set out to do - Oh, well...

Anyway, if anyone needs it:

Code:
<HTML>

<HEAD>

<SCRIPT LANGUAGE="javascript">
<!--//

function getElementTopPosition(e){
var y=0;

while(e){
	y+=e.offsetTop+e.clientTop;
	e=e.offsetParent;
}
//return y;
alert(y);
}
// -->
</SCRIPT>

</HEAD>

<BODY>

<TABLE>
	<TR>	
		<TD>
			<DIV ID="heightGuage">This is a Test</DIV>	
		</TD>
	</TR>
</TABLE>

<SCRIPT LANGUAGE="javascript">
<!--
getElementTopPosition(heightGuage);
//-->
</SCRIPT>

</BODY>

</HTML>


Thanks (as always) for the support, but no cigar this time...

Y'All have a great day!

joe
Reply With Quote
  #6  
Old June 30th, 2008, 06:52 AM
Mordof Mordof is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jun 2008
Posts: 1 Mordof User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 m 43 sec
Reputation Power: 0
I know this is a little late.. maybe you've got email notifications on. anyway..

Take this out:

Code:
<SCRIPT LANGUAGE="javascript">
<!--
getElementTopPosition(heightGuage);
//-->
</SCRIPT>


Do this:

Code:
<body onload="getElementTopPosition(heightGauge)">


you mentioned it didn't work since the code was run before the div was created.. putting a function in the onload section triggers it once the page is finished ^.~ problem solved.

alternatively, if you have more things you'd like to do upon the page loading.. make a load() function, then do what you want inside that function.

Quote:
Originally Posted by cjreynolds
Found a fix!

Of course, I just realized that the code where I need to detect the top of the div is loaded before the div is built, so there's no way I can do what I set out to do - Oh, well...

Anyway, if anyone needs it:

Code:
<HTML>

<HEAD>

<SCRIPT LANGUAGE="javascript">
<!--//

function getElementTopPosition(e){
var y=0;

while(e){
	y+=e.offsetTop+e.clientTop;
	e=e.offsetParent;
}
//return y;
alert(y);
}
// -->
</SCRIPT>

</HEAD>

<BODY>

<TABLE>
	<TR>	
		<TD>
			<DIV ID="heightGuage">This is a Test</DIV>	
		</TD>
	</TR>
</TABLE>

<SCRIPT LANGUAGE="javascript">
<!--
getElementTopPosition(heightGuage);
//-->
</SCRIPT>

</BODY>

</HTML>


Thanks (as always) for the support, but no cigar this time...

Y'All have a great day!

joe
Reply With Quote
Reply

Viewing: ASP Free Forums > Programming > HTML, JavaScript And CSS Help > JavaScript - Can't See Object Properties

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway.