Forum Moderators: open

Message Too Old, No Replies

Scrollable and collapsible text problem

         

may_hem1

12:06 pm on Aug 3, 2004 (gmt 0)

10+ Year Member



Hi I wonder if you can help? I'm using layers to create a scrollable text area. The content of this layer contains collabsable text for hiding and showing the news content of news headers. My problem is that whenever I click on the expand button it moves the text up rather then just down and I can't see the top of the article. If the scrolling worked all the way up then It wouldn't be a problem but the scrolling only goes up to certain point and the top content of article can be viewed just after refreshing the page.

Please if you experienced a similar problem yourself or know what to do help me.

Thanks

May

korkus2000

1:36 pm on Aug 3, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



can you post your expand function? Does this happen in all browsers?

may_hem1

2:06 pm on Aug 3, 2004 (gmt 0)

10+ Year Member



It doesn't happen in Netscape. But happens in IE 6.0.

When the collapsible area isn't within div tags for scrollable text it doesn't cause the problems either.

The code for collapsible area is:

<script language="javascript" type="text/javascript">
<!--
function show(which){
if (document.getElementById && document.createTextNode){
m=document.getElementById("menu");
trig=m.getElementsByTagName("div").item(which).style.display;
if (trig=="block") trig="none";
else if (trig=="" ¦¦ trig=="none") trig="block";
m.getElementsByTagName("div").item(which).style.display=trig;
varhighlighttext="-";
varnormaltext="+";
t=m.getElementsByTagName("b").item(which);
h=t.getElementsByTagName("a").item(0).firstChild;
if (trig=="none"){h.nodeValue=h.nodeValue.replace(highlighttext,normaltext);}
else {h.nodeValue=h.nodeValue.replace(normaltext,highlighttext);}
}
}
//-->
</script>
<style type="text/css">#menu div {display:none;}</style>

<noscript>
<style type="text/css">
#menu div{display:block;}.content1 {font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px; }
</style>
</noscript>
<script language="JavaScript">
<!--

if (!document.getElementById &&!document.createTextNode){
document.write('<style type="text/css">#menu div{display:block;}</style>')
}
//-->
</script>

If it doesn't help I can post the code for the scrollable text as well.

Thanks for looking into it!

korkus2000

2:21 pm on Aug 3, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes could you post the scroll code.

may_hem1

2:31 pm on Aug 3, 2004 (gmt 0)

10+ Year Member



The scrollable area code is:

<style type="text/css">
<!--
/* layer links */
td.navs a { line-height:1.6 }

/* for newer browsers */
@media screen {
h1, h2, p { margin: 0 0 .4em 0 }
table.main { background-color:#f0f0f0; border:1px solid #999; }
}

/* for scrolling layers
Specify width and height in hold and wn, and in clip for wn */
#hold{
position:relative;
overflow:hidden;
width:450px;
height:350px;
z-index:100;
background-image:url(images/starbucks_and_newspaper_box5.jpg);
background-repeat: no-repeat;

}
#wn{
position:absolute;
left:0px; top:2px;
width:450px; height:350px;
clip:rect(4px,446px,346px,4px);
overflow:hidden;
z-index:1;
}
#lyr1{
position:absolute; visibility:hidden;
left:0px; top:0px;
z-index:1;
}
/* font spec's for layer content (ns4 doesn't inherit) */
.content{ font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px; }
.style7 {font-size: 10px}
-->
</style>

<script src="js/dw_core.js" type="text/javascript"></script>
<script src="js/dw_scroll.js" type="text/javascript"></script>
<script type="text/javascript">
<!--

var pgLoaded = false;
var wndo = new Array();// "window(s)" for scrollable content
function initScrLyr() {
pgLoaded=true;
// creat scrollable content area
// arg: id of div containing scrollable div(s)
wndo[0] = new dynObj('wn');
// load scrolling content
// arg's: array number of wndo, id of scroll div
loadScrLyr(0,'lyr1');

// remove layers from table for ns6+/mozilla (overflow/clip bug?)
if (navigator.userAgent.indexOf("Gecko")>-1) {
for (var i=0; i<wndo.length; i++) {
if (wndo[i].el.parentNode.id.indexOf("hold")!=-1) {
var holderId = wndo[i].el.parentNode.id;
wndo[i].holder = document.getElementById(holderId);
var scrWn = wndo[i].holder.removeChild(wndo[i].el);
document.body.appendChild(wndo[i].el);
wndo[i].css.zIndex = 1000;
var y = wndo[i].holder.offsetTop;
var x = wndo[i].holder.offsetLeft;
wndo[i].shiftTo(x,y);
}
}
}
}

// ns6+/mozilla need to reposition layers onresize
function rePosGecko() {
for (var i=0; i<wndo.length; i++) {
var y = wndo[i].holder.offsetTop;
var x = wndo[i].holder.offsetLeft;
wndo[i].shiftTo(x,y);
}
}

window.onload = initScrLyr;
if (navigator.userAgent.indexOf("Gecko")>-1) window.onresize = rePosGecko;
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(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>