Archief - JS/CSS: Bewegende div's

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.
F

Flipkikker

Legacy Member
Lo,

Op mijn website wil ik de 2 hoofdonderdelen onderling laten verwisselen van plaats.
Ik zit nog maar aan het begin van het script, maar IE geeft al onmiddellijk een foutmelding (FF doet zelfs nix)
Het script maak ik met de volgende website als hulp:
http://developer.apple.com/internet/webcontent/animation.html

Het script:
Code: 
var pcoords;
var bcoords;
var pright = 900;
var pleft = 716;
var bright = 715;
var bleft = 0;
var my_timeout;

function showPortfolio()
{
	pleft = (pleft - 5);
	pcoords = "clip: rect( 0px " + pright + "px 3000px " + pleft + "px);";
	bcoords = "clip: rect( 0px " + bright + "px 3000px " + bleft + "px);";
	document.portfolio.style = pcoords;
	document.blog.style = bcoords;

	if (pleft > 0) 
	{
		my_timeout = setTimeout("showPortfolio();", 1000);
	}
	else
	{
		clearTimeout(the_timeout);
	}
}
Deze functie wordt aangeroepen wanneer het portfolio geactiveerd wordt, zal nog wat ingewikkelder worden, maar dit is als basistest

De foutmelding:
Regel: 1, Teken: 2, Fout: Object wordt verwacht., Code: 0

document.portfolio.style -> portfolio is een div met als id 'portfolio' en als name 'portfolio'
heb ook al geprobeerd met document.getElementById("portfolio").style

Graag hulp,
Flipkikker

edit: heb het voorlopige resultaat even online gezet, maar het werkt dus nog niet: http://www.realreality.be

edit2: er gebeurt ws een fout bij het aanroepen van de functie:
<a href="javascript: showPortfolio();">
<a href="javascript:showPortfolio();">

deze geven respectievelijk de foutmeldingen:
Regel: 1, Teken: 2, Fout: Object wordt verwacht., Code: 0
Regel: 1, Teken: 1, Fout: Object wordt verwacht., Code: 0

blijkbaar vindt hij de functie niet?
F

Flipkikker

Legacy Member
Dit effect wil ik bereiken: http://www.realreality.be/test.php (edit: werkt blijkbaar enkel in IE :s)
----------------
Ik kan dus document.getElementById("portfolio").style = pcoords; NIET gebruiken

bvb:

WERKT WEL:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script>

var breedte = 500;
var nieuw;

function changePortfolio()
{
	breedte = breedte * 0.95;
[B]	document.getElementById("test").style.width = breedte;[/B]
	if (breedte > 0)
	{
		my_timeout = setTimeout("changePortfolio();", 10);
	}

}

</script>
<title>Test</title>
</head>
<body>

<div id="bla">
<div id="test" style="width: 500px; background-color: red;">&nbsp;</div>

<a href="#" onClick="changePortfolio();">Action!</a>
</div>
</body>
</html>

WERKT NIET:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script>

var breedte = 500;
var nieuw;

function changePortfolio()
{
	breedte = breedte * 0.95;
[B]	nieuw = "width: " + breedte;
	document.getElementById("test").style = nieuw;[/B]
	if (breedte > 0)
	{
		my_timeout = setTimeout("changePortfolio();", 10);
	}

}

</script>
<title>Test</title>
</head>
<body>

<div id="bla">
<div id="test" style="width: 500px; background-color: red;">&nbsp;</div>

<a href="#" onClick="changePortfolio();">Action!</a>
</div>
</body>
</html>

edit:
Bah, ik geef het op voor vandaag, blijkbaar ondersteunt de DOM van javascript nog niet ".clip", dus kzal men structuur wat moeten veranderen om het met ".width" te doen werken :ironic:

Iemand die weet waarom http://www.realreality.be/test.php enkel in IE werkt ? (anders zal er weinig terechtkomen van mijn animatie :s)

edit: het script wordt dus wel geactiveerd, maar er de vernieuwde breedte wordt niet getoond in FF, nogal vreemd :s
F

Flipkikker

Legacy Member
http://www.realreality.be/test.php
werkt in IE zoals het hoort, maar toont niet het volledige resultaat in FF

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script language="javascript" type="text/javascript">

var breedte = 500;
var my_timeout;

function changePortfolio()
{
	breedte = breedte * 0.90;
	document.getElementById("test").style.width = breedte;
	if (breedte > 4)
	{
		my_timeout = setTimeout("changePortfolio();", 10);
	}
	else
	{
		document.getElementById("test").style.visibility = "hidden";
	}

}

</script>
<title>Test</title>
</head>
<body>

<div id="bla">
<div id="test" style="margin: 0px; padding: 0px; width: 500px; background-color: red; overflow: none;">&nbsp;</div>

<a href="#" onClick="changePortfolio();">Action!</a>
</div>
</body>
</html>
X

Xavez

Legacy Member
"Fout tijdens het parsen van de waarde voor eigenschap width".
Echo de waarden anders eens? :).
X

Xavez

Legacy Member
Opgelost: (echo'en helpt voor debugging en fouten in de foutconsole lezen ook ;) - en ik ken dan niets van javascript hé :))
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script language="javascript" type="text/javascript">

var breedte = 500;
var my_timeout;

function changePortfolio()
{
	breedte = breedte * 0.90;
	document.getElementById("test").style.width = breedte +"px";
	if (breedte > 4)
	{
		my_timeout = setTimeout("changePortfolio();", 10);
	}
	else
	{
		document.getElementById("test").style.visibility = "hidden";
	}

}

</script>
<title>Test</title>
</head>
<body>

<div id="bla">
<div id="test" style="margin: 0px; padding: 0px; width: 500px; 

background-color: red; overflow: none;">&nbsp;</div>

<a href="#" onClick="changePortfolio();">Action!</a>
</div>
</body>
</html>
F

Flipkikker

Legacy Member
damn, der moest dus gewoon een simpele "px" achter gezet worden :doh:

ik had btw niet eraan gedacht datk de foutconsole in firefox kon openen :wtf:


heel erg bedankt allessinds ;)
kzal er weer goed aan door kunnen werken :D
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