PDA

View Full Version : addind a scrollbar?

tkdgurl927
04-09-2004, 08:30 PM
how do you add a scrollbar to the content of your your layout? thanks!
Valkyrie
04-09-2004, 08:33 PM
Are you using an iframe or divs?
tkdgurl927
04-09-2004, 09:13 PM
im using divs :)
MaGiCSuN
04-09-2004, 09:45 PM
<div style="width: #px; height: #px; overflow: auto;">
text here
</div>

change both #px to a certain number
example: 2px

width has to filled in, otherwise the scrollbar will not appear :)

Love,
Mirna
tkdgurl927
04-09-2004, 10:58 PM
heres what i mean here (http://www.freewebs.com/toadgirl724/) i want the content box to have a scrollbar that fits to the right inside of the box. what mirna said didnt work,it gave me a lil scrollbar, but i couldnt move it to the place i wanted & i didnt want the text part. it kinda got messed up. i wanted a colored scrollbar too. is there any way it would work so all the content would still be in the box when i scrolled?(im using it as a blog, so there will be alot of entries, thats why i need a scrollbar) thanks!
tkdgurl927
04-10-2004, 12:02 AM
ahh! n/m i figured it out! lol!
tkdgurl927
04-10-2004, 12:27 AM
oops- wrong post! i still need help! lol!
salomeyasobko
04-10-2004, 12:56 AM
<style type="text/css">
BODY{
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #000000;
}
</style>

that's the scrollbar color code. change the colors to whatever you want and put it after the <head> tag of your coding.

i'm still confused about what's wrong with the code mirna gave you.. can you put it back into your site so i can see what it looks like? then maybe your explanation will make sense to me :lol: thanks.
tkdgurl927
04-10-2004, 02:47 AM
ok i put it back to my site! check here (http://www.freewebs.com/toadgirl724/) how do you make it vertical & how do u postion it where you want? thanks!:)
tkdgurl927
04-10-2004, 04:37 AM
i tried this:- but it only showed the scrollbar, and didnt show my text or tag board.
<div style="position:absolute;top:447 ;left:400">
<div style="width:15; height:754; overflow: auto;">


then i tried this: but it only showed the text and the tagboard, not the scrollbar.
<div style="position:absolute;top:447 ;left:400"></div>
<div style="width:15; height:754; overflow: auto;"></div>

what should i do? how do i fix this? thanks to all who help me!
bourdelson
04-10-2004, 04:32 PM
It seems like the scrollbar isn't showing up now because you don't have enough text to make it appear. Once you have enough content to go beyond the height of the div, the scrollbar should show up.
tkdgurl927
04-10-2004, 06:07 PM
ok now the text & scrollbar show up. but now the text is going out of the box that i wanted it to stay in. i wanted it to stay in the box so then i can scroll down. how do i make the text stay in the box for the scrollbar to work? thx! btw, its on the "about me" page :)
bourdelson
04-10-2004, 06:13 PM
You have overflow:visible; in your div tag. It should be overflow:auto;.

Also, you have left: -25px; in your div tag. You should change it to left:25px; just to prevent any errors in other browsers.

Edit: a side note- Redensek is not a common font on computers, so your site will look different on computers that do not have Redensek downloaded. So, if you view it on someone else's computer, your site will probably have the font Times New Roman instead of Redensek.
tkdgurl927
04-10-2004, 06:32 PM
ok, it still doesn't work. i did what you said.when i put 25px instead of -25 px, it moved the text way over where i didnt want it. is there any way that i could put a height for the box so it would know where to cut the words off and start the scrollbar? thanks! :)
bourdelson
04-10-2004, 06:36 PM
height:#px;

Add that after your width property in your div tag. Play with the height number for a while, and it should work. :)

The reason why your text got moved over is because of this:

#content {

margin-left: 45px;
padding: 0px;
margin-right: 200px;
}

Change margin-left: to 20px, and it should be where you want it.
tkdgurl927
04-10-2004, 06:50 PM
eek! it still doesnt work..i dunno what im doing wrong:
<div id="content" style="position:absolute; z-index:2; top:450px; left: 0px; width:375px; height: 870px;" overflow:auto;">
i did as u said about this: height:#px; but it still doesnt work. whats wrong with my code? thx!
bourdelson
04-10-2004, 06:53 PM
It's probably because you made it 870 pixels. That's really big. Try making it smaller.

