|
HTML - Adding The Scroll Bar
Hi guys,
I know scroll-bars are automatic when your page gets longer than the screen. I have recently developed a new webpage, and on some pages your required to scroll down, on others you aren't. How do I leave the right hand scroll bar there even if its not required (greyed out) This way my site doesn't seem out of line as they navigate through it. Similar TutorialsHello, I have a table (with one cell). The table can be quite big (200 items) so I would like the user to be able to scroll it up and down... and I want the user to be able to add and delete an item. I have done something with javascript but it is not complete.. the delete does not work correctly ... the scroll up and down shown the same table. I don't have a clue on how to do the add button. Could you help me please? Here is what I have done so far.... Code: <html>
<head>
<title>Insert/Delete Table Row using DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/ccs">
<!--
form {border:1px solid blue;}
div {border:1px solid red; width:150px; overflow:auto;}
.selectBox { font-size:xx-small;overflow:auto;}
#tblSample td,th {padding:0.5em;}
.classy0 { background-color: #234567; color:#89abcd;}
.classy1 {background-color: #89abcd; color:@234567;}
-->
</style>
<%@ include file="javascriptLib.html" %>
<script language="JavaScript" type="text/JavaScript">
<!--- oculta el script para navegadores antiguos
var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script
var TABLE_NAME = 'items_list'; // this should be named in the HTML
var LABEL_NAME = 'label_list';
var ROW_BASE = 1; // first number (for display)
var MAXLENGTH=5;
function myRowObject(one,two)
{
this.one = one; // text object
this.two = two; // input text object
}
function deleteCurrentRow(obj)
{
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode.parentNode;
var rIndex = delRow.sectionRowIndex;
var rowArray = new Array(delRow);
deleteRows(rowArray);
reorderRows(tbl, rIndex);
}
function deleteRows(rowObjArray)
{
for (var i=0; i<rowObjArray.length; i++)
{
var rIndex = rowObjArray[i].sectionRowIndex;
rowObjArray[i].parentNode.deleteRow(rIndex);
}
}
function reorderRows(tbl, startingIndex)
{
if (tbl.tBodies[0].rows[startingIndex])
{
var count = startingIndex + ROW_BASE;
for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++)
{
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.one.data = count; // text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count;
var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' ');
tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);
count++;
}
}
}
function clearTable(option)
{
var tbl = document.getElementById(TABLE_NAME);
if (option != 0)
tbl= document.getElementById(LABEL_NAME);
//var lastRow = tbl.tBodies[0].rows.length;
var lastRow = tbl.rows.length;
var i=lastRow-1;
while (i>=0)
{
tbl.deleteRow(i);
i--;
}
}
function showRow (val)
{
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
//var nextRow=tbl.rows.length;
var iteration = nextRow + ROW_BASE;
var row = tbl.tBodies[0].insertRow(nextRow);
row.className = 'classy' + (iteration % 2);
var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);
var cell1 = row.insertCell(1);
var txtInp = document.createElement('input');
txtInp.setAttribute('type', 'text');
txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
txtInp.setAttribute('size', '77');
txtInp.setAttribute('value', val);
txtInp.readOnly = true;
cell1.appendChild(txtInp);
}
function addRowToTable(val,num)
{
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
var iteration = nextRow + ROW_BASE;
if (num == null) // appends to the end of the table
{
num = nextRow;
}
else // Insert at row num
{
iteration = num + ROW_BASE;
}
// add the row
var row = tbl.tBodies[0].insertRow(num);
// CONFIG: requires classes named classy0 and classy1
row.className = 'classy' + (iteration % 2);
// CONFIG: This whole section can be configured
// cell 0 - index
var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);
// cell 1 - input text
var cell1 = row.insertCell(1);
var txtInp = document.createElement('input');
txtInp.setAttribute('type', 'text');
txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
txtInp.setAttribute('size', '62');
txtInp.setAttribute('value', val); // iteration included for debug purposes
txtInp.readOnly = true;
cell1.appendChild(txtInp);
// cell 2 - delete button
//-----------------------
var cell2 = row.insertCell(2);
var btnEl = document.createElement('input');
btnEl.setAttribute('type', 'button');
btnEl.setAttribute('value', 'Delete');
btnEl.onclick = function () {deleteCurrentRow(this)};
cell2.appendChild(btnEl);
// Store the myRow object in each row
row.myRow = new myRowObject(textNode,txtInp);
}
function paintTable(index)
{
var maxLine=index+MAXLENGTH;
clearTable(0);
// add Row with delete and insert options
//----------------------------------------
services=document.forms[0].items.value;
if ((services != null) && (services != ""))
{
var services_array=services.split("|");
sLength=services_array.length ;
if (services_array.length < maxLine)
maxLine=sLength;
// add Row with delete options
//-----------------------------
for (var i=index; i < maxLine; i++)
{
val=services_array[i];
//showRow(1,val);
addRowToTable(val);
}
showLabel(index,sLength);
}
}
function showLabel(index,max)
{
clearTable(1);
next_val=index+MAXLENGTH;
prev_val=index-MAXLENGTH;
var tbl = document.getElementById(LABEL_NAME);
var nextRow = tbl.tBodies[0].rows.length;
// add Previous and/or Next buttons
//---------------------------------
var row = tbl.tBodies[0].insertRow(nextRow);
var celNo=0;
if (index !=0)
{
var cell0 = row.insertCell(celNo);
var btnEl0 = document.createElement('input');
btnEl0.setAttribute('type', 'button');
btnEl0.setAttribute('value', 'Previous');
btnEl0.onclick = function () {paintTable(prev_val)};
cell0.appendChild(btnEl0);
celNo++;
}
if (next_val <= max)
{
var cell1 = row.insertCell(celNo);
var btnEl1 = document.createElement('input');
btnEl1.setAttribute('type', 'button');
btnEl1.setAttribute('value', 'Next');
btnEl1.onclick = function () {paintTable(next_val)};
cell1.appendChild(btnEl1);
}
}
// end hiding from old browsers -->
</script>
</script>
</head>
<body onLoad=paintTable(0)>
<form onSubmit="return false" method="post" name="my_form" action="">
<table border= "2" cellspacing="0" id="items_list" >
<tbody></tbody>
<input type=hidden name="items" value="1|2|3|4|5|6|7|8|9|10|11">
</table>
<P><P><table border="1" id="label_list">
<tbody></tbody>
</form>
</body>
</html>
Please, help me! Thanks Can anyone help me out? I've set up a test site for a project where I have a scrollable table within an iFrame. Techincally, its an iFrame within an iFrame which gets you to a scrollable table I also added an auto-scroll with anchor-links. Everything finally works, but I really want to remove the horizontal-scroll bar that shows up, while keeping the vertical-scroll bar. (Upon testing, I found without the vertical-scroll bar, the anchor-links and auto-scroll don't work correctly.) here's the link to the test site: http://www.thegrandamerican.com/ here's the line of code I think is the correct place to make corrections: <iframe id="myiframe" name="myiframe" src="oprah june 09_news.htm" width="900" height="475" scrolling="yes" overflow-y: scroll></iframe> The hierarchy works as follows: index.htm > spotlight_news.htm > oprah june 09_news.htm The reason for all the iframes is to have elements on the higher pages that will stay in place, such as a music player and dynamic menu bar. other notes and associated files (for the auto scroll) a smooth-src-comments.js smooth.pack.js Thanks. - J Ive been looking EVERYWHERE for a site with a code for a scroll box with a trasparent scroll bar, Ive seen the code where I can edit the size of the box as well as the color of the box itself and I know how to do THAT. how do I make it where the code displays the scroll code as well so I can fully customize it? it seems that its always hidden.. I have looked through thousands of templates and this is the only one I like. The only problem is I hate the orange thing in the middle keeps moving up and down as I scroll the page. Can somebody download a copy and tell me how to make the orange thing in the middle static so it never scrolls, thanks. http://www.free-css.com/free-css-tem....php#bookmarks Im developing a homepage, www.hallevikslagret.se My problem is, when your using a small resolution or if you make the browserwindow to small the menu at the top disapears. Ive tried many different ways to show a scroll but i cant solve it. How do i get a scroll when the content gets to big. I know that im not using correct XHTML-language on the page. I will get to that as soon as possible when i solve this problem. Thank you for your time! Best Regards Jens I had the problem of my page shifting to the right whenever it was too long for the window to allow a scroll bar so I added this overflow-y:scroll; to the body information in the css sheet. It works fine in most browsers but I've noticed that with IE7 the scroll appears in the top part of the margin and not on the browser side. It just doesn't look right. Please advise. Here's the link. http://www.yotti.de/indextemp.html Ok I have a dive that scrolls and when i scroll it, it goes behind another div, which is what i want , but the problem is i don't want it to apear on the other side of the div but i still want to see the background. so i was wondering if there is a way i can make the scrolling div go behind another div that is invisible or something and make the scrolling div go invisible at this section so you can still see the rest of the scrolling div, but not the part behind the invisble div. if someone knows how to do this or a more simple way, that does not involve changing the size of the scrolling div as i want the scrollbar to be the height of the page. Hello. I'm currently trying to help my friend develop his website. He wants to put a banner that's linked back to his site, and then underneath a scroll box which contains the code to put the banner in anywhere. The problem is, whenever I try, and I put the code in the scroll box, it shows the banner, instead of the actual code. How can I stop the banner from showing up? Thank you Trying to create a simple scrolling for fitting my template. sample: http://www.hottunaint.com/press1.html template sample to fit in the main panel (image size) http://www.hottunaint.com/product.html thanks hi i have a large text i want to make it into a scroll bar and i want it to be set up like how i typed it and i really need help on this Im working in a HTML page using also JSP (Java). In the HTML code I have a large string of information (horizontal string) that does not fit in the screen. I also would like to have this info aligned in colums. I am using <TABLE>. The problem with <TABLE> is that it put all the information in one screen, breaking the string in two parts, instead of having an horizontal scroll bar and using this scroll bar to see al the info. Thanks, John Morales Hello, Why cant i scroll my site on mobile smartphones ? www.muchmarketing.co.il thanks Is there a way to customize those ugly default scroll bars? as they take up quite alot of space when you use them just for a div (with overflow: auto; in the css). So I was wondering if I could possibly make them smaller? (with cross browser support of course) Hi, i need to add a box to the bottom of every product page of my site, (latest updates) kind of thing, i thought of an iframe, but it can't have borders, it needs to be invisible, or slight borders but no scroll bars. So i can update the contents of a "updates.htm" file and the results will be reflected on every page the iframe thing is on. kinda the same effect the "latest updates" boxes do on filehippo.com, go to an actual download page and you'll see, latest updates and most popular, i want a similar thing, using css if possible. Does anyone know where i might find a guide to that? It's for my download center of i-CONICA.net. Thanks. Hi, I have been having issues with a scroll bar on my page, and have tried a few different html codes, and have messed with sizing but am not getting the result I want. Here is the page I am referring to: http://userwww.sfsu.edu/~davidson/ar...tractbody.html I would like for there to be only the horizontal bar, like I have. But I would like the box to be smaller (i've tried making the grid's width smaller, but then the scrollbar doesn't have the pictures side-by-side, but pushes one to the bottom and it creates a vertical scroll bar). I would like it to be so that one picture or one and a half pictures, it doesn't matter, is shown. i want less to be automatically visible. i want it so you just scroll to view the rest, all side by side. Hopefully that makes sense? Thank you!!! I have a table with three cells in it, one cell at the top and one cell at the bottom with an image in i.e borders. I then put text in the middle cell, enough that it forces the cell to be greater than the height of my screen and then pushes the bottom cell off the bottom of the screen. How do i make the middle cell (with the text in) a fixed size and create a scroll bar for the text that is off the screen thus keeping the bottom border nice and tidy at the bottom of my screen? HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="820" border="0" cellpadding="0" cellspacing="0" height="100">
<!--DWLayoutTable-->
<tr>
<td width="953" height="45" valign="top"><img src="site/images/slice_03.jpg" width="953" height="45"></td>
</tr>
<tr>
<td height="353" valign="top">
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
</td>
</tr>
<tr>
<td height="44" valign="top"><img src="site/images/slice_20.jpg" width="953" height="43"></td>
</tr>
</table>
</body>
</html>
http://www.w3schools.com/Css/pr_pos_overflow.asp HEllo Friends, I am newbie to HTML, I Am trying toa dd a scroll bar to a HTML but couldt do so. Please help me. heres the code for the page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Stunting Souls - The Hell of Power</title> <style type="text/css"> <!-- body { background-image: url(); background-color: #000000; scrollbar-face-color:#DBDBDB; scrollbar-shadow-color:#DBDBDB; scrollbar-highlight-color:#DBDBDBC; scrollbar-3dlight-color:999999; scrollbar-darkshadow-color: 000000; scrollbar-track-color:000000; scrollbar-arrow-color:#333333; color: #FFFFFF; } a:link { color: #FFFFFF; text-decoration: none; } a:visited { text-decoration: none; color: #FFFFFF; } a:hover { text-decoration: underline; color: #FFFFFF; } a:active { text-decoration: none; color: #FFFFFF; } body { background-color: #000000; } --> </style> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- .style1 {color: #FFFFFF} .style2 {font-size: 9px} --> </style> </head> <body> <table width="781"> <tr> <td width="773" height="35"><table width="30"> <tr> <td> </td> <td><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="763" height="115"> <param name="movie" value="menu1.swf"> <param name="quality" value="high"> <embed src="menu1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="763" height="115"></embed> </object></td> </tr> </table></td> </tr> <tr> <td><table width="200"> <tr> <td> </td> <td><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="763" height="262"> <param name="movie" value="header.swf"> <param name="quality" value="high"> <embed src="header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="763" height="262"></embed> </object></td> </tr> </table></td> </tr> <tr> <td> </td> </tr> <tr> <td><table width="742"> <tr> <td width="219" height="99" class="lt_text"> <table width="200" height="83"> <tr> <td height="17" class="lt_text"><img src="images/t1.gif" width="223" height="32"></td> </tr> <tr> <td width="191" height="17" class="lt_text"><img src="images/back.gif" width="21" height="7"><a href="safe.htm">Safe Riding Tips </a></td> </tr> <tr> <td height="18" class="lt_text"> <img src="images/back.gif" width="21" height="7"><a href="helmet">Helmet Buying Guide</a> </td> </tr> <tr> <td height="19" class="lt_text"> <img src="images/back.gif" width="21" height="7"><a href="night.htm">Tips for Riding in Nigh</a>t </td> </tr> <tr> <td class="lt_text"> <img src="images/back.gif" width="21" height="7"><a href="rain">Monsoons and Motorbikes</a></td> </tr> </table></td> <td width="318"><table width="318" height="63"> <tr> <td><div align="center" class="m_text"> Wallpaper of The Month </div></td> </tr> <tr> <td height="36"> </td> </tr> </table></td> <td width="189"> </td> </tr> </table></td> </tr> <tr> <td><div align="center" class="h1_text"> <p class="h_text style1"> </p> </div></td> </tr> <tr> <td class="m_text"><div align="center"><span class="l_text">Copyright© stuntingsouls.com. All Right reserved. </span></div></td> </tr> <tr> <td class="m_text"><span class="m_text">Website Design: Aman Singh (.A.D.S.) (Layout Designer, Graphics Designer, Coder, Administrator) & Fatima Boura, France (Logo and Graphics Designer) </span></td> </tr> <tr> <td class="m_text"><div align="center"><span class="h_text style1"><img src="images/excyellow_tri.gif" width="21" height="18" align="bottom"><span class="style2">Please do not Try any of the stunts/activities shown here in. These Stunts are performed by Professionals within a controlled enviornment. Doing/Trying these stunts may harm you and may cause you a major injury. </span></span></div></td> </tr> </table> </body> </html> i need a code for a scroll box that when you put a code inside like <img src="www... and so on it will show the code and not the image or anything else i put it...i just want it to show the code thanks in advance -dorota Ok im working on the website for the company I work for and Im having some issues. Lastnight everything was perfect and now I see in FireFox and SeaMonkey I get a "side to side" scroll bar on the bottom which Im sure wasnt there lastnight. As im sure its no supprise that IE7 has not cooperated with me in this endevour but oddly enough IE7 is the only one not showing the scrollbar. The page I would like any of you to view is being hosted on my last clients server. here it is. http://www.millermachinecompany.com/test2.htm please feel free to look at the code to. any advice to make the code better would be GREATLY appreceated. Thank you all so much for the help. |
|||||||