Click here to Skip to main content
14,926,107 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello everyone,
I have something like this:
HTML
<embed width="100%" height="100%" name="plugin" src="Tmp/9425.pdf" type="application/pdf">

My div has to be over the embed file but i can't figure out how to get it done.
Embedded file always wins.

Did someone resolve this?
Thanks
Alessandro
Posted
Comments
Zoltán Zörgő 8-Nov-13 14:10pm
   
I am pretty sure, you can't do this.

1 solution

Gday.

Yeah, you can do something like this. You just need to make use of some CSS, some inline styling and some javascript (to calculate the position - you could fix it instead)

Basically, the idea is to set the div to have an absolute position. You also want to ensure it appears in-front of the embedded object - giving it a higher z-index.(the default, if not specified is 0)

Here's some code that will position the div above the center of the embed object.

XML
<!DOCTYPE html>
<head>
<script>
window.addEventListener('load', myInit, false);

function byId(e){return document.getElementById(e);}

function myInit()
{
    var moveMe = byId('moveMe');
    var coverMe = byId('coverMe');

    var coverPosX,coverPosY;
    var coverWidth, coverHeight;

    var movePosX, movePosY;
    var moveWidth, moveHeight;

    coverPosX = coverMe.clientLeft;
    coverPosY = coverMe.clientTop;
    coverWidth = coverMe.clientWidth;
    coverHeight = coverMe.clientHeight;

    moveWidth = moveMe.clientWidth;
    moveHeight = moveMe.clientHeight;

    movePosX = (coverWidth - moveWidth) / 2;
    movePosY = (coverHeight - moveHeight) / 2;

    var tgt = moveMe;
    tgt.style.left = movePosX + 'px';
    tgt.style.top = movePosY + 'px';

}
</script>
<style type="text/css" media="screen">
.above
{
    font-family: verdana;
    position: absolute;
    display: inline-block;
    color: red;
    font-weight: bold;
    font-size: 12px;
    padding: 24px;
    border: solid 4px red;
    background-color: rgba(51,51,51,0.3);
    border-radius: 16px;
    z-index: 1;
}
</style>
</head>
<body>
    <embed id='coverMe' width="100%" height="300px" name="plugin" src="EstesRocketMotors.pdf" type="application/pdf">
    <div class='above' id='moveMe'>Always seek permission from aviation<br>authority before exceeding 300ft flights</div>
</body>
</html>
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900