SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript help with scrolling up and down oddcast

    Hello,

    I have two regions, one left side where I will have all my questions and on the right side, I will have a another area where I can display the answers.

    So what I basically wants is when I scroll the left side, automatically my right side region should also to be scrolled. Something like on this site

    https://www.vitalchart.com/patients/...esEnabled=True

    The right side part automatically comes down when you scroll down.

    How can I do this? Any ehlp is highly appreciable as I am new to Javascript.

    Thanks

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't visit that link, it's got ... an elipsis in it.

    Here's an example of what I think you're after:
    Code:
    <html>
    <head>
    <style type="text/css">
    #leftpane {
    	width: 200px;
    	height: 200px;
    	overflow: auto;
    	background-color: #DDDDDD;
    	float: left;
    	margin: 5px;
    	font-size: 1.2em;
    }	
    #rightpane {
    	width: 400px;
    	height: 500px;
    	overflow: auto;
    	margin: 5px;
    	background-color: #FFCCCC;
    }
    </style>
    <script type="text/javascript">
    var theObjs = [
    	["l_1", "r_1"],
    	["l_2", "r_2"],
    	["l_3", "r_3"],
    	["l_4", "r_4"],
    	["l_5", "r_5"]
    ]; // list of ids on left side and matching id on right
    
    window.onload = function () {
    	// set onscroll event handlers for the 2 scrolling divs
    	document.getElementById("leftpane").onscroll = scrollLeft;
    	document.getElementById("rightpane").onscroll = scrollRight;
    }
    
    function scrollIt(obj, whichside) {
    	var topdown = obj.scrollTop; // the distance scrolled down from the top
    	var thisside = (whichside == "right" ? 1 : 0); // the array index for this side
    	var otherside = (whichside == "right" ? 0 : 1); // the array index for the other side
    
    	for (var i=0; i < theObjs.length; i++) {
    		topdown -= document.getElementById(theObjs[i][thisside]).offsetHeight;
    		if (topdown < 0) {
    			// i contains the index of the id that's visible at the top of the scrolled div
    			var otherPart = document.getElementById(theObjs[i][otherside]); // get a reference to the corresponding object on the other side
    			otherPart.scrollIntoView(); // scroll it to top of the other div
    			break;
    		}
    	}
    }
    
    function scrollLeft() {
    	scrollIt(this, "left");
    }
    
    function scrollRight() {
    	scrollIt(this, "right");	
    }
    </script>
    </head>
    <body>
    <div id="leftpane">
    <p id="l_1">Lorem ipsum dolor sit amet, consectetuer adipiscing...</p>
    <p id="l_2">Curabitur tristique, arcu eget mollis iaculis, risus...</p>
    <p id="l_3">Quisque cursus, nisl et sagittis placerat, sem lectus...</p>
    <p id="l_4">Nunc neque odio, aliquet sed, aliquam eget, vehicula...</p>
    <p id="l_5">Nullam dapibus. Phasellus turpis. Vivamus id quam a...</p>
    </div>
    <div id="rightpane">
    <p id="r_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed laoreet, eros vitae condimentum laoreet, lorem diam gravida tortor, a euismod neque purus id eros. Cras sollicitudin, quam et rutrum pulvinar, quam purus aliquet nulla, ut lacinia sapien ipsum imperdiet dui. Quisque erat nisl, tristique sit amet, tempus sit amet, hendrerit in, justo. Cras nec odio vel nunc lobortis interdum. Praesent vel augue. Proin pharetra quam id tortor. Vivamus id dolor. Nam sit amet augue. Vestibulum sit amet nunc. Etiam quis urna vel mi consectetuer ornare. Mauris ultrices risus at nisl. </p>
    <p id="r_2">Curabitur tristique, arcu eget mollis iaculis, risus elit porta diam, a varius libero est vel tellus. Sed suscipit tortor sed orci. Sed ipsum mauris, fringilla quis, pharetra hendrerit, euismod ut, lorem. Quisque sagittis lobortis odio. Nam sit amet lorem. Maecenas a libero non orci dictum ornare. Maecenas massa quam, ultricies tempor, egestas ac, lacinia a, nisi. Sed nisi. Mauris ipsum sapien, hendrerit nec, tincidunt eu, dapibus non, mauris. In hac habitasse platea dictumst. </p>
    <p id="r_3">Quisque cursus, nisl et sagittis placerat, sem lectus imperdiet pede, non consectetuer magna pede ornare lacus. Fusce at justo. In sit amet nibh in lorem tempor hendrerit. Proin a enim. Mauris quis turpis. Nunc aliquet odio vel neque. Duis ullamcorper, arcu in suscipit posuere, sem ligula pellentesque mauris, sit amet rhoncus nunc turpis ut nisl. Donec bibendum libero quis neque. Phasellus auctor justo eget nulla. In non nisi id massa vulputate eleifend. Donec pellentesque magna non purus. Duis rhoncus. Fusce eget arcu vel magna pulvinar tristique. Nulla facilisi. Vivamus accumsan massa eu arcu. Nulla facilisi. Maecenas dignissim justo non dolor. </p>
    <p id="r_4">Nunc neque odio, aliquet sed, aliquam eget, vehicula vitae, nulla. Cras lobortis sagittis metus. Suspendisse potenti. Maecenas elit purus, cursus sed, condimentum viverra, fringilla sed, leo. Aenean consequat interdum purus. Nullam faucibus sodales mi. Donec sem enim, porttitor et, suscipit non, venenatis id, massa. Cras in turpis. Integer auctor aliquam augue. Pellentesque sit amet justo. Cras convallis vehicula ante. Donec sed urna et tortor eleifend auctor. Maecenas semper, augue sed tristique accumsan, nunc lacus porttitor mauris, in sollicitudin ligula nibh nec ipsum. In nec lorem vel libero dictum fermentum. Donec vestibulum venenatis eros. Fusce sagittis, magna non facilisis sagittis, tellus magna blandit dolor, eget rutrum libero diam ac turpis. Nulla vulputate ligula et mi. Nam ut libero. </p>
    <p id="r_5">Nullam dapibus. Phasellus turpis. Vivamus id quam a metus commodo commodo. Mauris felis. Sed id mi ut nibh fermentum dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed imperdiet. Aliquam erat velit, elementum id, ultricies quis, tristique quis, nisi. Nunc dapibus consectetuer justo. Integer scelerisque mollis velit. Integer felis sem, mattis vitae, mollis et, eleifend ac, felis. Donec vitae est vitae urna pharetra volutpat. Mauris sodales rhoncus enim. Morbi molestie ultricies purus. </p>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the link

    https://www.vitalchart.com/patients/setup/1.aspx?cookiesEnabled=True

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That site uses sliding layers from
    http://www.dyn-web.com/dhtml/slide/

    seems free-ish


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •