how scrollable text line inside a div without showing scroll bars


Tags: javascript,html,css,scrollbar,overflow

Problem :

plz see the below link :

Long File Name Inside A Div

when you see those long file names with firebug you will find a span that tell us ->

.FileName {
    float: left;
    width: 438px;
}

we have predefined width for this span!

q#1 : so why we have overflow in that div and how can i fix that ?

q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?

edit
(with jquery or javascript or css)

thanks in advance



Solution :

If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:

http://www.net-kit.com/jquery-custom-scrollbar-plugins/

I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.


    CSS Howto..

    How to put a footer in the bottom (but not fixed or stick!) with css [duplicate]

    How to be able to preload jquery contents into hidden tabs for ie browser

    How to put JavaScript from tutorial into my website?

    How to change the Attribute background color in css code

    How to get a textarea to fill in the height of a table column?

    How to find a div / panel in repeater and apply css?

    How to mix 100% height with a minimum height

    CSS: how to create responsive irregular shapes

    How to create an easy responsive grid with one column and two boxes?

    How to find all elements with a particular CSS style, without a JS library?

    How to write syntax in internal css to external css?

    How to apply CSS to list in HTML

    How can I translate with webkit-transform enough so that

    How can I force Visual Studio to follow a custom CSS template when I edit my css files?

    How to create a circle with divided borders in CSS and Javascript?

    How can i get bootstrap to alter page CSS instead of lay dormant?

    Extjs: how Element's up/down functions work?

    how to change the background color of first row in html table and all other rows alternate color

    How to reference a Div after each h3

    How to make slanted ribbon

    How to use a custom Style Sheet in WordPress

    CSS border - how to populate content inside div with border

    CSS: How to set container size equal to background image size

    How can I fix the indentation in a facebook like-box?

    CSS: How to change spacing between radio button and it's text?

    How to style a button's font in CSS?

    How to keep the link color on CSS buttons as one color when changing default link colors?

    How to get value of input using Jquery and put it in css of an element

    JS/CSS. How do I force a child div to the bottom of it's parent div

    how to align vertically a dynamic-height div inside another fixed height div