Archief - JS: probs met centreren

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
n

noizy

Legacy Member
het onderstaande script kan je wel op zoveel pixels van top en left laten uitlijnen maar ik zou het graag centreren (zowel hor. als vert.) zodat het met gelijk welke resolutie in het midden van de browser staat.
kheb al een aantal dinge geprobeert maar blijkbaar nog ni het juiste :unsure:
Code: 
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var msg=new Array()

msg[0]="<CENTER>welkom<br><font size=2>bij</font><br>PIETER ELEKTRONICS</CENTER>";
msg[1]="<CENTER> <br>online elektronica<br> </CENTER>";
msg[2]="<CENTER>everything you need<br>2 know about elektronics<br> </center>";
msg[3]="<CENTER> <br><font size=3><A href='http://www.gensys.tk/'>powered by gensys</A></font><br> </CENTER>";

// set your first set of colors.  Use as many or as few as you wish.
var colors1=new Array("000000", "111111", "222222", "333333", "444444", "555555", "666666", "777777", "888888", "999999", "aaaaaa", "bbbbbb", "cccccc", "dddddd", "eeeeee", "ffffff")

//set your second set of colors
// *** must have exactly the same number of colors as the array above ***
var colors2=new Array("000000", "111111", "222222", "333333", "444444", "555555", "666666", "777777", "888888", "999999", "aaaaaa", "bbbbbb", "cccccc", "dddddd", "eeeeee", "ffffff")

//set the height of the display in pixels
high=100;

//set the width of the display in pixels
wide=400;

//set the pixel coordinates for the upper left hand corner of the display
Xpos=10;
Ypos=10;

// move the display away from the edges of the background
pad=15;

// set the background color of the display
bgcol="000000";

//add a background image if you want.
// *** for no image, just leave empty quotes (ex. cellbg=""; ) ***
cellbg="";

// set the font
fntFam="verdana,helvetica,arial";
fntSize=14;

// set how how many seconds you want the message to stay remain at totality.
pause=3;

// Do not edit these values below!!!
icolor=0;
mcolor=1;
imsg=0;
spWidth=wide-(2*pad);
totality=false;
glowing=true;
var theMsg="";
var cellcontent="";
pause=pause*1000;
if(cellbg.length>4){cellbg=" background="+cellbg}
else{cellbg="";}

function doPause(){
   totality=false; t=setTimeout("changecolor()",pause);
   }
function initiate(){
   getContentColor();
   getMsg();
   getCellContent();
   if(document.all){
   msgbg.innerHTML=cellcontent;
   msgfade.innerHTML=theMsg;
   msgbg.style.posLeft=Xpos;
   msgbg.style.posTop=Ypos;
   msgfade.style.posLeft=Xpos+pad;
   msgfade.style.posTop=Ypos+pad;
   t=setTimeout("changecolor()",50);}
   if(document.layers){
   document.msgbg.document.write(cellcontent);
   document.msgbg.document.close();
   document.msgfade.document.write(theMsg);
   document.msgfade.document.close();
   document.msgbg.left=xpos;
   document.msgbg.top=ypos;
   document.msgfade.left=Xpos+pad;
   document.msgfade.top=Ypos+pad;
   t=setTimeout("changecolor()",100);}
   }
function changecolor(){
   if(totality==true){doPause();}
   else{
   getMsg();
   getContentColor();
   if(document.all){
   msgfade.innerHTML=theMsg;
   t=setTimeout("changecolor()",50);}
   if(document.layers){
   document.msgfade.document.write(theMsg);
   document.msgfade.document.close();
   t=setTimeout("changecolor()",70);}
   }
   }
function getFadeColor(){
   icolor=icolor-1;
   if(mcolor==1){contentcolor=colors1[icolor];}
   else{contentcolor=colors2[icolor];}
   }
function getGlowColor(){
   icolor=icolor+1;
   if(mcolor==1){contentcolor=colors1[icolor];}
   else{contentcolor=colors2[icolor];}
   }
function changemsg(){
   if(imsg==msg.length-1){imsg=0; mcolor=1;}
   else if(imsg != msg.lenght-1 && mcolor==1){imsg=imsg+1; mcolor=0;}
   else{imsg=imsg+1; mcolor=1;}
   }
function getContentColor(){
   if(icolor==colors1.length-1 && glowing==true){
   getFadeColor(); glowing=false; totality=true;}
   else if(icolor < colors1.length && glowing==true){
   getGlowColor();}
   else if(icolor < 1 && glowing==false){changemsg(); getGlowColor(); glowing=true;}
   else{getFadeColor();}
   }
