PDA

View Full Version : Style sheet switchin restarts my swfs



rysotope
03-02-2007, 09:15 PM
I'm using the style sheet switcher at http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

The prob is whenever I switch style sheets it restarts my flash movies, and theres an animation with sound that would be annoying to hear every time someone switches. Please advise.

jscheuer1
03-02-2007, 09:29 PM
Have the animation start with its sound off. Um, is there any reason why the swfs reload? I'm thinking that unless they are a part of your style, they should not. Is the whole page reloading? I don't think that it should.

However, I notice that on the demo page here at Dynamic Drive that they have chosen not to have any of the flash banner ads that almost all demo pages have. This may indicate an incompatibility with flash for this script.

rysotope
03-02-2007, 09:43 PM
huh...now that I think about it I have external javascript files with the flash movies:


function Runcow()
{
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="413" height="236">\n');
document.write('<param name="movie" value="cowabunga.swf" />\n');
document.write('<param name="quality" value="high" />\n');
document.write('<param name="wmode" value="transparent" />\n');
document.write('<embed src="cowabunga.swf" width="413" height="236" wmode="transparent"></embed>\n');
document.write('</object>\n');
}

I did this to get rid of the box that would highlight swf's when you mouse over them at first. Would this be making them restart?

rysotope
03-03-2007, 02:36 AM
I put the swfs in normally without using js and they still replay...I guess the style sheet switcher just reloads the page...

jscheuer1
03-03-2007, 02:17 PM
I just did a test using a swf that plays a flv file. It didn't restart the swf when the styles were changed. I did use pretty simple styles though. However, I am thinking that there is something else beside the style switcher that is causing this. It might even be something in the code of the swf files. Also, swf files can have sound and motion without flv files so, maybe that sort of swf is more prone to this problem.

Could you provide a link to a demo of the problem?

rysotope
03-03-2007, 06:35 PM
yeah sure. thanks for your help. http://weargoodness.com/index5.htm

jscheuer1
03-03-2007, 07:56 PM
Right away I noticed that this is not a problem in IE 7 or Opera 9.01, it was a problem in FF 1.5.0.10. After some fairly extensive testing I discovered that even if I used FF's native style switcher from its view menu, the problem still occurred. However, since (at least in your demo) you are only changing the background image, I discovered that by only doing that, it didn't cause the problem in FF. Example commands:


document.body.style.backgroundImage='none'


document.body.style.backgroundImage='url(http://weargoodness.com/bg1.jpg)'


document.body.style.backgroundImage='url(http://weargoodness.com/bg2.jpg)'

Bottom line, this appears to be a bug in FF as regards alternate style and flash.

rysotope
03-06-2007, 12:17 AM
So youre saying I dont even need the style sheet switcher script? I'm not sure how to implement these commands but I'll try to find some time and play with it...thanks for your help man

mburt
03-06-2007, 12:53 AM
Hmm..
doesn't Firefox require singular quotes around the url() selector?

document.body.style.backgroundImage="url('http://weargoodness.com/bg1.jpg')"

jscheuer1
03-06-2007, 04:52 AM
So youre saying I dont even need the style sheet switcher script? I'm not sure how to implement these commands but I'll try to find some time and play with it...thanks for your help man

Well, you could do something as simple as:


<a href="#" onclick="document.body.style.backgroundImage='url(http://weargoodness.com/bg1.jpg)';return false;">Floral</a>

I'll try to work up something using an array for you if your demo is still online.


Hmm..
doesn't Firefox require singular quotes around the url() selector?

document.body.style.backgroundImage="url('http://weargoodness.com/bg1.jpg')"

Not required, won't hurt and is a good habit. But, gets a little complicated if it is something like an onclick event.

jscheuer1
03-06-2007, 05:14 AM
OK, on your demo page (as it is at this writing):

http://weargoodness.com/index5.htm

You can replace:


<link rel="alternate stylesheet" type="text/css" media="screen" title="floral" href="bg1.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="turkey" href="bg2.css">
<script src="styleswitch.js" type="text/javascript">

/***********************************************
* Style Sheet Switcher v1.1- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">

var styleArray = new Array(3);
styleArray[0] = "none";
styleArray[1] = "floral";
styleArray[2] = "turkey";

var i=0;

function prevStyle()
{
i = (i+styleArray.length-1)%styleArray.length;
chooseStyle(styleArray[i], 60);
}

function nextStyle()
{
i = (i+1)%styleArray.length;
chooseStyle(styleArray[i], 60);
}

</script>

with:


<script type="text/javascript">

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

var styleArray = new Array(3);
styleArray[0] = function(){document.body.style.backgroundImage='none';};
styleArray[1] = function(){document.body.style.backgroundImage='url(http://weargoodness.com/bg1.jpg)';};
styleArray[2] = function(){document.body.style.backgroundImage='url(http://weargoodness.com/bg2.jpg)';};

var i=0;

function prevStyle()
{
i = (i+styleArray.length-1)%styleArray.length;
styleArray[i]();
createCookie('bg_im',i,60)
}

function nextStyle()
{
i = (i+1)%styleArray.length;
styleArray[i]();
createCookie('bg_im',i,60)
}

function bg_load(){
if(readCookie('bg_im')){
i=readCookie('bg_im')*1;
styleArray[i]();
}
}

if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", bg_load, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", bg_load );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
bg_load();
};
}
else
window.onload = bg_load;
}
</script>

rysotope
03-06-2007, 05:51 AM
cool man, thanks. would i be able to use images as buttons with this? what my goal has been is to have like forward and back arrows and people can just cycle through diff. backgrounds.

jscheuer1
03-06-2007, 07:22 AM
Changing your buttons to image inputs or using images with onclick events is a relatively simple matter of layout and/or css. What you had there was:


<input name="prev" type="button" class="prev" onClick="prevStyle()" value="Prev">
<input type="button" name="next" value="Next" onClick="nextStyle()">

You could make them image inputs:


<input name="prev" type="image" class="prev" onclick="prevStyle()" src="prev.gif">
<input type="image" name="next" src="next.gif" onclick="nextStyle()">

Incidentally, the script I wrote/modified for you could be made external and should be if it is to be used on multiple pages.