...
PDA

make slide in go over an image

tpeck
10-06-2011, 03:44 AM
I've pared this down as much as I can to demonstrate the issue.

What can I do to make the slide in go over the top of the image rather than underneath as at present?

<html>

<head>
<title>slidein</title>
<style>
#headerstudy {width:980px;height:280px;margin:0 auto;padding:0;}
#mainbook {position:absolute;top:7.5em;left:15.4m;border:0 none}
</style>
<script>
// *************** TRANSLATE

var master = new Object("element")
master.curLeft = 0; master.curTop = 10;
master.gapLeft = 0; master.gapTop = 0;
master.timer = null;

function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop)
{
clearTimeout(eval(layerName).timer)
var el = document.getElementById(layerName);
if(eval(layerName).curLeft != fromLeft)
{
if((Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) < paceLeft)
{
eval(layerName).curLeft = fromLeft;
}
else if(eval(layerName).curLeft < fromLeft)
{
eval(layerName).curLeft = eval(layerName).curLeft + paceLeft;
}
else if(eval(layerName).curLeft > fromLeft)
{
eval(layerName).curLeft = eval(layerName).curLeft - paceLeft;
}
el.style.left = eval(layerName).curLeft + 'px';
}
if(eval(layerName).curTop != fromTop)
{
if((Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) < paceTop)
{
eval(layerName).curTop = fromTop;
}
else if(eval(layerName).curTop < fromTop)
{
eval(layerName).curTop = eval(layerName).curTop + paceTop;
}
else if(eval(layerName).curTop > fromTop)
{
eval(layerName).curTop = eval(layerName).curTop - paceTop;
}
el.style.top = eval(layerName).curTop + 'px';
}
eval(layerName).timer=setTimeout('moveAlong("'+layerName+'",'+paceLeft+','+paceTop+','+fromLeft+','+fromTop+')',30);
}

function setPace(layerName, fromLeft, fromTop, motionSpeed)
{
eval(layerName).gapLeft = (Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) / motionSpeed;
eval(layerName).gapTop = (Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) / motionSpeed;
moveAlong(layerName, eval(layerName).gapLeft, eval(layerName).gapTop, fromLeft, fromTop);
}

var expandState = 0

function expand()
{
if(expandState == 0)
{
setPace("master", 121, 10, 10);
expandState = 1;
}
else
{
setPace("master", -120, 10, 10);
expandState = 0;
}
}
</script>
</head>

<body>

<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
<div id="menu2" style="position: absolute; left: 117px; top: 12px">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand();" onfocus="this.blur()">
<img name="menutop" border="0" src="http://aapress.com.au/images/translate.gif" width="23" height="152"></a></td>
</tr>
</table>
</div>
<div id="screen" style="position: absolute; left: -138px; top: 12px; ">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;" bgcolor="#FFFFFF">
<tr>
<td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;">
<a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Gadget by LabPixies.com</a></td>
</tr>
<tr>
<td>
<iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self">
</iframe></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
sidemenu.style.top = '80px';
}
setInterval("FixY()",100);
</script>
<div id="headerstudy">
<img id="mainbook" src="http://aapress.com.au/images/booksblank.jpg" width="572" height="285">
</div>

</body>

</html>
ironboy
10-06-2011, 07:55 AM
Add the following line in your style sheet (after line 7):
#menu2, #screen {z-index:1} :)

B.t.w. your code looks rather messy - and with a lot of evals that don't need to be there - but that's a different story ;)
tpeck
10-06-2011, 08:43 AM
That worked thanks! Is there a way to make it overlay a swf too?

Here is a link to the .swf issue:

(http://www.aapress.com.au/ielts/english/products.html)

(BTW: I forget exactly where I got the js code from, but I think it was Babylon. I can't be sure.)
ironboy
10-06-2011, 08:47 AM
That's a bit messierbut doable - you'll need to adjust the wmode parameter of the object/embed that is mounting the swf:

http://stackoverflow.com/questions/3342872/html-overlay-on-a-swf-flash-movie
tpeck
10-06-2011, 12:20 PM
Mmm. Tricky. I tried this...

<style>
#headerstudy {width:980px;height:280px;margin:0 auto;padding:0;}
#menu2, #screen {z-index:1}
#booksswf {width:980px;height:280px;margin:0 auto;padding:0;}
#menu2, #screen {z-index:1}
#mainbook {position:absolute;top:7.5em;left:15.4m;border:0 none}
</style>

Demo:

http://aapress.com.au/demo/translateslidein/demo.html

Doesn't that add the transparency and satisfy the z-index requirement?
tpeck
10-13-2011, 11:37 AM
Turned out you have to add the wmode transparency to the embed as well (like you said) to make it work...got it from here:

http://stackoverflow.com/questions/1567420/overlay-html-over-flash

PS: I have updated the demo to show this.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum