# has anyone used the scrollable content script on Dynamic Drive



## aconite (Feb 1, 2006)

Hi,

I am using the scrollable content script on Dynamic Drive but would very much like some help, the script is below:

<ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
<layer name="nscontent" width=175 height=160 visibility=hidden>



- DHTML is the
combination of HTML, JavaScript, and CSS

- DOM stands for Document Object Model

- DHTML allows
content on a page to change on the fly, without reloading the page

- CSS allows for the separation between content
definition and formatting

- CSS stands for Cascading style sheet

- Dynamic
Drive provides free, cut and paste DHTML scripts



</layer>
</ilayer>



[TD]





[/TD]

I already have a box for the content to go in but the above script produces another box which I can't seem to get rid of.

<ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
does the 0,0 in clip="0,0,175,160", the x and y co-ordinates.
Any explanation greatly appreciated


----------



## tomdkat (May 6, 2006)

I've used this script before. Can you post the HTML you're using with it?

Peace...


----------



## aconite (Feb 1, 2006)

tomdkat,

below is the html and thanks for your help, is it better to use the script container rather than my box, although my box has rounded corners:




Welcome
CB1 Massage
Prices
What To Expect
Contact



















<ilayer name="nscontainer" width=473 height=335 clip="0,0,473,335">
<layer name="nscontent" width=473 height=335 visibility=hidden left="329" top="125">



Sports & relaxation massage will dramatically improve the quality of your life by relieving occupational


</layer></ilayer>

 


CSS
#container {background-color:#FFFFFF; 
width:810px; 
height:608px; 
border:1px solid #D5D0D0; 
position:absolute;
top:9em;
margin-left:16%;
}
/*Content box in container*/ 
#content {
margin-top:-42%; 
margin-left:40%; 
}
.mainText {
margin-left:40%;
margin-right:8%;
font-size:1.2em;
font-family:"Trebuchet MS";
font-weight:normal;
text-align:justify;
color:#000000;
}

.maincontent {
font-size:1.2em;
font-family:"Trebuchet MS";
font-weight:normal;
text-align:justify;
color:#000000;
padding:2%;
}

/*up & down arrows*/
.up {
margin:355px 0 0 695px;
}
.down {
margin:-17px 87px 0 0;
float:right;
}


----------



## tomdkat (May 6, 2006)

Ok, here's the short version: look in the pudding? Why? That's where the proof is. 

All joking aside, it will probably be easier for you to apply your rounded corner styling to the DIV created by the script than to inject your own DIV inside the inner <layer> element:


```
if (iens6){
document.write('[b]<div id="container" [color=red]class="maincontent"[/color]>[/b]')
document.write('<div id="content" style="position:absolute;left:150;top:50">')
}
</script>
<ilayer name="nscontainer" width=473 height=335 clip="0,0,473,335">
```
See what that does for you.

I didn't see the rounded corner styling in what you posted. Did you simply not post that?

Peace...


----------



## tomdkat (May 6, 2006)

An even better option is to put the ilayer stuff INSIDE your content DIV, that has the rounded corners, like this:


```
[b][color=red]<div class="content">[/color][/b]

<script type="text/javascript">
/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
iens6=document.all||document.getElementById
ns4=document.layers
//specify speed of scroll (greater=faster)
var speed=5
if (iens6){
[b][color=red]document.write('<div id="container">')
document.write('<div id="content" style="position:absolute;left:0;top:0">')[/color][/b]
}
</script>
[b][color=red]<ilayer name="nscontainer">
<layer name="nscontent" visibility="hidden">[/color][/b]
<!--INSERT CONTENT HERE-->
<p>This is the content that will be scrolled!!!!</p>

<P>Wee!!!!!!!!</P>
<P>Is it simply that I need more content in order for the scrolling to take effect?</p>
<P>It certainly does look like the more content that is added, the more the scrolling will take effect.</P>
<P>This is really neat! </P>
<!--END CONTENT-->
</layer></ilayer>

<script language="JavaScript1.2">
if (iens6) {
document.write('</div></div>')
}
</script>
[b][color=red]</div>[/color][/b]

<table width="800">
```
Hope that helps! 

Peace....


----------



## aconite (Feb 1, 2006)

thanks tomdkat for your help and merry xmas, will try your second option but have a question, maybe two,
for the rounded corner in my css I used

css
#contentBox {margin-top:3%; 
border:1px solid #d5d0d0;
-webkit-border-radius: 5px; 
-moz-border-radius:5px; border-radius:5px; 
width:473px; 
height:335px; 
float:right; 
margin-right:4%;}
but this doesn't seem to work in IE, so is it better to write something else as I found this code much easier for the rounded corners rather then having to have images.


----------



## tomdkat (May 6, 2006)

border-radius is part of CSS3, which is something IE won't support yet. I don't think IE8 will even support it but I'm not sure. I would find another solution that works with IE until it "comes up to speed" with CSS3 support. Here is such an example.

Good luck!

Peace...


----------



## aconite (Feb 1, 2006)

tomdkat,
can I pm you as I still can't get the script to work
your help is very much appreciated


----------



## tomdkat (May 6, 2006)

Yep, you sure can. 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, I've got something working. Ready to tackle the rounded borders?

Peace...


----------

