I would like to have 2 jquery dialogs simultaneously open and to navigate their content independently. My problem is that when I click anywhere in one dialog it resets the content in the other. It only happens in Chrome and happens neither in IE nor Firefox.
The content is a Flash file with a number of frames. The frame being shown can be changed by clicking a button which was added as part of the Flash file. This was all done using SWFTOOLS executables. "Reset" means revert back to the start frame.
When the Flash files are shown directly in HTML with no dialog, the reset does not happen in Chrome. As such the problem only occurs when using Chrome to view content in a jquery dialog.
How can I change my script so that no interaction occurs in Chrome? Failing that, what terms should I search on in order to pinpoint what I need to do?
My PHP and Javascript code is shown below.
<!DOCTYPE HTML>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<?php
$file_details=array(
array('filename'=>'Cookie law.swf','width'=>695,'height'=>842),
array('filename'=>'cookies_guidance_v3.swf','width'=>595,'height'=>842),
);
foreach($file_details as $id=>$file_detail){
extract($file_detail);
openDialog($id,$filename,$width,$height);
}
?>
<?php
function openDialog($id,$filename,$width,$height){
$url_dirname='http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['REQUEST_URI']);
$url=$url_dirname.'/'.$filename;
?>
<!-- Adds the link -->
<a href=# id='opener<?php echo $id ?>' >View <?php echo $filename ?></a><br /><br />
<!-- Adds content to the dialog box which appears when the link is clicked -->
<div id='dialog<?php echo $id ?>' style='border:0px solid blue;display: none;'>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' style='border:0px solid green;' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='<?php echo $width ?>' height='<?php echo $height ?>' align='' >
<param name='movie' value='<?php echo $url ?>' />
<param name='quality' value='high' />
<param name='bgcolor' value='#FFFFFF' />
<param name='wmode' value='opaque'>
<embed src='<?php echo $url ?>' style='border:0px solid green;' quality='high' bgcolor='#FFFFFF' width='<?php echo $width ?>' height='<?php echo $height ?>' align='left' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
</object>
</div>
<!-- Acts when the link is clicked -->
<script>
$(function() {
$("#dialog<?php echo $id ?>").dialog({
autoOpen: false,
show: {
effect: 'fade',
duration: 300,
},
hide: {
effect: 'fade',
duration: 300,
},
beforeClose:function(){
$("#opener<?php echo $id ?>").attr('src','./icons/view2.png');
},
});
$("#opener<?php echo $id ?>").click(function() {
$("#dialog<?php echo $id ?>").dialog({width:'auto'});
$("#dialog<?php echo $id ?>").dialog("open");
$("#dialog<?php echo $id ?>").dialog("option", "title", 'Viewer'); //set here to prevent annoying tooltip if set in div
$(this).attr('src','./icons/eye.png');
});
});
</script>
<?php
}
?>
The following shows the resultant HTML.
<!DOCTYPE HTML>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<!-- Adds the link -->
<a href=# id='opener0' >View Cookie law.swf</a><br /><br />
<!-- Adds content to the dialog box which appears when the link is clicked -->
<div id='dialog0' style='border:0px solid blue;display: none;'>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' style='border:0px solid green;' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='695' height='842' align='' >
<param name='movie' value='http://vhosts/work/Cookie law.swf' />
<param name='quality' value='high' />
<param name='bgcolor' value='#FFFFFF' />
<param name='wmode' value='opaque'>
<embed src='http://vhosts/work/Cookie law.swf' style='border:0px solid green;' quality='high' bgcolor='#FFFFFF' width='695' height='842' align='left' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
</object>
</div>
<!-- Acts when the link is clicked -->
<script>
$(function() {
$("#dialog0").dialog({
autoOpen: false,
show: {
effect: 'fade',
duration: 300,
},
hide: {
effect: 'fade',
duration: 300,
},
beforeClose:function(){
$("#opener0").attr('src','./icons/view2.png');
},
});
$("#opener0").click(function() {
$("#dialog0").dialog({width:'auto'});
$("#dialog0").dialog("open");
$("#dialog0").dialog("option", "title", 'Viewer'); //set here to prevent annoying tooltip if set in div
$(this).attr('src','./icons/eye.png');
});
});
</script>
<!-- Adds the link -->
<a href=# id='opener1' >View cookies_guidance_v3.swf</a><br /><br />
<!-- Adds content to the dialog box which appears when the link is clicked -->
<div id='dialog1' style='border:0px solid blue;display: none;'>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' style='border:0px solid green;' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='595' height='842' align='' >
<param name='movie' value='http://vhosts/work/cookies_guidance_v3.swf' />
<param name='quality' value='high' />
<param name='bgcolor' value='#FFFFFF' />
<param name='wmode' value='opaque'>
<embed src='http://vhosts/work/cookies_guidance_v3.swf' style='border:0px solid green;' quality='high' bgcolor='#FFFFFF' width='595' height='842' align='left' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
</object>
</div>
<!-- Acts when the link is clicked -->
<script>
$(function() {
$("#dialog1").dialog({
autoOpen: false,
show: {
effect: 'fade',
duration: 300,
},
hide: {
effect: 'fade',
duration: 300,
},
beforeClose:function(){
$("#opener1").attr('src','./icons/view2.png');
},
});
$("#opener1").click(function() {
$("#dialog1").dialog({width:'auto'});
$("#dialog1").dialog("open");
$("#dialog1").dialog("option", "title", 'Viewer'); //set here to prevent annoying tooltip if set in div
$(this).attr('src','./icons/eye.png');
});
});
</script>
Update
Implementing browser-compliant dialogs using jQuery (see Update 3 in that link) shows a solution to this issue.
