...

View Full Version : create a scrolling div that has a range (sorry for the bad terms)



nhoutsma
03-13-2009, 01:42 AM
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/MB604LL/A?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.

rangana
03-13-2009, 03:35 AM
You might find the script-galleries listed on the link below useful:
http://dynamicdrive.com/dynamicindex2/index.html

nhoutsma
03-13-2009, 01:45 PM
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...

nhoutsma
03-13-2009, 01:59 PM
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...

TinyScript
03-13-2009, 05:57 PM
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

TinyScript
03-13-2009, 06:15 PM
did you try just adding padding to the top?

TinyScript
03-13-2009, 07:54 PM
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.




<!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>

nhoutsma
03-13-2009, 08:36 PM
@Tinyscript: THNX for the help! Closer, but if you see from the link below...

http://store.apple.com/us/configure/MB464LL/A?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.

GouldTV
03-27-2009, 05:25 AM
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/overview.php?eventid=14&pindex=11

TinyScript
03-27-2009, 04:22 PM
<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum