Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2009-02-14
5
Medium Priority
?
228 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

0
Comment
Question by:SelphProgrammer
3 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23643836
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?
0
 

Author Comment

by:SelphProgrammer
ID: 23646187
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
0
 
LVL 1

Accepted Solution

by:
atmosphear earned 2000 total points
ID: 33087088
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.
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
When you put your credit card number into a website for an online transaction, surely you know to look for signs of a secure website such as the padlock icon in the web browser or the green address bar.  This is one way to protect yourself from oth…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question