div fixed but scrollable (kinda)

  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

I'm not sure I can explain this right:
Say there is a web page with a header and a footer. With a main div between those with the main content.
The background of the body is an image.
I need the main div to glide over the background image rather than scroll with it. Then once you scroll to the bottom of the main div it will catch and scroll down to the footer. Scrolling up will scroll through the div until it gets to the top and then up to the header. Try to think of the main div as having no friction underneath it. The background only slips past it. The only scrollbar on this is on the window, not the main div.
I think that's the best way to explain it.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9099
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Not sure I am following completely, is either the header or footer at least showing at any given time? Or at times will it just be the body? Sounds to me like you may want to look into the position:fixed attribute with CSS, and depending on exactly what you are trying to accomplish you may need to use JavaScript to dynamically change elements to whether the position is fixed, or relative. Sort of like the sidebar on Ozzu currently.
  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

Yeah I figured it would take some JavaScript. It's really hard to explain. I'm going to try to find a better way.

Maybe I can ask how to do some parts of it, because I got an idea of how I would do it.

Is there a way to make a scrollbar not visible just automatically active once that div reaches the top of the window?
Then once you reach the bottom of that div, scrolling downward will scroll the entire page rather than just that div.

So just a normal scroll on the window until the main div reaches the top of the screen, then that div starts scrolling instead of the window until it reaches the bottom of the div, then window scrolls again.
It will work the same in reverse. To where scrolling down the screen will seem completely seamless.

so say if the body is 1000px high, but the
head div is 300px high,
then main div (the one I want to work this way) is 800px high,
then the foot div is 300px high.

But they all fit within that background because the main div automatically starts scrolling when scrolling up or down the window.

I guess that's the only way I could figure to do it. The biggest thing I don't know how to accomplish is making the main div scroll without a visible scrollbar on it. Just one with the page.

Sorry about all the explanation, I just wanted to do my best to make it clear.

The main reason for this is because the body's background as a unique background image, and the main div content will be an unpredictable amount, so if I make the page stretch with it, the background image will become distorted. And the client doesn't want there to be any scrollbar on the main div. So the point is fitting this amount of height on a limited height background/body.

I tried using a jquery scrollbar plugin to make an invisible scrollbar but it scrolls choppy. I need it to to flow at the same rate as the window.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

I'm not sure if you would be able to accomplish this using traditional scroll bars, If I understand the scope correctly.

You want one scroll bar to control the windows scroll and the scroll of the div tag. But with an exception of scrolling the window down only when the div reaches max scroll an scrolling the window up when the div reaches the min scroll. As well as activating the div scroll only when the bottom of the div reaches the bottom of the window.

I that is correct I believe your only option is making a scroll bar and setting the window and the div to overflow:hidden

I'll try to build an example of my understanding
  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

I thought about that, but I was worried about cross-browser or platform showing a part of the scroll bar. You think it can be done to be invisible in all browsers and computers? Maybe if I just overkill the overflow? Let me know what you think on that.

To make sure I understood what you were saying, you are talking about cutting off the scrollbar in an overflow hidden on the x-axis?

And it looks like you understand what I'm trying to do.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

This is by all means not Completed nor does it fully work. This still needs a lot of work but here is the basis of my understanding

HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crazy Scroll</title>
 
<!-- CSS -->
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
 
html, body {
   height:100%;
   margin:0px;
}
 
#page {
   height: 100%;
   overflow:hidden;
}
 
#header_container {
   height:300px;
   background-color:#CCC;
}
 
#content_container {
   height: 800px;
   overflow:hidden;
}
 
#footer_container {
   height:300px;
   background-color:#0CF;
}
 
#slider_vertical {
   height: 97%;
   float:right;
   margin-left:5px;
   margin-right:5px;
}
 
</style>
 
<!-- Javascript -->
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
 