Edit: You're missing a semi-colon in your navigation, and I'm not sure, but this might have something to do with it:

<div id="navigation" style="position: absolute; z-index: 2; left: 455px; top: 460px; width: 135px; overflow: visible;">
tkdgurl927
04-10-2004, 07:10 PM
its still the same *sighs* i dont know how to fix it or what i did wrong...
tkdgurl927
04-10-2004, 08:20 PM
oh and when i put my scrollbar code in, my tagboard on that same page goes away.:P could someone please help me with this? im soo confused! thanks!
bourdelson
04-10-2004, 10:01 PM
I went through and cleaned up your code - there were a lot of unnecessary body tags, and some CSS was in the wrong place. Try this and see if it helps any:

<html>
<head>
<title>.::ToadGirl724's ¤ Site::. </title>
<style type="text/css">
body
{background-color:#000000;
font-face:redensek;
color:orange;
font-size:12pt;
scrollbar-arrow-color:66CCFF;
scrollbar-track-color:000000;
scrollbar-shadow-color:000000;
scrollbar-face-color:000000;
scrollbar-highlight-color:000000;
scrollbar-darkshadow-color:66CCFF;
scrollbar-3dlight-color:66CCFF;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

h1 {font-size:14pt;
color:pink;}

font{font-size:8pt;
color:orange;}

A:link {text-decoration:none; }
A:visited {text-decoration:none; }

#menu {
position: absolute;
right: 75px;
padding: 200px;
width: 20px;
}

#content {

margin-left: 20px;
padding: 0px;
margin-right: 200px;
}

</style>
<SCRIPT LANGUAGE="JavaScript1.2" type="text/javascript">

<!--This mouse fireworks script is provided free at http://www.lissaexplains.com -->
<!--The author of this script is the awesome Matt Gabbert (mgabbert@usrtoday.com) -->

<!-- Begin
var ver = navigator.appVersion;
var dom = document.getElementById ? 1 : 0;
var ie5 = (ver.indexOf("MSIE 5") > -1 && dom) ? 1 : 0;
var n = (document.layers);
var ie = (document.all);

