PDA

View Full Version : Opening new window using javascript doesn't cause link to be visited



rayres2007
07-16-2009, 09:29 PM
I am extremely new to Javascript and now very little about it. On the page I am working on, I want to open pdf files in a new window instead of a frame. However, it doesn't show the link as visited until the original page is refreshed.

Click <a href ="filename.pdf" onclick="window.open(this.href,'newwin'); return false"> here</a> is the javascript code that I am using to open the new window.

The Current code is:


<html>
<head>
<title>Lake Huron Learning Collaborative Inc. - LHLC</title>
<meta name="description"
content="The Lake Huron Learning Collaborative is a community-based non-profit organization dedicated to life-long learning and enhanced post-secondary educational choices along the Lake Huron Shoreline.">
<meta name="keywords"
content="Lake Huron Learning, Lake Huron Learning Collaborative, Huron County, Bruce County, Huron, Bruce, life-long learning, enhanced post-secondary, educational choices, University of Western, Western, UofW, Lake Huron Shoreline.">
<meta name="AUTHOR" content="DataQuest Consulting">
<meta http-equiv="CHARSET" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="LANGUAGE" content="English">
<style rolloverstyle="">A:hover {color: #0099CC; font-family: Tahoma; text-decoration: underline} a {text-decoration:none}
</style>
<style>
BODY {
scrollbar-face-color: #336789;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;

}


</style><base
target="I1">
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"
style="color: rgb(0, 51, 153); background-color: rgb(255, 255, 255);"
alink="#008080" link="#004ea0" marginheight="0" marginwidth="0"
vlink="#3366ff">


******************

I was told that I could use javascript and css to change the class before and after. How do I do this, specifically?


The code I found, which gives an error, is:


<html>
<head>
<title>Example</title>
<style type="text/css">
a.beforeclick:link {color:#0000FF;font-size: 12pt;text-decoration:underline;font-weight:normal}
a.beforeclick:active {color:#00FF00;font-size: 12pt;text-decoration:underline;font-weight:normal}
a.beforeclick:visited {color:#FF0000;font-size: 12pt;text-decoration:underline;font-weight:normal}
a.beforeclick:hover {color:#00FF00;font-size: 12pt;text-decoration:underline;font-weight:normal}

a.afterclick:link {color:#FF0000;font-size: 12pt;text-decoration:underline;font-weight:normal}
a.afterclick:active {color:#00FF00;font-size: 12pt;text-decoration:underline;font-weight:normal}
a.afterclick:visited{color:#FF0000;font-size: 12pt;text-decoration:underline;font-weight:normal}
a.afterclick:hover {color:#00FF00;font-size: 12pt;text-decoration:underline;font-weight:normal}

</style>
<script type="text/javascript">

function launchPDF(PDFID){
alert("Would launch PDF here");
}
</script>
</head>

Then in the body:

a href="javascript:launchPDF(Report 09)"
onclick="this.className='afterclick';" class="beforeclick">Annual
ReportReport</a>


***************

line 1, character 18 expected ")", code 0 is the error I get.

At the VERY top of the page it says, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"

This web page was designed by someone else.
******************************************************************
I assume I could still use the meta info and then the body I have, minus the alink, etc., as follows:

[CODE]
<style>
BODY {
scrollbar-face-color: #336789;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;

}


</style>
<base
target="I1">
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"
style="color: rgb(0, 51, 153); background-color: rgb(255, 255, 255);">
[/ICODE]

Thanks

Rob

Jesdisciple
07-16-2009, 11:36 PM
I'd like to see the behavior you mention, so...Please post a link to the page on your site that contains the problematic script so we can check it out.

Just from reading your statement of the problem, I think <a target="_blank"> would be a better (more portable, less complicated) idea than window.open.

rayres2007
07-17-2009, 02:08 PM
The site is www.lakehuronlearning.ca I would use <a target="_blank">, but it is depricated now.

Thanks

Rob

Jesdisciple
07-18-2009, 12:59 AM
Looking into the best-practices on the matter, I found this very in-depth discussion:
http://robertnyman.com/2006/02/13/how-evil-is-the-target-attribute/

According to that, not even using the PDF plugin is your best option; just have the user download the file. That also avoids the hassle of forcing IE to behave.

kaos
07-30-2009, 04:20 AM
Don't Know if this has been said yet, but this is a nice, simple script (put in HEAD):

<!--
function fullwin(targeturl){
window.open(targeturl,"","fullscreen,scrollbars")
}
//-->

in link tag:


<a href="#" onClick="fullwin('filename.pdf')">