webForumDet fria alternativet

relative vs. absolute

2 svar · 177 visningar · startad av OveRRidE

OveRRidEMedlem sedan feb. 20018 509 inlägg
#1

Kan nån hjälpa mig att skriva om detta en aning så att jag kan placera scrollen "relative" istället för "absolute"? :q

Tack på förhand!

<style type="text/css">
#divControl {position:absolute; left:230px; top:23px; width:250px; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;}
#divCont    {position:absolute; left:15px;top:18px; width:150px; height:160px; clip:rect(0px 250px 160px 0px);}
.clScroll   {position:absolute; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;} 
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************   
PageScroll 
*   Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*   This script was released at DHTMLCentral.com
*   Visit for more great scripts!
*   This may be used and changed freely as long as this msg is intact!
*   We will also appreciate any links you could give us.
*
*   Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a> 
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4&#0124;&#0124;this.ie5&#0124;&#0124;this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 &#0124;&#0124; this.ie5 &#0124;&#0124; this.ie4 &#0124;&#0124; this.ns4 &#0124;&#0124; this.ns6 &#0124;&#0124; this.opera5)
	return this
}
var bw=new lib_bwcheck()

/*********************************************************************************
These are the variables you have to set:
*********************************************************************************/

//The speed of the timeout between each scroll.
timSpeed = 30

//The height of the container (change this when it scrolls to much or to little)
contHeight = 100

/*********************************************************************************
This is the object constructor function, which applies 
methods and properties to the Cross-browser layer object
*********************************************************************************/
function makeScrollObj(obj,nest){
	nest=(!nest) ? "":'document.'+nest+'.'		
	this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
  	this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;		
	this.height=bw.ns4?this.css.document.height:this.el.offsetHeight
	this.top=b_gettop										
	return this
}

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4&#0124;&#0124;window.opera?"":"px";

//Getting the top for the top method
function b_gettop(){
	var gleft=(bw.ns4 &#0124;&#0124; bw.ns6)?parseInt(this.css.top):eval(this.css.pixelTop);
	return gleft;
}
//Variables
var scrollTim = 1;
var active = 0;
/*********************************************************************************
The scroll function. Checks what way to scroll and checks if the
layer is not already on top or bottom.
*********************************************************************************/
function scroll(speed){
	clearTimeout(scrollTim)
	way = speed>0?1:0
	if ((!way && oScroll[active].top()>-oScroll[active].height+contHeight) &#0124;&#0124; (oScroll[active].top()<0 && way)){
		oScroll[active].css.top = (oScroll[active].top()+speed)+px
		scrollTim = setTimeout("scroll("+speed+")",timSpeed)
	}
}
//Clears the timeout so the scroll stops, this is called onmouseout.
function noScroll(){
	clearTimeout(scrollTim)
}
/*********************************************************************************
Changes the active layer. Hides the one that's visible and
shows the "new" one. Also set's the new layers top to
0 so it starts at top.
*********************************************************************************/
function changeActive(num){
	oScroll[active].css.visibility = "hidden"
	active = num
	oScroll[active].css.top = 0+px
	oScroll[active].css.visibility = "visible"
}
/*********************************************************************************
Initilizes the page, makes a oScroll Array and calls the object constructor.
Here you can add as many scrollObjects as you want
*********************************************************************************/
function scrollInit(){
	oScroll = new Array()
	
	// You can add and remove scrollObjects here.
	oScroll[0] = new makeScrollObj('divScroll1','divCont')
	oScroll[1] = new makeScrollObj('divScroll2','divCont')
	oScroll[2] = new makeScrollObj('divScroll3','divCont')
	oScroll[3] = new makeScrollObj('divScroll4','divCont')
	
	oScroll[0].css.left = 0+px
	oScroll[0].css.top = 0+px
	oScroll[0].css.visibility = "visible"
	oControl = new makeScrollObj('divControl')
	oControl.css.visibility = "visible"
}
/*********************************************************************************
Executes the scrollInit function on pageload.
*********************************************************************************/
onload = scrollInit;

/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
   1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
   2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
   Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/
</script>

div:ar:

<div id="divControl">
	<a href="#" onMouseDown="scroll(5)" onmouseup="noScroll()" onclick="return false"><img src="/gfx/pil_upp.gif" border="0"></a><br><br><br><br><br><br><br><br><br>
	<a href="#" onMouseDown="scroll(-5)" onmouseup="noScroll()" onclick="return false"><img src="/gfx/pil_ner.gif" border="0"></a>
</div>
<div id="divCont">
	<div id="divScroll1" class="clScroll">
		
			
		BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br><br>
				BLAHAHAHAHAHAA<br><br><br>
		BLAHAHAHAHAHAA<br><br><br>
					
	</div>
</div>

Red:) Usch vad mycket det blev ;)

------------------
Jag är skum

[Redigerat av OveRRidE den 22 nov 2001]

[Redigerat av OveRRidE den 22 nov 2001]

JojoxxMedlem sedan juni 20004 306 inlägg
#2

Utan att rabbla igenom hela koden (usch för koddumpar) så kan jag förklara det så här. position:absolute; plockar genererad box från det normala flödet i dokumentet och lägger det flytande ovanpå. D.v.s, det ockuperar ingen plats på sidan och går att flytta runt/plocka bort utan att det påverkar layouten på sidan. En box med position:relative däremot ockuperar plats på sidans flöde på den plats där den skall renderas. Det betyder att ev. objekt som annars skulle ligga där flödar om. Därav tror jag inte att du egentligen vill använda position:relative. Om du vill läsa med.

------------------
/ J

OveRRidEMedlem sedan feb. 20018 509 inlägg
#3

Ursäkta kodhögen ovan, J, men jag kände den var ganska nödvändig då jag inte kan alls mycket om den typen av programmering.

Anledningen till att jag vill använda relative är att jag har funderat på att använda scrollen på en sida som är %-baserad och som vi alla vet går inte direkt %-tabeller och pixel-bestämmelser (absolute) i javascript ihop sig.. inte enligt mina erfarenheter iaf.

*häpp häpp*

Får snoka vidare då.. inga bra svar ;)

------------------
Jag är skum

Genererad på 380 ms · cache AV · v20260730165559-full.f96bc7eb