Member Avatar for vizz

For below code I want scrollbar that can scroll content inside div #inner_content. I have tried lots of scrollbars, but, nothing works. I have purchased this scrollbar which is also not working for my code. Suggest scrollbar which will work!

Help me please...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){

    $('#navlist li a').click(function(){

    var page= $(this).attr('href');        

    if ($('#content').is(':hidden')) {  

            $('#inner_content').load('' + page + '.php', 
                function(){
                    $('#content').show("slide",{direction:"down"},1000);  
                }); 
        }

    else {
            $('#content').hide("slide",{direction:"down"},1000, 
                function(){ 
                    $('#inner_content').load('' + page + '.php');
                 });
            $('#content').show("slide",{direction:"down"},1000);

        }
    return false;        

       });          

    });
</script>

HTML

<div id="wrapper">        
    <ul id="navlist">                          
      <li><a  href="about">About Us</a> </li>
      <li><a  href="services">Services</a> </li>
      <li><a  href="works">Works</a> </li>
      <li><a  href="clients">Clients</a> </li>
      <li><a  href="contact">Contact Us</a> </li>
    </ul> 

    <div id="content">
        <div id="inner_content"></div>
    </div>        
</div>

CSS

#content {
    width:660px;
    height:100%;
    min-height:770px;
    padding:0;
    display: none;
}
#inner_content{
    display: inline-block;
    position:relative;
    margin:20px 10px 10px 20px;
    padding:10px;
    width: 610px;
    height: 400px;
}

about.php

<div>    
    <h1>About</h1>
</div>

services.php

<div>    
    <h1>Services</h1>
</div>
Edited by vizz because: code alteration
  • 1 Contributor
  • 1 Reply
  • 154 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by vizz
Member Avatar for vizz

My following code is working as scroller but I want to convert it into scroller like this. I want to use jquery.mousewheel with my code. Also want to add scroll track, scroll button with onclick event.

script

var ele=$('#inner_content')
var speed=15,scroll=4,scrolling
$('#scroll-up').mouseenter(function(){
scrolling=window.setInterval(function(){
ele.scrollTop(ele.scrollTop()-scroll)
},speed)
})
$('#scroll-down').mouseenter(function(){
scrolling=window.setInterval(function(){
ele.scrollTop(ele.scrollTop()+scroll)
},speed)
})
$('#scroll-up, #scroll-down').bind({
click: function(e){
e.preventDefault()
},
mouseleave: function(){
if(scrolling){
window.clearInterval(scrolling)
scrolling=false}}
})

HTML

<div id="content">
    <div id="inner_content"> </div>

    <div id="scroller">      
        <a href="#" id="scroll-up">Up</a>
        <a href="#" id="scroll-down">Down</a>
    </div>
</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.