thenelson
asked on
vertically center Google Chrome wav player in iframe
I have the following iframe in a html page:
<iframe name='newframe' frameborder='0' height='120'></iframe>
I then have the following link which plays a wav file and the Chrome player shows up in the iframe:
<a href='https://api.twilio.com/Recordings/RE...' target='newframe'>
With height='120' as above, the iframe looks like this:
With height='40', the iframe looks like this:
Is there a way to center the Chrome wav player vertically in the iframe?
<iframe name='newframe' frameborder='0' height='120'></iframe>
I then have the following link which plays a wav file and the Chrome player shows up in the iframe:
<a href='https://api.twilio.com/Recordings/RE...' target='newframe'>
With height='120' as above, the iframe looks like this:
With height='40', the iframe looks like this:
Is there a way to center the Chrome wav player vertically in the iframe?
Did you try setting the href to display:block and configure padding to push it down in the iframe?
ASKER
How would I do that?
<a href='https://api.twilio.com/Recordings/RE...' style="display:block; padding:25px" target='newframe'>
ASKER
That change added padding above the link instead of in the iframe.
Try this instead - style="position:relative; top:20px; display:block;"
You may need to apply height and width to the href as well.
You may need to apply height and width to the href as well.
ASKER
That moved the link down. I am thinking any style applied to the link will affect the link not the interior of the iframe.
Can you take a screen shot of where the "link is moved down?"
ASKER
I think you're going to have to post your code something is missing on the backend that I'd have to see.
ASKER
it is a php script with a lot of code that has nothing to do with this problem. Here is the relevant code:
<html>
<body>
<table><tr><td colspan='7' align='center'>
</td></tr>
<tr><td>DATE</td>
<td> </td>
<td>PHONE NO </td>
<td>NAME</td>
<td> LEN</td>
<td> PLAY </td>
<td><INPUT type='submit' value='DELETE'></td></tr>
<?php
echo " <td> " . $pre_number . "</td> ";
echo " <td> " . $phoneno . "</td> ";
echo " <td> " . $name . "</td> ";
echo " <td><div style='text-align: right;'>" . intval($recording->duration/60) . ":" . sprintf('%02d',$recording->duration%60) . "</div></td>";
echo " <td><a href='https://api.twilio.com" . $recording->uri . "' target='newframe' onclick='playscript($phonename);' ><div style='text-align: center;'>Play</div></a></td>";
echo " <td><div style='text-align: center;'><input type='checkbox' name='del' value='" . $recording->sid . "'></div></td>";
Echo " </tr> ";
echo "</table>";
echo "</form>";
echo "<iframe name='newframe' frameborder='0' height='70' marginheight='50'></iframe>";
echo "</body></html>";
?>
Ok, i see. Since you'r using that table it is a little funky. You may be able to get something like this to work - http://answers.yahoo.com/question/index?qid=20090713155541AAiNtL1
ASKER
I have two iframes on this page. The one we are discussing with the wav player (newframe) and another one with text (newframe2). I tried the code on the link you suggested on both frames:
Both worked to move the text down in iframe newframe2 but both did not work on the wav player in iframe newframe. I am going to try putting an image in the iframe and see if the two methods work on it.
<style type="text/css">
#newframe
{
position:relative;
top:-40px;
}
</style>
I also tried marginheight='40' on both frames.Both worked to move the text down in iframe newframe2 but both did not work on the wav player in iframe newframe. I am going to try putting an image in the iframe and see if the two methods work on it.
ASKER
I have created a test wav file at: test.wav. Clicking on this link in Goggle Chrome plays the wav file while displaying the wav player. Normalizing the Chrome window and reducing its size results in the player eventually scrolling off the top of the window. So I am guessing, it is also not possible to place it in too small an iframe.
I also created a small web page with a link and an iframe so you can play with it to see if the problem is solvable. Here it is: testIframe.html,
I also created a small web page with a link and an iframe so you can play with it to see if the problem is solvable. Here it is: testIframe.html,
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That did it! Thanks again!!
I modified the div and iframe as you suggested to meet my design:
<div style="display:inline-bloc k;height:1 8px;overfl ow:hidden; padding-bo ttom:4px;b order-radi us:8px;">
<iframe name='newframe' frameborder='0' height='60'></iframe>
</div>
I don't understand how putting an iframe into a div container would make this work. I guess I need to read up on the div.
I modified the div and iframe as you suggested to meet my design:
<div style="display:inline-bloc
<iframe name='newframe' frameborder='0' height='60'></iframe>
</div>
I don't understand how putting an iframe into a div container would make this work. I guess I need to read up on the div.