|
HTML - Creating Horizontal Scrollbar Input
Following proper new-person-at-a-forum etiquette, I've searched for an answer to my question in the archives, and have been unable to find one. So, here goes.
My webapp is uses a bit of asynchronous Javascript and CGI to allow users to change parameters in a serverside povray script (say, colors, positions, textures, etc) to allow users to create custom car designs. The server renders the images realtime and sends them back to the client's browser. What should be the hard part (all of this asynchronous javascript and CGI stuff), I'm having no trouble with. I am having trouble, however, with the scrollbar inputs needed for moving things around (without making users have to type in coordinates). I attempted to do my scrollbars with overflowing DIVs, such as: <DIV CLASS="scrollbar" STYLE="width: 230px;" ID="frequency_scroll" onScroll="change_scroll('frequency', 0, 50, 2, true);"><DIV STYLE="width: 2000px;"> </DIV></DIV> Where class scrollbar is: .scrollbar { overflow: auto; overflow-x: scroll; overflow-y: hidden; font-size: 11px; margin-top: -6px; } To break it down, we're creating an outer div that forces a horizontal scrollbar, and an inner div that makes it wide enough that you can actually scroll it. There are several hacks in this code trying to minimize the annoying phenominon that I can't seem to get around: spacing between scrollbars. I've been testing in two versions of firefox for Linux, one older and one newer, although eventually I'm going to need this to be crossplatform. If I leave out the nbsp in the inner div, in one version of firefox, the scrollbars vanish altogether; it seems to insist that there be content inside. When there is content, however, the scrollbar shifts down on the page significantly to make room for the line with the nbsp, making the scrollbars very spread out and the page very long. My first solution was margin-top: -20px in the scrollbar div; however, the invisible spot it reserves for the line that has the nbsp in it prevents you from accessing the scrollbar above it (and z-indices don't seem to make it accessible). Only the bottommost scrollbar in a group works when you do that, as it's the only one that doesn't have an invisible line of text blocking it. I tried javascript to prevent the user from getting focus on the invisible line, but that didn't help. I then tried shrinking the font size down, hoping the height occupied by the invisible line would shrink. Unfortunately, when you drop the font size below the height of the scrollbar, the scrollbar disappears for some reason, and there seems to be nothing I can do to force it to stay. I've also tried alternatives, such as scaled invisible images inside the scrollbar div; no luck. Firefox seems to simply refuse to draw the scrollbar on the div unless it can have an invisible area above it of equal or greater size in comparison to the scrollbar itself. The above code -- a font size of 11px and a margin-top of -6 -- seems the closest I can space the bars (about one scrollbar's height between each of them) I'm trying to figure out what my options are here, and right now, all I'm seeing as possibiltiies is to write my own code in Javascript to generate scrollbars made of inset/outset DIVs and lots of mouse event captures. And I have a feeling that will get ugly. Anyone have any ideas? Similar TutorialsHi. I'm making a page for a company. And I'm having trouble regarding an iframe, ONLY comes to place when viewed in Explorer. I'm so tired of finding problems ONLY because of IE. This is the second time so far, spent an entire week just because of some minor code problems showing up ONLY when viewed in IE. Anyway, my trouble is an irritating horizontal scroll showing up at the bottom of the one iframe. The URL is http://www.risington.no/dynamikk I have checked that the contents of the page linked to the iframe ain't wider than the iframe itself. Actually, I've tried to even set half of the size it is now, and still I'm getting the scrollbar at the bottom. I'm running out of posibilities here, necer experienced such big a problem on behalf of this. I had thos problem a couple of times before, but allways solved by subtract about 15 px width off the content page shown in the iframe because of the VERTICAL scrollbar showing up, which actually is quite important that it does. But not this time, no! Here's a cut-out of how my iframe tag looks like: Code: <iframe src="news.html" width="677" height="478" align="middle" frameborder="0" marginheight="0" marginwidth="0" name="mainframe" scrolling="auto" title="Dynamikk"></iframe> It's inside a <td colspan="2"></td> with no static width or height. Any help = Grateful I am wanting to do a horizontal scrollbar like this http://felicefawn.com/fashion.htm with pictures inside. The pictures won't stay side by side, they go underneath therefore creating a vertical scrollbar. Anyone know how to do this? Help much appreciated!! Can't tell you how many hours I've spent trying to do this, but it's a lot! An example page with the issue can be found here.. http://www.funkimunkibadges.co.uk/geekybadges-c-79.html I'm basically trying to change it to be a horizontal scroll instead of vertical. Top image here is what happens when I expand the data in the central box. The lower image is when is as it is now.. http://www.flickr.com/photos/creepyd/5710648997/ I'm not really sure where the problem lies, my guess is the html. The piece of CSS which creates the vertical scrollbar is here.. Code: #indexProductList.centerColumn {
width: 630px ;
height: 680px !important; /*CENTER SCROLLBAR HEIGHT*/
overflow:auto;
padding:0px;
If I change the 'auto' above to 'hidden', the scrollbar goes away, so it's definitely that controlling it. The php which creates the 5 columns is here.. If I change it to + 0.5, the last one will wrap to the next line, and not create a horizontal scrollbar. However if I change it so each column is more than 100%, I get a horizontal scrollbar?! Code: $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5; Thanks so much for any help. Here's the html for the central table with the normal vertical scrollbar in place.. HTML Code: <td valign="top">
<!-- bof breadcrumb -->
<div id="navBreadCrumb"> <a href="http://www.funkimunkibadges.co.uk/">Home</a> ::
Careers & Hobbies
</div>
<!-- eof breadcrumb -->
<!-- bof upload alerts -->
<!-- eof upload alerts -->
<div class="centerColumn" id="indexProductList">
<h1 id="productListHeading">Careers & Hobbies</h1>
<div id="indexProductListCatDescription" class="content"> </div>
<form name="filter" action="http://www.funkimunkibadges.co.uk/index.php?main_page=index" method="get"><label class="inputLabel">Filter Results by:</label><input type="hidden" name="main_page" value="index" /><input type="hidden" name="cPath" value="113" /><input type="hidden" name="sort" value="20a" /><select name="alpha_filter_id" onchange="this.form.submit()">
<option value="0">Items starting with ...</option>
<option value="65">A</option>
<option value="66">B</option>
<option value="67">C</option>
<option value="68">D</option>
<option value="69">E</option>
<option value="70">F</option>
<option value="71">G</option>
<option value="72">H</option>
<option value="73">I</option>
<option value="74">J</option>
</select>
</form>
<br class="clearBoth" />
<div id="productListing">
<div id="productsListingTopNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingTopLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"><img src="images/Be Nice Im In Charge Of The Pills.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"><img src="images/Best Scrabble Player Ever.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"><img src="images/Bowling Cutie.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"><img src="images/Bowling Cutie Black.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"><img src="images/Bowling Pins And Ball Red.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"></a><br /><br /></div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"><img src="images/Bowling Princess.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"><img src="images/Bowling Rocks.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"><img src="images/Bowling Strike.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"><img src="images/Camera On Blue.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"><img src="images/Camera On Pink.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"></a><br /><br /></div>
<br class="clearBoth" />
<div id="productsListingBottomNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingBottomLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
</div>
</div>
</td>
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? 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 Hello All, I am new to this, and not sure if this is the right forum. But, I have a simple web page with drop down menus where I can put values for a calculation. I would like to have the values saved as an input file for a python script that resides on the server. I would like the input file to be created and then the script executed and the output appear as a new page. I have googled this and have come up empty. Can someone point me in the right direction. Thanks, Bryan Hi guys, this is my first post an ive only started to use HTML, PHP and mySQL so here goes. The problem I am having is that i want a single line table to duplicate more lines of code when an onClick button is pressed. it basically goes Staff name Wage hours worked I:::::::I I:::::::::::::I I:::::::::::::::::I IButtonI When the button is pressed i want the form table to change to Staff name Wage hours worked I:::::::I I:::::::::::::I I:::::::::::::::::I I:::::::I I:::::::::::::I I:::::::::::::::::I IButtonI and so on. I am storing staff name etc as an array so i can easily calculate totals. Is there a way to do this dynamically without having to show / hide or else using DOM? Any help appreciated! 0 Answers Posted ( Reply | Quote ) Unsubscribe Ok i want just a plain html not php or css code but an html code for a scrollbar. I cant find one that works. Please and thank you check this page out..the vertical scrollbar http://www.progressoft.com/?option=c...&iscon&dir=ASC EDIT: i mean the vertical scrollbar of the clients area in the middle..& to see it check it in IE I need an HTML scrollbar that can display HTML of a picture without showing the picture. Any help would be appreciated. Im not sure if this is in the right area of this forum but heres the question I have a div scrollbar exampe: <DIV style='position: absolute; left: 30; top: 10; color: #000000; background-color: #FFFFFF; border: solid 10px; border-color: #FFFFFF; width: 690px; height: 1300px; overflow: auto; '> I have a picture blog. I keep adding pictures to it, and when i get too many , it just creates a scroll. I dont want a scroll, but I dont wanna have to keep changing the "height" everytime i put more pictures in. I am kinda lost in how to word this question... maybe somebody can help me. thank you if you do. Hi, i was made web, but have a problem. I attach foto and you can see problem. How insert a scrollbar? sorry for my english language Hi all, I need help with scrollbars: Is it possible to use an image instead of the standard scrollbar (see http://www.esaurome.com/bikini%20IT.html, the 2 fishes and the wave). Please HELP ME!!! I searched all over the internet and I can't come up with anything. The problem I have is in my form I have: HTML Code: <table>
<tr>
<td>
<div style="position: relative; border-width: 1px; border-style: solid; border-color: #000000; overflow: auto; overflow-x:hidden; scrollbar-base-color: #98B0C7; scrollbar-arrow-color: #FFFFFF; width: 100%; height: 300px;">data</div>
</td>
</tr>
</table>
With this, I use the div to be at 300px height so the overflow creates a scrollbar within the form to allow a user to scroll the data without scrolling the entire page.. hence no scrollbar on the browser right side.. Well, in some cases I still do have the right side browser scrollbar because the entire form will sometimes be large. (not the div data) This is ok and what's normally suppose to happen. In those scenarios, the scrollbar is there on the right side of the browser for ie7 but in ie6, it's not there. Again, not talking about my div data content scrollbar within the form, but the right hand side of the browser scrollbar. If someone could enlighten me about exactly what is going on here I would greatly appreciate it. s-one I'm having trouble setting the background image of this div to be fixed without it messing the image itself up. I've tried fixed, and aligning it but nothing works. Any suggestions? Its the welcome text in brown with the scrollbar. I have a table that is set to overflow:auto with a width less then the content in the table. In Firefox, the table is the correct width and has a scrollbar. In my most hated application, IE7, there is no scrollbar and the content goes out of the width set. I think is this has to do with the absolute positioning I am using but not sure. I actually can't get the scrollbar to work on any of my divs in IE7 but again, they appear perfectly in Firefox. Here is the code which I am using in MySpace. .friendSpace{display:inline; top:830px; left: 50%; position:absolute; margin-left: -400px; height:900px; width:250px; overflow:scroll} .friendSpace table{visibility:visible; color:000000; background-color:cccccc; width: 250px} you can see what I am talking about at www.myspace.com/spencespencer. Hello all! I am messing around with some website ideas in my head, trying to work out what is possible and what is not, and I was wondering if it is possible to create interactions between html and the website's vertical scrollbar. For example to make an image appear when the up or down scroll button is pressed...etc. Or to make a flash animation play when the scrollbar buttons are pressed. I am not too sure what I am going to use this for yet, but I have looked around online and have yet to find anything about scrollbar interaction... Any information or further reading would be helpful and very much appreciated!! Thank you!! Hey everyone, I was wondering how I can get rid of a scrollbar that only shows up in IE, when I embedded another webpage inside a webpage. I specified size and the other webpage is only a few lines of text so it doesn't need to scroll to see everything. I don't have this problem in FF. HTML Code: <object data=siteupdates.html width="100%" height="212"> </object> Thanks Well, I like to know how you can do this: http://b5.boards2go.com/boards/board...4563&user=he12 Ya know, put HTML inside a box without the HTML actually showing up so others can copy and paste it? I've run out of ideas, so please help! |
|||||||