|
JavaScript - Autoscrolling A Div
Hey everyone,
I have some long horizontal images (graphs) which i have got inside a fixed width div with a horizontal scroll so they can be viewed within the main page frame. I have some js code linked to a play button which allows users to 'play' the image (so it will autoscroll along it). The code is: PHP Code: var t; var scrollwidthglob; function scrollDiv(scrollwidth){ clearTimeout(t); scrollwidthglob = scrollwidth; scrollDiv2(scrollwidthglob) } function scrollDiv2(scrollwidth){ scrollwidthglob = scrollwidth; var div = document.getElementById('containerdiv'); if (div.scrollLeft<scrollwidthglob){ div.scrollLeft++; //scroll 1 pixel up t = setTimeout('scrollDiv2(scrollwidthglob)', 10); } else clearTimeout(t); } function stopScroll(){ clearTimeout(t); } This works fine but every now and then (it seems more often on IE) it goes quite slow and jerky, generally it recovers and goes back to normal speed again. This may just be my computer but it seemed unlikely for a task as simple as this, i was just wondering if there was anything wrong with the code that might be causing it? Thanks so much for any help in advance, Dave Similar TutorialsHey guys, So I got my autoscrolling javascript working, but I need to make it pause on mouseover. How do I accomplish that with my javascript code? Code: <script type="text/javascript">
var defaultStep=1;
var step=defaultStep;
var timer;
function scrollDiv(id,s){
var obj=document.getElementById(id);
var iScrollTop = obj.scrollTop;
step=s||step;
if (iScrollTop == 0){
step=defaultStep;
}
else if (obj.clientHeight + iScrollTop - obj.scrollHeight==0){
step=-defaultStep;
}
clearTimeout(timer);
obj.scrollTop+=step;
timer=setTimeout(function(){ scrollDiv(id); },100)
}
function stopMe(){
clearTimeout(timer);
}
function scrollMe(id){
scrollDiv(id)
}
</script>
Thanks! Hey everyone, So I just got my DIV named ".center2" to autoscroll. Well, it works when I view it live on Dreamweaver CS5, but when I open it on Safari...nothing. Could anyone help me optimize the code for all web browsers? Thanks! The targeted code is marked in red: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
var defaultStep=1;
var step=defaultStep;
var timer;
function scrollDiv(id,s){
var obj=document.getElementById(id);
var iScrollTop = obj.scrollTop;
step=s||step;
if (iScrollTop == 0){
step=defaultStep;
}
else if (obj.clientHeight + iScrollTop - obj.scrollHeight==0){
step=-defaultStep;
}
clearTimeout(timer);
obj.scrollTop+=step;
timer=setTimeout(function(){ scrollDiv(id); },100)
}
function stopMe(){
clearTimeout(timer);
}
function scrollMe(id){
scrollDiv(id)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Aylonetic Sounds [v1.1] | News</title>
<style type="text/css">
.center
{
margin:auto;
width:1024px;
}
.center2
{
width:1024px;
height:450px;
border:none;
overflow:scroll;
}
#apDiv2 {
position:relative;
width:50px;
height:30px;
z-index:0;
left: 611px;
top: 0px;
}
body {
background-color: #000;
}
</style>
</head>
<body onload="MM_preloadImages('titlehover.jpg','marketplacehover.jpg','forumshover.jpg','supporthover.jpg','abouthover.jpg','images/title_new_hover_inv.jpg','images/marketplace_new_hover_inv.jpg','images/forums_new5_hover_inv.jpg','images/support_new_hover_inv.jpg','images/about_new_hover_inv.jpg')">
<div class="center">
<table width="1025" border="0">
<tr>
<td width="673"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/title_new_hover_inv.jpg',1)"><img src="images/title_new_main_inv.jpg" name="Image7" width="150" height="14" border="0" id="Image7" /></a></td>
<td width="46"><img src="images/news_new_hover_inv.jpg" width="58" height="14" /></td>
<td width="101"><a href="marketplace.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/marketplace_new_hover_inv.jpg',1)"><img src="images/marketplace_new_main_inv.jpg" name="Image8" width="100" height="14" border="0" id="Image8" /></a></td>
<td width="63"><a href="forums.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/forums_new5_hover_inv.jpg',1)"><img src="images/forums_new5_main_inv.jpg" name="Image9" width="65" height="14" border="0" id="Image9" /></a></td>
<td width="69"><a href="support.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/support_new_hover_inv.jpg',1)"><img src="images/support_new_main_inv.jpg" name="Image10" width="70" height="14" border="0" id="Image10" /></a></td>
<td width="47"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/about_new_hover_inv.jpg',1)"><img src="images/about_new_main_inv.jpg" name="Image11" width="58" height="14" border="0" id="Image11" /></a></td>
</tr>
</table>
<table width="1024" border="0">
<tr bgcolor="#FFFFFF">
<td width="507"><img src="images/banner1.jpg" width="507" height="150" border="0" /></td>
<td width="507"><img src="images/banner2.jpg" width="507" height="150" /></td>
</tr>
</table>
<body onload="scrollMe('news')">
<div class="center2" id="news">
<table width="1024" border="0">
<tr>
<td width="507"><img src="images/newstemplate_l.jpg" width="506" height="100" /></td>
<td width="507"><img src="newstemplate_r.jpg" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Hello Everybody I have recently been tasked with a unique task and for the life of me I can not work out how to do it. Using this website as an example: http://www.coastalcontacts.com/cFaq.html You can see that the FAQ questions open and close as you click on them, leaving the page looking clean for the most part. Now I am writing up a landing page that will be doing something similar, however I would like the page to scroll down as each new question is opened up. Meaning I click on one of the faq questions closer to the bottom of the page and then it scrolls down to show all the new content. This does not need to happen for questions that do not go to the bottom of the page and are fully visible. Any and all ideas would be much appreciated Thank you |
|||||||