Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    create a scrolling div that has a range (sorry for the bad terms)

    How do I modify the tutorial from "Using JavaScript to statically display elements" (http://www.javascriptkit.com/javatutors/static.shtml) to create a behavior similar to something on Apple's store. Other sites do it too, but I can't remember what url they are.

    Here's an example:

    http://store.apple.com/us/configure/...mco=MzA3MTE3NA

    On the right hand side, the summary and specifications boxes stop scrolling once they reach the top of the page. How is this done compared to the tutorial provided on this site?

    To better explain what I'm wanting to do, here is my beta site (a church site for my brother)

    http://puffthemagicdragon.abovemls.com/faq.amsp

    On the right is a box, "helpful information." I would like to figure out how to have it scroll up the page until it reaches the top and then, like the box on apple's site, stay while the remainder of the page scrolls. I am *not* a javascript programmer and most everything on this site except the design, html, and css has been free stuff/tutorials I found online and modified with *much* trial and error (just in case people wonder).

    Any help here would be more than appreciated.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You might find the script-galleries listed on the link below useful:
    http://dynamicdrive.com/dynamicindex2/index.html
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thnx but not there yet

    Thnx for the reply, but after going through the scripts and also the others on the menu, I didn't see what I was looking for.

    Still searching for that effect on the apple store url I posted...

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    something close

    http://www.dynamicdrive.com/dynamicindex17/floatbar.htm

    Here is something close, but it is at the top of the screen. Look at the apple store link I originally posted, the div is lower on the page when loaded, and stays on screen when the page scrolls past it (like this script, but it's position is different). Closer, but still at a loss here...

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    You might have to make a a function that uses the the div location to determine if you want it to be fixed or to scroll. You only want it to scroll with the page when it's y value is less than some amount (where you want it to stop) and after that, it should be fixed at one extra pixel beyond that point.
    I'm not sure if my syntax is correct, but here's the idea

    var stopmove=100
    var ylocation= parseInt(document.getElementById("yourDivName").style.top)
    if (ylocation>stopmove){document.getElementById("yourDivName").style.position=fixed}
    if (ylocation>stopmove){document.getElementById("yourDivName").style.position=absolute}

    when it's fixed, it will stay in one spot. When it's absolute, it will move with the page

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    did you try just adding padding to the top?

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    It was even more simple than I figured.

    Enjoy.
    Be sure to remove all the <br> tags I slapped on there to test the positioning while scrolling.


    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=utf-8" />
    <title>testt</title>
    <style type="text/css">
    <!--
    body {
    	
    }
    -->
    </style>
    <style type="text/css">
    
    #topbar{
    position:absolute;
    
    border: 1px solid black;
    padding: 2px;
    background-color: lightyellow;
    width: 200px;
    height:200px;
    visibility: hidden;
    z-index: 100;
    
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
    * Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
    * This notice must stay intact for legal use.
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
    var startX = 30 //set x offset of bar in pixels
    var startY = 5 //set y offset of bar in pixels
    var verticalpos="fromtop" //enter "fromtop" or "frombottom"
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    
    function closebar(){
    if (persistclose)
    document.cookie="remainclosed=1"
    document.getElementById("topbar").style.visibility="hidden"
    }
    
    function staticbar(){
    	barheight=document.getElementById("topbar").offsetHeight
    	var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
    	var d = document;
    
    /*______position the floating div here__________*/
    var offsetadditionx=800
    var offsetadditiony=100
    
    	function ml(id){
    		var el=d.getElementById(id);
    		if (!persistclose || persistclose && get_cookie("remainclosed")=="")
    		el.style.visibility="visible"
    		if(d.layers)el.style=el;
    		el.sP=function(x,y){
    this.style.left=x+offsetadditionx+"px";
    this.style.top=y+offsetadditiony+"px";};
    		el.x = startX;
    		if (verticalpos=="fromtop")
    		el.y = startY;
    		else{
    		el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
    		el.y -= startY;
    		}
    		return el;
    	}
    	window.stayTopLeft=function(){
    		if (verticalpos=="fromtop"){
    		var pY = ns ? pageYOffset : iecompattest().scrollTop;
    		ftlObj.y += (pY + startY - ftlObj.y)/8;
    		}
    		else{
    		var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
    		ftlObj.y += (pY - startY - ftlObj.y)/8;
    		}
    		ftlObj.sP(ftlObj.x, ftlObj.y);
    		setTimeout("stayTopLeft()", 10);
    	}
    	ftlObj = ml("topbar");
    	stayTopLeft();
    }
    
    if (window.addEventListener)
    window.addEventListener("load", staticbar, false)
    else if (window.attachEvent)
    window.attachEvent("onload", staticbar)
    else if (document.getElementById)
    window.onload=staticbar
    </script>
    </head>
    
    <body>
    
    <div id="topbar">
    <a href="" onClick="closebar(); return false"><img src="http://www.dynamicdrive.com/dynamicindex11/close.gif" border="0" /></a>
    Your content here.
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><img src="http://www.dynamicdrive.com/dynamicindex11/close.gif">
    </html>

  • #8
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @Tinyscript: THNX for the help! Closer, but if you see from the link below...

    http://store.apple.com/us/configure/...mco=NDE4Mzg5OA

    notice the summary box, how it rises to the top of the screen, then sits fixed as the page scrolls down. *this* is what I'm trying to figure out how to do. I have a div, that when the page loads is down on the bottom of the screen. I'd like it to scroll to the top, with the page, but once at the top, to stay while the remainder of the page scrolls down.

    http://puffthemagicdragon.abovemls.com/faq.amsp

    This is the actual page, and the table is down on the bottom right, "helpful hints". Again, I'd like it to scroll to the top of the page, with the page, but then stop and stay once it reaches the top as the remaining content scolls down. Then, when the page scrolls back down, have it scroll back to it's place in reverse as the scroll up - just as the apple page. Does that make sense? It must be difficult, I can't figure it out.

  • #9
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Find a solution? I need the same thing

    I've gotten next to nowhere looking for the same thing.

    Dynamic-drive's solution is everywhere in the search-listings, but it doesn't do the "pin to the top when scrolling" - - - it always keeps the fixed position the same distance from the top of the browser window, unlike Apple's solution.

    I've got a similar page where I'm trying to do that:

    http://www.winecarepro.com/bwarm/ove...d=14&pindex=11

  • #10
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Code:
    
    <html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    
    
    <title></title>
    <style>
    
    
    
    
    
    
    
    #topbar {
    position:absolute;
    top:268px;
    left:725px;
    display:inline;
    float:left;
    width:207px;
    height:auto;
    z-index: 100;
    visibility: hidden;
    }
    
    
    #fixedcart {
    display:inline;
    float:left;
    width:207px;
    height:auto;
    border:1px solid #333365;
    background-color:#FFF;
    }
    
    
    
    
    </style>
    
    
    
    
    
    
    
    <script type="text/javascript">
    
    /***********************************************
    * Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
    * Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
    * This notice must stay intact for legal use.
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
    var startX = 725 //set x offset of bar in pixels
    var startY = 268 //set y offset of bar in pixels
    var startY = 10 //set y offset of bar in pixels
    var verticalpos="fromtop" //enter "fromtop" or "frombottom"
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    
    function closebar(){
    if (persistclose)
    document.cookie="remainclosed=1"
    document.getElementById("topbar").style.visibility="hidden"
    }
    
    function staticbar(){
    	barheight=document.getElementById("topbar").offsetHeight
    	var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
    	var d = document;
    	function ml(id){
    		var el=d.getElementById(id);
    		if (!persistclose || persistclose && get_cookie("remainclosed")=="")
    		el.style.visibility="visible"
    		
    		
    		
    		if(d.layers)el.style=el;
    		el.sP=function(x,y){
    		  // console.log("topbar = " + y);
                if(iecompattest().scrollTop > 260 || y > 268) {
                  this.style.left=x+"px";this.style.top=y+"px";
                }
    		
    		};
    		
    		el.x = startX;
    		if (verticalpos=="fromtop") {
    		
                
                  el.y = startY;
               
    		
    		
    		}else{
    		el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
    		el.y -= startY;
    		}
    		return el;
    	}
    	window.stayTopLeft=function(){
    		if (verticalpos=="fromtop"){
    		var pY = ns ? pageYOffset : iecompattest().scrollTop;
    		ftlObj.y += (pY + startY - ftlObj.y)/8;
    		
    		// console.log("st = " + iecompattest().scrollTop);
    		
    		}
    		else{
    		var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
    		ftlObj.y += (pY - startY - ftlObj.y)/8;
    		}
    		ftlObj.sP(ftlObj.x, ftlObj.y);
    		setTimeout("stayTopLeft()", 10);
    	}
    	
    	
    	ftlObj = ml("topbar");
    	stayTopLeft();
    }
    
    if (window.addEventListener)
    window.addEventListener("load", staticbar, false)
    else if (window.attachEvent)
    window.attachEvent("onload", staticbar)
    else if (document.getElementById)
    window.onload=staticbar
    
    
    
    var single = new Array();
    var double = new Array();
    var triple = new Array();
    var quad = new Array();
    
    function init() {
    single[1] = 2775;
    double[1] = 1825;
    triple[1] = 1505;
    quad[1] = 1345;
    
    calc();
    
    }
    
    
    function calc() {
    
    
    var grandtotal = 0;
    var cartitems = "";
    
    for (var i=1; i <= 4; i++)
       {
       objname = "roomcap"+i+"_"+activetab;
       if (document.getElementById(objname).checked)
          {
            // alert("i = " + i);
            var roomcap = document.getElementById(objname).value;
            var numpassengers = i;
            
            if (i == 1) {
                var roomtype = "Single";
            }
            
            if (i == 2) {
                var roomtype = "Double";
            }
            
            if (i == 3) {
                var roomtype = "Triple";
            }
            
            if (i == 4) {
                var roomtype = "Quad";
            }
            
          }
       }
    
        numrooms = document.getElementById("numrooms_" + activetab).value;
    
    
        if (numrooms > 1) {
            var firstline = numrooms + " " + roomtype + " Rooms (";
        } else {
            var firstline = numrooms + " " + roomtype + " Room (";
        }
        
        
        if (numpassengers > 1) {
            firstline += numpassengers + " People)";
        } else {
            firstline += numpassengers + " Person)";
        }
    
    
        roomcap = roomcap * numrooms;
    
        cartitems = "<div class='cartitem'>" + firstline + "</div>";
        cartitems += "<div class='cartitemprice'>$" + roomcap + " per person</div>";
        
    
        grandtotal = grandtotal + parseInt(roomcap);
    
        document.getElementById("cartitemsarea").innerHTML = cartitems;
    
        document.getElementById("carttotalprice").innerHTML = "$" + grandtotal + " total";
        document.getElementById("totalpassengerstext").innerHTML = "Total Passengers: " + numpassengers;
    }
    
    
    
    </script>
    
    </head>
    
    
    
    
    <style>
    
    
    body {
    margin:0px;
    padding:0px;
    background-image:url(images/backgroundgradient.jpg);
    background-repeat:repeat-x;
    }
    
    
    
    #centerpage {
    position:relative;
    width:948px;
    margin:auto;
    font-size:9pt;
    font-family:Arial;
    }
    
    
    
    
    </style>
    
    
    
    
    
    </head>
    
    
    <body onload="init();return(false);">
    
    <div id="centerpage">
    
    
    
    
    
                    
                <div id='topbar'>
    				<div id='fixedcart'>
    				    
    				        <img  src='http://images.google.com/intl/en_ALL/images/images_hp.gif'><div id='carttitle'>Package Summary</div>
    
    				   
    				    
    				    </div>
    				    
    				    <img  src='http://images.google.com/intl/en_ALL/images/images_hp.gif'>
    				    
    				 </div>   
    				    
    				 
    				    
    				    
    				
    
    	
    
    </div>
    remove all the breaks fromt he html code
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br>
    
    
    
    
    
    
    </body>
    
    
    
    
    </html>
    Last edited by TinyScript; 03-27-2009 at 06:53 PM.


  •  

    Posting Permissions

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