...

View Full Version : How to cause link to open in new window



jfm
08-24-2008, 06:45 PM
Here's a snippet of code provided by automotive.com to put local gas prices on a web site. Problem is, the link opens in the same window. I want it to open a new window. I would appreciate it if someone could tell me how to change the code to do this.

Here's the code:



<div><style type="text/css">
.AutomotiveLink { COLOR: #df0005; TEXT-DECORATION: none }
.City { font-family:arial narrow, san-serif;font-size:12px;font-weight:bold; }
.CitySub { font-family:arial, san-serif;font-size:10px }
.inZip { Font-Family:arial,san-serif;FONT-SIZE:10px;HEIGHT:19px;vertical-align:middle; } </style>
<table width="120" height="125" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X125.gif" height="31" align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="spCity" align="center" height="16" class="City">
</td>
</tr>
<tr>
<td align="center" height="14" class="CitySub">Average Gas Price</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-02.gif" align="center"><span id="spPrice" style="FONT-SIZE:20px; COLOR:white; FONT-FAMILY:'arial black', san-serif"></span><span style="FONT-SIZE:10px; COLOR:white; FONT-FAMILY:'arial narrow',san-serif">Per Gallon</span>
</td>
</tr>
<tr><td background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-03.gif" height="17">
</td>
</tr>
<tr><td height="23" background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-04.gif" align="center"><input type="text" id="inZipRegionalLarge" size="9" class="inZip" value="Enter Zip" onclick="clearTextBox('inZipRegionalLarge');">&nbsp;&nbsp;<img src="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/GO.gif" height="13" style="vertical-align:middle;" onclick="automotiveRedirect('inZipRegionalLarge');" >
</td>
</tr>
<tr><td height="19" background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-05.gif" style="PADDING-RIGHT:3px;PADDING-LEFT:3px" align="center"><span style="FONT-SIZE:10px; FONT-FAMILY:'arial narrow',san-serif">Prices by </span><span style="FONT-WEIGHT:bold; FONT-SIZE:12px; FONT-FAMILY:'arial narrow',san-serif"><a href="http://www.automotive.com" class="AutomotiveLink">automotive.com</a> </span>
</td>
</tr>
</table>
<script type="text/javascript" src="http://www.automotive.com/gas-prices/gaspricewidgetfeed.html?zip=30204">
</script>
<script type="text/javascript">function IsNumeric(sText) { var ValidChars = "0123456789"; var IsNumber=true; var Char; for (i = 0; i < sText.length && IsNumber == true; i++) {Char = sText.charAt(i); if (ValidChars.indexOf(Char) == -1) { IsNumber = false; } } return IsNumber; } function clearTextBox(myTextBoxID) { document.getElementById(myTextBoxID).value = ""; } function defaultSubmit(myEvent, submitButtonID) { if(myEvent.keyCode==13) { myEvent.keyCode = null; window.document.getElementById(submitButtonID).click(); } return true; } function automotiveRedirect(myTextBoxID) { var myTextBoxValue = document.getElementById(myTextBoxID).value; if (!IsNumeric(myTextBoxValue)) { window.location = "http://www.automotive.com/gas-prices/index.html"; } else { window.location = "http://www.automotive.com/gas-prices/results.html?zip=" + myTextBoxValue; } }
</script>
</div>


Any and all help appreciated.

Jere

Philip M
08-24-2008, 07:31 PM
Google is your friend!

Many examples, but see e.g.:

http://www.javascripter.net/faq/openinga.htm

http://www.pageresource.com/jscript/jwinopen.htm


Take my advice, I don't use it anyway.

ninnypants
08-24-2008, 07:47 PM
Also another easy way if it doesn't have to be JavaScript is to just add 'target="_blank"' to you anchor element

jfm
08-24-2008, 09:38 PM
Also another easy way if it doesn't have to be JavaScript is to just add 'target="_blank"' to you anchor element

I tried that, but I must have been doing it wrong or putting it in the wrong place, because I couldn't seem to get it to work for me.

jfm
08-24-2008, 09:41 PM
Google is your friend!

Many examples, but see e.g.:

http://www.javascripter.net/faq/openinga.htm

http://www.pageresource.com/jscript/jwinopen.htm


Take my advice, I don't use it anyway.

Sorry I didn't make myself clear. I'm not a coder and am seeking help from those who are. Did the Google thing first but didn't find anything I could understand how to use. Thought it might be simple for someone who actually understands this stuff to look and see what needs to go where.

rajalakshmi
08-25-2008, 07:07 AM
You can't open a new window in javascript. But you can open a popup window seperately in javascript.

If you are use "window.location", it opens in same window. Instead of you can use "window.open"

Try this:

<div><style type="text/css">
.AutomotiveLink { COLOR: #df0005; TEXT-DECORATION: none }
.City { font-family:arial narrow, san-serif;font-size:12px;font-weight:bold; }
.CitySub { font-family:arial, san-serif;font-size:10px }
.inZip { Font-Family:arial,san-serif;FONT-SIZE:10px;HEIGHT:19px;vertical-align:middle; } </style>
<table width="120" height="125" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X125.gif" height="31" align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="spCity" align="center" height="16" class="City">
</td>
</tr>
<tr>
<td align="center" height="14" class="CitySub">Average Gas Price</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-02.gif" align="center"><span id="spPrice" style="FONT-SIZE:20px; COLOR:white; FONT-FAMILY:'arial black', san-serif"></span><span style="FONT-SIZE:10px; COLOR:white; FONT-FAMILY:'arial narrow',san-serif">Per Gallon</span>
</td>
</tr>
<tr><td background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-03.gif" height="17">
</td>
</tr>
<tr><td height="23" background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-04.gif" align="center"><input type="text" id="inZipRegionalLarge" size="9" class="inZip" value="Enter Zip" onclick="clearTextBox('inZipRegionalLarge');">&nbsp;&nbsp;<img src="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/GO.gif" height="13" style="vertical-align:middle;" onclick="automotiveRedirect('inZipRegionalLarge');" >
</td>
</tr>
<tr><td height="19" background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-05.gif" style="PADDING-RIGHT:3px;PADDING-LEFT:3px" align="center"><span style="FONT-SIZE:10px; FONT-FAMILY:'arial narrow',san-serif">Prices by </span><span style="FONT-WEIGHT:bold; FONT-SIZE:12px; FONT-FAMILY:'arial narrow',san-serif"><a href="http://www.automotive.com" class="AutomotiveLink">automotive.com</a> </span>
</td>
</tr>
</table>
<script type="text/javascript" src="http://www.automotive.com/gas-prices/gaspricewidgetfeed.html?zip=30204">
</script>
<script type="text/javascript">function IsNumeric(sText) { var ValidChars = "0123456789"; var IsNumber=true; var Char; for (i = 0; i < sText.length && IsNumber == true; i++) {Char = sText.charAt(i); if (ValidChars.indexOf(Char) == -1) { IsNumber = false; } } return IsNumber; } function clearTextBox(myTextBoxID) { document.getElementById(myTextBoxID).value = ""; } function defaultSubmit(myEvent, submitButtonID) { if(myEvent.keyCode==13) { myEvent.keyCode = null; window.document.getElementById(submitButtonID).click(); } return true; } function automotiveRedirect(myTextBoxID) { var myTextBoxValue = document.getElementById(myTextBoxID).value; if (!IsNumeric(myTextBoxValue)) { window.open('http://www.automotive.com/gas-prices/index.html','mywindow','width=400,height=200,toolbar=yes,
location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,
resizable=yes'); } else { window.open('http://www.automotive.com/gas-prices/results.html?zip=' + myTextBoxValue+,'mywindow','width=400,height=200,toolbar=yes,
location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,
resizable=yes'); } }
</script>
</div>

jfm
08-25-2008, 12:26 PM
Thanks for the reply, but with this code the "Go" button doesn't work at all.

Jere

rajalakshmi
08-26-2008, 05:40 AM
Hi jfm ,

Try below code, it works fine.

<div><style type="text/css">
.AutomotiveLink { COLOR: #df0005; TEXT-DECORATION: none }
.City { font-family:arial narrow, san-serif;font-size:12px;font-weight:bold; }
.CitySub { font-family:arial, san-serif;font-size:10px }
.inZip { Font-Family:arial,san-serif;FONT-SIZE:10px;HEIGHT:19px;vertical-align:middle; } </style>
<table width="120" height="125" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X125.gif" height="31" align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="spCity" align="center" height="16" class="City">
</td>
</tr>
<tr>
<td align="center" height="14" class="CitySub">Average Gas Price</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-02.gif" align="center"><span id="spPrice" style="FONT-SIZE:20px; COLOR:white; FONT-FAMILY:'arial black', san-serif"></span><span style="FONT-SIZE:10px; COLOR:white; FONT-FAMILY:'arial narrow',san-serif">Per Gallon</span>
</td>
</tr>
<tr><td background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-03.gif" height="17">
</td>
</tr>
<tr><td height="23" background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-04.gif" align="center"><input type="text" id="inZipRegionalLarge" size="9" class="inZip" value="Enter Zip" onclick="clearTextBox('inZipRegionalLarge');">&nbsp;&nbsp;<img src="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/GO.gif" height="13" style="vertical-align:middle;" onclick="automotiveRedirect('inZipRegionalLarge');" >
</td>
</tr>
<tr><td height="19" background="http://static.automotive.com/_SiteConfigs/_global/images/GasPriceWidget/gaswidget_regional_120x125/REGIONAL_GAS_WIDGET-125X-05.gif" style="PADDING-RIGHT:3px;PADDING-LEFT:3px" align="center"><span style="FONT-SIZE:10px; FONT-FAMILY:'arial narrow',san-serif">Prices by </span><span style="FONT-WEIGHT:bold; FONT-SIZE:12px; FONT-FAMILY:'arial narrow',san-serif"><a href="http://www.automotive.com" class="AutomotiveLink">automotive.com</a> </span>
</td>
</tr>
</table>
<script type="text/javascript" src="http://www.automotive.com/gas-prices/gaspricewidgetfeed.html?zip=30204">
</script>
<script type="text/javascript">function IsNumeric(sText) { var ValidChars = "0123456789"; var IsNumber=true; var Char; for (i = 0; i < sText.length && IsNumber == true; i++) {Char = sText.charAt(i); if (ValidChars.indexOf(Char) == -1) { IsNumber = false; } } return IsNumber; } function clearTextBox(myTextBoxID) { document.getElementById(myTextBoxID).value = ""; } function defaultSubmit(myEvent, submitButtonID) { if(myEvent.keyCode==13) { myEvent.keyCode = null; window.document.getElementById(submitButtonID).click(); } return true; }
function automotiveRedirect(myTextBoxID) {
var myTextBoxValue = document.getElementById(myTextBoxID).value;
if (!IsNumeric(myTextBoxValue)) {
window.open('http://www.automotive.com/gas-prices/index.html','mywindow','width=400,height=400,toolbar=yes,location=yes,directories=yes,status=yes,men ubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes');
}
else {
var strPricePage = "http://www.automotive.com/gas-prices/results.html?zip="+myTextBoxValue;
alert(strPricePage);
window.open(strPricePage,'mywindow','width=400,height=400,toolbar=yes,location=yes,directories=yes,s tatus=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes');
}
}
</script>
</div>

rajalakshmi
08-26-2008, 05:44 AM
Remove alert(strPricePage); from above code end.

jfm
08-26-2008, 08:07 PM
Works great! Thanks ever so much.

Jere



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum