...
PDA

Can't get my JavaScript to work on a PC.

sportyguy209
08-27-2008, 04:21 PM
First of all, I am not a JavaScript programmer, and a newbie, but from time to time, I use a JavaScript that I have copied online and modified it to work on my website.

I inserted a JavaScript for rotating banners (I found online) into my main forum and it works fine when viewed on my Mac in Safari or Firefox, but the areas for the graphics show up as X's or blank on everyone's pcs.

This is the JavaScript I tried: <!-- Rotating Banner Ads -->

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

if (document.images) {
ads = new Array(4);
ads[0] = "images/banner1.jpg";
ads[1] = "images/banner2.jpg";
ads[2] = "images/banner3.jpg";
ads[3] = "images/banner4.jpg";
}

newplace = new Array(4);
newplace[0] = "http://skyhoundz.com/wordpress/"
newplace[1] = "https://secure.bluehost.com/~skyhound/cgi-bin/shopper.cgi?preadd=action&key=DDTCG"
newplace[2] = "http://skyhoundz.com/store.html"
newplace[3] = "http://hyperflite.com/"

var timer = null
var counter = 0

function banner() {
timer=setTimeout("banner()", 8000);
counter++;
if (counter >= 4)
counter = 0;
document.bannerad.src = ads[counter];
}

function gothere() {
counter2 = counter;
window.location.href = newplace[counter2];
}

// - End of JavaScript - -->
</SCRIPT>
.