var sparksAflyin = 0;
var totalSparks = 0;
var sparksOn = 1;
function initMouseEvents() {
document.onmousedown = mouseDown;
if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
}
function mouseDown(e) {
if (sparksOn) {
var mou^^^ = (n) ? e.pageX : event.x+document.body.scrollLeft;
var mousey = (n) ? e.pageY : event.y+document.body.scrollTop;
if (!sparksAflyin) {
for (var k = 0; k <= 9; k++)
eval('SHOW("sDiv'+k+'")');
sparksAflyin = 1;
totalSparks = 0;
for(i = 0;i <= 9; i++)
eval('moveTo('+i+',0,'+mou^^^+','+mousey+')');
}
}
}
function moveTo(i,j, mou^^^, mousey){
if (j < eval('anim_'+i+'_x.length') ){
var tempx = eval('anim_'+i+'_x[j]+mou^^^');
var tempy = eval('anim_'+i+'_y[j]+mousey');
if (ie) {
if(tempy+30 > (document.body.offsetHeight+document.body.scrollTo p))
tempy = document.body.offsetHeight+document.body.scrollTop-30;
if(tempx+30 > (document.body.offsetWidth+document.body.scrollLef t))
tempx = document.body.offsetWidth+document.body.scrollLeft-30;
eval('document.all.sDiv'+i+'.style.left = tempx;');
eval('document.all.sDiv'+i+'.style.top = tempy;');
}
if (n) {
eval('document.layers.sDiv'+i+'.left = tempx;');
eval('document.layers.sDiv'+i+'.top = tempy;');
}
j++;
// timeout: 50 = fireworks speed, larger number = slower speed
setTimeout("moveTo("+i+","+j+","+mou^^^+","+mousey+")",50)
}
else {
eval('HIDE("sDiv'+i+'")');
totalSparks++;
}
if (totalSparks == 10) {
sparksAflyin = 0;
totalSparks = 0;
}
}
function SHOW(divName){
if (document.all)
eval('document.all.'+divName+'.style.visibility = "visible";');
else if (document.layers)
eval('document.layers["'+divName+'"].visibility = "visible";');
}
function HIDE(divName){
if (document.all)
eval('document.all.'+divName+'.style.visibility = "hidden";');
else if (document.layers)
eval('document.layers["'+divName+'"].visibility = "hide";');
}
anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0);
anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80);
anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,15 2,181);
anim_1_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18);
anim_2_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_3_x=new Array(-20,-20,-2,-1,7,10,18,35,60,102,94,94,93,97,108,111,117,127);
anim_3_y=new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,-151,-101,-66,-17,27,87,140,189);
anim_4_x=new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,-209,-191,-207,-203,-213,-202,-221,-211);
anim_4_y=new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,-149,-134,-89,-60,8,51,107,157,201);
anim_5_x=new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,-247,-270,-279,-282,-283,-283,-285,-286,-288);
anim_5_y=new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,-169,-120,-44,-8,40,87,144,190,248);
anim_6_x=new Array(-20,-20,-7,14,44,79,143,186,217,226,234,244,250,259,265,274 );
anim_6_y=new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,-3,54,134,187,215,257);
anim_7_x=new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,-136,-150,-160,-164,-168,-171,-172,-172,-176,-175);
anim_7_y=new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,-240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68);
anim_8_x=new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,-11,16,49,64,81,93,100,103,109);
anim_8_y=new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,-180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188);
anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,-277,-281,-287);
anim_9_y=new Array(-20,-20,-35,-37,-34,-16,10,47,105,150,189,227,273);
// End -->
</script>
</head>
<body OnLoad="initMouseEvents()" text="yellow" link="yellow" vlink="green" alink="orange">
<img src="horselayout3.png">
<div id="navigation" style="position: absolute; z-index: 2; left: 455px; top: 460px; width: 135px; overflow: visible;">
<font>
<a href="http://www.freewebs.com/toadgirl724/"style="cursor:crosshair;">Home</a><br>
<a href="http://www.freewebs.com/toadgirl724/aboutme.html"style="cursor:crosshair;">About Me</a></font>
</div>
<div id="content" style="position:absolute; z-index:2; top:450px; left: 0px; width:375px; height: 405px;" overflow:auto;">
<h1><p class="head">About Me!</p></h1>
<b>Birthday:</b> 9-27-87<br>
<br>
<b>Middle Name:</b> Marie<br>
<br>
<b>Eye Color:</b> Blue<br>
<br>
<b>Height:</b> 5'7"<br>
<br>
<b>Location:</b> Wisconsin<br>
<br>
<b>Fave Color:</b> Blue<br>
<br>
<b>Fave Foods:</b> Ice cream, pizza, Hot Pockets, Lay's potato chips, oranges, strawberries, grapes, watermelon, grapefruit, cherry pie, chicken nuggets, oreos, chocolate chip cookies, salami, sour stuff, Cheese Itz, grilled chicken sandwich, french fries, chocolate, Milky Way, Twix, cheeseburger, Cousin's Subs, Philly Steak & cheese sandwich, Dairy Queen's frozen ice cream cakes, & more!<br>
<br>
<b>Fave Drinks:</b> All flavors of Mt. Dew, raspberry lemonade, orange soda, malts & shakes, & Aquafina water.<br>
<br>
<b>Fave Restaurants:</b> Brisco County Wood Grill, McDonalds, Culvers<br>
<br>
<b>Fave Animal:</b> Straight Egyptian Arabian Horse<br>
<br>
<b>Fave Kind of Music/Songs:</b> Anything on 103.7 KISS FM<br>
<br>
<b>Fave Car:</b> 2000-2004 Corvette<br>
<br>
<b>Fave Movie:</b> The Ring, The Black Stallion 1 & 2, Final Destination 2<br>
<br>
<b>Fave Teacher:</b> Mrs. Roe<br>
<br>
<b>Fave Stores:</b> Almost anything in Brookfield Square Mall<br>
<br>
<b>Hobbies:</b> Yachting, Taekwondo, Volunteering at the Ranch, hanging out with my friends, going to movies, Designing websites & learning HTML, going to Six Flags, going up north in the summer, & going on the internet(obviously)!<br>
<br>
<b>Current Pets:</b> A 10 year old female purebred Curly Coated Retriever named Bingo, & my bro has a male Chinese Big-Headed turtle.<br>
<br>
<b>Things I Want:</b> A horse & a cell phone.<br>
<br>
<b>Likes:</b>Hott Guys, tall guys, guys with a nice body, funny, sweet, & sporty guys.<br>
<br>
<b>Dislikes:</b> Stuck up people, ^^^^^y girls, people who think they're better than everybody, liars, cheaters, people who blame their problems on others, sarcastic people, conceited people.
</font>
</div>
<div id="tagboard" style="position: absolute; z-index: 2; left: 447.5px; top: 925px; width: 130px; overflow: auto;">
<!-- BEGIN MYSHOUTBOX.COM CODE -->
<iframe src="http://111458.myshoutbox.com/" width="148.5" height="259" frameborder="0" allowTransparency="true"></iframe>
<!-- END MYSHOUTBOX.COM CODE-->
</div>
<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><font face="courier new, symbol,wingdings,arial" color="#3333FF" size="2"><b>*</b></font></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><font face="courier new, symbol,wingdings,arial" color="#FFFF00" size="2"><b>*</b></font></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><font face="courier new, symbol,wingdings,arial" color="#3333FF" size="2"><b>*</b></font></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><font face="courier new, symbol,wingdings,arial" color="#FFFF00" size="2"><b>*</b></font></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><font face="courier new, symbol,wingdings,arial" color="#3333FF" size="2"><b>*</b></font></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><font face="courier new, symbol,wingdings,arial" color="#FFFF00" size="2"><b>*</b></font></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><font face="courier new, symbol,wingdings,arial" color="#3333FF" size="2"><b>*</b></font></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><font face="courier new, symbol,wingdings,arial" color="#FFFF00" size="2"><b>*</b></font></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><font face="courier new, symbol,wingdings,arial" color="#3333FF" size="2"><b>*</b></font></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><font face="courier new, symbol,wingdings,arial" color="#FFFF00" size="2"><b>*</b></font></div>
</div>
</body>
</html>
tkdgurl927
04-10-2004, 10:28 PM
thanks! ok, but the scrollbar's in the wrong place-its on the tagboard, and the fireworks code isnt working, even tho i replaced the ^s. i still dont know why its not working:(
bourdelson
04-10-2004, 10:35 PM
Well, there's one thing I know I messed up on - in the CSS, it should be font-family, not font-face. I don't know what I was thinking.