$(document).ready(function() {
   
   $("#slider_vertical").slider({
      orientation: "vertical",
      range: "min",
      min: (($("#page")[0].scrollHeight + $("#content_container")[0].scrollHeight) * -1),
      max: 0,
      value: 0,
      slide: function(event, ui) {
         
         var scroll_pos = ($("#slider_vertical").slider("value") * -1);
         
         if(scroll_pos >= (($("#header_container").height() + $("#content_container").height()) - $(window).height()) && ($("#content_container").scrollTop() + $(window).innerHeight()) <= $("#content_container")[0].scrollHeight) {
           
            $("#content_container").scrollTop(scroll_pos - (($("#header_container").height() + $("#content_container").height()) - $(window).height()));
           
            $("#helper").html(($("#content_container").scrollTop() + $(window).innerHeight()) +'  '+ $("#content_container")[0].scrollHeight);
           
         } else {
         
            $("#page").scrollTop(scroll_pos - $("#content_container").scrollTop());
         
         }
         
      }
   });
 
   
   $("#slider_vertical").css({
      "margin-top": ($(window).outerHeight(true)/2)-($("#slider_vertical").outerHeight(true)/2) + "px"
   });
   
});
 
</script>
</head>
 
<body>
<div style="width:200px; height:200px; background-color:#FFF; position:absolute;" id="helper"></div>
<div id="slider_vertical"></div>
<div id="page">
    <div id="header_container">Yay I'm a Header, I've got this cool new headband!</div>
    <div id="content_container">
    Start Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    End Test<br />
    </div>
    <div id="footer_container">I'm just a Footer, I've got a hole in my sock.</div>
</div>
</body>
</html>
 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Crazy Scroll</title>
  6.  
  7. <!-- CSS -->
  8. <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
  9. <style type="text/css">
  10.  
  11. html, body {
  12.    height:100%;
  13.    margin:0px;
  14. }
  15.  
  16. #page {
  17.    height: 100%;
  18.    overflow:hidden;
  19. }
  20.  
  21. #header_container {
  22.    height:300px;
  23.    background-color:#CCC;
  24. }
  25.  
  26. #content_container {
  27.    height: 800px;
  28.    overflow:hidden;
  29. }
  30.  
  31. #footer_container {
  32.    height:300px;
  33.    background-color:#0CF;
  34. }
  35.  
  36. #slider_vertical {
  37.    height: 97%;
  38.    float:right;
  39.    margin-left:5px;
  40.    margin-right:5px;
  41. }
  42.  
  43. </style>
  44.  
  45. <!-- Javascript -->
  46. <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
  47. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
  48. <script type="text/javascript">
  49.  
  50. $(document).ready(function() {
  51.    
  52.    $("#slider_vertical").slider({
  53.       orientation: "vertical",
  54.       range: "min",
  55.       min: (($("#page")[0].scrollHeight + $("#content_container")[0].scrollHeight) * -1),
  56.       max: 0,
  57.       value: 0,
  58.       slide: function(event, ui) {
  59.          
  60.          var scroll_pos = ($("#slider_vertical").slider("value") * -1);
  61.          
  62.          if(scroll_pos >= (($("#header_container").height() + $("#content_container").height()) - $(window).height()) && ($("#content_container").scrollTop() + $(window).innerHeight()) <= $("#content_container")[0].scrollHeight) {
  63.            
  64.             $("#content_container").scrollTop(scroll_pos - (($("#header_container").height() + $("#content_container").height()) - $(window).height()));
  65.            
  66.             $("#helper").html(($("#content_container").scrollTop() + $(window).innerHeight()) +'  '+ $("#content_container")[0].scrollHeight);
  67.            
  68.          } else {
  69.          
  70.             $("#page").scrollTop(scroll_pos - $("#content_container").scrollTop());
  71.          
  72.          }
  73.          
  74.       }
  75.    });
  76.  
  77.    
  78.    $("#slider_vertical").css({
  79.       "margin-top": ($(window).outerHeight(true)/2)-($("#slider_vertical").outerHeight(true)/2) + "px"
  80.    });
  81.    
  82. });
  83.  
  84. </script>
  85. </head>
  86.  
  87. <body>
  88. <div style="width:200px; height:200px; background-color:#FFF; position:absolute;" id="helper"></div>
  89. <div id="slider_vertical"></div>
  90. <div id="page">
  91.     <div id="header_container">Yay I'm a Header, I've got this cool new headband!</div>
  92.     <div id="content_container">
  93.     Start Test<br />
  94.     Test<br />
  95.     Test<br />
  96.     Test<br />
  97.     Test<br />
  98.     Test<br />
  99.     Test<br />
  100.     Test<br />
  101.     Test<br />
  102.     Test<br />
  103.     Test<br />
  104.     Test<br />
  105.     Test<br />
  106.     Test<br />
  107.     Test<br />
  108.     Test<br />
  109.     Test<br />
  110.     Test<br />
  111.     Test<br />
  112.     Test<br />
  113.     Test<br />
  114.     Test<br />
  115.     Test<br />
  116.     Test<br />
  117.     Test<br />
  118.     Test<br />
  119.     Test<br />
  120.     Test<br />
  121.     Test<br />
  122.     Test<br />
  123.     Test<br />
  124.     Test<br />
  125.     Test<br />
  126.     Test<br />
  127.     Test<br />
  128.     Test<br />
  129.     Test<br />
  130.     Test<br />
  131.     Test<br />
  132.     Test<br />
  133.     Test<br />
  134.     Test<br />
  135.     Test<br />
  136.     Test<br />
  137.     Test<br />
  138.     Test<br />
  139.     Test<br />
  140.     Test<br />
  141.     Test<br />
  142.     Test<br />
  143.     Test<br />
  144.     Test<br />
  145.     Test<br />
  146.     Test<br />
  147.     Test<br />
  148.     Test<br />
  149.     Test<br />
  150.     Test<br />
  151.     Test<br />
  152.     Test<br />
  153.     Test<br />
  154.     Test<br />
  155.     Test<br />
  156.     Test<br />
  157.     Test<br />
  158.     Test<br />
  159.     Test<br />
  160.     Test<br />
  161.     Test<br />
  162.     Test<br />
  163.     Test<br />
  164.     Test<br />
  165.     Test<br />
  166.     Test<br />
  167.     Test<br />
  168.     Test<br />
  169.     Test<br />
  170.     Test<br />
  171.     Test<br />
  172.     Test<br />
  173.     Test<br />
  174.     Test<br />
  175.     Test<br />
  176.     Test<br />
  177.     Test<br />
  178.     Test<br />
  179.     Test<br />
  180.     Test<br />
  181.     Test<br />
  182.     Test<br />
  183.     Test<br />
  184.     Test<br />
  185.     Test<br />
  186.     Test<br />
  187.     Test<br />
  188.     Test<br />
  189.     Test<br />
  190.     Test<br />
  191.     Test<br />
  192.     Test<br />
  193.     Test<br />
  194.     Test<br />
  195.     Test<br />
  196.     Test<br />
  197.     Test<br />
  198.     Test<br />
  199.     Test<br />
  200.     Test<br />
  201.     Test<br />
  202.     Test<br />
  203.     Test<br />
  204.     Test<br />
  205.     Test<br />
  206.     Test<br />
  207.     Test<br />
  208.     Test<br />
  209.     End Test<br />
  210.     </div>
  211.     <div id="footer_container">I'm just a Footer, I've got a hole in my sock.</div>
  212. </div>
  213. </body>
  214. </html>
  215.  
  216.  


SO far this is only to give you an idea of what i think you mean that kinda works lol
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Here is a refined version still needs work but works better

HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crazy Scroll</title>
 
<!-- CSS -->
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
 
html, body {
   height:100%;
   margin:0px;
   overflow:hidden;
}
 
#page {
   height: 100%;
   overflow:hidden;
}
 
#header_container {
   height:300px;
   background-color:#CCC;
}
 
#content_container {
   height: 800px;
   overflow:hidden;
}
 
#footer_container {
   height:300px;
   background-color:#0CF;
}
 
#scroll_bar {
   float:right;
   margin-left:5px;
   margin-right:12px;
   height:100%;
   width:16px;
   font-size:10pt;
}
 
#scroll_up {
   margin-top:5px;
   margin-bottom:16px;
}
 
#slider_vertical {
}
 
#scroll_down {
   margin-top:16px;
   margin-bottom:5px;
}
 
</style>
 
<!-- Javascript -->
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
 
$(document).ready(function() {
   
   // Reset scrolls
   $("#page").scrollTop(0);
   $("#content_container").scrollTop(0);
   
   $("#slider_vertical").slider({
      orientation: "vertical",
      range: "min",
      min: ((($("#page")[0].scrollHeight - $(window).height()) + ($("#content_container")[0].scrollHeight - $(window).height())) * -1),
      max: 0,
      value: 0,
      slide: function(event, ui) {
         
         // Scroll the page
         page_scroller();
         
      }
   });
 
   // Make the arrows
   $("#scroll_up, #scroll_down").button().bind("mousedown", function() {
     
      // Get the id
      var id = this.id;
   
      // Get the slider value
      var slider_value = $("#slider_vertical").slider("value");
     
      // What button?
      if(id == 'scroll_up') {
         
         // Set the scroller
         $("#slider_vertical").slider("value", slider_value + 15);
         
      } else {
         
         // Set the scroller
         $("#slider_vertical").slider("value", slider_value - 15);
         
      }
     
      // Scroll the page
      page_scroller();
     
   });
   
   // Set the height of the bar
   $("#slider_vertical").css({
      "height": 100 - (((parseInt($("#scroll_up").outerHeight() + 2) / $(window).height()) * 100) * 4) + '%'
   });
 
    // Center the bar vertically in the window
   $("#slider_vertical").css({
      "margin-top": ($(window).outerHeight(true)/2)-(($("#slider_vertical").outerHeight(true)/2) + ($("#scroll_up").outerHeight(true)/2) + ($("#scroll_down").outerHeight(true)/2)) + "px",
      "margin-left": ($("#scroll_bar").outerWidth()/2)-(($("#slider_vertical").outerWidth(true)/2)-3) + "px"
   });
   
   // Center the bar vertically in the window
   $("#scroll_up, #scroll_down").css({
      "margin-left": ($("#scroll_up").outerWidth()/2)-(($("#slider_vertical").outerWidth()/2)) + "px"
   });
   
   // Bind the mouse wheel to the window
   $(window).bind('DOMMouseScroll mousewheel', function(e){
   
      // Get the slider value
      var slider_value = $("#slider_vertical").slider("value");
     
      // Check to see id we are scrolling up or down
      if(e.originalEvent.wheelDelta < 0 || e.originalEvent.detail > 0) {
     
         // Set the scroller
         $("#slider_vertical").slider("value", slider_value - 15);
     
      } else{
     
         // Set the scroller
         $("#slider_vertical").slider("value", slider_value + 15);
         
      }
     
      // Scroll the page
      page_scroller();
     
   });   
   
});
 
// This function will set the scroller to be more OO Compliant
function page_scroller() {
   
   // Get the scroll position
   var scroll_pos = ($("#slider_vertical").slider("value") * -1);
   
   // Test to see in the bottom of the scrolling div tag is at the bottom of the window
   if(scroll_pos >= (($("#header_container").height() + $("#content_container").height()) - $(window).height())) {
     
      // Scroll the div tag
      $("#content_container").scrollTop(scroll_pos - (($("#header_container").height() + $("#content_container").height()) - $(window).height()));
     
   }
   
   // Check to see if we are trying to scroll the window above or below the scrolling div tag
   if(($("#content_container").scrollTop() + $(window).innerHeight()) <= $("#content_container")[0].scrollHeight) {
     
      // Scroll the page - This marks the area above the scrolling div
      $("#page").scrollTop(scroll_pos - $("#content_container").scrollTop());
     
   } else {
     
      // Scroll the page - This marks the area below the scrolling div
      $("#page").scrollTop(scroll_pos - $("#content_container").scrollTop());
   
   }
 
}
</script>
</head>
 
<body>
<div style="width:200px; height:200px; background-color:#FFF; position:absolute; display:none;" id="helper"></div>
<div id="scroll_bar">
    <span id="scroll_up" class="ui-icon ui-icon-triangle-1-n"></span>
    <div id="slider_vertical"></div>
    <span id="scroll_down" class="ui-icon ui-icon-triangle-1-s"></span>
</div>
<div id="page">
    <div id="header_container">Yay I'm a Header, I've got this cool new headband!</div>
    <div id="content_container">
    Start Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    End Test<br />
    </div>
    <div id="footer_container">I'm just a Footer, I've got a hole in my sock.</div>
</div>
</body>
</html>
 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Crazy Scroll</title>
  6.  
  7. <!-- CSS -->
  8. <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
  9. <style type="text/css">
  10.  
  11. html, body {
  12.    height:100%;
  13.    margin:0px;
  14.    overflow:hidden;
  15. }
  16.  
  17. #page {
  18.    height: 100%;
  19.    overflow:hidden;
  20. }
  21.  
  22. #header_container {
  23.    height:300px;
  24.    background-color:#CCC;
  25. }
  26.  
  27. #content_container {
  28.    height: 800px;
  29.    overflow:hidden;
  30. }
  31.  
  32. #footer_container {
  33.    height:300px;
  34.    background-color:#0CF;
  35. }
  36.  
  37. #scroll_bar {
  38.    float:right;
  39.    margin-left:5px;
  40.    margin-right:12px;
  41.    height:100%;
  42.    width:16px;
  43.    font-size:10pt;
  44. }
  45.  
  46. #scroll_up {
  47.    margin-top:5px;
  48.    margin-bottom:16px;
  49. }
  50.  
  51. #slider_vertical {
  52. }
  53.  
  54. #scroll_down {
  55.    margin-top:16px;
  56.    margin-bottom:5px;
  57. }
  58.  
  59. </style>
  60.  
  61. <!-- Javascript -->
  62. <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
  63. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
  64. <script type="text/javascript">
  65.  
  66. $(document).ready(function() {
  67.    
  68.    // Reset scrolls
  69.    $("#page").scrollTop(0);
  70.    $("#content_container").scrollTop(0);
  71.    
  72.    $("#slider_vertical").slider({
  73.       orientation: "vertical",
  74.       range: "min",
  75.       min: ((($("#page")[0].scrollHeight - $(window).height()) + ($("#content_container")[0].scrollHeight - $(window).height())) * -1),
  76.       max: 0,
  77.       value: 0,
  78.       slide: function(event, ui) {
  79.          
  80.          // Scroll the page
  81.          page_scroller();
  82.          
  83.       }
  84.    });
  85.  
  86.    // Make the arrows
  87.    $("#scroll_up, #scroll_down").button().bind("mousedown", function() {
  88.      
  89.       // Get the id
  90.       var id = this.id;
  91.    
  92.       // Get the slider value
  93.       var slider_value = $("#slider_vertical").slider("value");
  94.      
  95.       // What button?
  96.       if(id == 'scroll_up') {
  97.          
  98.          // Set the scroller
  99.          $("#slider_vertical").slider("value", slider_value + 15);
  100.          
  101.       } else {
  102.          
  103.          // Set the scroller
  104.          $("#slider_vertical").slider("value", slider_value - 15);
  105.          
  106.       }
  107.      
  108.       // Scroll the page
  109.       page_scroller();
  110.      
  111.    });
  112.    
  113.    // Set the height of the bar
  114.    $("#slider_vertical").css({
  115.       "height": 100 - (((parseInt($("#scroll_up").outerHeight() + 2) / $(window).height()) * 100) * 4) + '%'
  116.    });
  117.  
  118.     // Center the bar vertically in the window
  119.    $("#slider_vertical").css({
  120.       "margin-top": ($(window).outerHeight(true)/2)-(($("#slider_vertical").outerHeight(true)/2) + ($("#scroll_up").outerHeight(true)/2) + ($("#scroll_down").outerHeight(true)/2)) + "px",
  121.       "margin-left": ($("#scroll_bar").outerWidth()/2)-(($("#slider_vertical").outerWidth(true)/2)-3) + "px"
  122.    });
  123.    
  124.    // Center the bar vertically in the window
  125.    $("#scroll_up, #scroll_down").css({
  126.       "margin-left": ($("#scroll_up").outerWidth()/2)-(($("#slider_vertical").outerWidth()/2)) + "px"
  127.    });
  128.    
  129.    // Bind the mouse wheel to the window
  130.    $(window).bind('DOMMouseScroll mousewheel', function(e){
  131.    
  132.       // Get the slider value
  133.       var slider_value = $("#slider_vertical").slider("value");
  134.      
  135.       // Check to see id we are scrolling up or down
  136.       if(e.originalEvent.wheelDelta < 0 || e.originalEvent.detail > 0) {
  137.      
  138.          // Set the scroller
  139.          $("#slider_vertical").slider("value", slider_value - 15);
  140.      
  141.       } else{
  142.      
  143.          // Set the scroller
  144.          $("#slider_vertical").slider("value", slider_value + 15);
  145.          
  146.       }
  147.      
  148.       // Scroll the page
  149.       page_scroller();
  150.      
  151.    });   
  152.    
  153. });
  154.  
  155. // This function will set the scroller to be more OO Compliant
  156. function page_scroller() {
  157.    
  158.    // Get the scroll position
  159.    var scroll_pos = ($("#slider_vertical").slider("value") * -1);
  160.    
  161.    // Test to see in the bottom of the scrolling div tag is at the bottom of the window
  162.    if(scroll_pos >= (($("#header_container").height() + $("#content_container").height()) - $(window).height())) {
  163.      
  164.       // Scroll the div tag
  165.       $("#content_container").scrollTop(scroll_pos - (($("#header_container").height() + $("#content_container").height()) - $(window).height()));
  166.      
  167.    }
  168.    
  169.    // Check to see if we are trying to scroll the window above or below the scrolling div tag
  170.    if(($("#content_container").scrollTop() + $(window).innerHeight()) <= $("#content_container")[0].scrollHeight) {
  171.      
  172.       // Scroll the page - This marks the area above the scrolling div
  173.       $("#page").scrollTop(scroll_pos - $("#content_container").scrollTop());
  174.      
  175.    } else {
  176.      
  177.       // Scroll the page - This marks the area below the scrolling div
  178.       $("#page").scrollTop(scroll_pos - $("#content_container").scrollTop());
  179.    
  180.    }
  181.  
  182. }
  183. </script>
  184. </head>
  185.  
  186. <body>
  187. <div style="width:200px; height:200px; background-color:#FFF; position:absolute; display:none;" id="helper"></div>
  188. <div id="scroll_bar">
  189.     <span id="scroll_up" class="ui-icon ui-icon-triangle-1-n"></span>
  190.     <div id="slider_vertical"></div>
  191.     <span id="scroll_down" class="ui-icon ui-icon-triangle-1-s"></span>
  192. </div>
  193. <div id="page">
  194.     <div id="header_container">Yay I'm a Header, I've got this cool new headband!</div>
  195.     <div id="content_container">
  196.     Start Test<br />
  197.     Test<br />
  198.     Test<br />
  199.     Test<br />
  200.     Test<br />
  201.     Test<br />
  202.     Test<br />
  203.     Test<br />
  204.     Test<br />
  205.     Test<br />
  206.     Test<br />
  207.     Test<br />
  208.     Test<br />
  209.     Test<br />
  210.     Test<br />
  211.     Test<br />
  212.     Test<br />
  213.     Test<br />
  214.     Test<br />
  215.     Test<br />
  216.     Test<br />
  217.     Test<br />
  218.     Test<br />
  219.     Test<br />
  220.     Test<br />
  221.     Test<br />
  222.     Test<br />
  223.     Test<br />
  224.     Test<br />
  225.     Test<br />
  226.     Test<br />
  227.     Test<br />
  228.     Test<br />
  229.     Test<br />
  230.     Test<br />
  231.     Test<br />
  232.     Test<br />
  233.     Test<br />
  234.     Test<br />
  235.     Test<br />
  236.     Test<br />
  237.     Test<br />
  238.     Test<br />
  239.     Test<br />
  240.     Test<br />
  241.     Test<br />
  242.     Test<br />
  243.     Test<br />
  244.     Test<br />
  245.     Test<br />
  246.     Test<br />
  247.     Test<br />
  248.     Test<br />
  249.     Test<br />
  250.     Test<br />
  251.     Test<br />
  252.     Test<br />
  253.     Test<br />
  254.     Test<br />
  255.     Test<br />
  256.     Test<br />
  257.     Test<br />
  258.     Test<br />
  259.     Test<br />
  260.     Test<br />
  261.     Test<br />
  262.     Test<br />
  263.     Test<br />
  264.     Test<br />
  265.     Test<br />
  266.     Test<br />
  267.     Test<br />
  268.     Test<br />
  269.     Test<br />
  270.     Test<br />
  271.     Test<br />
  272.     Test<br />
  273.     Test<br />
  274.     Test<br />
  275.     Test<br />
  276.     Test<br />
  277.     Test<br />
  278.     Test<br />
  279.     Test<br />
  280.     Test<br />
  281.     Test<br />
  282.     Test<br />
  283.     Test<br />
  284.     Test<br />
  285.     Test<br />
  286.     Test<br />
  287.     Test<br />
  288.     Test<br />
  289.     Test<br />
  290.     Test<br />
  291.     Test<br />
  292.     Test<br />
  293.     Test<br />
  294.     Test<br />
  295.     Test<br />
  296.     Test<br />
  297.     Test<br />
  298.     Test<br />
  299.     Test<br />
  300.     Test<br />
  301.     Test<br />
  302.     Test<br />
  303.     Test<br />
  304.     Test<br />
  305.     Test<br />
  306.     Test<br />
  307.     Test<br />
  308.     Test<br />
  309.     Test<br />
  310.     Test<br />
  311.     Test<br />
  312.     End Test<br />
  313.     </div>
  314.     <div id="footer_container">I'm just a Footer, I've got a hole in my sock.</div>
  315. </div>
  316. </body>
  317. </html>
  318.  
  319.  
  • zhulin
  • Born
  • Born
  • zhulin
  • Posts: 1

Post 3+ Months Ago

I'm not sure if you would be able to achieve this using conventional search cafes, If I comprehend the opportunity properly.

You want one search bar to management the windows search and the search of the div tag. But with an exemption of scrolling the screen down only when the div gets to max search an scrolling the screen up when the div gets to the min search. As well as initiating the div search only when the end of the div gets to the end of the screen.

I that is appropriate I believe your only choice is creating a search bar and establishing the screen and the div to overflow:hidden

I'll try to develop an example of my understanding
  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

Sorry I haven't responded Scott, I tried out your code, it's not EXACTLY what I need, but it's definitely enough to follow as a guideline for creating what I need. It helps a lot, thanks.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

I'm glad it helps. This was my understanding of what you were talking about. Post your final outcome once you achieve the desired outcome. if your need help on something I'm glad to help

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 15 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.