This is the entire over_header.html file with the JavaScript included: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!--
phpBB style name: prosilver
Based on style: prosilver (this is the default phpBB3 style)
Original author: Tom Beddard ( http://www.subBlue.com/ )
Modified by:

NOTE: This page was generated by phpBB, the free open-source bulletin board package.
The phpBB Group is not responsible for the content of this page and forum. For more information
about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
var jump_page = '{LA_JUMP_PAGE}:';
var on_page = '{ON_PAGE}';
var per_page = '{PER_PAGE}';
var base_url = '{A_BASE_URL}';
var style_cookie = 'phpBBstyle';
var onload_functions = new Array();
var onunload_functions = new Array();

<!-- IF S_USER_PM_POPUP -->
if ({S_NEW_PM})
{
var url = '{UA_POPUP_PM}';
window.open(url.replace(/&amp;/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
}
<!-- ENDIF -->

/**
* Find a member
*/
function find_username(url)
{
popup(url, 760, 570, '_usersearch');
return false;
}

/**
* New function for handling multiple calls to window.onload and window.unload by pentapenguin
*/
window.onload = function()
{
for (var i = 0; i < onload_functions.length; i++)
{
eval(onload_functions[i]);
}
}

window.onunload = function()
{
for (var i = 0; i < onunload_functions.length; i++)
{
eval(onunload_functions[i]);
}
}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">


<div id="wrap">

<div align="center">

<!-- Rotating Banner Ads -->

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

if (document.images) {
ads = new Array(4);
ads[0] = "images/banner1.jpg";
ads[1] = "images/banner2.jpg";
ads[2] = "images/banner3.jpg";
ads[3] = "images/banner4.jpg";
}

newplace = new Array(4);
newplace[0] = "http://skyhoundz.com/wordpress/"
newplace[1] = "https://secure.bluehost.com/~skyhound/cgi-bin/shopper.cgi?preadd=action&key=DDTCG"
newplace[2] = "http://skyhoundz.com/store.html"
newplace[3] = "http://hyperflite.com/"

var timer = null
var counter = 0

function banner() {
timer=setTimeout("banner()", 8000);
counter++;
if (counter >= 4)
counter = 0;
document.bannerad.src = ads[counter];
}

function gothere() {
counter2 = counter;
window.location.href = newplace[counter2];
}

// - End of JavaScript - -->
</SCRIPT>

</div>

<a id="top" name="top" accesskey="t"></a>
<div id="page-header">
<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>

<div id="site-description">
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
</div>

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box">
<form action="{U_SEARCH}" method="post" id="search">
<fieldset>
<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
<input class="button2" value="{L_SEARCH}" type="submit" /><br />
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->

<span class="corners-bottom"><span></span></span></div>
</div>

<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>

<ul class="linklist navlinks">
<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>‹</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
</ul>

<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<ul class="linklist leftside">
<li class="icon-ucp">
<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> &bull;
<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- IF U_RESTORE_PERMISSIONS --> &bull;
<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
<!-- ENDIF -->
</li>
</ul>
<!-- ENDIF -->

<ul class="linklist rightside">
<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
<!-- ENDIF -->
</ul>

<span class="corners-bottom"><span></span></span></div>
</div>

</div>

<a name="start_here"></a>
<div id="page-body">

<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
<div id="message" class="rules">
<div class="inner"><span class="corners-top"><span></span></span>
<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->.

Thanks for any help you can provide.
Cranford
08-27-2008, 04:36 PM
Instead...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<script type="text/javascript">

/* edit the following two lines to suit you */
var numberOfBanners = 3;
var bannerImgPath = "images/";

/* Do not edit below this line */

var currentBanner = 0;
bannerLink = [];
bannerLink[1] = "http://www.google.com";
bannerLink[2] = "http://www.yahoo.com";
bannerLink[3] = "http://www.msnbc.com";

function stepBanner(){

if (currentBanner < numberOfBanners)
{
currentBanner++;
}
else {
currentBanner = 1;
}
// banner images, for example, are named: images/banner1.jpg, images/banner2.jpg, images/banner3.jpg, etc.;
document.getElementById('bannerImg').src = bannerImgPath + "banner" + currentBanner + ".jpg";
// rotates every 3 seconds;
setTimeout("stepBanner()",3000)
}

function openAdWindow(){

window.open(bannerLink[currentBanner]); // use this to open a new window
//window.location.href = bannerLink[currentBanner]; // use this to re-use the current window;
}

onload = stepBanner;

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

#bannerImg {border: 2px solid blue; cursor: pointer; padding: 3px;}

/* position the container, if necessary, etc. */
#bannerContainer {position: absolute; top: 12px; left: 125px; background-color: #90ee90;}

</style>
</head>
<body>

<div id="bannerContainer">
<img src='images/banner1.jpg' id="bannerImg" onclick="openAdWindow()" alt="Click for more information" title="Click for more information">
</div>

</body>
</html>
sportyguy209
08-27-2008, 04:45 PM
Thanks, but what about all the other material on my php header page that I still need?

Can you briefly explain why the Macs were seeing the material and not the PCs?
Cranford
08-27-2008, 04:52 PM
I won't look through the dozens of lines of code you posted. Someone else may, I doubt it, though. I'm not a teacher. I posted working code. Use it. Don't use it. I believe that those who operate/own web sites should make an effort -- on their own -- to understand every line of markup, every line of code in their site, and not look to others for "explanations." Your site. Your responsibility. That's the way I see things, nothing more.
sportyguy209
08-27-2008, 06:17 PM
I appreciate the time you took to reply and will certainly try your script within my page.

My follow-up question was a clarification...and I guess the answer is, the script you provided works for Macs and PCs and I need to include it within the framework of my existing html page. I'm happy to work with what you gave me and appreciate your script.

My second follow-up question about why a JavaScript would work on a Mac and not a PC may be elementary to a coder, but as a beginner, I was curious why it doesn't work and if there was something obvious to a programmer that was incorrect, it would be helpful to know what that was.

Thanks again.
Cranford
08-27-2008, 06:48 PM
Your DOCTYPE is XHTML.

Therefore, ALL script must be in between the:

<script type="text/javascript">
// <![CDATA[




// ]]>
</script>

Do not use more than one set of <script> tags. Move all of your existing banner rotation code to be within the above, dropping the second set of script tags. Place it after the code that is already there.

This, <SCRIPT LANGUAGE="JavaScript"> is obsolete, too. Always use:
<script type="text/javascript"> All lower case. Your first set of script tags uses just that.

I'm not certain, but this: if (document.images) is obsolete, and it may be IE only.

I'd delete it and the trailing }, also you don't need the (4) in new Array(4). Edit it to be like this:

ads = new Array();
ads[0] = "images/banner1.jpg";
ads[1] = "images/banner2.jpg";
ads[2] = "images/banner3.jpg";
ads[3] = "images/banner4.jpg";
sportyguy209
08-28-2008, 06:15 PM
Just want you to know that with your advice I've been successful in getting the rotating banners working on my site on a Mac and a PC.

Thank you very much for your time, help, and advice.
Cranford
08-28-2008, 06:23 PM
You're welcome.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum