Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts

    make slide in go over an image

    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?

    Code:
    <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>
    Last edited by tpeck; 10-06-2011 at 04:25 AM.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Add the following line in your style sheet (after line 7):
    Code:
    #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

  • Users who have thanked ironboy for this post:

    tpeck (10-06-2011)

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    That worked thanks! Is there a way to make it overlay a swf too?

    Here is a link to the .swf issue:



    (BTW: I forget exactly where I got the js code from, but I think it was Babylon. I can't be sure.)
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    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/3...wf-flash-movie

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    Mmm. Tricky. I tried this...

    Code:
    <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?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #6
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    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/1...tml-over-flash

    PS: I have updated the demo to show this.
    Last edited by tpeck; 10-13-2011 at 11:55 AM.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •