We help IT Professionals succeed at work.

Ajax(jquery) and Flash is refreshing in Firefox Only..... Why?

Medium Priority
289 Views
Last Modified: 2014-07-20
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 &copy; 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>

Open in new window

Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
What does "hate code comments" mean

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?

Author

Commented:
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.
 //--- set to grren and smaller -------------------------------------->
   function changeLength(speed, length){
	$("#flashContent").animate({ 
	height: length
	}, speed );
};

Open in new window

ScreenHunter-01-Feb.-15-14.33.jpg
One issue in Firefox is that <!-- -- --> is interpret as closing TWICE. For Firefox you should leave the long line of scores (-) out and replace them with another character.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.