Couldnt get the scrollbar to work

35 views
Skip to first unread message

Shadowing

unread,
Oct 21, 2012, 10:54:11 AM10/21/12
to livepipe...@googlegroups.com
I dont know what im doing wrong
the instructions are very poor
can someone please help me out
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php require("connect.php"); ?>
<html>
<head>

<script type="text/javascript" src="<?php echo LPATH; ?>jquery/jquery.js?<?php echo  filemtime("jquery/jquery.js")?>"></script>
<script type="text/javascript" src="<?php echo LPATH; ?>jquery/scrollbar.js?<?php echo  filemtime("jquery/scrollbar.js")?>"></script>
<style type="text/css">
#scrollbar_container {     
position:relative;    
 width:500px;  } 
 
 #scrollbar_track {     
position:absolute;     
top:0;     
rightright:0;     
height:100%;    
 width:10px;     
background-color:transparent;     
cursor:move;  }  #scrollbar_handle {     
width:10px;     
background-color:#5c92e7;     
cursor:move;     
-moz-border-radius: 5px;     
-webkit-border-radius: 5px;     
opacity:0.9;     
-moz-opacity:0.9;  } 
#scrollbar_content {     
overflow:hidden;     
width:485px;     
height:250px;  }

</style>
</head>

<body>
 
 
<div id="scrollbar_container">     
 <div id="scrollbar_track">
 <div id="scrollbar_handle"></div>
 </div>     
 <div id="scrollbar_content">
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
 </div> 
 
</div>
 
 
 
 
 
 
 
 
 
<script>
$(function(){
var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');   
$('scroll_down_50').observe('click',function(event){     
 scrollbar.scrollBy(-50);     
 event.stop();  });   
$('scroll_up_50').observe('click',function(event){     
 scrollbar.scrollBy(50);     
 event.stop();  });   
$('scroll_top').observe('click',function(event){     
 scrollbar.scrollTo('top');     
 event.stop();  });   
$('scroll_bottom').observe('click',function(event){     
  //to animate a scroll operation you can pass true     
  //or a callback that will be called when scrolling is complete     
 scrollbar.scrollTo('bottom',function(){         
 if(typeof(console) != "undefined")             
 console.log('Finished scrolling to bottom.');     
 });      event.stop();  });   
$('scroll_second').observe('click',function(event){      //you can pass a number or element to scroll to     
  //if you pass an element, it will be centered, unless it is    
  //near the bottom of the container     
 scrollbar.scrollTo($('second_subhead'));     
 event.stop();  });    $('scroll_third').observe('click',function(event){     
  //passing true will animate the scroll     
  scrollbar.scrollTo($('third_subhead'),true);     
  event.stop(); 
  });   
 $('scroll_insert').observe('click',function(event){     
   $('scrollbar_content').insert('<p><b>Inserted: ' + $('repeat').innerHTML + '</b></p>');      //you only need to call this if ajax or dom operations modify the layout     
   //this is automatically called when the window resizes     
 scrollbar.recalculateLayout();    
 event.stop();  }); 
});
</script>
 
</body>
</html>

Walter Lee Davis

unread,
Oct 21, 2012, 11:55:25 AM10/21/12
to livepipe...@googlegroups.com
You can't mix Prototype and jQuery like this. Pick one major library or the other, but don't try to use both.

Walter

Shadowing

unread,
Oct 21, 2012, 12:01:37 PM10/21/12
to livepipe...@googlegroups.com
Thanks for the reply Walter
 
got rid of jquery didnt matter
if i cant use jquery then i'll have to move on, since my game is ajax with jquery and isnt webpage based
 
TypeError: Element.addMethods is not a function
Reply all
Reply to author
Forward
0 new messages