DIV and Scrolling

@JMRKERJun 21.2006

Question:
Is it possible to INDEPENDENTLY scroll two <DIV> columns?

I can create the two columns using CSS with a width of 50%, but I don’t know if javascript can be used to vertically scroll the contents of each column independent of the other.

Currently, I can only scroll the columns simultaneously.

Thanks for any comments.

to post a comment

JavaScript

9 Comments(s) _↴

@KravvitzJun 21.2006 — #[url=http://www.dynamicsitesolutions.com/css/scrolling_element/]Yes, you can do that with the overflow property.[/url]

@JMRKERauthorJun 21.2006 — #Thanks Kravvitz,

I was not aware of this particular property.

@JMRKERauthorJun 21.2006 — #I looked at the site and modified the code to try to put both scrolling-div elements side-by-side. No luck.

I thought I could use a SPAN to put both DIV beside each other after specifying the width and floating the DIV.

Works the same in IE and NS with the DIV elements on top of each other rather than side-by-side.

Any ideas are appreciated.

[code=html]
 
 <!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">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <title>Two Scrolling Elements</title>
 <style type="text/css">
 h1 {
 margin: .8em .4em .4em;
 padding: 0;
 text-align: center;
 }
 div,p {
 padding: 1em;
 margin: 0;
 }
 .scroll {
 width: auto;
 height: 12em;
 margin: 1em 5%;
 padding: 0;
 background-color: #bcf;
 }
 #example1 {
 overflow:scroll;
 width:40%;
 position:float;
 }
 #example2 {
 overflow:auto;
 width:40%;
 position:float;
 }
 </style>
 </head>
 <body>
 
 <h1>Scrolling Block Level Elements </h1>
 <h2>Trying to be SIDE-by-SIDE</h2>
 
 <span>
 
 <div class="scroll" id="example1">
 <p>
 This &lt;div&gt; has <code>overflow:scroll;</code> set which causes the 
 scrollbar(s) to always be visible. By putting the content in a &lt;p&gt; 
 inside the &lt;div&gt; we avoid the Mozilla Gecko (which includes Netscape 6+ 
 and Firefox) bug where the bottom padding is missing, the problems caused by 
 IE's faulty box model, and the bug in IE4/Win where the left and right padding 
 is missing.
 </p>
 
 <p>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
 porta odio ullamcorper lorem. Sed consequat, diam ut malesuada
 tincidunt, metus libero tincidunt neque, non viverra lectus libero at
 dui. Aenean in neque id dui ullamcorper malesuada. Nullam sed wisi.
 Donec urna lectus, sagittis vitae, accumsan vitae, convallis non, elit.
 Vestibulum commodo pede non neque. Class aptent taciti sociosqu ad
 litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas
 est diam, tristique id, sollicitudin nec, aliquam non, orci. Quisque
 nibh erat, vulputate vitae, tempus suscipit, tincidunt vitae, quam.
 Donec at sapien vel sem consequat tincidunt. Suspendisse feugiat.
 Phasellus suscipit.
 </p>
 </div>
 
 <div class="scroll" id="example2">
 <p>
 This &lt;div&gt; has <code>overflow:auto;</code> set which causes 
 scrollbar(s) to appear if the element's content exceeds the width and/or height 
 specified for the element. Resize your browser window to see how they act 
 differently.
 </p>
 
 <p>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
 porta odio ullamcorper lorem. Sed consequat, diam ut malesuada
 tincidunt, metus libero tincidunt neque, non viverra lectus libero at
 dui. Aenean in neque id dui ullamcorper malesuada. Nullam sed wisi.
 Donec urna lectus, sagittis vitae, accumsan vitae, convallis non, elit.
 Vestibulum commodo pede non neque. Class aptent taciti sociosqu ad
 litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas
 est diam, tristique id, sollicitudin nec, aliquam non, orci. Quisque
 nibh erat, vulputate vitae, tempus suscipit, tincidunt vitae, quam.
 Donec at sapien vel sem consequat tincidunt. Suspendisse feugiat.
 Phasellus suscipit.</p></div>
 
 </span>
 
 <h2>Related Links:</h2>
 
 </body>
 </html>
 
 [/code]

@JMRKERauthorJun 21.2006 — #[CODE]Any ideas are appreciated.[/CODE]

@phpnoviceJun 21.2006 — #Specify [B]style="float:left;"[/B] for the first DIV.

The second one will then float up beside the first one.

@JMRKERauthorJun 21.2006 — #Thanks,

In researching what the "float:left;" did, I discovered that I

needed to change the "position:float" to "position:relative".

Looks like there are only two possibilities for "position" either ":absolute" or ":relative"

Both these changes to the CSS code seems to have fixed the problem.

I had the right idea, but the wrong implementation!

@phpnoviceJun 21.2006 — #<off-topic>There is also [B]position:fixed[/B] but support is sketchy (as far as I know).</off-topic>

@KravvitzJun 22.2006 — #position:fixed is well supported in browsers other than IE5-6.

[url=http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-position]position has a fourth value, "static", which is the default.[/url]

Floated elements don't have to have position:relative site.

JMRKER, I suggest you familiarize yourself with [url=http://www.dynamicsitesolutions.com/css/layout_techniques/]CSS Layout Techniques[/url].

@JMRKERauthorJun 22.2006 — #Thanks for the link Kravvitz.

I have about 3 books on CSS and DHTML, several about javascript and HTML, and a library card but finding consistant information concerning specific applications does get me confused, especially with so many combinations that are allowed. It would certainly be nice to have ONE computer language that could do everything I wanted without remembering do many different rules, syntax, order, etc. :rolleyes:

Also in #JavaScript _↴

changing class of a form element Help needed on website part 2 Closing a modal

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

DIV and Scrolling

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

DIV and Scrolling

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