Ajax(jquery) and Flash is refreshing in Firefox Only..... Why?
I am using basic Ajax(jquery) to just change the length of a div with flash inside of the div. This works perfectly in Google Chrome, IE7(surprisingly), and Opera. But in Firefox When a link is pressed, dosent matter if the link is in the flash or outside, Firefox refresh the entire page. How do I fix this..... Below is the code for the entire page.. Dont laugh its the first tme using divs for layout. Also on another note why does firefox3 hate code comments???
<?php require_once('../inc/Connections/selph_new_mine.php'); ?>
<?php
//--- get current date and get last updated from last project inserted -------------------------------------------------------------------------------->
//--- get current Date ---------------------------------------------------------------------------------------------------------------------------->
$currentDate = date("m/d/y") . ', ' . date("g:i A O");
//---- end -------------------------------------------------------------------------------------------------------------------------------------------->
?>
<!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>
<!-- metta tags ------------------------------------------------------------------------------------------------------------------------ -->
<?php include("../inc/metta.php"); ?>
<!-- the title of the site ------------------------------------------------------------------------------------------------------------- -->
<title>JeremySelph.com .......... Interactive Design Studio</title>
<!-- need for onload actions ----------------------------------------------------------------------------------------------------------- -->
<script type="text/javascript">
// this function needs to load before any window.onload assignments
// call it before each window.onload assignment in other scripts
function getOLs(){
if(typeof window.onload=='function'){ // test to see if onload has been set
if(typeof ol_ol=='undefined')ol_ol=new Array(); // test if array variable already exists
ol_ol.push(window.onload); // this captures any previous onload function
}
}
</script>
<!-- include javascript files and javascript functions --------------------------------------------------------------------------------- -->
<script src="../inc/js/AC_RunActiveContent.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="../inc/js/jquery-1.3.1.js"></script>
<!-- include shadow box 2.0 and use jquery script above ------------------------------------------------------------------------------- -->
<script type="text/javascript" src="../inc/src/adapter/shadowbox-jquery.js"></script>
<script type="text/javascript" src="../inc/src/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', '../inc/src/skin'); // use the "classic" skin
Shadowbox.loadLanguage('en', '../inc/src/lang'); // use the English language
Shadowbox.loadPlayer(['img', 'swf'], '../inc/src/player'); // use img and qt players
getOLs();
window.onload = Shadowbox.init;
</script>
<!-- shadow box functions for image galleries ------------------------------------------------------------------------------------------ -->
<script language="javascript" type="text/javascript">
<?php
//---- get all of the projects and sort based on section id -------------------------------------------------------------------->>
$projectsQuery = mysql_query("SELECT * FROM portfolio WHERE display = 1 ORDER BY id ASC");
$iProjects = 0;
while ($rowProjects = mysql_fetch_array($projectsQuery)){
$imageArray = explode("~|~", $rowProjects['imageUrl']);
$javascript .= "function projectId" . $rowProjects['id'] . "(){\n";
for ($i = 0; $i < sizeof($imageArray); $i++) {
$javascript .= "\t\t\t\tvar img" . $i . $rowProjects['id'] . " = {\n";
$javascript .= "\t\t\t\t\tplayer: 'img',\n";
$javascript .= "\t\t\t\t\tcontent: '../" . $imageArray[$i] ."',\n";
$javascript .= "\t\t\t\t\ttitle: \"" . $rowProjects['fileName'] . "\"\n";
$javascript .= "\t\t\t\t};\n\n";
if ($i == 0){
$varNames = "img" . $i . $rowProjects['id'];
} else if ($i < sizeof($imageArray)){
$varNames .= ", img" . $i . $rowProjects['id'];
}
}
$javascript .= "\t\t\t\t\tShadowbox.open([";
$javascript .= $varNames . "], {\n";
$javascript .= "\t\t\t\t\t\tcontinuous: true\n";
$javascript .= "\t\t\t\t\t});\n";
$javascript .= "\t\t\t\t};\n\n";
echo $javascript;
$javascript = "\t\t\t\t";
$iProjects++;
}
//echo $javascript;
?>
</script>
<!-- jquery functions below ------------------------------------------------------------------------------------------------------------ -->
<script language="javascript" type="text/javascript">
//--- communication to flash from javascript -------------------------------------------------------------------------------------->
//---- get flash location ----------------------------------------------------------------------------------------------------->
var flashObject;
function initflash(){
if (navigator.appName.indexOf("Microsoft") != 1){
flashObject = document.index_1024;
} else {
flashObject = window.document.index_1024;
}
}
getOLs();
window.onload = initflash;
//---- set link state in flash ------------------------------------------------------------------------------------------------>
function setFlash(theLink){
flashObject.changeFlashLinks(theLink);
}
//---- variables ------------------------------------------------------------------------------------------------------------------>
var previousLink = "home";
//--- change style on link -------------------------------------------------------------------------------------------------------->
function changeLink(fieldId){
if (previousLink != ''){document.getElementById(previousLink).className = 'unselected';}
document.getElementById(fieldId).className = 'selected';
previousLink = fieldId;
//---- set flash link ----------------------------------------------------------------------------------------------------->
setFlash(fieldId);
}
//--- set to grren and smaller -------------------------------------->
function changeLength(speed, length){
$("#flashContent").animate({
height: length
}, speed );
};
//---- make links visible --------------------------------------------------------------------------------------------------------->
function makeVisible(){
$("#topNav").slideDown("slow");
$("#bottomNav").slideDown("slow");
}
//--- audio function to flash and to change link text and style ------------------------------------------------------------------->
var audioState = true;
function audioChange(){
if (audioState == true){
audioState = false;
//---- change class and text of audioLink -------------------------------------------------->
$("#audioLink").css("color","#900");
$("#audioLink").text("Audio Off");
//---- trigger function in flash ----------------------------------------------------------->
flashObject.audio("off");
} else {
audioState = true;
//---- change class and text of audioLink -------------------------------------------------->
$("#audioLink").css("color","#0C0");
$("#audioLink").text("Audio On");
//---- trigger function in flash ----------------------------------------------------------->
flashObject.audio("on");
}
}
</script>
<!-- end for onload actions ------------------------------------------------------------------------------------------------------------ -->
<script type="text/javascript">
// this script needs to load last, after all the other onload assignments
// toward that end, it may be made part of a footer include in a server script
if(typeof window.onload=='function'){
getOLs();
window.onload=function(){
var ol_ol_ln=ol_ol.length;
for(i=0;i<ol_ol_ln;i++){
ol_ol[i](); // this reasserts the old onloads, if present
}
ol_ol=void 0; // returning the array to its natural, free-range state
}
}
</script>
<style>
body {
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
/*scrollbar-3dlight-color:silver;
scrollbar-arrow-color:blue;
scrollbar-track-color:lime;
scrollbar-darkshadow-color:silver;
scrollbar-face-color:silver;
scrollbar-highlight-color:white;
scrollbar-shadow-color:black;
overflow: -moz-scrollbars-vertical;*/
overflow-y: scroll;
}
/*---- main page layout --------------------------------------------------------------------------------------------------------*/
#container {
width: 100%;
margin: 0px;
vertical-align:top;
}
#topNav {
font-size: 9px;
font-family: Verdana, Geneva, sans-serif;
color: #666666;
width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
clear: both;
vertical-align:bottom;
display:none;
}
.leftSide {
width: 188px;
margin-left: 12px;
margin-top: 2px;
margin-bottom: 4px;
text-align:left;
position: relative;
float: left;
}
.rightSide {
width: 588px;
margin-right: 12px;
margin-top: 2px;
margin-bottom: 4px;
text-align:right;
position: relative;
float: right;
}
#flashContent {
width: 100%;
height: 590px;
vertical-align:top;
margin: 0px;
position: relative;
clear: both;
}
#bottomNav {
font-size: 9px;
font-family: Verdana, Geneva, sans-serif;
color: #666666;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom:10px;
position: relative;
clear: both;
vertical-align:top;
display:none;
}
/*---- top nav link styles ---------------------------------------------------------------------------------------------------*/
.unselected {
color: #666666;
text-decoration: none;
cursor: pointer;
visibility: visible;
margin-left: 5px;
}
.selected {
color: #000000;
text-decoration: underline;
cursor: pointer;
visibility: visible;
margin-left: 5px;
}
.audio {
color: #0C0; /* #900 */
font-weight: bold;
text-decoration: none;
cursor: pointer;
visibility: visible;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="topNav">
<div id="date" class="leftSide">
<?php echo $currentDate; ?>
</div>
<div id="rightNav" class="rightSide">
<a id="home" href="javascript:void(null);" onclick="changeLink('home');return false;" class="selected">Home</a>
<a id="pc" href="javascript:void(null);" onclick="changeLink('pc');return false;" class="unselected">PC Design and Repair</a>
<!-- <a id="hosting" href="javascript:void(null);" onclick="changeLink('hosting');return false;" class="unselected">Web Hosting</a>
<a id="cms" href="javascript:void(null);" onclick="changeLink('cms');return false;" class="unselected">CMS System</a> -->
<a id="consulting" href="javascript:void(null);" onclick="changeLink('consulting');return false;" class="unselected">Consulting</a>
<!-- <a id="quote" href="javascript:void(null);" onclick="changeLink('quote');return false;" class="unselected">Instant Quote</a> -->
<a id="contact" href="javascript:void(null);" onclick="changeLink('contact');return false;" class="unselected">Contact Us</a>
</div>
</div>
<div id="flashContent" style="vertical-align:text-top;">
<script language="JavaScript" type="text/javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0','name','index_1024','width','100%','height','100%','align','top','id','index_1024','src','index','quality','high','scale','noscale','bgcolor','#ffffff','allowscriptaccess','always','allowfullscreen','false','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','index' ); //end AC code
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" name="index_1024" width="100%" height="100%" align="top" id="index_1024">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<embed src="index.swf" quality="high" scale="noscale" bgcolor="#ffffff" width="100%" height="100%" name="index_1024" align="top" allowScriptAccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>
</object>
</noscript>
</div>
<div id="bottomNav">
<div id="copyright" class="leftSide">
Copyright © 2008
</div>
<div id="privacy" class="rightSide">
<a id="PrivacyPolicy" href="javascript:void(null);" onclick="changeLink('PrivacyPolicy');return false;" class="unselected">Privacy Policy</a>
<a id="audioLink" href="javascript:void(null);" onclick="audioChange();return false;" class="audio">Audio On</a>
</div>
</div>
</div>
</body>
</html>ASKER
Yes but only only in firefox not in google chrome but if I remove the code comments the errors go away.
Thats what I meant but why does firefox 3 hate code comments example html commenst <!-- comment --> .
Again If I remove all of the code commenst the errors in the screenshot go away.
But I am still back to the main issue. That when I clcik a link from inside and outside the flash which calls a javascript function to use ajax to make the div longer the page refreshes.
To trouble shoot further I commented the following javascript code and the page works 100%. Why does this code screw with firefox and make it refresh. Again no more errors in the firefox console. The following code is jquery.
Thats what I meant but why does firefox 3 hate code comments example html commenst <!-- comment --> .
Again If I remove all of the code commenst the errors in the screenshot go away.
But I am still back to the main issue. That when I clcik a link from inside and outside the flash which calls a javascript function to use ajax to make the div longer the page refreshes.
To trouble shoot further I commented the following javascript code and the page works 100%. Why does this code screw with firefox and make it refresh. Again no more errors in the firefox console. The following code is jquery.
//--- set to grren and smaller -------------------------------------->
function changeLength(speed, length){
$("#flashContent").animate({
height: length
}, speed );
};
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Also do you get an error in the console? If you do, the return false on the link fails and the page may reload. Or you did not have a return false on the link in question. What does the url say after you click?