Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Scrollable Layers

Status
Not open for further replies.
jlong07

jlong07

Technical User
Joined
Nov 8, 2002
Messages
56
Location
US
I have a site that has a navbar at the top and bottom. For several of the selections on the navbar I have a layer that appears in the center of the page which links the upper and lower navbars. On this layer is a submenu that is dependant on the selection in the primary navbar. The visibility of the middle layer is handled by mouseover events. All told there are at least three different selections which will use this center navbar. The background of the center navbar is only visible when one of these selections is highlighted. Because of the repetition I decided to have the background of the center navbar be a layer and then the content for each of the main navbar selections sit in their own layers which would be placed on top of the background layer when the user puts there mouse over the selection. This works great however there is one last kink. The contents of this center layer are manufactures of products that are sold on the site. There are quite a few different manufacturers and so they don't all fit in the alloted space for the center navbar. I figured that this mean that I need a scrollable layer to hold the content. I got all of this working for one of the three selections, but I am now stuck. Firstly, I can't figure out how to make it work for the other two selections. Secondly, it the whole thing doesn't seem to work in any browser but IE for Windows. The background layer and the scroll controls layer appears but the content does not. I hope that some one can help me figure this out. Here is the link to the page. The three selections are Men's Frames, Women's Frames, and Children's Frames. The Men's Frames is the one that currently works in IE.


Any help would be greatly appreciated.
 
Sort by date Sort by votes
Scrolling layers opens oportunity for compatibility with NS4 aswell. Yay! :)

You should really use object.clip= with object.style.top= but on IE/Mozilla it is easier to skip the clipping and embed them in a static layer with overflow='hidden';

