...

View Full Version : Audio player is off position when I click play button



Windbrand
10-30-2011, 02:30 AM
I'm having a really odd problem with the html audio player. It looks fine if I don't click the play button, but the moment I click the play button, it would disappear and reappear around 15-20 pixels lower. Here is my code for a simple audio player:

HTML:


<div id="audioplayer">
<span class="eightonesmall" id="audiotext">&nbsp;Background music control</span>
<audio controls="controls">
<source src="music/liangzhuhualuowuhui.ogg" type="audio/ogg" />
<source src="music/liangzhuhualuowuhui.mp3" type="audio/mp3" />
</audio>
</div>


CSS:


body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow:hidden;
background-image:url(../pictures/drawings/backgrounds/menubackgroundbubbles.png);
background-position:center;
background-attachment:fixed;
}

#audiotext {
vertical-align:middle;
color:#CCCCCC;
}

#audioplayer {
position:fixed;
top:10px;
right:10px;
border:3px double #FFF;
height:30px;
}


The same problem occurs for an audio player that I've set to hidden, and will appear if I click an arrow and disappear if I click another arrow. It hides it and re-appears fine, just the player shifts down 15-20 pixels if I click play...

HTML:



<div class="collapsearrow">
<img src="pictures/thumbnails/musicboxbuttons/collapsearrow.png" alt="collapsearrow"
onclick="document.getElementById('song1').style.visibility='visible';"/>Liangzhu
</div>
<div id="song1" style="visibility:hidden;">
<img src="pictures/thumbnails/musicboxbuttons/contractarrow.png" alt="contractarrow"
onclick="document.getElementById('song1').style.visibility='hidden';"/>
<audio id="musicboxplayer" controls="controls">
<source src="music/liangzhuhualuowuhui.ogg" type="audio/ogg" />
<source src="music/liangzhuhualuowuhui.mp3" type="audio/mp3" />
</audio>
</div>

CSS:



#musicboxplayer {
position:relative;
width:86px;
height:25px;
}

.collapsearrow {
float:left;
}

#song1,#song2,#song3,#song4 {
width:150px;
float:left;
}


Does anyone know what's causing this?
Thanks.

Windbrand
10-31-2011, 02:38 PM
No one uses the html audio player? =/

Windbrand
11-01-2011, 05:46 PM
The odd thing is that the div the player is in does not move, only the visual of the player moves. What I mean is if I click the empty space above the moved player (where it originally was), I can pause/adjust volume/etc, but if I click where the buttons now actually are nothing happens. Essentially all the functions didn't reposition, only the visuals did.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum