JavaScript - How To Positioning The Scrollbar?

When Scroll Bar is scrolling, at that time how can we find using js what is the element at the topmost position in that window pane only.

When the user scrolls down, the value of element at the time of that at topmost position


I'm trying to figure out which elements of a document are visible as
the user scrolls the Firefox browser. I haven't written the code yet
but I think I should be able to do it by keeping track of the current
display using the following properties:
window.content.scrollX, window.content.scrollY,
window.content.innerWidth, window.content.innerHeight. -- with these 4
I can determine which part of the document is visible.

Then for each element I can figure out its display position using,
offsetWidth, offsetHeight, offsetTop, offsetLeft. This would entail
traversing the DOM and perculating the offset values down to all the
children.

While this would likely work, it seems inefficient. Do you know of any
other ways to determine which elements are actually on the screen?

Hi, I'm currently working on a JavaScript scrollbar on my website: http://allotrope-dome.net.

I managed to get most of the code working. The only part that isn't working is that users can't click and drag on the scrollbar (click on the "About" section in the navigation bar to get a better idea of what I'm talking about). If any of you could help me out with that, I'd really appreciate it. Thanks!

To see the code, go to http://allotrope-dome.net/about.php and click "View Source."

http://www.hannahdesign.co.nz/client...ing-collateral

So here is what I have done so far:
- Used FlexCroll (1) to make custom scrollbars on the top image panel
- In the scrollbar - I have used a no-repeat background image that is 17px in width

Problems:
- When loading a vertical scrollbar appears
- The horizontal scrollbar does not go all the way to the end

Here is what I want to do:
- Disable the vertical scrollbar for ONLY this div (this same script is used for another vertical scrollbar - http://www.hannahdesign.co.nz/client/summary)
- Make the horizontal scrollbar limited to 17px or another set width.

I have included both my CSS and the uncompressed JS.


(1) - FlexCroll - http://www.hesido.com/web.php?page=customscrollbar

Hi,

I want to let my scrollbar start at a random point when a page opens. I would like the page to load each visit somewhere else and always random like let's say one time more in the middle of the page and the other time more at the end of the page and an other time somewhere else. Someone in php-forums told me that this can by done by Javascript. How do I do that?

Thanx for helping me out.

Best regards,

Thoaren

Appending to a div (id=right) over time. There is a scrollbar on the right side. At some point, the scrollbar appears but the user has to manually move the scrollbar to the bottom to see the newest appends.

Googled and found a number of "solutions" that I can't get to work. The ideal would be to always have the scrollbar move to the bottom after each append.

Code:

 #right {
    background-color: #FF0;
    width: 150px;
    height: 300px;
    float: right;
    overflow : auto;
  }

$("#right").append("<p>something important here");

I am using this code to control scrolling of 2 divs at the same time, but i want to be able control 3 (or more) divs at the same time.. what am i missing?

JS in head:
<script type="text/javascript">
function scrollDiv(controllingElement, controlledElementID)
{
var controlledElement = document.getElementById(controlledElementID);
controlledElement.scrollTop = controllingElement.scrollTop;
controlledElement.scrollLeft = controllingElement.scrollLeft;
}
</script>


JS in body applied to parent / controlling div:
<div id="master" onscroll="scrollDiv(this,'top');" > ...</div>


Names of the 2 divs controlled by "master":
<div id="top" >...</div>
<div id="bottom" >...</div>

Hi all,

I am currently building a PHP based site and need some help with a Javascript problem I have. I am relatively new to PHP and have not started on learning any Javascript yet!

I copied some Javascript that I found on 'http://www.javascriptkit.com/script/script2/htmltooltip.shtml' so that I could use tooltips. It works well and I have edited the CSS a bit to suit my needs. However I still have one problem which I can't solve as I believe it is the Javascript that is causing the problem.

My page (which has the tooltips and code on) has vertical and horizontal scrollbars that only allow you to move a tiny bit. They are unnecessary and even when I remove almost all the elements of the page, the scrollbars remain. When I remove the line '<script type="text/javascript" src="scripts/jquery-1.2.2.pack.js"></script>' from my code, the scrollbars dissappear, but this line is vital for the tooltips to function.

This script is available for download at the given URL above (it is in the center of the page called 'jquery-1.2.2.pack.js').

Please could somebody take a look and see if they can help, any advice appreciated.

Thanks Very Much
Dan

I am working on a ajax chat system right now and I've ran into a little problem. I have no idea how to go about doing this but I know there has to be a way of doing this because I've seen it done before on other ajax chats I've seen. How do I ago about moving the scrollbar of a div to the bottom so that it shows the last that has been entered into the chat.

If you need me to explain more then just let me know. But basically I'm wanting the scrollbar when it overflows in the window of a div to go and to the bottom when someone enters something new to the chat.

I have a site with hidden layers http://dyingtobemen.com/. I would like to have the scrollbar customized but I'm having problems finding anything that will work with hidden layers. Anyone know of something I can use with hidden layers to customize a scrollbar? Thanks.

Just want to say thanks in advance for all of those who can help me out with this.

Here is the page I'm working on: http://jackradetsky.com/recent_work.html

As you will see there are only two pictures on there now. I want the left table cell to have an up arrow and a down arrow below those pictures where the user can scroll (down and up) and see other pictures, which when clicked on will show a larger image to the right. It's setup now as you will see for the larger image to appear to the right. It's just not setup for this scroll function where the user can click on an up arrow or down arrow to make the users see the other pictures in the table cell. Also this section should not have a scrollbar show up when the pictures are being scrolled down to see. I'm not sure on how to proceed with this. Thank you for the help in advance. I appreciate it.

-Brian

Hi,

I'm just putting the finishing touches on my new website and decided to include a custom scroll bar to really finish off the look of a couple of pages.

I've managed to implement it successfully into one of my pages, however on another it seems to be a bit hit and miss as to whether it works in different browsers. After some experimentation I think I've managed to determine that the problem is that the javascript for the custom scrollbar is conflicting with some other javascript on the same page (lightbox image viewer).

I came to this conclusion as prior to adding the custom scrollbar lightbox worked fine, and now after adding the addition javascript for the scrollbar lightbox has stopped working (and the scrollbar is hit and miss as to whether it works). In addition as I say, I have implemented the scrollbar into a different page (which doesn't have any other javascript to conflict with) which seems to work fine.

Here's the page prior to adding the new scrollbar and with lightbox working:

Here's the page with the scrollbar added and lightbox not working:

The code that I suspect is conflicting is as follows:

Code:

 
<!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=ISO-8859-1" />
<title>Ryan Robinson | Gear</title>
<!-- lightbox script -->
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<!-- scrollbar script -->
<link rel="stylesheet" href="scrollbar/css/scrollbar_gear.css" type="text/css" media="screen"/>	
<script type="text/javascript" src="scrollbar/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scrollbar/js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			$('#scrollbar1').tinyscrollbar();	
		});
</script>

I could be wrong, but considering they work separately but whenever I put them together one or both stops it leads me to believe this must be the problem.

Anyone have any idea of how I might fix this?
(PS. I am still a bit of a noob when it comes to code, so please make any suggestions as simple as possible!)

Thanks

Thanks to everyone for all the help so far. I've done a search for this but haven't found anything applicable.

I have a Spry dataset pulling form an External XML file. The masterColumn needs to scroll horizontally. You can see what I'm talking about here. Under the "pics" section.

(Thanks again JWPhillips and Tiny Script for helping to get the shuffle to work. And yeah, not everything is ready so It looks choppy.)

Anyway, this is the div tag in question:
Code:

<div id="contentpics">
      <div class="MasterDetail">
  <div spry:region="ds2" class="MasterContainer">

    <img  class="MasterColumn" spry:repeat="ds2" spry:setrow="ds2" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected" src="{thumb}" width="80" height="80"/></div>
  
        <div spry:detailregion="ds2" class="DetailContainer">
          <div class="DetailColumn"><img name="" src="{large}"  alt="" width="350" height="350"/></div>
        </div>
        <br style="clear:both" />
      </div>
    </div>

I've tried several JS custom scrollbars, but I don't think that they work with the spry. Any suggestions?

Thanks,

SweetAnne

Hi All,

I have a javascript scrollbar in the middle of the webpage, with two images as arrow at both end. Onclick of up and down arrow images the inside content moves up and down respectively. All works fine. What I need is, when I scroll down the down arrow should be disabled or invisible (as there is nothing to scrolldown) and same way when the content is at the top, the up arrow should be disabled or invisible. Please help...

Sharing the code :

<body>

<script src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/dw_event.js" type="text/javascript"></script>
<script src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/dw_scroll.js" type="text/javascript"></script>
<script src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/scroll_controls.js" type="text/javascript"></script>
<script type="text/javascript">
function init_dw_Scroll() {
var wndo = new dw_scrollObj('wn1', 'lyr1');
wndo.setUpScrollControls('scroll_links');
wndo.setUpScrollControls('wn1');
var wndo2 = new dw_scrollObj('wn2', 'lyr2');
var wndo3 = new dw_scrollObj('wn3', 'lyr3');
wndo3.setUpScrollbar("dragBar", "track", "v", 1, 1);
wndo3.setUpScrollControls('scrollbar');
wndo3.setUpScrollControls('extra_controls');
wndo3.setUpScrollControls('wn3');
}
if ( dw_scrollObj.isSupported() ) {
dw_writeStyleSheet('http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/vert.css');
dw_Event.add( window, 'load', init_dw_Scroll);
}
</script>
<link rel="stylesheet" href="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/vert.css" media="screen">
<h2>Demonstration</h2>
<div class="holder1">
<div class="hasImage scroll_controls" id="scroll_links">
<a class="mouseover_up up" href=""><img src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/tri-up.gif" alt="" width="12" height="12"></a>
<a class="mouseover_down dn" href=""><img src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/tri-dn.gif" alt="" width="12" height="12"></a>
</div>
<div id="wn1">
<div style="left: 0px; top: 0px; visibility: visible;" id="lyr1">
<h3>Mouseover Scrolling </h3>
<p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p>
<p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p>
<p>The
documentation provides information for setup. The download file
contains examples in individual files for your convenience and ease of
implementation.</p>
<p>The code supports the capability to
hide or swap images when the end is reached. Further information is
provided upon request to licensed users of the code.</p>
<p>Content repeated for your scrolling pleasure </p>
<p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p>
<p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p>
<p>The
documentation provides information for setup. The download file
contains examples in individual files for your convenience and ease of
implementation.</p>
<p>The code supports the capability to
hide or swap images when the end is reached. Further information is
provided upon request to licensed users of the code.</p>
<p>Back to the <a href="#" class="click_up_to_0_0">top</a></p>
</div>
</div>
</div>

Hey guys. I've been trying to figure this out now for the past 9 hours and I have no idea what I'm doing...lol

Ok, I have images inside of a container that is inside of an iframe. When I click on an image, content underneath is revealed by sliding everything underneath it down. The problem I have is that when it slides the content down, all the other images and content are cut off. I want it that when the content extends past the height of the div#container, it autoresizes, if that's possible. But I don't wanna use the iframe scrollbar. Only the parent scrollbar.

Here's a link for the entire code of the Website. Open up index.html, click on Salvation and click on one or two of the images, and you'll see what I'm talking about. The salvation.html is the source for the iframe.

http://www.mediafire.com/?zqzym4iniyd

Thanks so much for your help!