As the page is not found I cannot say anything more :(

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
I apologize, my test server was offline last night. The page should be available now.
 
Upvote 0 Downvote
Ok, I got it solved, there was an IP address conflict that was affecting my port forwarding in my router.
 
Upvote 0 Downvote
OK, I have found a script that seems to be working. The only down side is that te script use four unique layers to create the scroll (an upcontrol, downcontrol, scrollcontainer, and scroll content). I think I can merge the up and down controls onto a single layer, but I can't figure out a way to not have to duplicate all of the layers for the scroll to work for multiple sections
(i.e. 1 scroll controls , 1 scroll container, and 3 scroll content layers. Right now I have to have 3 of edach. This does not seem as clean and makes the code rather bloated. Hereis the code set to work with two different selections. If anyone knows a way to consolidate it as mentioned above that would be great.

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 3.2 Final//EN&quot;>
<HTML>
<HEAD>
<TITLE>Scrolling test</TITLE>
<!-- begin DHTML tag -->
<script language=&quot;JavaScript&quot;>
function nsBrowFix(){
if(pageWidth!=innerWidth || pageHeight!=innerHeight){
location.reload()
}
}

if(document.layers) {
pageWidth=innerWidth
pageHeight=innerHeight
window.onresize=nsBrowFix
}
</script>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
<!--
/**********************************************************************************
* Copyright (C) 2002 David Pedowitz diggity626@ aol.com
* This may be used and changed freely as long as this msg is intact!
*********************************************************************************/
var n = navigator;
var d = document;
var agent = n.userAgent.toLowerCase();
var name = n.appName.toLowerCase();
var opera = agent.indexOf(&quot;opera&quot;) != -1;
var speed = 40;
var tid;

//Browser sniff hash obj
var sniff = {
bw: {
ie:agent.indexOf(&quot;msie&quot;) != -1 && !opera,
ie4:agent.indexOf(&quot;msie 4.&quot;) != -1 && !opera,
ie5:agent.indexOf(&quot;msie 5.&quot;) != -1 && !opera,
ie6:agent.indexOf(&quot;msie 6.&quot;) != -1 && !opera,
ns:name.indexOf(&quot;netscape&quot;) != -1 && agent.indexOf(&quot;gecko&quot;) == -1,
ns6:agent.indexOf(&quot;netscape6&quot;) != -1
},
os: {
win:n.userAgent.indexOf(&quot;Win&quot;) != -1,
mac:n.userAgent.indexOf(&quot;Mac&quot;) != -1
}
};

var distance = (sniff.os.mac && sniff.bw.ns6 || sniff.os.win && sniff.bw.ie4)?5:(sniff.os.mac && sniff.bw.ns)?6:4;

function createScrollerObj(lyr1, lyr2) {
this.container = {
obj:(sniff.bw.ns)?d[lyr1]:sniff.bw.ie?d.all[lyr1]:d.getElementById(lyr1),
css:(sniff.bw.ns)?d[lyr1]:sniff.bw.ie?d.all[lyr1].style:d.getElementById(lyr1).style,
height:(sniff.bw.ns)?d[lyr1].clip.height:sniff.bw.ie?d.all[lyr1].offsetHeight:d.getElementById(lyr1).offsetHeight
};
this.content = {
obj:(sniff.bw.ns)?d[lyr1].document[lyr2]:sniff.bw.ie?d.all[lyr2]:d.getElementById(lyr2),
css:(sniff.bw.ns)?d[lyr1].document[lyr2]:sniff.bw.ie?d.all[lyr2].style:d.getElementById(lyr2).style,
height:(sniff.bw.ns)?d[lyr1].document[lyr2].clip.height:sniff.bw.ie?d.all[lyr2].offsetHeight:d.getElementById(lyr2).offsetHeight,
move:moveLyr,
top:0
};
this.prop = {
dif:this.container.height - this.content.height
};
return this;
}

//move something
function moveLyr(x, y) {
this.css.left = x;
this.css.top = y;
}

function scrollDown(num) {
var obj = (eval(&quot;scroller&quot; + num));
if (obj.container.height < (obj.content.height + obj.content.top)) {
obj.content.move(0, (parseInt(obj.content.top) - distance));
if (parseInt(obj.content.top) >= parseInt(obj.prop.dif)) {
tid = setTimeout(&quot;scrollDown('&quot; + num + &quot;')&quot;, speed);
}
obj.content.top = parseInt(obj.content.top) - distance;
} else {
stopScroll();
}
}

function scrollUp(num) {
var obj = (eval(&quot;scroller&quot; + num));
if(parseInt(obj.content.top) != 0) {
obj.content.move(0, (parseInt(obj.content.top) + distance));
obj.content.top = parseInt(obj.content.top) +distance;
tid = setTimeout(&quot;scrollUp('&quot; + num + &quot;')&quot;, speed);
}
}

function stopScroll() {
clearTimeout(tid);
b = false
}

function createObj() {
scroller1 = new createScrollerObj('divContainer1', 'divContent1');
scroller2 = new createScrollerObj('divContainer2', 'divContent2');
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(&quot;?&quot;))>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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<style type=&quot;text/css&quot;>
#divUpControl1{
position:absolute;
left:10;
top:55;
visibility: hidden;
z-index: 2;
}
#divDownControl1{
position:absolute;
left:10;
top:320;
visibility: hidden;
z-index: 2;
}
#divUpControl2{
position:absolute;
left:10;
top:55;
visibility: hidden;
z-index: 2;
}
#divDownControl2{
position:absolute;
left:10;
top:320;
visibility: hidden;
z-index: 2;
}
#divContainer1{
position:absolute;
width:320;
height:240;
overflow:hidden;
top:80;
left:10;
clip:rect(0,320,240,0);
visibility: hidden;
z-index: 2;
}
#divContainer2{
position:absolute;
width:320;
height:240;
overflow:hidden;
top:80;
left:10;
clip:rect(0,320,240,0);
visibility: hidden;
z-index: 2;
}
#divContent1{position:absolute; top:0; left:0}
#divContent2{position:absolute; top:0; left:0}

body, td, p {font-family: arial; font-size:12px;}
</style>
<script language=&quot;JavaScript&quot; type=&quot;text/JavaScript&quot;>
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName==&quot;Netscape&quot;)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<body bgcolor=&quot;#ffffff&quot; onLoad=&quot;createObj();&quot;>


