PDA

View Full Version : Layer within Layer


Droganis
05-21-2007, 03:16 AM
Hi I've been trying to follow this gallery tutorial on the site http://www.dreamweaverclub.com/dreamweaver-picture-gallery.php

I had a couple of difficulties with it,
one when inserted a layer within another and the second layer had the thumbnail images within it, viewing it in a browser the second layer did not show at all. this made me stuck at this part for a while.

i redid it without the first layer and everything worked perfectly, until i got to the part where the second layer is scripted to scroll, it ended up scrolling of the page.

if anyone has any ideas on how to fix these difficulties please help me, i thank you any of you for taking the time in reading this

Andromeda
05-21-2007, 03:46 AM
Hi Droganis

Welcome to the forum.

Can you please show us the code of your page so that someone here is better able to help you.

Droganis
05-21-2007, 03:55 AM
thankyou for welcoming me, uhh im not sure what part of the code to show..i apologize for putting all the code up:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:600;
height:100;
z-index:1;
left: 77px;
top: 124px;
}
#Layer2 {
position:absolute;
width:300;
height:100;
z-index:2;
left: 194px;
top: 617px;
overflow: hidden;
background-color: #999999;
clip: rect(0,300,100,0);
}
#Layer3 {
position:absolute;
width:600;
height:100;
z-index:3;
background-color: #00FF00;
top: 2px;
left: 2px;
}
#Layer4 {
position:absolute;
width:600;
height:100;
z-index:3;
left: 68px;
top: 503px;
}
#Layer5 {
position:absolute;
width:300;
height:0;
z-index:4;
left: 215px;
top: 473px;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function P7_HScroller(el,dr,tx,ox,spd) { //v1.7 by PVII
var g,gg,fr,sp,pa='',slw=true,m=false,w,ww,lx,rx;tx=pa rseInt(tx);
if((g=MM_findObj(el))!=null){gg=(document.layers)? g:g.style;}else{return;}
if(dr=="Stop"){if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=f alse;}
if((parseInt(navigator.appVersion)>4 || navigator.userAgent.indexOf("MSIE")>-1)&& !window.opera){pa="px";}
if(navigator.userAgent.indexOf("NT")>-1 || navigator.userAgent.indexOf("Windows 2000")>-1){slw=false;}
if(spd=="Slow"){sp=(slw)?2:1;fr=(slw)?40:30;}else if(spd=="Medium"){sp=(slw)?4:1;fr=(slw)?40:10;
}else{sp=(slw)?8:4;fr=(slw)?40:10;}if(spd=="Warp"){sp=5000;}var xx = parseInt(gg.left);if(isNaN(xx)){
if(g.currentStyle){xx=parseInt(g.currentStyle.left );}else if(document.defaultView&&document.defaultView.getComputedStyle){
xx=parseInt(document.defaultView.getComputedStyle( g,"").getPropertyValue("left"));}else{xx=0;}}
if(document.all || document.getElementById){w=parseInt(g.offsetWidth) ;if(!w){w=parseInt(g.style.pixelWidth);}
if(g.hasChildNodes){for(wx=0;wx<g.childNodes.length;wx++){ww=parseInt(g.childNodes[wx].offsetWidth);
if(ww>w){w=ww;}}}}else if(document.layers){w=parseInt(g.clip.width);}lx=t x-w+parseInt(ox);rx=tx;
if(dr=="Right"){if(xx>lx){m=true;xx-=sp;if(xx<lx){xx=lx;}}}
if(dr=="Left"){if(xx<rx){m=true;xx+=sp;if(xx>rx){xx=rx;}}}
if(dr=="Reset"){gg.left=tx+pa;if(g.toMove){clearTimeout(g.p7Magi c);}g.toMove=false;}
if(m){gg.left=xx+pa;if(g.toMove){clearTimeout(g.p7 Magic);}g.toMove=true;
eval("g.p7Magic=setTimeout(\"P7_HScroller('"+el+"','"+dr+"',"+tx+","+ox+",'"+spd+"')\","+fr+")");
}else{g.toMove=false;}
}

function P7_ShowPic(a,b) { //v2.0 by PVII
var g,gg,d,dd,ic,im;if((g=MM_findObj(b))!=null){
if(!document.P7ShowPic){document.P7ShowPic=true;}e lse{
if((d=MM_findObj(document.P7SPlay))!=null){
dd=(document.layers)?d:d.style;dd.visibility="hidden";}}
document.P7SPlay=b;gg=(document.layers)?g:g.style; im=b+"im";
if((ic=MM_findObj(im))!=null){ic.src=a;gg.visibili ty="visible";}}
}
//-->
</script>
</head>

<body>
<div id="Layer4"><img src="images/blue_thing_thumb.jpg" width="100" height="100" onclick="P7_ShowPic('images/blue_thing.jpg','P7ShowPL1')" /><img src="images/compress_two_thumb.jpg" width="100" height="100" onclick="P7_ShowPic('images/compress_two.jpg','P7ShowPL2')" /><img src="images/duct_work_thumb.jpg" width="100" height="100" /><img src="images/pipes1_thumb.jpg" width="100" height="100" /><img src="images/rooftop2_thumb.jpg" width="100" height="100" /><img src="images/welder_thumb.jpg" width="100" height="99" /></div>
<div id="Layer5">
<table width="300" border="1">
<tr>
<td><a href="javascript:;" onclick="return false" onmousedown="P7_HScroller('Layer4','Left',0,300,'Medium')" onmouseup="P7_HScroller('Layer4','Stop',0,0,'Medium')">Left</a></td>
<td><a href="javascript:;" onclick="P7_HScroller('Layer4','Reset',0,0,'Medium');return false">Reset</a></td>
<td><a href="javascript:;" onclick="return false" onmousedown="P7_HScroller('Layer4','Right',0,300,'Medium')" onmouseup="P7_HScroller('Layer4','Stop',0,0,'Medium')">Right</a></td>
</tr>
</table>
</div>
<div id="P7ShowPL1" style="position:absolute; left:248px; top:5px; width:255px; z-index:1; visibility:hidden">
<p><img src="images/shimh.gif" name="P7ShowPL1im" width="255" height="400" alt="Caption for Image Number 1" /></p>
</div>
<div id="P7ShowPL2" style="position:absolute; left:202px; top:164px; width:385px; z-index:1; visibility:hidden">
<p><img src="images/shimv.gif" name="P7ShowPL2im" width="385" height="240" alt="Caption for Image Number 2" /></p>
</div>
</body>
</html>

domedia
05-21-2007, 01:37 PM
You have no nested layers. Is that what you wanted?

Andromeda
05-21-2007, 07:40 PM
Don't apologize about showing the whole code - we kind of need it all!!

As Domedia says, you have no nested layers.

Consider this part of your code:
<div id="Layer4"><img src="images/blue_thing_thumb.jpg" width="100" height="100" onclick="P7_ShowPic('images/blue_thing.jpg','P7ShowPL1')" /><img src="images/compress_two_thumb.jpg" width="100" height="100" onclick="P7_ShowPic('images/compress_two.jpg','P7ShowPL2')" /><img src="images/duct_work_thumb.jpg" width="100" height="100" /><img src="images/pipes1_thumb.jpg" width="100" height="100" /><img src="images/rooftop2_thumb.jpg" width="100" height="100" /><img src="images/welder_thumb.jpg" width="100" height="99" /></div>
<div id="Layer5"><table width="300" border="1">
<tr>
<td><a href="javascript:;" onclick="return false" onmousedown="P7_HScroller('Layer4','Left',0,300,'Medium')" onmouseup="P7_HScroller('Layer4','Stop',0,0,'Medium')">Left</a></td> <td><a href="javascript:;" onclick="P7_HScroller('Layer4','Reset',0,0,'Medium');return false">Reset</a></td>
<td><a href="javascript:;" onclick="return false" onmousedown="P7_HScroller('Layer4','Right',0,300,'Medium')" onmouseup="P7_HScroller('Layer4','Stop',0,0,'Medium')">Right</a></td>
</tr></table></div>

You've created layer 4 <div id="layer4">,inserted some images and then closed the layer </div>. Then you've created the next layer <div id=”layer5”>.

If you want one layer within another you would need to create your first layer <div id="layer4">, put all your images in etc and then BEFORE you closed that layer you would create your next layer <div id=”layer5”> do whatever you want with that layer. Then close that layer </div> and then close your first layer </div>.