Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

/

Another firefox bug...

19 replies [Last post]

Hey everybody (especially lost),

For some reason my flash player display is a bit distorted when viewed in firefox. I have an xml playlist which is on the right side of the player, and I wrote some javascript which makes the playlist appear on mouseover or disappear otherwise. This works great in Chrome. In firefox, when not moused over, the picture in the display is slightly chopped off and a little bit of the playlist is shown (like everything was moved a few pixels left of where it ought to be). Does anybody have an idea about this?

I'm running Firefox 3.5.1 if that means anything.

 
    My mind-reading device is broken.     :D

Links, links, links, links, links...

heheh. I'm still running on localhost...trying to get the bugs solved before I purchase a domain. What code would be of interest?

Player code, surrounding/containing HTML, CSS, JS for the mouseover, etc.

You got it!

Player code:

<script type="text/javascript">

      var flashvars =
      {
//'skin': 'snel.swf',
'id': 'player',
'file': 'playlist.xml',
        'playlistsize': '300',
        'playlist': 'right',
'autostart':                    'true',
'repeat': 'list',
'playlist.thumbs': 'false',
        'controlbar': 'over'

      };

      var params =
      {
'wmode': 'opaque',
        'allowfullscreen':              'true',
        'allowscriptaccess':            'always'
      };

      var attributes =
      {
        'id':                           'player',
        'name':                         'player'
      };

      swfobject.embedSWF("player.swf", "playerDiv", "600", "300", "9.0.124", false, flashvars, params, attributes);
</script>

Here's the surrounding HTML:

<body style="padding:0px; margin:0px; overflow:hidden;" onload='showlist(300);' onbeforeunload='closeBrowser();'>

<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1"><img src="eargasm.jpg" width="100%" height="100%"></div>

<div style="z-index:2; position:absolute; margin:0px; padding:0px; height:100%; width:100%; overflow:scroll; font-family:Georgia, 'Times New Roman', Times, serif; color:#dbaa70;">

<div style='height:20%;'></div>

<b><div style='text-align:center; width:100%; font-size:20px; height:10%;'id="nowplaying"></div></b>
<div style='height=5%'></div>
<div style='float:left;  width:38.5%; height:1px;'></div>
<div id='wrapper' onmouseover="showlist(600)" onmouseout="showlist(300)">      
            <div id="playerDiv"></div>

<!-- <button type="submit" id="shuffle" name="Shuffle" onclick="shufflePlaylist()">Shuffle</button><br/>
<a href="http://localhost/ft2.html">Return to Playlist Generator</a> -->
</div>

</div>
</body>

And here's the code for the mouseover:

  function  showlist(theWidth) {
document.getElementById("wrapper").style.width=theWidth+"px";
  };

All that formatting html might seem weird, it's because I made a background image that I wanted to work on different resolutions. I read that if you don't have much scrolling on your page, then this is an acceptable way to make sure different resolutions will still display properly. Let me know if anything jumps out at you, and thanks!

Does anything jump out at you lost? Or is this more likely a Firefox 3.5.1 isue?

Still setting up the test page.

http://willswonders.myip.org:8074/Mark-1.html

Everything's working, except a line of code to re-size the player, which I'll add in a little while.

Perhaps it's the skin i'm using? If you want I can open up my server so you can see the issue first-hand. Email me @ mark.dhillon@gmail.com and I'll send you a link.
Thanks again

The basic system is functioning in FF & IE at the link that I posted above.

You can tweak the CSS for the other elements. I threw a bit of text into them just so you could see where they were located.

Hey lost,
Thanks for your help! I see it's working great on your site, that's cool. I copied the source code and put it on a new page of my own, and changed two parameters: the name of the player.swf file (how did you get a player version 4.6 by the way???) and the name of the playlist. I noticed immediately that when I changed the playlist.swf file parameter the same problem arose again, the picture is distorted a few pixels left. Maybe there's an issue with my version of the player.swf and firefox? I tried re-downloading the JW flash player files but that didn't help. What do you think? Thanks for being so patient and helping me through this, you're a saint.

Latest Player is always here: http://developer.longtailvideo.com/trac/log/trunk/as3/player.swf

Click on the release that you want in the Rev column.

I see what you're saying.

Take a look at this Test Page:

    http://willswonders.myip.org:8074/Simple_HidePlaylist.html

I had to reduce the container width down to 296px to get rid of the 6px of playlist that showed on the right side.

So it seems that the displayarea isn't really 300px wide. I have to take some screenshots to confirm this.

I'm starting to wonder if this is an issue with just images...because your site looks perfect, but it's displaying a video instead of a static image. I copied your code directly and only changed those parameters that I mentioned before, and it's still the same issue! The fact that Chrome doesn't have an issue leaves me scratching my head. What I have discovered so far is that I have to set the width to exactly 269 pixels to not have any portion of the playlist shown when not being mouseover'd. But the image is noticeably compressed in firefox. And now when I try it in Chrome, part of the image is cut off, but none of the playlist is showing...but it was never an issue with chrome. I also tried different resolutions of the static images and that didn't solve it. I think there may be an issue with how the player displays static images in firefox...what do you think? Let me know if you want a link to my site so you can see it firsthand.

Messing with the 'stretching' flashvar doesn't change it either. While it responds to the flashvar, it doesn't want to not give up 31 pixels to the playlist at all times and downscale the image. Gah firefox!

Sorry for spanmming, but I tried switching the playlist to mouseover to the bottom instead of the right, and now it pushes the image up and displays a portion of the playlist on the bottom now...what is going on?!?!

 
I made a horizontal page: http://willswonders.myip.org:8074/Simple_HidePlaylist-1.html

and a vertical page: http://willswonders.myip.org:8074/Simple_HidePlaylist-2.html

It seems that you have to chop off those few extra pixels either way.

The actual player displayarea is correct at 300x300, but the surrounding box ends up being a few pixels larger.

Can you try and make a playlist that just displays a static image and plays an mp3 file or some kind of audio? I think that's the major difference between our working/non-working versions. Here is a link to my site, just click one of the 'artist' or 'album' check boxes and then click 'Submit' to be taken to the page with the flash player.

http://75.140.155.129/new2.html

Does it give you the same issue in Firefox?

UPDATE!

It's working! Somehow, firefox behaved differently when running on localhost, but when I tried the link that I just gave you, it worked fine! The resolutions were all ok! I think it's been solved. Thanks so much for helping me through this lost!

You're welcome!

       Good Luck!     :D