Scrolling text boxes, with custom scroll bars

I have several pages I need scrolling text boxes on. They need to be a percise size because they fit in the middle of a page. How do I do this in dreamweaver? I have Dreamweaver MX, do I do it in a Layer, or does it need to be frames? A Form Object? I'm just not sure. Also is there a way I can make custom Scroll bars (color and shape?) I will post the example at www.douganfarms.com/ahi/example.html
Thaks in Advance, John
douganfarmsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

douganfarmsAuthor Commented:
Skip the custom scroll bars, I did some research and I don't think it's worth the work.THanks John
0
Jason C. LevineNo oneCommented:
John,

You can do a couple of things:

CSS allows some control over the scroll bars and size of divs.

Flash allows a TON of it.  You may want to investigate creating a flash movie that holds the scrolling text box.  It sounds like the best possible solution.
0
douganfarmsAuthor Commented:
Flash is not really an option, as the client wants to be able to content manage the scrolling text box. How or where do I find out more about the CSS solution? Thanks, John
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Jason C. LevineNo oneCommented:
Coloring and controllable elements of scrollbars:

http://www.htmlite.com/CSS011.php
http://rainbow.arch.scriptmania.com/css/css_scrollbars.html

To create an inline scrolling box:

http://www.quackit.com/css/css_scrollbars.cfm

Combine the lesson in the last link with the information in the first two to get the maximum effect.

Flash could still be an option for you...There is nothing that says the content of the scroll box has to be hard-coded into Flash.  ActionScript is perfectly capable of calling an external file or database and reading the text of it into the movie.  In fact, that is how most Flash-based sites work.  Someone creates the page elements (navigation, graphics, animations, sound) that surround a content area.  The content area pull in text from external files or a database that someone other than the flash developer can control.

If you want the specifics, post a question in the Flash TA or just search it...this is a common task.
0
klykkenCommented:
Set a specific height and width on your layer, and then set overflow to auto or scroll.
0
douganfarmsAuthor Commented:
Klykken, howdo I set speciftc height and width to the layer? Then can I table the whole page if there are no layer overlaps?
Thnaks, John
0
Jason C. LevineNo oneCommented:
douganfarms,

read the third link I posted:

<style>
.contentBox {
      display:block;
      border-width: 1px;
      border-style: solid;
      border-color: 000;
      padding:5px;
      margin-top:5px;
      width:200px;
      height:50px;
      overflow:scroll
      }
</style>
<div class="contentBox">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
0
douganfarmsAuthor Commented:
Jason 1178, thank you for the links, I did read them. I tried the style solution in dreamweaver invironment, and if I put all the text in the box expands on the page, and when I say "convert to 3.0 compatible" layers to tables. It says I can't do it because layer 18 overlaps layer 19? Should I first build the page, tabel it then paste the text?
John
0
klykkenCommented:
If you want to support version 3 browers then forget about it.
0
Jason C. LevineNo oneCommented:
You don't want to convert that div to a table cell, it loses the properties of the div.  Just stick the div in the cell and set the size and it should pull the size of the cell to match.

Set up the layers and covert to a table so the layout is the way you want it.  Then replace the cell contents with the div and add the style.  That ought to achieve the effect you are looking for.

Can you post a link so I can take a look at what you are trying to do?  Hopefully we are on the same page here.
0
Jason C. LevineNo oneCommented:
Whoops

Forget about posting the link.  I forgot you did it in the original question
0
Jason C. LevineNo oneCommented:
John,

Here's sort of what I mean.  I may have picked the wrong cell to fix (when they are named layer1 through layer20, that can happen):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ahi Sushi</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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);

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];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

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 MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style>
.contentBox {
     display:block;
     border-width: 1px;
     border-style: solid;
     border-color: 000;
     padding:5px;
     margin-top:5px;
     width:160px;
     height:305px;
     overflow:scroll
     }
</style>
</head>
<body onLoad="MM_preloadImages('images/homdrink_nav2.gif','images/homdelivery_nav2.gif','images/hompress_nav2.gif','images/homeabout_nav2.gif','images/hom_online2.gif','images/homfood_nav2.gif','images/food_sub_sushi2.gif','images/food_sub_lowcarb2.gif','images/food_sub_lunch2.gif','images/food_sub_dinner2.gif','images/food_sub_speacials2.gif','images/food_sub_desserts2.gif','images/food_sub_takeout2.gif','images/food_sub_sushi1.gif','images/homfood_nav1.gif')">
<div id="Layer1" style="position: absolute; left: 120px; top: 11px; width: 141px; height: 122px; z-index: 1"><a href="index.html"><img src="images/homlogo_lft.gif" width="141" height="122" border="0" /></a></div>
<div id="Layer2" style="position: absolute; left: 261px; top: 11px; width: 102px; height: 88px; z-index: 2"><a href="index.html"><img src="images/homlogo_rt.gif" width="102" height="88" border="0" /></a></div>
<div id="Layer3" style="position: absolute; left: 540px; top: 62px; width: 60px; height: 37px; z-index: 3"><a href="sushi.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/homfood_nav2.gif',1)"><img src="images/homfood_nav2.gif" alt="food menue" name="Image12" width="60" height="37" border="0" id="Image12" /></a></div>
<div id="Layer4" style="position: absolute; left: 600px; top: 62px; width: 60px; height: 37px; z-index: 4"><a href="drink.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/homfood_nav1.gif','Image8','','images/homdrink_nav2.gif',1)"><img src="images/homdrink_nav1.gif" alt="ahi sushi drinks" name="Image8" width="60" height="37" border="0" id="Image8" /></a></div>
<div id="Layer5" style="position: absolute; left: 660px; top: 62px; width: 60px; height: 37px; z-index: 5"><a href="delivery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/homfood_nav1.gif','Image9','','images/homdelivery_nav2.gif',1)"><img src="images/homdelivery_nav1.gif" alt="ahi sushi delivery" name="Image9" width="60" height="37" border="0" id="Image9" /></a></div>
<div id="Layer6" style="position: absolute; left: 720px; top: 62px; width: 60px; height: 37px; z-index: 6"><a href="press.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/homfood_nav1.gif','Image10','','images/hompress_nav2.gif',1)"><img src="images/hompress_nav1.gif" alt="ahi sushi press section" name="Image10" width="60" height="37" border="0" id="Image10" /></a></div>
<div id="Layer7" style="position: absolute; left: 780px; top: 62px; width: 40px; height: 37px; z-index: 7"><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/homfood_nav1.gif','Image11','','images/homeabout_nav2.gif',1)"><img src="images/homabout_nav1.gif" alt="about ahi sushi" name="Image11" width="40" height="37" border="0" id="Image11" /></a></div>
<div id="Layer8" style="position: absolute; left: 820px; top: 62px; width: 142px; height: 93px; z-index: 8"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','images/hom_online2.gif',1)"><img src="images/hom_online1.gif" alt="online lunch menue" name="Image14" width="142" height="93" border="0" id="Image14" /></a></div>
<div id="Layer9" style="position: absolute; left: 261px; top: 99px; width: 132px; height: 35px; z-index: 9"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi2.gif',1)"><img src="images/food_sub_sushi2.gif" alt="ahi sushi and sashimi menu" name="Image13" width="132" height="35" border="0" id="Image13" /></a></div>
<div id="Layer10" style="position: absolute; left: 393px; top: 99px; width: 71px; height: 35px; z-index: 10"><a href="lowcarb.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image15','','images/food_sub_lowcarb2.gif',1)"><img src="images/food_sub_lowcarb1.gif" alt="low carb menu" name="Image15" width="71" height="35" border="0" id="Image15" /></a></div>
<div id="Layer11" style="position: absolute; left: 464px; top: 99px; width: 54px; height: 35px; z-index: 11"><a href="lunch.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image16','','images/food_sub_lunch2.gif',1)"><img src="images/food_sub_lunch1.gif" alt="ahi sushi lunch menu" name="Image16" width="54" height="35" border="0" id="Image16" /></a></div>
<div id="Layer12" style="position: absolute; left: 518px; top: 99px; width: 60px; height: 35px; z-index: 12"><a href="dinner.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image17','','images/food_sub_dinner2.gif',1)"><img src="images/food_sub_dinner1.gif" alt="ahi sushi dinner menu" name="Image17" width="60" height="35" border="0" id="Image17" /></a></div>
<div id="Layer13" style="position: absolute; left: 578px; top: 99px; width: 72px; height: 35px; z-index: 13"><a href="specials.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image18','','images/food_sub_speacials2.gif',1)"><img src="images/food_sub_speacials1.gif" alt="ahi sushi speacials menu" name="Image18" width="72" height="35" border="0" id="Image18" /></a></div>
<div id="Layer14" style="position: absolute; left: 650px; top: 99px; width: 70px; height: 35px; z-index: 14"><a href="desserts.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image19','','images/food_sub_desserts2.gif',1)"><img src="images/food_sub_desserts1.gif" alt="ahi sushi desserts menu" name="Image19" width="70" height="35" border="0" id="Image19" /></a></div>
<div id="Layer15" style="position: absolute; left: 720px; top: 99px; width: 100px; height: 35px; z-index: 15"><a href="takeout.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image20','','images/food_sub_takeout2.gif',1)"><img src="images/food_sub_takeout1.gif" alt="ahi sushi take out menu" name="Image20" width="100" height="35" border="0" id="Image20" /></a></div>
<div id="Layer16" style="position: absolute; left: 261px; top: 134px; width: 15px; height: 305px; z-index: 16"><img src="images/food_lft_pic.gif" width="15" height="305" /></div>
<div id="Layer17" style="position: absolute; left: 660px; top: 134px; width: 160px; height: 305px; z-index: 17">
<div class="contentBox">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>

</div>
<div id="Layer18" style="position: absolute; left: 120px; top: 439px; width: 836px; height: 120px; z-index: 18"><img src="images/food_bottom_pic.jpg" width="836" height="120" /></div>
</body>
</html>

By replacing the image in layer17 with the sample from the link, you get a scrolling text box with that content.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
douganfarmsAuthor Commented:
Thanks, Jason 1178
I did get it to work, you can see the final product in about a week at http://www.ahisushi.com
Thanks everyone for your help, John
0
Jason C. LevineNo oneCommented:
Great!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.