function getMsg() {
   theMsg="<span style='font-size:"+fntSize+"pt; font-family:"+fntFam+"; width:"+spWidth+";'>"
   theMsg+="<B><font color="+contentcolor+">"+msg[imsg]+"</font></B> "
   theMsg+="</span>"
   }
function getCellContent(){
   cellcontent="<TABLE height="+high+
   " width="+wide+" bgcolor="+bgcol+" cellpadding=0 cellspacing=0><TR><TD"+cellbg+"> </TD></TR></TABLE>"}
//  End -->
</script>
</HEAD>

<BODY bgcolor="cccccc" link="ffffff" alink="ffffff" vlink="ffffff" onLoad="initiate()">

<DIV id=msgbg style="position: absolute;"></DIV>
<DIV id=msgfade style="position: absolute;"></DIV>

</body>
L

Lashknife

Legacy Member
css insteken in je head tussen style tags:
Code: 
<style type="text/css">
<!--
#msgbg {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px; /* high in script (100) / 2 om het de helft naar boven te schuiven */
	margin-left: -200px; /* wide in script (400) / 2 om het de helft naar links te schuiven */
}
#msgfade {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -35px; /* high in script (100) MIN pad (15) */
	margin-left: -185px; /* wide in script (400) MIN pad (15) */
}
//-->
</style>
en in de functie initiate() in je script gedeelte zet je de positioning regels in comment zodat die niet uitgevoerd worden (de css hierboven zal jouw kader en inhoud op de juiste positie zetten)
Code: 
/*   msgbg.style.posLeft=Xpos;
   msgbg.style.posTop=Ypos;
   msgfade.style.posLeft=Xpos+pad;
   msgfade.style.posTop=Ypos+pad;*/
Ietwat verder naar onder in diezelfde functie staat nog positioning code maar die is al zo oud dat die geen effect heeft in de tegenwoordige browsers.
Al bij al vind ik dit een zeer slecht script om dit resultaat te bereiken aangezien dit compleet verouderde code heeft.
L

Lashknife

Legacy Member
kheb moeite gedaan :)
Dit werkt prima in IE & FireFox, jouw script van hierboven geeft gewoon niets in FireFox (komt omdat er geen # staan in de kleurcodes)

Kleuren kunnen gewijzigd worden in de array bovenaan, je width en height van je box kan je in de css wijzigen, extra layout html kan je specifieren in de iText lijntjes.

Leer er iets van ;):
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" />
<meta name="Author" content="Lashknife" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>ColorBox</title>
<script type="text/javascript">
<!--
var iText = new Array();
iText[iText.length] = "welkom bij Pieter Elektronics";
iText[iText.length] = "online elektronica";
iText[iText.length] = "everything you need 2 know about elektronics";

var iColors = new Array("#000000","#111111","#222222","#333333","#444444","#555555","#666666","#777777","#888888","#999999","#aaaaaa","#bbbbbb","#cccccc","#dddddd","#eeeeee","#ffffff");
var iLast = 3; // how long the message will last at brightest color (in seconds)

var cspeed = 75; // speed at which color fades (in milliseconds) (lower = faster)

/* DO NOT EDIT BELOW */
var cc = 0; // current color (index)
var cmsg = 0; // current msg (index)
var ctime; // color timeout
var cdir = true; // true = go brighter, false = go darker

function changeColor() {
	var speed = cspeed;
	cc += cdir?1:-1;
	if (cc >= iColors.length) {
		cdir = false;
		speed += iLast;
	} else if (cc == 0) {
		changeMsg();
		cdir = true;
	}
	document.getElementById("iBox").style.color = iColors[cc];
	ctime = window.setTimeout("changeColor()",speed);
}

function changeMsg() {
	cmsg++;
	if (cmsg >= iText.length) {
		cmsg = 0;
	}
	document.getElementById("iBox").innerHTML = iText[cmsg];
}

function init() {
	iLast = iLast*1000; // adjust seconds to milliseconds
	document.getElementById("iBox").innerHTML = iText[0];
	document.getElementById("iBox").style.color = iColors[0];
	ctime = window.setTimeout("changeColor()",0);
}
//-->
</script>
<style type="text/css">
<!--
body {
	margin: 0px;
}
form {
	margin: 0px;
}
img {
	border-style: none;
}
#iBox {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 150px;
	width: 200px;
	margin-top: -75px;
	margin-left: -100px;
	background-color: black;
	color: white;
	text-align: center;
	font-family: verdana, sans-serif;
	font-size: 20px;
	font-weight: bold;
	padding: 15px;
}
//-->
</style>
</head>

<body onload="init()">
<div id="iBox"></div>
<!--
<div><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a></div>
-->
</body>
</html>

ps: en het is bovendien 3x zo kort en bij mijn versie met je geen "powered by Lashknife" bijzetten :ironic: :p
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan