PDA

View Full Version : Anchors Not Working



greasonwolfe
Feb 23rd, 2006, 12:06 PM
Okay, I have a small problem and I have made several attempts to fix it. Unfortunately, none of my attempts seem to have worked. I am using javascript to generate a popup window and all the coding within that window. The top portion of the window has some images that I am trying to use as links to anchors in a table lower down on the page. However, those links don't seem to be working they way they are supposed to. In IE nothing at all happens while FireFox sends me back to the parent page. I strongly suspect that it has to do with the fact that the code for the popup is generated by the parent rather than being loaded off the server which gives it an "about:blank" url. This leads me to think that since it doesnt have an "somename.html" url, my anchors are not going to work the way they should. Is there a work around for this problem?

Here is the code that generates the popup


function displaydata()
{
var showdata=window.open("","datadisplay","width=775 height=400, location, toolbar, scrollbars, menubar, resizable")
var fulldata='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"\n"http://www.w3.org/TR/REC-html40/loose.dtd">\n\n<html lang=en-us>\n\n<head>\n\n'
fulldata+='<title>Accumulated Data Results</title>\n\n'
fulldata+='<style type="text/css">\n<!--\n\n'
fulldata+='.listdata {\ncolor: black;\nfont-style: normal;\nfont-weight: normal;\nfont-size: small;\nfont-family: "Tahoma";\n}\n\n'
fulldata+='.details {\nmargin-left: 1%;\nmargin-right: 1%;\nmargin-top: 1%;\nmargin-bottom: 1%;\n}\n\n'
fulldata+='-->\n</style>\n\n</head>\n\n'
fulldata+='<body topmargin="0" leftmargin="0" bgcolor="#C0C0C0">\n\n'
fulldata+='<table cellpadding="0" cellspacing="0" border="1" bordercolor="#000000" width="750">\n\n<tr>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="26" height="1"></td>\n<td width="99" height="1"></td>\n<td width="125" height="1"></td>\n</tr>\n\n'
fulldata+='<tr>\n'
fulldata+='<td height="750" colspan="7" valign="top">\n'
fulldata+='<img src="polarchart.jpg" width="750" height="750" alt="blank polar chart">\n'
fulldata+='</td>\n'
fulldata+='</tr>\n\n'
fulldata+='</table>\n\n'
for (i=0;i<datalist;i++)
{
fulldata+='<div id="'+starNAME[i]+'" style="position:absolute;visibility:visible;top:'+starCHARTY[i]+'px;left:'+starCHARTX[i]+'px;">\n'
fulldata+='<a href="#'+starNAME[i]+starNUMBER[i]+i+'"><img src="'+starCOLOR[i]+'" width="24" height="24" alt="'+starNAME[i]+' RA='+starRA[i]+' DEC='+starDEC[i]+'" border="0"></a>\n' //assigns link to the image
fulldata+='</div>\n\n'
}
fulldata+='<table cellpadding="0" cellspacing="0" border="1" bordercolor="#000000" width="750">\n\n<tr>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="26" height="1"></td>\n<td width="99" height="1"></td>\n<td width="125" height="1"></td>\n</tr>\n\n'
for (i=0;i<datalist;i++)
{
fulldata+="'<a name='+starNAME[i]+starNUMBER[i]+i+'"></a>\n\n' //positions the anchor
fulldata+='<tr>\n<td colspan="2" height="26"><center><font class="listdata">Name '+starNAME[i]+'</font></center></td>\n<td colspan="2"><center><font class="listdata">ID Number '+starNUMBER[i]+'</font></center></td>\n<td><center><img src="'+starCOLOR[i]+'" width="24" height="24"></center></td>\n<td colspan="2"><center><font class="listdata">'+starTYPE[i]+'</font></center></td>\n</tr>\n\n'
fulldata+='<tr>\n<td colspan="3" height="26"><center><font class="listdata">Right Accension = '+starRA[i]+'</font></center></td>\n<td colspan="4"><center><font class="listdata">Declination Angle = '+starDEC[i]+'</font></center></td>\n</tr>\n\n'
fulldata+='<tr>\n<td colspan="2" height="26"><center><font class="listdata">Trigonometric Parallax = '+starTP[i]+'</font></center></td>\n<td colspan="2" height="26"><center><font class="listdata">Distance in Parsecs = '+starPS[i]+'</font></center></td>\n<td colspan="3" height="26"><center><font class="listdata">Distance in Lightyears = '+starLY[i]+'</font></center></td>\n</tr>\n\n'
fulldata+='<tr>\n<td colspan="2" height="26"><center><font class="listdata">Cartesian X Coordinate = '+starCX[i]+'</font></center></td>\n<td colspan="2" height="26"><center><font class="listdata">Cartesian Y Coordinate = '+starCY[i]+'</font></center></td>\n<td colspan="3" height="26"><center><font class="listdata">Cartesian Z Coordinate = '+starCZ[i]+'</font></center></td>\n</tr>\n\n'
fulldata+='<tr><td colspan="7">\n'+starNOTES[i]+'</td>\n</tr>\n\n'
}
fulldata+='</table>\n\n</body>\n\n</html>'
showdata.document.write(fulldata)
showdata.document.close()
showdata.focus()

}


and here is a sample of the output generated by that code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

<html lang=en-us>

<head>

<title>Accumulated Data Results</title>

<style type="text/css">
<!--

.listdata {
color: black;
font-style: normal;
font-weight: normal;
font-size: small;
font-family: "Tahoma";
}

.details {
margin-left: 1%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
}

-->
</style>

</head>

<body topmargin="0" leftmargin="0" bgcolor="#C0C0C0">

<table cellpadding="0" cellspacing="0" border="1" bordercolor="#000000" width="750">

<tr>
<td width="125" height="1"></td>
<td width="125" height="1"></td>
<td width="125" height="1"></td>
<td width="125" height="1"></td>
<td width="26" height="1"></td>
<td width="99" height="1"></td>
<td width="125" height="1"></td>
</tr>

<tr>
<td height="750" colspan="7" valign="top">
<img src="polarchart.jpg" width="750" height="750" alt="blank polar chart">
</td>
</tr>

</table>

<div id="Test Star" style="position:absolute;visibility:visible;top:287px;left:441px;">
<a href="#Test Star123451"><img src="TypeM.gif" width="24" height="24" alt="Test Star RA=02:59:59.9 DEC=35:15:51" border="0"></a>
</div>

<table cellpadding="0" cellspacing="0" border="1" bordercolor="#000000" width="750">

<tr>
<td width="125" height="1"></td>
<td width="125" height="1"></td>
<td width="125" height="1"></td>
<td width="125" height="1"></td>
<td width="26" height="1"></td>
<td width="99" height="1"></td>
<td width="125" height="1"></td>
</tr>

<a name="Test Star123451"></a>

<tr>
<td colspan="2" height="26"><center><font class="listdata">Name Test Star</font></center></td>
<td colspan="2"><center><font class="listdata">ID Number 12345</font></center></td>
<td><center><img src="TypeM.gif" width="24" height="24"></center></td>
<td colspan="2"><center><font class="listdata">Type M Star</font></center></td>
</tr>

<tr>
<td colspan="3" height="26"><center><font class="listdata">Right Accension = 02:59:59.9</font></center></td>
<td colspan="4"><center><font class="listdata">Declination Angle = 35:15:51</font></center></td>
</tr>

<tr>
<td colspan="2" height="26"><center><font class="listdata">Trigonometric Parallax = 0.94166</font></center></td>
<td colspan="2" height="26"><center><font class="listdata">Distance in Parsecs = 1.06196</font></center></td>
<td colspan="3" height="26"><center><font class="listdata">Distance in Lightyears = 3.46410</font></center></td>
</tr>

<tr>
<td colspan="2" height="26"><center><font class="listdata">Cartesian X Coordinate = 2.00002</font></center></td>
<td colspan="2" height="26"><center><font class="listdata">Cartesian Y Coordinate = 1.99999</font></center></td>
<td colspan="3" height="26"><center><font class="listdata">Cartesian Z Coordinate = 1.99999</font></center></td>
</tr>

<tr><td colspan="7">
<center><font class="listdata"><b>Notes for Test Star</b></font></center>
<font class="listdata"><p class="details">

</p></font>

</td>
</tr>

</table>

</body>

</html>

fishluvr
Feb 23rd, 2006, 06:21 PM
I don't have time to create all the arrays and variables to test the script, but I did notice this in your second emphasized line:

fulldata+="'<a name='+starNAME[i]+starNUMBER[i]+i+'"></a>\n\n' //positions the anchor

should be

'<a name="'

_Aerospace_Eng_
Feb 23rd, 2006, 06:24 PM
Also you can't have a space in a name or id which could also be the problem.

greasonwolfe
Feb 24th, 2006, 02:25 AM
True, that test case wouldn't have worked at all, and I should have thought of that, but even when I enter a single word value, it still fails to go to the anchor. As for the missing quotation mark, that was probably something I missed in my several attempts to correct the problem. I tried it with quotes, tried it without quotes, the whole nine yards basicly.

One thing I did notice, however, is that in the address bar, when the url comes up, it is "about:blank" but when you hover over a link, it is referencing the parent document rather than the generated document. I thought, perhaps, that creating a blank document with the html extension and then making a full link to it (ie a href="popupdocument.html#anchorname") might solve the problem, but even that didn't seem to work. Give me a bit of time and I will upload the full code so that it will be easier to see what is going on.

GW

Edit : All files are uploaded now. . .

http://members.aol.com/greasonnightwlf/starcalcv3.html

greasonwolfe
Feb 25th, 2006, 09:33 AM
I decided to take a new approach to this problem. My overall goal is to allow the user to click on a star in the chart and be transfered to the details of that star in the table below the chart. For whatever reason, I can't seem to get the anchors working the way I want them to, so I thought I would try using a scrollTo() approach. However, when I add the necessary code to the popup generation script, it is causing the parent page to go all whacky. Basicly, it is loading the chart and a blank table into the parent page and I really have absolutely no clue why it is doing so. I've included the popup generation script below and highlighted what appears to be causing the problem in red, but to see the whole thing, please look here;

http://members.aol.com/greasonwolfe/starcalcv301.html

EDIT: I checked this code through the javascript console and the line highlighted in blue is giving me an unterminated string literal error. And this is really confusing me since a few lines before that (where I end the style set up) I have done the exact same thing, but am not getting an error there. The only difference between the two lines is that one reads as '--></style>\n\n' and the other reads as '--></script>\n\n' I am at a complete loss at this point, so if anyone has any clue, can you please toss it my way.



function displaydata()
{
var showdata=window.open("","datadisplay","width=775 height=400, location, toolbar, scrollbars, menubar, resizable")
var fulldata='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"\n"http://www.w3.org/TR/REC-html40/loose.dtd">\n\n<html lang=en-us>\n\n<head>\n\n'
fulldata+='<title>Accumulated Data Results</title>\n\n'
fulldata+='<style type="text/css">\n<!--\n\n'
fulldata+='.listdata {\ncolor: black;\nfont-style: normal;\nfont-weight: normal;\nfont-size: small;\nfont-family: "Tahoma";\n}\n\n'
fulldata+='.details {\nmargin-left: 1%;\nmargin-right: 1%;\nmargin-top: 1%;\nmargin-bottom: 1%;\n}\n\n'
fulldata+='-->\n</style>\n\n'
fulldata+='<script type="text/javascript">\n<!--\n\n'
fulldata+='function datascroll(whichstar)\n{\nwindow.scrollTo(1,whichstar)\n}\n\n'
fulldata+='-->\n</script>\n\n'
fulldata+='</head>\n\n'
fulldata+='<body topmargin="0" leftmargin="0" bgcolor="#C0C0C0">\n\n'
fulldata+='<table cellpadding="0" cellspacing="0" border="1" bordercolor="#000000" width="750">\n\n<tr>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="26" height="1"></td>\n<td width="99" height="1"></td>\n<td width="125" height="1"></td>\n</tr>\n\n'
fulldata+='<tr>\n'
fulldata+='<td height="750" colspan="7" valign="top">\n'
fulldata+='<img src="polarchart.jpg" width="750" height="750" alt="blank polar chart">\n'
fulldata+='</td>\n'
fulldata+='</tr>\n\n'
fulldata+='</table>\n\n'
for (i=0;i<datalist;i++)
{
fulldata+='<div id="'+starNAME[i]+'" style="position:absolute;visibility:visible;top:'+starCHARTY[i]+'px;left:'+starCHARTX[i]+'px;">\n'
fulldata+='<img src="'+starCOLOR[i]+'" width="24" height="24" alt="'+starNAME[i]+' RA='+starRA[i]+' DEC='+starDEC[i]+'" border="0" onClick="datascroll('+starSCROLL+')">\n'
fulldata+='</div>\n\n'
}
fulldata+='<table cellpadding="0" cellspacing="0" border="1" bordercolor="#000000" width="750">\n\n<tr>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="125" height="1"></td>\n<td width="26" height="1"></td>\n<td width="99" height="1"></td>\n<td width="125" height="1"></td>\n</tr>\n\n'
for (i=0;i<datalist;i++)
{
fulldata+='<tr>\n<td colspan="2" height="26"><center><font class="listdata">Name '+starNAME[i]+'</font></center></td>\n<td colspan="2"><center><font class="listdata">ID Number '+starNUMBER[i]+'</font></center></td>\n<td><center><img src="'+starCOLOR[i]+'" width="24" height="24"></center></td>\n<td colspan="2"><center><font class="listdata">'+starTYPE[i]+'</font></center></td>\n</tr>\n\n'
fulldata+='<tr>\n<td colspan="3" height="26"><center><font class="listdata">Right Accension = '+starRA[i]+'</font></center></td>\n<td colspan="4"><center><font class="listdata">Dclination Angle = '+starDEC[i]+'</font></center></td>\n</tr>\n\n'
fulldata+='<tr>\n<td colspan="2" height="26"><center><font class="listdata">Trigonometric Parallax = '+starTP[i]+'</font></center></td>\n<td colspan="2" height="26"><center><font class="listdata">Distance in Parsecs = '+starPS[i]+'</font></center></td>\n<td colspan="3" height="26"><center><font class="listdata">Distance in Lightyears = '+starLY[i]+'</font></center></td>\n</tr>\n\n'
fulldata+='<tr>\n<td colspan="2" height="26"><center><font class="listdata">Cartesian X Coordinate = '+starCX[i]+'</font></center></td>\n<td colspan="2" height="26"><center><font class="listdata">Cartesian Y Coordinate = '+starCY[i]+'</font></center></td>\n<td colspan="3" height="26"><center><font class="listdata">Cartesian Z Coordinate = '+starCZ[i]+'</font></center></td>\n</tr>\n\n'
fulldata+='<tr><td colspan="7">\n'+starNOTES[i]+'</td>\n</tr>\n\n'
}
fulldata+='</table>\n\n</body>\n\n</html>'
showdata.document.write(fulldata)
showdata.document.close()
showdata.focus()
}

greasonwolfe
Feb 25th, 2006, 12:45 PM
Apparently I had some sort of hidden character in that one line that was causing all the problems. Re-typed the line from scratch and everything seems to be working the way it is supposed to with the exception of a random generation feature that isn't working in Mozilla/FireFox for some reason that I haven't quite figured out just yet. For now, however, my head hurts from trying to figure this out and I need a break. For those that tried to help, I greatly appreciate it. Thanks Again!

GW