|
HTML - Horizontal Scroll Problem
Hi!
I am having problems with horizontal scroll-bar. The thing is horizontal scroll-bar appears in local view. But when I put it into web only horizontal scroll-bar disappears. I'm using swffit also, and tried lots of things to solve this but coulnd't manage to solve this weird problem. Anyone has an idea? Thanks in advance. site link is www.firinciorhan.com.tr Similar Tutorialsi have spent about 45min reading through alot of Iframe related threads but none of them have helped my problem. I have a website with iframes, on my index page i am trying to put an iframe into the content box so when you click the links up top it will load them without refreshing the whole page. So thats fine i put in my iframe code like this <iframe name="homeframe" width="780" height="250" border="0" frameborder="0" marginheight="0" padding="0" marginwidth="0" scrolling="auto"src="homeframe.html"> </iframe> And on the html document im trying to put into it "homeframe.html" it open up but it scrolls horizontally not vertically and all the writing goes onto 1 line horizontally. The width of my content box is 780px so i made the table in the homeframe.html document 780 so it wouldnt have the bar but it does. im stumped. thanks in advance. 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 I want to create a website that both Firefox and IE will recognize my code where there is no vertical scroll. The page only scrolls horizontally. The site I am creating is for a portfolio and horizontal scroll is best for vieiwing such. Do I need to use CSS to make this work or how can I acheive this? Thank you Chaser 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 hi ! I'm using a frameset and in the main frame I need the vertical scroller visible all the time, even when not needed, but when I set it ... HTML Code: scrolling="yes" but with this the horizontal scroll is also visible, what I don't want Is there a way to enable just the Vertical one?? Hi i am having html page which have <frameset> of 7 frames. See below source for that frameset <frameset rows="115,13,*,100" frameborder="no" border="0" framespacing="0"> <frameset cols="*,11" frameborder="no" border="0" framespacing="0"> <frame src="headerPageTop.html" name="topPage" scrolling="no" noresize="noresize" /> <frame src="headerRightPanel.html" name="header_rightpanel" scrolling="No" /> </frameset> <frameset cols="*,22" frameborder="no" border="0" framespacing="0"> <frame src="headerPageBotton.html" name="header_rightpanel" scrolling="No" /> <frame src="headerRightPanelBottom.html" name="header_rightpanel" scrolling="No" /> </frameset> <frameset cols="163,*,22" frameborder="no" border="0" framespacing="0" marginheight="0" marginwidth="0" topmargin="0"> <frame src="leftPage.html" name="leftPage" scrolling="No" noresize="noresize" /> <frame src="../system/deviceView/deviceView.html" name="contentPage" /> <frame src="rightPanel.html" scrolling="No" name="rightpanel" /> </frameset> <frame src="bottomPage.html" name="bottomFrame" scrolling="No" /> </frameset> Solution required is when the user reduce the window size topframe having image menu getting hidden. So we need to provide a horizontal bar common for all the frames. Can you please suggest the best solution with will working for IE, Firefox & Netscape. regards Sudhakar S I don't know how this got here, but I don't have any absolute width defined anywhere, I'm viewing the site on 1280x800 resolution, and I have a horizontal scroll bar... have a look if you want. www.bkriegtech.net Thanks for any help... I'm trying to remove the horizontal scroll bar from a div but keep the vertical. I've seen a lot of posts on this but the answer is always: overflow-y:scroll;overflow-x:hidden but that won't work for me, because the x width does exceed the page, so I don't want to hide, I want to rely on the page's native horizontal scroll bars. (The reason being, I have a 'fixed/frozen' header div above which the offending div needs to stay in sync with) Hi, I've a frameset which contains two rows: <frameset rows="40%,60%" frameborder="10" ImagesBaseUrl="images/" CssClass="VerticalSplitterBar" scrolling="yes"> <frame src="ProgramReport1.aspx" frameborder="10" MARGINWIDTH="5px" scrolling="yes"> <frame src="BottomFrame.aspx" frameborder="10" > </frameset> The first page(ProgramReport1) width size is larger than the normal window size: <body> <ComponentArt:TabStrip id="TabStrip1" <ComponentArt:MultiPage id="MultiPage1" <ComponentArtageView ID="PageView1" <div style="vertical-align:middle; height: 552px; overflow: auto; overflow: auto; width:1400px; padding-left: 5px; padding-right: 5px;"> While displaying the frameset the vertical scroll bar is there, but there is no horizontal scroll bar. I've enabled scrolling="yes" to the frame, but still the horizontal scroll bar is not displayed. Do I need to handle any other properties. Thanks for your time, Senthil New poster here! Recently been creating a website using HTML & CSS from scratch using Notepad++. I was under the impression that the more flat, or spread out the design, browsers would squish it automatically to fit on the page. Apparently this is not the case. I current have a page where the main content starts 250 pixels from the left hand side of the screen, this causes some of the content disappear of the right hand side of on lower resolution screens. Should I be starting the content at the far left, or is there another web page design convention I should be following? I assume there is a way around this however I can't seem to find it! Any help would be greatly appreciated. These forums are a wealth of knowledge! Some mouses today have horizontal scroll, some call the tilt. It looks something like: http://www.htmlforums.com/attachment...1&d=1242556560 I noticed that many websites they code those horizontal scroll to go to next/prevous page. For example Discuz! forum system has this function. While you browse hundreds or thousands of posts separated into pages, the horizontal scroll can take you to previous page or next page.(not browser back/forward) How do I code like that? Or any examples? It laggs. Meaning it isnt fluent. The site is working fine with all browsers except in IE8 ? In IE I only get a fluent scroll experience when I place the cursor ON TOP of the scroll bar.. now I know this cant be good, so tell me, do I need to add code for IE to recognize my scroll wishes? Have a look at the site here. thank you o btw, for the ones who have helped me in the past have a looksy here! Im growing in knowlegde thanks to you, very much appreciated, feel free to review it and help me improve my coding (because I know it sucks) I have found a problem recently with my photography site where the scroll bar does not show up on the right hand side of the page unless if I am running Safari. I have checked it on other computers and the same thing happens. I think that the big flash app in the middle of the page may be causing it in some way. Anyone got any ideas? Here's the link to my site: http://www.benellett.com/ Hello, I have a demonstration site set up at: http://www.sikhfaith.com/demo The site works perfectly in Firefox 2.0. However, in Internet Explorer 7.0, there's a huge blank space on the right side of the page which causes IE to display a horizontal scrollbar. I haven't been able to pinpoint what is causing this. Any help would be appreciated. Thank you. The following problem seems to occur in both IE and Firefox (Chrome seems ok). Note the following simple code: HTML Code: <html>
<head></head>
<body>
<div dir="RTL" align="center">
<table width="800" height="100" border="0" cellspacing="0" cellpadding="0">
<tr height="100">
<td width="400" height="100" bgcolor="yellow">
<td width="400" height="100" bgcolor="red">
</tr>
</table>
</div>
</body>
</html>
When the window is manually made thinner, a horizontal scrollbar DOES appear but on the wrong side, which makes some of the content unreachable. On Firefox sometimes there is no horizontal scrollbar at all. HELP? Hello Folks, I'm currently redesigning my site and am having a problem with the last bit! I know that CSS is the method of choice now for web design but I need to integrate my site with a commercial shopping cart called Actinic. This uses tables and is virtually impossible to rewrite using CSS. It makes for a seamless integration if I stick with tables for my part of the site, and less headaches trying to make the two sites look the same. I want to move some of the links away from the left hand column on the page and put them into a horizontal bar at the bottom. I've created a tile which repeats, but I want it separated a bit from the left hand column. Here's a url so you can see what I'm on about. http://www.magicalwonders.com/NewLook/Index.html You will see that the blue bar created by my tile is stuck to the side of the left hand column. My problem arises in trying to move this bar to the right of the left hand column, so that there is a gap between the two. I was hoping to avoid using a full size graphic as I want to keep the file size to a minimum. I've tried Cell Spacing & Padding which doesn't have any effect, so I've tried putting the background tile in between Div tags and specifying a width using the following code:- <td align="center" ><Div width=300px id="footerbackground">Some links go Here</Div></td> This hasn't worked though and the tile fills up the entire width of the cell that the Div is in. I would be grateful if anybody can offer any advice. Many thanks, Myles Hello, 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 Hi all, I'd really appreciate some help on this one. I have a program which outputs very long strings of text to a HTML page. At the moment the text stays on one line resulting in an annoying horizontal scrollbar. How do I get the page to automatically format the text so that it all fits within a standard width, and so there's no horizontal scrollbar? Regards, Ruth 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.. 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 |
|||||||