<!-- begin absolutely positioned scrollable area object-->
<div id=&quot;divUpControl1&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;scrollUp('1')&quot; onMouseOut=&quot;stopScroll()&quot;>[scroll up]</a>
</div>
<div id=&quot;divUpControl2&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;scrollUp('2')&quot; onMouseOut=&quot;stopScroll()&quot;>[scroll up]</a>
</div>
<div id=&quot;Layer1&quot; style=&quot;position:absolute; left:9px; top:55px; width:361px; height:238px; z-index:1; background-color: #FFFF66; layer-background-color: #FFFF66; border: 1px none #000000; visibility: hidden;&quot;></div>
<a href=&quot;#&quot; onMouseOver=&quot;MM_showHideLayers('divUpControl1','','show','divUpControl2','','hide','Layer1','','show','divDownControl1','','show','divDownControl2','','hide','divContainer1','','show','divContent1','','show','divContainer2','','hide','divContent2','','hide')&quot;>Show scroll area1</a>
<div id=&quot;divDownControl1&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;scrollDown('1')&quot; onMouseOut=&quot;stopScroll()&quot;>[scroll down]</a>
</div>
<div id=&quot;divDownControl2&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;scrollDown('2')&quot; onMouseOut=&quot;stopScroll()&quot;>[scroll down]</a>
</div>
<div id=&quot;divContainer1&quot;>
<div id=&quot;divContent1&quot;>
<b>Scroll Area 1 Content Start</b>
<p> Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum
soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim
placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend.
Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe
eveniet ut er repudiand sint et molestia non este recusand.
<p>Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum
soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim
placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend.
Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe
eveniet ut er repudiand sint et molestia non este recusand.
<b>Scroll Area Content End</b>
</div>
</div>
<div id=&quot;divContainer2&quot;>
<div id=&quot;divContent2&quot;>
<b>Scroll Area 2 Content Start</b>
<p> Hello there. Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum
soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim
placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend.
Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe
eveniet ut er repudiand sint et molestia non este recusand.
<p>Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum
soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim
placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend.
Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe
eveniet ut er repudiand sint et molestia non este recusand.
<b>Scroll Area Content End</b>
</div>
</div>
<a href=&quot;#&quot; onMouseOver=&quot;MM_showHideLayers('divUpControl1','','hide','divUpControl2','','show','Layer1','','show','divDownControl1','','hide','divDownControl2','','show','divContainer1','','hide','divContent1','','hide','divContainer2','','show','divContent2','','show')&quot;>Show scroll area 2</a> <a href=&quot;#&quot; onMouseOver=&quot;MM_showHideLayers('divUpControl1','','hide','divUpControl2','','hide','Layer1','','hide','divDownControl1','','hide','divDownControl2','','hide','divContainer1','','hide','divContent1','','hide','divContainer2','','hide','divContent2','','hide')&quot;>Other Link</a>
</body>
</html>
 
Upvote 0 Downvote
I see, big project. *stormbind falls asleep* ;)

I feel this will be easier to solve if the division has position:absolute but that's not essential

You would need buttons for scroll up/down or would you be aiming for automated oscilations?

This is a snippet from one of my scripts which used scrolling layers. Hopefully demostrates the concept.

if (document.layers){
with (document){
layers.dev.moveBy(0,data.cntl.value);
if (layers.dev.top>100){layers.dev.clip.height=200-layers.dev.top;
} else {
layers.dev.clip.top=100-layers.dev.top;
}

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Oh, scrap my post then. I typed it while you posted ;)

Your script appears to have suffered some mutilation by the tek-tips forum :(

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

metaphiz
  • Locked
  • Question Question
Check all checkboxes and show layers
Replies
1
Views
181
tsuji
tsuji
RyHenson
  • Locked
  • Question Question
Show/Hide Layers and SIFR
Replies
3
Views
177
BillyRayPreachersSon
BillyRayPreachersSon
kylebellamy
  • Locked
  • Question Question
Hide Other Layers on clicking link
Replies
5
Views
269
grtammi
grtammi
ericaalicen
  • Locked
  • Question Question
loop and set multiple layers
Replies
2
Views
181
ericaalicen
ericaalicen
coolicus
  • Locked
  • Question Question
automatically toggle visability of layers
Replies
1
Views
173
jez
jez

Part and Inventory Search

Sponsor

Back
Top