How to auto scroll text within div depending on width of DIV

Question

I have div with fixed width.I want to auto scroll(lefta nd right:Hirizontal direction) the text if content of div is more than div width.How can i do this thought css or jquery.Currently div has a class like this..

       .divcon{
margin:0px;
padding:0px;
height:30px;
width:143px;
font:bold 9px Verdana, Geneva, sans-serif;
line-height:30px;
color:#000;
background-image:url(../images/glass_bg.png);
background-repeat:repeat-x;
display:block;
float:left;

}

i dont need any scroll bar..i want it like a marquee like feature

Try : `overflow-x: auto;` or `overflow-x: scroll;` – loxxy May 23 '13 at 04:45 — loxxy, May 23 '13 at 04:45

score 1 · Answer 1 · answered May 23 '13 at 04:47

1

One Simple method will be adding overflow in the CSS class:

overflow: scroll;

This will make div scrollable both in horizontal and vertical.

If you want scroll in one direction only, then you should try:

overflow-y:scroll; // For vertical scroll bar

And

overflow-x:scroll; // For horizontal scroll bar

answered May 23 '13 at 04:47

Subedi Kishor

5,906
5
35
53

i dont need any scroll bar..i want it like a marquee like feature – vmb May 23 '13 at 04:50
Please have a look at the [Using CSS Animation](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations?redirectlocale=en-US&redirectslug=CSS%2FTutorials%2FUsing_CSS_animations) and [Auto Scrolling With CSS](http://stackoverflow.com/questions/15485694/auto-scrolling-with-css). – Subedi Kishor May 23 '13 at 04:54
So have you tried it, does it helped you to resolve your problem? – Subedi Kishor May 23 '13 at 10:25
tried..i dont need any scrollbar..just auto scroll the text only – vmb May 23 '13 at 12:30

score 0 · Answer 2 · answered May 23 '13 at 04:47

you can have like this

for giving horizontal scroll

overflow-x:scroll;

for giving vertical scroll

overflow-y:scroll;

for giving scroll on both side overflow:scroll;

From above css default scroll will come it will not depend on the content size

To make it depend on the content size make scroll --> auto

pau · Answer 3 · 2013-05-23T04:52:57.740

Add

overflow: auto; /* scroll bars appear, only when they are needed */

or

overflow: scroll; /* scroll bars appear (both horizontal and vertical, even when not needed */

There are also other ways of coding overflow, especially if you want a specific scroll bar to appear. Although, these are not widely supported by older browsers (IE8 and earlier).

overflow-x: scroll; /* only horizontal scroll bar */
overflow-y: scroll; /* only vertical scroll bar */

score 0 · Answer 4 · answered May 23 '13 at 05:21

0

Here is the code for static text, you need to give the width according to text inside the div:

CSS:

.divcon-outer{
width:143px;

}
.divcon{
margin:0px;
padding:0px;
max-height:45px;
width:auto;
font:bold 9px Verdana, Geneva, sans-serif;
line-height:30px;
color:#000;
background-image:url(../images/glass_bg.png);
background-repeat:repeat-x;
display:block;
overflow-x: auto;
overflow-y: hidden;

}
.divcon p{
min-width:200px;
max-width:50000px;
margin:0;
padding:0;
}

HTML:

<div class="divcon-outer">
<div class="divcon"><p>I have div with fixed width.I want to auto scroll(lefta nd right:Hirizontal direction) the text if content of div is more than div width.How can i do this thought css or jquery.Currently div has a class like this..</p></div></div>

answered May 23 '13 at 05:21

Sukhpreet

117
6

Try this javascript for margquee :http://javascript.about.com/library/blctmarquee1.htm – Sukhpreet May 23 '13 at 07:01
no man..i dont need this one..it is showing scroll bar..i want scrolling text inside div..not scroll bar.. – vmb May 23 '13 at 07:05
This is not possible with CSS, you need Javascript for this. Check the above given link if it solve your problem. – Sukhpreet May 23 '13 at 07:21

Jacob Ewing · Answer 5 · 2013-10-07T01:38:47.743

Here's one example that uses strictly CSS to horizontally auto-scroll as an area with a fixed width is populated. No scroll bars are used or rendered. A few things to note here:

Your question is a bit ambiguous. When you say you want it to auto-scroll, do you mean that you want the content to scroll by as it's added to the div? Do you mean you want it to repeatedly scroll over the same text? Or perhaps something else? I'm assuming here that you're requesting the first option.
The scrolling here uses no JavaScript, but of course some script is needed to populate the div that's being scrolled.
I've only tested this in Firefox and Chrome.

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
                #scrollbox{
                        display: inline-block;
                        width: 16em;
                        overflow: hidden;
                        border: 1px solid #F00;
                }   
                #scrollcontent{
                        float:right;
                        white-space: nowrap;
                }   
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript">
                var idx = 0;
                $(document).ready(function(){
                        setInterval(function(){
                                idx++;
                                $('#scrollcontent').append('foo_' + idx + " ");
                        }, 200);
                })
        </script>
</head>
<body>
        <span id="scrollbox">
                <span id="scrollcontent"></span>
        </span>
</body>
</html>

That works nicely as long as you're adding text to the div and only wish for it to scroll rightwards as the text is added. If you want it to automatically scroll left and right, then you'll need JavaScript to automatically zig-zag the position of "#scrollcontent". You would need an algorithm that gets the width of the parent span ("#scrollbox" in this case), subtracts that from the width of the child span ("#scrollcontent") and oscillates a number between zero and the result of that subtraction. The x position of the child span would be set to the negative of that number. Note that you would need to give "scrollcontent" an absolute position, and remove the float: right attribute. You would also need to specify the position attribute for "scrollbox", otherwise the absolute position of scrollcontent would be relative the next parent that does have the positioning explicitly defined, rather than scrollbox itself.

How to auto scroll text within div depending on width of DIV

5 Answers5