Archief - JS: poging tot Tickertape

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

Gitan

Legacy Member
Hallo,

Ik dacht eens een tickertape (lichtreclame) uit mijn mouw te schudden, meer zelfs, 'k wou het objectgeoriënteerd aanpakken maar the mean motherfucker werkt niet. Weet iemand wat het probleem zou kunnen zijn?

Korte uitleg:
in de functie init() (die uitgevoerd wordt bij het laden van de pagina), wordt een object gemaakt. Enkele parameters worden meegegeven aan de constructor. Daarna zou de banner moeten starten d.m.v. banner.start().

Code: 
<html>

<head>

<script type="text/javascript">
function TickerTape(text, time, id) {
    var doorgaan = true;
    var tekst;
    var interval;
    var lengte;
    var i = 0;
    var tickertekst;
    var timer;
    var element_id;
	this.i = 0;

    this.set_tekst(text);
    this.set_interval(time);
    this.element_id = id;

    TickerTape.prototype.set_interval = function(time)
    {
	this.interval = time;
    }
		
    TickerTape.prototype.set_tekst = function(text)
    {
	this.tekst = text + "    ";
	this.lengte = tekst.length;
    }

    TickerTape.prototype.start = function()
    {
	this.show();
	//even wachten:
	//timer = setTimeout("start()", this.interval);
	//apply wordt gebruikt om setTimeout lokaal uit te voeren op this
	//(zijnde een instantie van TickerTape)
	timer = setTimeout.apply(this, new Array("this.start()", this.interval));
    }

    TickerTape.prototype.show = function()
    {
	this.tickertekst = substr(this.tekst, this.i, this.lengte-this.i) . substr(this.tekst, 0, this.i);
	
	if (document.getElementById){
	    document.getElementById(this.element_id).firstchild.nodeValue = this.tickertekst;
	} else {
	    window.cleartimeout(timer);
	}

	this.i = this.i < (this.lengte-1) ? this.i++ : 0;
    }

    TickerTape.prototype.stop = function()
    {
	window.cleartimeout(timer);
    }

}

function init()
{
	alert('init wordt gestart');
	banner = new TickerTape("Dit is een test", 250, "banner");
	banner.start();
}

window.onload = init;
</script>

</head>

<body>

boven de banner

<div id="banner"></div>

onder de banner

</body>

</html>
S

Smoerf

Legacy Member
Hm, error op lijn 17, "this.set_tekst is not a function"

Ok, na wat stunt en vliegwerk komt de tekst in de banner div maar krijg ik volgende error:
Code: 
Fout: uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object"  nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)"  location: "JS frame :: file:///E:/www/joggink/tn/tickertape.htm :: anonymous :: line 42"  data: no]

btw, je substr functie is een functie OP een string dus moet je eerst de string aanroepen en dan de methode substr

dus
this.tekst.substr(this.i, this.lengte-this.i)

En een . is in php dus moet je een + gebruiken om je 2 strings bij elkaar te voegen

De fout zit in je setTimeout functie, ik gebruik eigenlijk nooit apply maar een bind functie

Code: 
...
window.setTimeout(bind(this, this.start), 20); 

function bind(el, func)
{
    return function() { func.call(el); }
}
G

Gitan

Legacy Member
Klopt ja, 'k had het eerst in php-syntax geschreven omdat ik daar wat meer in thuis ben.

Die foutmelding is voor mij wel compleet chinees.
Is mijn aanpak voor een banner dan zo vergezocht?
S

Smoerf

Legacy Member
Gebruik marquee ;)

Just kidding, ik zal eens iets proberen te fixen maar kan niets beloven

Probeer dit eens:

Code: 
<script type="text/javascript">

function tickerTape(txt, speed, dir, id){
   this.tekst = txt;
	this.speed = speed;
	this.dir = dir;
	this.tDiv = document.getElementById(id);
}

tickerTape.prototype = {
   slide: function(){
	   if (this.dir == 'right'){
	 		this.tekst = this.tekst.substr(this.tekst.length - 1, this.tekst.length) + this.tekst.substr(0, (this.tekst.length - 1));
		}else{
	 		this.tekst = this.tekst.substr(1, this.tekst.length) + this.tekst.substr(0, 1);
		}
		
		this.tDiv.childNodes[0].nodeValue = this.tekst;
		window.setTimeout(bind(this, this.slide), this.speed);
	}
}

function bind(el, func){
	return function(){ func.call(el);}
}

function init(){
   var ticker = new tickerTape('abcdefghijklmnopqrstuvwxyz', 120, 'right', 'ticker');
	ticker.slide();
}

window.onload = init;

</script>

Je roept je constructor aan en geeft de tekst, de snelheid, de richting en de id mee van de div waarin het moet komen.

online example met 2 tickertapes (één rechts aan 120, één links aan 150) hier:
http://joggink.be/snippets/js/tickertape

Edit:
dit is geen marquee, dit is slechts een klein voorbeeld van de vlugste oplossing die naar jou voorbeeld neigt. Als je een marquee wilt die 100% breedte inneemt van het parent object zal je wel nog wat moeten sleutelen...
G

Gitan

Legacy Member
Het werkt nu ook bij mij
'k Heb die bind-functie gebruikt en mijn eigen gedefinieerde methods uit de constructor gehaald (dus gewoon los daarbuiten met tickertape.prototype.naam_van_de_method = ...) en ook wat syntaxfoutjes opgelost.
S

Smoerf

Legacy Member
Blij dat te horen :)

Ja op je methods gaf ie errors en enkel nog op die . ipv + (dachtek, maar weet ik niet meer zeker)
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