/    Sign up×
Community /Pin to ProfileBookmark

Javascript rollovers stop working with FF

Hi everyone,
I have a simple four page website;by clicking on an item I use the get method to send the visitor to a second page where php looks up more detailed info and presents it in a table. The side bar has all the website links with basic rollover effects. On this second page, the item_info page, the links and rollovers work fine in IE but in Firefox and Safari the links are dead and there are no rollover effects. I’ve made an exact copy of the item_info page.php, item_info_alt.php and it works fine in all browsers; but the alt page doesn’t receive any real GET[‘item’] data!!

The GET[‘item’] for these browsers is somehow interfering with how FF and Safari work.

Here is the page code:

[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link type=”text/css” rel=”stylesheet” href=”css/main.css” />
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Hooligan Tees</title>

<script type=”text/JavaScript”>
<!–
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//–>
</script>
</head>

<body onload=”MM_preloadImages(‘buttons/home_up.png’,’buttons/contact_up.png’,’buttons/about_up.png’,’buttons/bk_up.png’)”>
<div id=”textpanel”>
<div id=”header”><img src=”assets/HLGN3.jpg” alt=”logo” id=”teeshirt” /><img src=”assets/hool_title.png” alt=”hooligan_title” id=”titlewords” /><img src=”assets/trans_logo.gif” alt=”logo” /></div>
<div id=”sidepanel”><h4 align=”center”>Site Links</h4>

<div id=”links”><a href=”index.php” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘home’,”,’buttons/home_up.png’,1)”><img src=”buttons/home_over.png” alt=”home button” name=”home” width=”124″ height=”39″ border=”0″ id=”home” /></a><a href=”contact.php” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘contact’,”,’buttons/contact_up.png’,1)”><img src=”buttons/contact_over.png” alt=”contact us” name=”contact” width=”124″ height=”39″ border=”0″ id=”contact” /></a><a href=”#” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘about us’,”,’buttons/about_up.png’,1)”><img src=”buttons/about_over.png” alt=”about us” name=”about us” width=”124″ height=”39″ border=”0″ id=”about us” /></a><a href=”#” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘bookmark’,”,’buttons/bk_up.png’,1)”><img src=”buttons/bk_over.png” alt=”bookmark” name=”bookmark” width=”124″ height=”39″ border=”0″ id=”bookmark” /></a></div>
<!–end links div–>

<div id=”ppwords”><img src=”assets/pp_words2.png” alt=”paypal words” /></div><!–end ppwords div–>
<div id=”paypal_logo”><img src=”assets/paypal_logo.png” /></div>
<div id=”models”><img src=”assets/three_mods.png” alt=”three models” /></div>
</div><!–end sidepanel –>
<h3 id=”order_title”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item Information and Order Page</h3>

<?php
//adjust the php/mysql connection depending on server or xampp
include(‘php/mysqlconnect_setting.php’);
$shirt=addslashes($_GET[‘shirt’]);
$shirt=$shirt;
$query=”SELECT cat_num, item_name, price, descript, img_lt, img_rt FROM item WHERE item_name=’$shirt'”;
$result=mysql_query($query) or die(mysql_error());
if(!$result){ echo ‘<h3>There was a problem retrieving item information.</h3>’; }
while($row=mysql_fetch_array($result))
{
$folder=”./images/”.$row[‘item_name’].”/”;
opendir($folder);

$lt_path=$folder.$row[‘img_lt’];
fopen($lt_path,’r’);

$rt_path=$folder.$row[‘img_rt’];
fopen($rt_path,’r’);

echo ‘<div id=”twopanel”><table><tr><td><img src=”‘.$lt_path.'” /></td><td><img src=”‘.$rt_path.'” /></td></tr></table><br /><br />’;
echo ‘<div id=”order_form”><form target=”paypal” action=”https://www.paypal.com/cgi-bin/webscr” method=”post” >
<input type=”hidden” name=”business” value=”[email protected]” />
<input type=”hidden” name=”cmd” value=”_cart” />
<input type=”hidden” name=”add” value=”1″ />
<input type=”hidden” name=”item_name” value=”‘.$row[‘item_name’].'”/>
<input type=”hidden” name=”item_number” value=”‘.$row[‘cat_num’].'”/>
<input type=”hidden” name=”amount” value=”‘.$row[‘price’].'”/>
<input type=”hidden” name=”shipping” value=”.20″ />
<input type=”hidden” name=”tax” value=”.075″ />
<input type=”hidden” name=”on1″ value=”‘.$row[‘descript’].'”/>
<input type=”hidden” name=”return” value=”http://www.hooligan-tees.com/index.php” />
<input type=”hidden” name=”notify_url” value=”http://www.hooligan-tees.com/ppnotice.php?Page=Notify” />

<input type=”image” src=”https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif” border=”0″ name=”submit” alt=”PayPal – The safer, easier way to pay online!” />
<img alt=”” border=”0″ src=”https://www.paypal.com/en_US/i/scr/pixel.gif” width=”1″ height=”1″ />’;

echo ‘<br /><br /><div id=”infobox”><table border=”1″ frame=”box” cellpadding=”3″ ><tr><th>Cat.<br />Number:</th><th>&nbsp;Item:&nbsp;</th><th>Description:</th><th>Price:</th><th>Desired<br />Quantity:</th><th>Size:</th><th>Size Choice:</th></tr><tr><td>’.$row[‘cat_num’].'</td><td>’.
$row[‘item_name’].'</td><td>’.$row[‘descript’].'</td><td>’.$row[‘price’].'</td><td align=”right”><input name=”quantity” type=”text” size=”4″ value=”1″ align=”right”/></td><td><input type=”hidden” name=”on0″ value=”Size:” />Size:</td><td><select name=”os0″><option value=”Small”>Small</option><option value=”Medium”>Medium</option><option value=”Large”>Large</option><option value=”Extra Large”>Extra Large</option></select></td></tr></table><br /><br /><h3><a href=”index.php?route=inside” >RETURN TO PRODUCTS</a></h3></div><!–end infobox div–>

</form>

</div>’;//end order_form div
echo ‘</div>’;//end twopanel

}//end while loop

?>

</div><!–end textpanel–>
</body>
</html>
[/code]

I will be very grateful for anything you can suggest.

captsig

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@BoarsHellDec 23.2009 — Ditch the js rollovers and use css rollovers. I prefer css rollovers that use one image. On a single image the right side will be the 'on' image and the left side will be of the 'off' image. The css simply slides one of the sides of image into view when necessary. There are a tons of Web pages with tutorials on how to accomplish this... do a quick site search. Another added feature is that the css code is very small and easy to understand.
Copy linkTweet thisAlerts:
@captsigauthorDec 23.2009 — Thanks 'boarshell' I'll definitely look into that.

captsig
×

Success!

Help @captsig spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...