6 replies to this topic

[Orca239]

Alright well I've been working and modifying this template for about a year now I think and I've started used JavaScript in it (bad to use templates I know, but I can't design them x_x).

So I'm trying to put a vertical scroll box in my side events panel to save space, but it won't recognize the script. It takes the horizontal one I have as you can see if you look at the site, but not the vertical. Actually it won't take anything in that little panel.

So my question really is, what could cause a javascript code to not work on a certain webpage or spot or something. Thanks.

Here's the website: http://www.dothacktw...t.ampedhost.com

Edited by Orca239, 07 March 2007 - 01:40 AM.

[faulty.lee]

Alright well I've been working and modifying this template for about a year now I think and I've started used JavaScript in it (bad to use templates I know, but I can't design them x_x).

So I'm trying to put a vertical scroll box in my side events panel to save space, but it won't recognize the script. It takes the horizontal one I have as you can see if you look at the site, but not the vertical. Actually it won't take anything in that little panel.

So my question really is, what could cause a javascript code to not work on a certain webpage or spot or something. Thanks.

Here's the website: http://www.dothacktw...t.ampedhost.com

I've been to the page, and i didn't see any part of the javascript in your page that's trying to put a scroll bar at the events panel. Maybe you can paste a snippet of the code that you try to use which didn't work, so we can take a look at it.

Another easier way around this is to use iframe, and the place the events content into a separate page, or you can also use DOM to insert it into the frame, without loading another page.

Btw, quite a nice site. Cool picture. Are those are your own artwork?

[Orca239]

No, those aren't my arts, they're just some renders. You wouldn't see the code because I took it out, let me just post the javascript I'm trying to place there and see if that helps any.

<script language="javascript">

//Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com
//Updated for bug fixes
//Visit JavaScript Kit (http://javascriptkit.com) for script

//ENTER CONTENT TO SCROLL BELOW.
var content='<p>Visit <a href="http://www.javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials and over 400 <font color="#FF0000">free</font> scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';

var boxheight=150;		// BACKGROUND BOX HEIGHT IN PIXELS.
var boxwidth=150;		 // BACKGROUND BOX WIDTH IN PIXELS.
var boxcolor="#FFF6e9";   // BACKGROUND BOX COLOR.
var speed=50;			 // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
var pixelstep=2;		  // PIXELS "STEPS" PER REPITITION.
var godown=false;		 // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// DO NOT EDIT BEYOND THIS POINT

var outer,inner,elementheight,ref,refX,refY;
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var txt='';
if(ns4){
txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>';
txt+='<ilayer name="ref" bgcolor="'+boxcolor+'" width='+boxwidth+' height='+boxheight+'></ilayer>';
txt+='</td></tr></table>'
txt+='<layer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width='+boxwidth+' height='+boxheight+'>';
txt+='<layer  name="inner"  width='+(boxwidth-4)+' height='+(boxheight-4)+' visibility="hidden" left="2" top="2" >'+content+'</layer>';
txt+='</layer>';
}else{
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner"  style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
}
document.write(txt);

function getElHeight(el){
if(ns4)return (el.document.height)? el.document.height : el.clip.bottom-el.clip.top;
else if(ie4||ie5)return (el.style.height)? el.style.height : el.clientHeight;
else return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
}

function getPageLeft(el){
var x;
if(ns4)return el.pageX;
if(ie4||w3c){
x = 0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}}

function getPageTop(el){
var y;
if(ns4)return el.pageY;
if(ie4||w3c){
y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}}

function scrollbox(){
if(ns4){
inner.top+=(godown)? pixelstep: -pixelstep;
if(godown){
if(inner.top>boxheight)inner.top=-elementheight;
}else{
if(inner.top<2-elementheight)inner.top=boxheight+2;
}}else{
inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
if(godown){
if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
}else{
if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
}}}

window.onresize=function(){
if(ns4)setTimeout('history.go(0)', 400);
else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
}}

window.onload=function(){
outer=(ns4)?document.layers['outer']:(ie4)?document.all['outer']:document.getElementById('outer');
inner=(ns4)?outer.document.layers['inner']:(ie4)?document.all['inner']:document.getElementById('inner');
ref=(ns4)?document.layers['ref']:(ie4)?document.all['ref']:document.getElementById('ref');
elementheight=getElHeight(inner);
if(ns4){
outer.moveTo(getPageLeft(ref),getPageTop(ref));
outer.clip.width=boxwidth;
outer.clip.height=boxheight;
inner.top=(godown)? -elementheight : boxheight-2;
inner.clip.width=boxwidth-4;
inner.clip.height=elementheight;
outer.visibility="show";
inner.visibility="show";
}else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
inner.style.top=((godown)? -elementheight : boxheight)+'px';
inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
outer.style.visibility="visible";
}
setInterval('scrollbox()',speed);
}
</script>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://www.javascriptkit.com">JavaScript
Kit</a></font></p>

Kinda long, sorry. But like I said, whenever I try to put any kind of javascript in that panel it doesn't recognize it or let it work or something. I thought maybe it had to do with being in a certain kind of html tags or something but I really have no idea. I also tried sizing the scroller down to be smaller than the panel and it still didn't show. Thanks for your help.

[faulty.lee]

This script is standalone and working. It's better if you can show us how you apply it into your own page. Maybe you can upload the index with a different file name, so we can test it directly from here.

It's important for you to show us your way of implementing it, so we can really see the problem.

Btw, if you're using firefox, you can try get "firebug" very good to help solve webpage problem like this.

[closed]

that script use document.write(), as i heard elsewhere that function - the document.write(); doesn't work when placing contents at certain area of the page.

commonly they used innerHTML or certain DOM functions - not familiar with it thought, i suggest to search for an updated scrolling script.

[mastercomputers]

Hey subo,

If you could provide the page before you made the javascript external, it'll help me understand what to do, or you could provide the javascript files. To me it might be you're only calling one script when you need to call both in your <body onload=... line. If you do need to call two functions, just insert a semi-colon ; between it and call the other function too, another problem could be the body hasn't completely loaded when trying to use the scripts on the document.

Also always put your javascript files in LIFO order, e.g. the first external script file would be called last, while the last external script file would be the one you want first. This means all the script files will be loaded first before needing to use them.


Cheers,


MC