i have a calendar showing up on a page, i am displaying the calendar in full browser screen so that each cell in the calendaar is bigger to show some stuff on it. The size of each cell of the calendar is some 200px wide and 150 px in height. if the content
in each cell is more than the box size, then i am doing a overflow:hidden, and i am using the following JS function to autoscroll the content on that particular cell.
i = 0
var speed = 2
function scroll() {
i = i + speed
var div = document.getElementById("cellcontentdiv1")
div.scrollTop = i
if (i > div.scrollHeight - 80) {
i = 0
}
t1 = setTimeout("scroll()", 80);
}
<body onload="scroll();">
what this is doing is, it is auto scrolling my div content so that, the cell box size remains the same and due to the auto scroll i can see the whole content while it is scrolling. the problem here is, this is doing the scroll for just one cell(div) out
of the 30/31 cells(divs). I want the auto scroll to work for any number of cells. If i write another similar function with changing the line document.getElementById("cellcontentdiv1") to document.getElementById("cellcontentdiv2") it would work for the first
and the second divs. but i cannot hardcode things like that, please let me know how this can be done. Let me know if you need more information about what i am trying to achieve.
I would recommend using jQuery for this. Put a class on each of your cells, then you can do somethign like:
$(document).ready(function(){
$('.myclass').wrapInner('<div />').each(function(){ var h = $(t).children().innerHeight()-$(t).innerHeight(); if (h>0) scroll(this);});
});
function scroll(t)
{
var h = $(t).children().innerHeight()-$(t).innerHeight();
$(t).scrollTop(0).animate(scrollTop:h,2000,'ease',function(){scroll(t);});
}
Althought I don't think this mechanic works very well really. You should think about just applying overflow:hidden to the class, and then when that class is hovered, change overflow-y to auto. That way you get a scrollbar if the content overflows the cell.
phani131
Member
4 Points
13 Posts
automatically scrolling multiple divs on a single page.......
Jun 19, 2012 12:38 PM|LINK
i have a calendar showing up on a page, i am displaying the calendar in full browser screen so that each cell in the calendaar is bigger to show some stuff on it. The size of each cell of the calendar is some 200px wide and 150 px in height. if the content in each cell is more than the box size, then i am doing a overflow:hidden, and i am using the following JS function to autoscroll the content on that particular cell.
i = 0
var speed = 2
function scroll() {
i = i + speed
var div = document.getElementById("cellcontentdiv1")
div.scrollTop = i
if (i > div.scrollHeight - 80) {
i = 0
}
t1 = setTimeout("scroll()", 80);
}
<body onload="scroll();">
what this is doing is, it is auto scrolling my div content so that, the cell box size remains the same and due to the auto scroll i can see the whole content while it is scrolling. the problem here is, this is doing the scroll for just one cell(div) out of the 30/31 cells(divs). I want the auto scroll to work for any number of cells. If i write another similar function with changing the line document.getElementById("cellcontentdiv1") to document.getElementById("cellcontentdiv2") it would work for the first and the second divs. but i cannot hardcode things like that, please let me know how this can be done. Let me know if you need more information about what i am trying to achieve.
Thanks,
automatic scroll onload js
Dr. Acula
Participant
1441 Points
319 Posts
Re: automatically scrolling multiple divs on a single page.......
Jun 19, 2012 12:44 PM|LINK
I would use a class on each div to indicate that it needs this scrolling applied to it.
Could it be rewritten in JQuery so you can get elements by class?
Or get all your divs and then check their class to determine which ones to appy the scroll to
automatic scroll onload js
urenjoy
Star
11997 Points
1797 Posts
Re: automatically scrolling multiple divs on a single page.......
Jun 19, 2012 12:47 PM|LINK
You can add common class to all div elements to be scrolled then easily select elements withh jquery
var divs = $(".myClass");
and loop it to apply your functionality.
automatic scroll onload js
Motley
Star
13789 Points
2449 Posts
MVP
Re: automatically scrolling multiple divs on a single page.......
Jun 20, 2012 07:40 PM|LINK
I would recommend using jQuery for this. Put a class on each of your cells, then you can do somethign like:
$(document).ready(function(){ $('.myclass').wrapInner('<div />').each(function(){ var h = $(t).children().innerHeight()-$(t).innerHeight(); if (h>0) scroll(this);}); }); function scroll(t) { var h = $(t).children().innerHeight()-$(t).innerHeight(); $(t).scrollTop(0).animate(scrollTop:h,2000,'ease',function(){scroll(t);}); }Althought I don't think this mechanic works very well really. You should think about just applying overflow:hidden to the class, and then when that class is hovered, change overflow-y to auto. That way you get a scrollbar if the content overflows the cell.
.myClass {overflow:hidden;} .myClass:hover {overflow-y:auto;}