The scrollbar is appearing on your tagboard because it says overflow: auto;. Change it back to overflow:visible;. I changed it by mistake. Sorry.

Other than that, I can't see why it's not working now.

Although I doubt that this might be it, try giving heights to your tagboard and navigation divs as well, because those don't have them right now.
MaGiCSuN
04-10-2004, 10:43 PM
<div style="width: 20px; height: 600px; overflow: auto;">
text here
</div>

should be after the <body> tag :)

Also the scrollbar there doesn't appear because it's height is 600 pixels, wich is even more then the height of my browser window in 1024x768

plus you have to replace the regular <body> tag by this:

<body OnLoad="initMouseEvents()">

so that you get only one <body> tag, and not two like you have now

also all css should be between the <head> and </head> and not somewhere between the <body> and </body> tags

Love,
Mirna
tkdgurl927
04-10-2004, 10:53 PM
um,ok, it doesnt show the scrollbar at all & the text is still going over the lines of the box. sry i keep bothering you about this. isnt there a code i saw somewhere that says something like: scroll=yes(or no)...hmmm... i saw that on someone's source code. i wonder if that would work? i still dont know whats the matter tho. i did everything that you said:( thanks for all the help!
MaGiCSuN
04-10-2004, 10:55 PM
like said before, your box is 600px in height. That's even bigger then my screen. But you only have 2 words on text in it. A scrollbar doesn't show when it's not nessecary :)

beginning with changing your coding to the coding bourdelson gave you is a good start allready :)


Love,
Mirna
tkdgurl927
04-10-2004, 11:04 PM
ahh! thank you all! it works now! :)
bourdelson
04-10-2004, 11:07 PM
:) Glad it's finally working.